Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

refactor: minor style changes

Browse source
This commit is contained in:
Tim 2023-08-22 14:34:46 +02:00
parent aa9da39082
commit 45746f6c2c
39 changed files with 77 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/App/styles.less
View file

@ -28,13 +28,13 @@
--color-placeholder-background: @color-surface-dark5-20;
--primary-background-color: rgba(12, 11, 17, 1);
--secondary-background-color: rgba(26, 23, 62, 1);
--tertiary-background-color: rgba(15, 13, 32, 1);
--primary-foreground-color: rgba(255, 255, 255, 0.9);
--secondary-foreground-color: rgb(12, 11, 17, 1);
--primary-overlay-color: rgba(255, 255, 255, 0.05);
--primary-accent-color: rgb(123, 91, 245);
--secondary-accent-color: rgba(34, 179, 101, 1);
--tertiary-accent-color: rgba(246, 199, 0, 1);
--overlay-color: rgba(255, 255, 255, 0.05);
--modal-background-color: rgba(15, 13, 32, 1);
--border-radius: 0.75rem;
}
@ -55,7 +55,7 @@
overflow: hidden;
word-break: break-word;
scrollbar-width: thin;
scrollbar-color: var(--primary-overlay-color) transparent;
scrollbar-color: var(--overlay-color) transparent;
}
::-webkit-scrollbar {
@ -65,7 +65,7 @@
::-webkit-scrollbar-thumb {
border-radius: var(--scroll-bar-size);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
&:hover {
background-color: var(--primary-accent-color);

2
src/common/Checkbox/styles.less
View file

@ -16,7 +16,7 @@
width: @width;
height: @height;
border-radius: @height;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
transition: background-color 0.1s ease-in-out;
&::before {

6
src/common/MetaItem/styles.less
View file

@ -59,7 +59,7 @@
.poster-container {
position: relative;
z-index: 0;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
border-radius: var(--border-radius);
transition: all 0.1s ease-out;
@ -126,7 +126,7 @@
right: 1rem;
height: 0.45rem;
border-radius: 0.45rem;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
overflow: hidden;
.progress-bar {
@ -227,7 +227,7 @@
&:hover, &:focus {
outline: none;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
.multiselect-option-label {

2
src/common/MetaPreview/ActionButton/styles.less
View file

@ -10,7 +10,7 @@
align-items: center;
gap: 1rem;
border-radius: 100%;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
backdrop-filter: blur(5px);
transition: all 0.1s ease-out;

2
src/common/MetaPreview/MetaLinks/styles.less
View file

@ -31,7 +31,7 @@
font-size: 1rem;
font-weight: 500;
color: var(--primary-foreground-color);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
backdrop-filter: blur(5px);
&:hover, &:focus {

13
src/common/MetaPreview/styles.less
View file

@ -46,18 +46,6 @@
left: -10px;
z-index: -1;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: var(--tertiary-background-color);
opacity: 0.8;
content: "";
}
.background-image {
display: block;
width: 100%;
@ -65,6 +53,7 @@
object-fit: cover;
object-position: center;
filter: blur(10px);
opacity: 0.3;
}
}

2
src/common/MetaRow/styles.less
View file

@ -35,7 +35,7 @@
&:hover, &:focus {
outline: none;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
opacity: 1;
}

4
src/common/ModalDialog/styles.less
View file

@ -18,7 +18,7 @@
max-height: 80%;
padding: 0 2rem;
border-radius: var(--border-radius);
background-color: var(--tertiary-background-color);
background-color: var(--modal-background-color);
.close-button-container {
position: absolute;
@ -33,7 +33,7 @@
display: block;
width: 100%;
height: 100%;
color: var(--primary-overlay-color);
color: var(--overlay-color);
}
&:hover, &:focus {

4
src/common/Multiselect/styles.less
View file

@ -14,7 +14,7 @@
height: 2.75rem;
padding: 0 1.5rem;
border-radius: 2.75rem;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
&:global(.active) {
.icon {
@ -58,7 +58,7 @@
}
&:hover, &:focus {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
.label {

6
src/common/NavBar/HorizontalNavBar/NavMenu/styles.less
View file

@ -8,7 +8,7 @@
max-height: calc(100vh - var(--horizontal-nav-bar-size));
overflow-y: auto;
border-radius: var(--border-radius);
background-color: var(--tertiary-background-color);
background-color: var(--modal-background-color);
.user-info-container {
display: flex;
@ -67,7 +67,7 @@
}
.nav-menu-section {
border-top: thin solid var(--primary-overlay-color);
border-top: thin solid var(--overlay-color);
.nav-menu-option-container {
display: flex;
@ -77,7 +77,7 @@
padding: 0 1.5rem;
&:hover {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
.icon {

2
src/common/NavBar/HorizontalNavBar/SearchBar/styles.less
View file

@ -8,7 +8,7 @@
flex-direction: row;
height: var(--search-bar-size);
border-radius: var(--search-bar-size);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
.search-input {
flex: 1;

2
src/common/NavBar/HorizontalNavBar/styles.less
View file

@ -78,7 +78,7 @@
}
&:hover, &:global(.active) {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
opacity: 1;
.icon {

2
src/common/NavBar/VerticalNavBar/NavTabButton/styles.less
View file

@ -12,7 +12,7 @@
border-radius: 0.75rem;
&:hover {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
.label {
opacity: 0.6;

4
src/common/PaginationInput/styles.less
View file

@ -12,7 +12,7 @@
display: flex;
align-items: center;
justify-content: center;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
.icon {
display: block;
@ -26,7 +26,7 @@
display: flex;
align-items: center;
justify-content: center;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
.label {
flex: none;

2
src/common/Popup/styles.less
View file

@ -16,7 +16,7 @@
overflow: hidden;
visibility: hidden;
border-radius: var(--border-radius);
background-color: var(--tertiary-background-color);
background-color: var(--modal-background-color);
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20;
cursor: auto;

2
src/common/SearchBar/styles.less
View file

@ -10,7 +10,7 @@
padding: 0 1.5rem;
border-radius: 3rem;
border: var(--focus-outline-size) solid transparent;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
cursor: text;
&:focus-within {

2
src/common/SharePrompt/styles.less
View file

@ -60,7 +60,7 @@
flex-direction: row;
margin-top: 1rem;
border-radius: var(--border-radius);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
.url-text-input {
flex: 1;

4
src/common/Slider/styles.less
View file

@ -39,7 +39,7 @@ html.active-slider-within {
flex: 1;
height: var(--track-size);
border-radius: var(--track-size);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
.track-before {
@ -47,7 +47,7 @@ html.active-slider-within {
flex: none;
height: var(--track-size);
border-radius: var(--track-size);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
.track-after {

2
src/routes/Addons/Addon/styles.less
View file

@ -9,7 +9,7 @@
align-items: flex-start;
padding: 1.5rem;
border-radius: var(--border-radius);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
cursor: inherit;
.logo-container {

6
src/routes/Addons/styles.less
View file

@ -112,7 +112,7 @@
width: 3rem;
height: 3rem;
border-radius: var(--border-radius);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
.filter-icon {
flex: none;
@ -179,8 +179,8 @@
padding: 1rem;
color: var(--primary-foreground-color);
border-radius: var(--border-radius);
background-color: var(--primary-overlay-color);
outline: var(--focus-outline-size) solid var(--primary-overlay-color);
background-color: var(--overlay-color);
outline: var(--focus-outline-size) solid var(--overlay-color);
outline-offset: calc(-1 * var(--focus-outline-size));
&:hover {

4
src/routes/Discover/styles.less
View file

@ -77,7 +77,7 @@
width: 3rem;
height: 3rem;
border-radius: var(--border-radius);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
.filter-icon {
flex: none;
@ -207,7 +207,7 @@
width: 29rem;
padding: 2rem 2.5rem;
border-radius: var(--border-radius) 0 0 var(--border-radius);
background-color: var(--tertiary-background-color);
background-color: var(--modal-background-color);
}
}
}

2
src/routes/Intro/ConsentCheckbox/styles.less
View file

@ -15,7 +15,7 @@
&:focus {
outline: none;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
&:global(.checked) {

4
src/routes/Intro/PasswordResetModal/styles.less
View file

@ -18,10 +18,10 @@
border-radius: var(--border-radius);
outline-offset: calc(-1 * var(--focus-outline-size));
color: var(--primary-foreground-color);
background: var(--primary-overlay-color);
background: var(--overlay-color);
&:hover, &:focus {
outline: var(--focus-outline-size) solid var(--primary-overlay-color);
outline: var(--focus-outline-size) solid var(--overlay-color);
}
}
}

6
src/routes/Intro/styles.less
View file

@ -135,10 +135,10 @@
border-radius: var(--border-radius);
outline-offset: calc(-1 * var(--focus-outline-size));
color: var(--primary-foreground-color);
background: var(--primary-overlay-color);
background: var(--overlay-color);
&:hover, &:focus {
outline: var(--focus-outline-size) solid var(--primary-overlay-color);
outline: var(--focus-outline-size) solid var(--overlay-color);
}
}
@ -202,7 +202,7 @@
justify-content: center;
padding: 2rem;
border-radius: var(--border-radius);
background-color: var(--tertiary-background-color);
background-color: var(--modal-background-color);
@keyframes flash {
0% {

6
src/routes/Library/styles.less
View file

@ -62,7 +62,7 @@
width: 3rem;
height: 3rem;
border-radius: var(--border-radius);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
.filter-icon {
flex: none;
@ -86,12 +86,12 @@
.pagination-prev-button-container, .pagination-next-button-container {
.pagination-button-icon {
color: var(--primary-overlay-color);
color: var(--overlay-color);
}
}
.pagination-label {
color: var(--primary-overlay-color);
color: var(--overlay-color);
}
}

4
src/routes/MetaDetails/StreamsList/Stream/styles.less
View file

@ -18,7 +18,7 @@
border-radius: var(--border-radius);
&:hover, &:focus {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
&:hover, &:focus, &:global(.selected) {
@ -53,7 +53,7 @@
width: 8rem;
padding: 1rem;
color: var(--primary-foreground-color);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
opacity: 0.25;
}

2
src/routes/MetaDetails/StreamsList/styles.less
View file

@ -47,7 +47,7 @@
background: none;
&:hover, &:focus, &:global(.active) {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
& >.multiselect-label {

4
src/routes/MetaDetails/VideosList/SeasonsBar/styles.less
View file

@ -28,7 +28,7 @@
padding: 0.5rem;
&:hover, &:focus {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
&:focus {
@ -60,7 +60,7 @@
background: none;
&:hover, &:focus, &:global(.active) {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
&>.multiselect-label {

8
src/routes/MetaDetails/VideosList/Video/styles.less
View file

@ -23,7 +23,7 @@
&:hover,
&:focus,
&:global(.active) {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
.thumbnail-container {
@ -40,7 +40,7 @@
object-fit: cover;
object-position: center;
opacity: 0.9;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
.placeholder-icon {
@ -49,7 +49,7 @@
width: 8rem;
padding: 1rem;
color: var(--primary-foreground-color);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
opacity: 0.25;
}
}
@ -169,7 +169,7 @@
&:hover,
&:focus {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
.context-menu-option-label {

16
src/routes/MetaDetails/styles.less
View file

@ -17,7 +17,6 @@
flex-direction: column;
width: 100%;
height: 100%;
background-color: transparent;
.nav-bar {
z-index: 1;
@ -45,18 +44,7 @@
bottom: 0;
left: 0;
z-index: -1;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: var(--tertiary-background-color);
opacity: 0.7;
content: "";
}
background-color: var(--modal-background-color);
.background-image {
pointer-events: none;
@ -65,7 +53,7 @@
height: 100%;
object-fit: cover;
object-position: top left;
opacity: 0.9;
opacity: 0.3;
}
}

2
src/routes/Player/ControlBar/VolumeSlider/styles.less
View file

@ -9,7 +9,7 @@
.volume-slider:not(:global(.disabled)) {
.slider-track {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
.slider-track-after {

2
src/routes/Player/ControlBar/styles.less
View file

@ -105,7 +105,7 @@
flex-direction: column;
padding: 0.5rem;
border-radius: var(--border-radius);
background-color: var(--tertiary-background-color);
background-color: var(--modal-background-color);
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20;

4
src/routes/Player/NextVideoPopup/styles.less
View file

@ -26,7 +26,7 @@
display: flex;
justify-content: center;
align-items: center;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
.poster-image {
flex: none;
@ -119,7 +119,7 @@
}
&:hover, &:focus {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
}
}

2
src/routes/Player/OptionsMenu/Option/styles.less
View file

@ -31,7 +31,7 @@
}
&:hover {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
&:global(.disabled) {

4
src/routes/Player/SpeedMenu/Option/styles.less
View file

@ -11,7 +11,7 @@
border-radius: var(--border-radius);
&:global(.selected) {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
.icon {
display: block;
@ -19,7 +19,7 @@
}
&:hover, &:focus {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
.label {

4
src/routes/Player/SubtitlesMenu/DiscreteSelectInput/styles.less
View file

@ -24,7 +24,7 @@
flex-direction: row;
align-items: center;
border-radius: 3.5rem;
background: var(--primary-overlay-color);
background: var(--overlay-color);
.button-container {
flex: none;
@ -32,7 +32,7 @@
height: 3.5rem;
padding: 1rem;
border-radius: 100%;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
.icon {
display: block;

2
src/routes/Player/SubtitlesMenu/styles.less
View file

@ -37,7 +37,7 @@
border-radius: var(--border-radius);
&:global(.selected), &:hover {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
.language-label, .variant-label {

2
src/routes/Player/styles.less
View file

@ -154,7 +154,7 @@ html:not(.active-slider-within) {
max-height: calc(100% - 13.5rem);
max-width: calc(100% - 4rem);
border-radius: var(--border-radius);
background-color: var(--tertiary-background-color);
background-color: var(--modal-background-color);
box-shadow: 0 1.35rem 2.7rem @color-background-dark5-40,
0 1.1rem 0.85rem @color-background-dark5-20;
backdrop-filter: blur(15px);

22
src/routes/Settings/styles.less
View file

@ -53,12 +53,12 @@
&.selected {
font-weight: 600;
color: var(--primary-foreground-color);
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
opacity: 1;
}
&:hover {
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
}
}
@ -69,7 +69,7 @@
.version-info-label {
flex: 0 1 auto;
margin: 0.5rem 0;
color: var(--primary-overlay-color);
color: var(--overlay-color);
}
}
@ -86,7 +86,7 @@
overflow: visible;
&:not(:last-child) {
border-bottom: thin solid var(--primary-overlay-color);
border-bottom: thin solid var(--overlay-color);
}
.section-title {
@ -181,7 +181,7 @@
height: 3.5rem;
border-radius: 3.5rem;
margin-left: 1rem;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
&:hover {
outline: var(--focus-outline-size) solid var(--primary-foreground-color);
@ -235,7 +235,7 @@
justify-content: center;
height: 3.5rem;
border-radius: 3.5rem;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
&:hover {
outline: var(--focus-outline-size) solid var(--primary-foreground-color);
@ -318,7 +318,7 @@
flex-direction: row;
align-items: center;
justify-content: center;
background-color: var(--primary-overlay-color);
background-color: var(--overlay-color);
&:hover {
outline: var(--focus-outline-size) solid var(--primary-foreground-color);
@ -349,8 +349,8 @@
font-weight: 500;
color: var(--primary-foreground-color);
border-radius: 0.25em;
box-shadow: 0 4px 0 1px var(--tertiary-background-color);
background-color: var(--primary-overlay-color);
box-shadow: 0 4px 0 1px var(--modal-background-color);
background-color: var(--overlay-color);
}
.label {
@ -375,8 +375,8 @@
padding: 1rem;
color: var(--primary-foreground-color);
border-radius: var(--border-radius);
background-color: var(--primary-overlay-color);
outline: var(--focus-outline-size) solid var(--primary-overlay-color);
background-color: var(--overlay-color);
outline: var(--focus-outline-size) solid var(--overlay-color);
outline-offset: calc(-1 * var(--focus-outline-size));
&:hover {