.body-content-upperMenuGap {
padding-bottom: 20px;
}
.no-space {
white-space: nowrap; /* zrušení mezery */
}
footer {
padding: 20px 30px 0;
background-color: var(--white);
text-align: center;
}
.navbar-upperMenu {
flex-grow: 1;
text-align: center;
font-family: "RalewaySemiBold", Arial;
font-size: 25px;
font-weight: 500;
margin-top: -20px;
margin-bottom: 28px;
color: var(--orange);
}
.copyright-text {
font-size: 13px;
}
.copyright-symbol {
font-size: 18px;
position: relative;
bottom: -2px;
font-weight: 900;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
input,
select {
max-width: 280px;
}
/******************************************************************************************************/
.grid-container {
display: grid;
grid-template-columns: auto auto 450px auto auto auto;
gap: 0px;
margin-bottom: 2px;
overflow-y: auto;
}
.grid-container-2 {
--column-count: 5;
grid-template-columns: repeat(var(--column-count), 1fr);
display: grid;
gap: 0px;
margin-bottom: 2px;
overflow-y: auto;
}
.grid-container-customers {
grid-template-columns: 1fr 0.3fr 0.3fr 0.3fr 0.1fr;
display: grid;
gap: 0px;
margin-bottom: 2px;
width: 70%;
overflow-y: auto;
justify-self: center;
}
.grid-container-upperMenu {
--column-count: 2;
grid-template-columns: repeat(var(--column-count), 1fr);
display: flex;
gap: 0px;
padding: 40px 0px 0px 0px;
margin-bottom: -5px;
}
.grid-header {
top: 0px;
padding: 5px 5px 1px 15px;
background-color: var(--header);
z-index: 1;
border-top: 1px solid var(--orange);
border-right: 1px solid var(--orange);
border-left: 1px solid var(--orange);
position: sticky;
display: block !important;
}
.grid-item {
padding: 3px 3px 1px 8px;
border: 1px solid var(--orange);
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.grid-item-error {
padding: 3px 3px 1px 8px;
border: 5px solid var(--red);
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.grid-item-2 {
padding: 3px 3px 1px 8px;
border-left: 1px solid var(--orange); /* Levý okraj */
border-right: 1px solid var(--orange); /* Pravý okraj */
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 0px;
}
.full-width-stock {
grid-column: 1 / -1; /* zabírá všechny sloupce */
}
.full-width-height {
grid-column: 1 / -1; /* zabírá všechny sloupce */
height: 10px;
}
.full-width-start {
grid-column: 1 / -1; /* zabírá všechny sloupce */
background-color: var(--orange);
height: 1px;
}
.full-width-end {
grid-column: 1 / -1; /* zabírá všechny sloupce */
background-color: var(--orange);
height: 1px;
}
.item-label {
display: none;
}
.item-value {
padding-left: 5px;
padding-right: 5px;
overflow-wrap: break-word; /* Zajištění zalamování slov */
word-wrap: break-word; /* Zajištění zalamování slov */
white-space: normal; /* Povolit zalamování textu */
hyphens: auto; /* Automatické dělení slov */
}
.spacer {
display: none;
}
.pagination {
grid-column: 1 / -1;
text-align: center;
margin-top: 20px;
}
.grid-row {
display: contents;
cursor: pointer;
}
.grid-row:hover {
background-color: var(--mouse-hover); /* Barva při najetí myší */
}
/*Rozlišení pro mobily*/
@media screen and (max-width: 768px) {
.grid-container-2, .grid-container-customers {
display: grid;
grid-template-columns: auto;
width: 100%;
gap: 0px;
}
.grid-header {
display: none !important;
}
.grid-item-2 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 8px;
font-size: 11px;
line-height: 1.2;
max-height: 30px;
overflow: hidden; /* Skrytí přetečení */
border-bottom: 1px solid var(--orange);
border-right: 1px solid var(--orange);
box-sizing: border-box;
}
.item-label {
display: block;
font-weight: bold;
background-color: var(--header);
padding: 2px 4px;
margin-left: -8px;
margin-top: 7px;
margin-bottom: 8px;
width: 30%;
text-align: left;
white-space: nowrap;
}
.item-value {
padding-left: 5px;
width: 70%;
font-weight: bold;
overflow-wrap: break-word; /* Zajištění zalamování slov */
word-wrap: break-word; /* Zajištění zalamování slov */
white-space: normal; /* Povolit zalamování textu */
hyphens: auto; /* Automatické dělení slov */
}
.full-width-end {
height: 0px;
}
}
/*Rozlišení pro mobily*/
@media screen and (max-width: 768px) {
.grid-container {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0px 0px;
}
.grid-item:nth-child(7n+0) { /* IS */
grid-column: 1 / span 1; /* Sloupec IS */
border-top: solid var(--orange);
border-top-width: 5px;
}
.grid-item:nth-child(7n+1) { /* Skupina */
grid-column: 2 / span 1; /* Sloupec Skupina */
border-top: solid var(--orange);
border-top-width: 5px;
}
.grid-item:nth-child(7n+2) { /* Název */
grid-column: 3 / span 5; /* Sloupec Název */
border-top: solid var(--orange);
border-top-width: 5px;
}
.grid-item:nth-child(7n+3) { /* Kód */
grid-column: 1 / span 2; /* Sloupec Kód */
}
.grid-item:nth-child(7n+4) { /* Stav */
grid-column: 3 / span 2; /* Sloupec Stav */
}
.grid-item:nth-child(7n+5) { /* Expirace */
grid-column: 5 / span 3; /* Sloupec Expirace */
}
.grid-item:nth-child(7n+6) {
grid-column: 1 / span 7; /* Zabere celý řádek */
}
.grid-item-row {
display: flex;
align-items: center;
gap: 10px;
}
.grid-header {
display: none;
}
.grid-item {
position: relative;
padding: 20px 3px 2px 8px;
font-size: 11px;
line-height: 1.1;
white-space: normal;
align-items: center;
}
.spacer {
display: block;
visibility: hidden;
padding-top: 8px;
}
.grid-item::before {
content: attr(data-label);
position: absolute;
top: 0;
left: 0;
right: 0;
font-size: 11px;
font-weight: bold;
padding: 2px 8px;
background-color: var(--header);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* KONEC Grid*/
.flex-container {
display: flex;
flex-direction: column;
gap: 20px;
}
.flex-item {
flex: 1;
min-width: 300px;
}
.center-items {
display: flex;
flex-direction: column;
align-items: center;
}
.input-text-find {
width: 100%;
box-sizing: border-box;
background-color: var(--light-grey);
border: 2px solid var(--orange);
margin-bottom: 5px;
margin-right: 5px;
padding: 10px 10px 10px 5px;
}
.input-text-find:focus {
border: 1px solid var(--blue-hover); /* Barva okraje při kliknutí (fokus) */
outline: none; /* Odstranění výchozího outline */
}
.input-text {
width: 100%;
box-sizing: border-box;
background-color: var(--light-grey);
border: 1px solid var(--orange);
margin-bottom: 2px;
margin-right: 5px;
padding: 2px 0px 2px 0px;
}
.input-text:focus {
border: 1px solid var(--blue-hover); /* Barva okraje při kliknutí (fokus) */
outline: none; /* Odstranění výchozího outline */
}
.input-textBox {
width: 100%;
box-sizing: border-box;
background-color: var(--light-grey);
border: 1px solid var(--orange);
margin-bottom: 2px;
margin-right: 0px;
padding: 2px 0px 2px 0px;
}
.input-textBox:focus {
border: 1px solid var(--blue-hover); /* Barva okraje při kliknutí (fokus) */
outline: none; /* Odstranění výchozího outline */
}
.form-group {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
form .form-group > label,
form .form-group > input {
width: 100%; /* Zajistí, že labely a textová pole mají vlevo stejné zarovnání */
max-width: 300px; /* Šířka */
margin-left: auto;
margin-right: auto;
}
/*Rozlišení pro mobily*/
@media (max-width: 767px) {
.input-text {
width: 120px;
box-sizing: border-box;
background-color: var(--light-grey);
border: 1px solid var(--orange);
margin-bottom: 2px;
margin-right: 0px;
padding: 2px 2px 2px 4px !important;
}
.input-text:focus {
border: 1px solid var(--blue-hover); /* Barva okraje při kliknutí (fokus) */
outline: none; /* Odstranění výchozího outline */
}
.input-text-find {
width: 100%;
box-sizing: border-box;
background-color: var(--light-grey);
border: 1px solid var(--orange);
margin-bottom: 2px;
margin-right: 2px;
padding: 5px 5px 5px 12px !important;
}
.input-text-find:focus {
border: 1px solid var(--blue-hover); /* Barva okraje při kliknutí (fokus) */
outline: none; /* Odstranění výchozího outline */
}
input,
select,
textarea {
width: 100%; /* Nastavit šířku na 100 % */
max-width: none; /* Zrušit maximální šířku */
}
}
.form-group label {
margin-bottom: 5px;
}
.form-group .checkbox-container {
display: flex;
align-items: center;
padding-left: 0 !important;
margin-left: 0 !important;
}
.form-group .checkbox-container input[type="checkbox"] {
margin-right: 5px;
margin-left: 0 !important;
width: 25px;
height: 25px;
border: 2px solid var(--orange);
background-color: var(--light-grey);
border-radius: 3px;
appearance: none;
outline: none;
cursor: pointer;
}
.form-group .checkbox-container input[type="checkbox"]:checked {
background-color: orange;
position: relative;
}
.form-group .checkbox-container input[type="checkbox"]:checked::before {
content: '\2714';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--white);
font-size: 14px;
}
.form-group .checkbox-container label {
margin-left: 0 !important;
padding-left: 10px;
padding-top: 5px;
cursor: pointer;
}
/*Rozlišení pro velké obrazovky*/
@media (min-width: 768px) {
.flex-container {
flex-direction: row;
}
.flex-item {
flex: 0 0 calc(100% - 10px);
}
.form-control {
width: 80%;
max-width: 400px;
}
.checkbox-container {
margin-left: 0;
width: 80%;
max-width: 400px;
}
}
/*
Zpáva v seznamu z vnitřní stránky
*/
p.outer_page_message {
font-weight: bold;
}
:root {
--white: #fff;
--total-black: #000000;
--black: #101923;
--orange: #fdb615;
--light-orange: #ffd067;
--dark-grey: #7f7f7f;
--dark-grey-screen: rgba(0, 0, 0, 0.5);
--grey: #cccccb;
--header: #d6e8ff;
--light-grey: #f5f5f5;
--red: #f21212;
--blue-hover: #0094ff;
--blue-upMenu: #2b3e56;
--sidebarMenu: #1d242c;
--mouse-hover: #f5f5f5;
}
@font-face {
font-family: "RalewayBold";
src: url('/fonts/Raleway-ExtraBold.ttf')
}
@font-face {
font-family: "RalewaySemiBold";
src: url('/fonts/Raleway-SemiBold.ttf')
}
@font-face {
font-family: "RalewayRegular";
src: url('/fonts/Raleway-Regular.ttf')
}
@font-face {
font-family: "RalewayMedium";
src: url("/fonts/Raleway-Medium.ttf")
}
@font-face {
font-family: "RalewayThin";
src: url('/fonts/Raleway-Thin.ttf')
}
@font-face {
font-family: "RalewayLight";
src: url('/fonts/Raleway-Light.ttf')
}
.body-content {
margin-top: 15px;
padding-left: 15px;
padding-right: 15px;
font-family: "RalewayRegular", Arial;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: var(--black);
background-color: var(--white);
border-radius: 10px;
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
h1 {
text-align: center !important;
padding-bottom: 22px;
font-size: 35px;
font-weight: 700;
color: var(--orange);
}
h2 {
text-align: center;
/*text-align: left !important;*/
/*padding-bottom: 20px !important;*/
padding: 0px !important;
margin: 0px !important;
padding-left: 45px !important;
padding-top: 15px !important;
padding-bottom: 15px !important;
/*font-size: 30px !important;*/
font-size: 25px !important;
font-weight: 600 !important;
color: var(--orange) !important;
/*display: block;*/
}
h3 {
text-align: center;
margin: 0px;
padding-left: 45px !important;
padding-bottom: 10px;
font-size: 25px;
font-weight: 500;
color: var(--orange);
}
h4 {
text-align: left !important;
padding-bottom: 14px !important;
font-size: 20px !important;
font-weight: 400 !important;
color: var(--orange) !important;
}
/********************************************************************************************************************/
/*Buttons */
.btn-center {
display: flex;
justify-content: center;
margin-top: 10px;
cursor: pointer;
}
.btn-center a {
text-decoration: none;
padding: 10px 20px;
transition: 0.3s all ease-in-out;
}
.btn-left {
display: flex;
justify-content: left;
margin-top: 10px;
cursor: pointer;
}
.btn-left a {
text-decoration: none;
padding: 10px 20px;
transition: 0.3s all ease-in-out;
cursor: pointer;
}
.btn-right {
display: flex;
justify-content: right;
margin-top: 10px;
cursor: pointer;
}
.btn-right a {
text-decoration: none;
padding: 10px 20px;
transition: 0.3s all ease-in-out;
cursor: pointer;
}
.btn-orange-white a {
color: var(--white);
background-color: var(--orange);
border: 1px solid var(--orange);
border-radius: 20px;
font-size: 16px;
width: 215px;
height: 40px;
cursor: pointer;
}
.btn-orange-white a:hover {
background-color: var(--light-orange);
color: var(--white);
}
.btn-white-orange a {
color: var(--orange);
background-color: var(--white);
border: 1px solid var(--white);
border-radius: 20px;
font-family: "RalewayRegular", Arial;
font-size: 20px;
width: auto;
height: 40px;
cursor: pointer;
}
/* toto je levé "tlačítko" zpět*/
.btn-back {
display: flex;
flex-direction: column;
font-size: 50px;
color: var(--orange);
background: transparent;
border: none; /* musí býr none*/
cursor: pointer; /* toto je packa kurzoru*/
padding: 0px; /* musí být 0 protože jinak se nastaví defaultní okraje*/
margin: -35px 0px 0px 2px; /* tady můžu upravovat umístění symbolu na obrazovce */
text-shadow: 1px 1px 2px #000000, 0 0 1em #ffffff, 0 0 0.1em #ffffff; /* Efekt vystouplého textu */
}
input.btn-white-orange,
button.btn-white-orange {
color: var(--total-black);
background-color: var(--light-orange);
border: 1px solid var(--orange);
border-radius: 15px;
font-family: "RalewayRegular", Arial;
font-size: 20px;
width: auto;
height: 40px;
cursor: pointer;
}
button.btn-white-orange:hover,
input.btn-white-orange:hover {
color: var(--white);
background-color: var(--light-orange);
border: 1px solid var(--orange);
border-radius: 15px;
}
.btn-white-orange a:hover {
background-color: var(--light-orange);
color: var(--white);
}
/*Rozlišení pro mobily*/
@media screen and (max-width: 768px) {
.btn-white-orange a {
color: var(--orange);
background-color: var(--white);
border: 1px solid var(--white);
border-radius: 20px;
font-family: "RalewayRegular", Arial;
font-size: 14px;
width: auto;
height: 25px;
cursor: pointer;
}
input.btn-white-orange,
button.btn-white-orange {
color: var(--total-black);
background-color: var(--light-orange);
border: 1px solid var(--orange);
border-radius: 15px;
font-family: "RalewayRegular", Arial;
font-size: 14px;
width: auto;
height: 25px;
cursor: pointer;
}
button.btn-white-orange:hover,
input.btn-white-orange:hover {
color: var(--white);
background-color: var(--light-orange);
border: 1px solid var(--orange);
border-radius: 15px;
}
.btn-white-orange a:hover {
background-color: var(--light-orange);
color: var(--white);
}
}
/************* KONEC Buttons*/
#bars, #console, devices {
font-size: 15px;
}
table td {
padding: 5px;
}
.xcontainer {
display: flex;
flex-grow: 1 1;
}
.xvideo, .xcanvas {
object-fit: cover;
position: absolute;
left: 0;
top: 0;
height: 90px;
width: 800px;
}
#myoverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--dark-grey-screen); /* Poloprůhledná černá barva */
display: none; /* Skrytý ve výchozím stavu */
justify-content: center;
align-items: center;
z-index: 9999;
cursor: none; /* Skrýt výchozí kurzor */
}
#cursor {
position: absolute;
width: 32px;
height: 32px;
background-image: url('/images/cursor.png'); /* Použití vlastního kurzoru */
background-size: contain;
pointer-events: none;
z-index: 10000;
animation: pulse 1.5s infinite;
display: none; /* Skrytý ve výchozím stavu */
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.grid-item:nth-child(7n+0) { /* IS */
grid-column: 1 / span 1; /* Sloupec IS */
border-top: solid var(--orange);
border-top-width: 5px;
}
.grid-item:nth-child(7n+1) { /* Skupina */
grid-column: 2 / span 1; /* Sloupec Skupina */
border-top: solid var(--orange);
border-top-width: 5px;
}
.grid-item:nth-child(7n+2) { /* Název */
grid-column: 3 / span 5; /* Sloupec Název */
border-top: solid var(--orange);
border-top-width: 5px;
}
.grid-item:nth-child(7n+3) { /* Kód */
grid-column: 1 / span 2; /* Sloupec Kód */
}
.grid-item:nth-child(7n+4) { /* Stav */
grid-column: 3 / span 2; /* Sloupec Stav */
}
.grid-item:nth-child(7n+5) { /* Expirace */
grid-column: 5 / span 3; /* Sloupec Expirace */
}
.grid-item:nth-child(7n+6) {
grid-column: 1 / span 7; /* Zabere celý řádek */
}
.grid-item-row {
width: 100%;
display: flex;
align-items: center;
gap: 10px;
}
.grid-header {
display: none;
}
.grid-item {
position: relative;
padding: 20px 3px 2px 8px;
font-size: 11px;
line-height: 1.1;
white-space: normal;
align-items: center;
}
.grid-header {
top: 0px;
padding: 5px 5px 1px 15px;
background-color: var(--header);
z-index: 1;
border-top: 1px solid var(--orange);
border-right: 1px solid var(--orange);
border-left: 1px solid var(--orange);
position: sticky;
}
.grid-header-small {
top: 0px;
padding: 1px 5px 0px 15px;
background-color: var(--header);
z-index: 1;
border-top: 1px solid var(--orange);
border-right: 1px solid var(--orange);
border-left: 1px solid var(--orange);
border-bottom: 1px solid var(--orange);
position: sticky;
}
/********************************************************************************************************************/
/*Hamburger menu*/
/********************************************************************************************************************/
.sidebar-menu {
position: fixed;
top: 0px; /*Adjust based on your navbar height*/
left: -270px;
width: 270px;
height: 100vh; /* Use the full height of the screen */
background-color: var(--sidebarMenu);
transition: all 0.3s ease; /* transition efekt */
z-index: 1000;
-webkit-overflow-scrolling: touch;
padding: 20px 0; /*Padding nahoře a dole */
border-radius: 0px; /*Zaoblené rohy */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.sidebar-menu .nav-link:hover {
color: var(--blue-hover);
background-color: rgba(255, 255, 255, 0.1); /* Jemné zesvětlení pozadí */
padding-left: 40px; /* Mírné odsazení při najetí */
transform: translateX(5px); /* Mírný posun doprava */
}
.sidebar-menu .nav-link:hover::before {
transform: translateY(-50%) scale(1.1); /* Mírné zvětšení ikony */
opacity: 0.8; /* Mírné zprůhlednění */
}
.sidebar-menu .nav-link.active {
color: var(--blue-hover);
background-color: rgba(255, 255, 255, 0.15);
}
.sidebar-menu.active {
left: 0px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.sidebar-menu .navbar-nav {
flex-direction: column;
padding-left: 0;
margin: 0;
padding-top: 10px;
list-style: none; /* Odstraní tečky ze všech úrovní seznamu */
}
.sidebar-menu .nav-item {
list-style-type: none; /* Explicitně odstraní tečky pro položky */
margin: 5px 0;
padding: 0; /* Odstraní případný padding */
}
.sidebar-menu .nav-link {
color: var(--orange);
line-height: 1.1;
display: flex;
align-items: center;
min-height: 40px;
position: relative;
font-family: "RalewayRegular", Arial;
font-size: 1.06rem; /* Increase the font size */
padding: 10px 15px 10px 35px; /* Increase the vertical padding */
text-decoration: none; /* Odstraní podtržení textu */
list-style-image: none; /* Odstraní případné vlastní odrážky */
}
.sidebar-menu .nav-link:first-of-type .user-icon {
content: url('/images/user.png'); /* Cesta k obrázku */
position: absolute;
right: 10px; /* Position image to the right */
top: 50%;
transform: translateY(-50%);
}
.sidebar-menu .navbar-nav ul,
.sidebar-menu .navbar-nav li {
list-style: none;
padding-left: 0;
}
.sidebar-menu .nav-link:hover {
color: var(--blue-hover);
padding-left: 45px;
background-color: rgba(0, 0, 0, 0.05); /* Přidaný efekt při hover */
}
.sidebar-menu .nav-link::before {
content: '';
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background-image: url('/images/menuItem.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#hamburger-menu {
display: flex;
flex-direction: column; /*Toto určuje, že jsou tři čárky pod sebou*/
justify-content: space-between;
width: 40px; /* Celková šířka tří čárek */
height: 24px; /* Celková výška tří čárek */
background: transparent;
border: none; /* musí býr none*/
cursor: pointer; /* toto je packa kurzoru*/
padding: 0px; /* musí být 0 protože jinak se nastaví defaultní okraje*/
margin: -20px 0px 0px 2px; /* tady můžu upravovat umístění tří čárek na obrazovce */
}
.hamburger-line {
display: block;
width: 100%; /* Šířka relativní k rodiči */
height: 3px;
background-color: var(--dark-grey);
transition: all 0.3s linear;
margin: 0;
border-radius: 2px; /* Pro hezčí vzhled */
}
@media screen and (max-height: 600px) {
.sidebar-menu {
height: calc(100vh - 45px);
max-height: 300px; /* Menší maximální výška na malých obrazovkách */
}
.sidebar-menu .nav-link {
min-height: 35px; /* Menší výška položek pro malé obrazovky */
padding: 6px 15px 6px 35px;
}
}
@media screen and (max-width: 768px) {
.sidebar-menu.active {
left: 0; /* Menu se rozbalí od kraje na mobilních zařízeních */
width: 250px; /* Širší menu na mobilních zařízeních */
}
}
/********************************************************************************************************************/
/*BreadCrumbs menu*/
/********************************************************************************************************************/
.breadcrumbs {
font-family: "RalewayRegular", Arial, sans-serif; /* Nastavte rodinu písma */
font-size: 16px; /* Velikost písma */
color: var(--orange); /* Barva textu */
background-color: var(--white); /* Barva pozadí */
padding: 10px 20px; /* Vnitřní odsazení */
border-radius: 5px; /* Zakulacení rohů */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Jemný stín */
}
.breadcrumbs a {
text-decoration: none; /* Odstranění podtržení */
color: var(--blue-upMenu); /* Barva odkazů */
margin: 0 5px; /* Vnější odsazení mezi odkazy */
}
.breadcrumbs a:hover {
text-decoration: underline; /* Podtržení při najetí myší */
color: var(--blue-upMenu); /* Změna barvy při najetí myší */
}
.breadcrumbs a:active {
color: var(--orange); /* Barva při aktivním stavu */
}
@media (max-width: 767px) {
.breadcrumbs {
font-family: "RalewayRegular", Arial, sans-serif; /* Nastavte rodinu písma */
font-size: 18px; /* Velikost písma */
color: var(--orange); /* Barva textu */
background-color: var(--white); /* Barva pozadí */
padding: 10px 20px; /* Vnitřní odsazení */
border-radius: 5px; /* Zakulacení rohů */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Jemný stín */
}
.breadcrumbs a:active {
color: var(--orange); /* Barva při aktivním stavu */
}
}
.pipe {
color: var(--blue-upMenu);
margin: 0 5px; /* Vnější odsazení mezi pipes a textem */
}