stremio-web/src/components/NavBar/VerticalNavBar/NavTabButton/styles.less
2025-01-17 16:35:10 +02:00

82 lines
No EOL
1.7 KiB
Text

// Copyright (C) 2017-2024 Smart code 203358507
@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
@import (reference) '~stremio/common/screen-sizes.less';
.nav-tab-button-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: transparent;
border-radius: 0.75rem;
@media (pointer: fine) {
&:hover {
background-color: var(--overlay-color);
.label {
opacity: 0.6;
}
&:global(.selected) {
.label {
opacity: 1;
}
}
}
}
&:global(.selected) {
.icon {
opacity: 1;
}
.icon, .label {
color: var(--primary-accent-color);
}
}
.icon, .logo {
flex: none;
width: 2.2rem;
height: 2.2rem;
margin-bottom: 0.5rem;
}
.icon {
color: var(--primary-foreground-color);
opacity: 0.35;
}
.label {
flex: none;
position: relative;
max-width: 100%;
max-height: 2.4em;
padding: 0 0.5rem;
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.01rem;
text-align: center;
white-space: nowrap;
text-overflow: ellipsis;
color: var(--primary-foreground-color);
opacity: 0;
overflow: hidden;
}
}
@media only screen and (max-width: @minimum) {
.nav-tab-button-container {
.label {
opacity: 0.6;
}
&:global(.selected) {
.label {
opacity: 1;
}
}
}
}