diff --git a/src/App/styles.less b/src/App/styles.less index 2feb9ea40..8324ce583 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -1,6 +1,6 @@ -@import (inline, once, css) '~stremio-colors/dist/css/stremio-colors.css'; @import (inline, once, css) '~stremio/common/roboto.css'; @import (reference) '~stremio/common/screen-sizes.less'; +@import (reference) '~stremio-colors/dist/less/stremio-colors.less'; :global { @import (once, less) '~stremio-router/styles.css'; diff --git a/src/common/Checkbox/styles.less b/src/common/Checkbox/styles.less index b02731ae7..8109415fc 100644 --- a/src/common/Checkbox/styles.less +++ b/src/common/Checkbox/styles.less @@ -1,8 +1,10 @@ +@import (reference) '~stremio-colors/dist/less/stremio-colors.less'; + .checkbox-container { &:global(.checked) { .icon { - fill: var(--color-surface-light5); - background-color: var(--color-primaryvariant1); + fill: @color-surface-light5; + background-color: @color-primaryvariant1; } } @@ -10,6 +12,6 @@ display: block; width: 1rem; height: 1rem; - fill: var(--color-surface-light5); + fill: @color-surface-light5; } } \ No newline at end of file diff --git a/src/routes/Intro/ConsentCheckbox/styles.less b/src/routes/Intro/ConsentCheckbox/styles.less index 2fafa82b0..815e46695 100644 --- a/src/routes/Intro/ConsentCheckbox/styles.less +++ b/src/routes/Intro/ConsentCheckbox/styles.less @@ -1,3 +1,5 @@ +@import (reference) '~stremio-colors/dist/less/stremio-colors.less'; + :import('~stremio/common/Checkbox/styles.less') { checkbox-icon: icon; } @@ -10,25 +12,25 @@ &:focus { outline: none; - background-color: var(--color-surface-light5-20); + background-color: @color-surface-light5-20; } .checkbox-icon { flex: none; width: 1.2rem; height: 1.2rem; - fill: var(--color-surface-dark5); + fill: @color-surface-dark5; } .label { flex: 1; margin-left: 0.5rem; font-size: 0.9rem; - color: var(--color-surface); + color: @color-surface; .link { font-size: 0.9rem; - color: var(--color-surface-light5); + color: @color-surface-light5; &:hover { text-decoration: underline; diff --git a/src/routes/Intro/styles.less b/src/routes/Intro/styles.less index 05ba8bd03..6e9b8a657 100644 --- a/src/routes/Intro/styles.less +++ b/src/routes/Intro/styles.less @@ -1,10 +1,12 @@ +@import (reference) '~stremio-colors/dist/less/stremio-colors.less'; + .intro-container { display: flex; flex-direction: row; width: 100%; height: 100%; background: - linear-gradient(var(--color-background-dark3-80), var(--color-background-dark3-80)), + linear-gradient(@color-background-dark3-80, @color-background-dark3-80), url('/images/intro_background.jpg'); background-size: cover; background-repeat: no-repeat; @@ -34,7 +36,7 @@ .icon { width: 8rem; height: 4rem; - fill: var(--color-surface-dark4); + fill: @color-surface-dark4; } } @@ -50,7 +52,7 @@ width: 1rem; height: 2rem; margin-right: 1rem; - fill: var(--color-surface-light5); + fill: @color-surface-light5; } .label { @@ -59,7 +61,7 @@ flex-basis: auto; font-size: 1.1rem; font-weight: 500; - color: var(--color-surface-light5); + color: @color-surface-light5; text-align: center; } } @@ -68,14 +70,14 @@ min-height: 4.5rem; margin-top: 2rem; margin-bottom: 0.5rem; - background: var(--color-secondaryvariant1-dark5); + background: @color-secondaryvariant1-dark5; &:hover { - background: var(--color-secondary-dark4); + background: @color-secondary-dark4; } &:focus { - outline-color: var(--color-surface-light5); + outline-color: @color-surface-light5; } .label { @@ -88,23 +90,23 @@ width: 100%; margin: 1rem 0; padding: 1rem; - border-bottom: thin solid var(--color-surface); - color: var(--color-surface-light5); + border-bottom: thin solid @color-surface; + color: @color-surface-light5; &:hover { - background-color: var(--color-surface-light5-20); + background-color: @color-surface-light5-20; } &:focus { - border-bottom-color: var(--color-secondaryvariant2-light1); + border-bottom-color: @color-secondaryvariant2-light1; &::placeholder { - color: var(--color-secondaryvariant2-light1); + color: @color-secondaryvariant2-light1; } } &::placeholder { - color: var(--color-surface-dark2); + color: @color-surface-dark2; } } @@ -120,16 +122,16 @@ flex-shrink: 1; flex-basis: auto; padding: 0.5rem; - color: var(--color-surface-light3); + color: @color-surface-light3; &:hover, &:focus { text-decoration: underline; - color: var(--color-secondaryvariant2-light1); + color: @color-secondaryvariant2-light1; } &:focus { outline: none; - background-color: var(--color-surface-light5-20); + background-color: @color-surface-light5-20; } } } @@ -137,20 +139,20 @@ .error-message { margin: 1rem 0; text-align: center; - color: var(--color-accent5); + color: @color-accent5; } .submit-button { min-height: 4rem; margin: 1rem 0; - background-color: var(--color-accent3); + background-color: @color-accent3; &:hover { - background-color: var(--color-accent3-dark1); + background-color: @color-accent3-dark1; } &:focus { - outline-color: var(--color-surface-light5); + outline-color: @color-surface-light5; } .label { @@ -170,7 +172,7 @@ &:focus { outline: none; - background-color: var(--color-surface-light5-20); + background-color: @color-surface-light5-20; } } @@ -188,7 +190,7 @@ &:focus { outline: none; - background-color: var(--color-surface-light5-20); + background-color: @color-surface-light5-20; } .label-container { @@ -198,11 +200,11 @@ .account-label { margin-right: 0.5rem; - color: var(--color-surface-dark2); + color: @color-surface-dark2; } .label { - color: var(--color-accent4-light1); + color: @color-accent4-light1; } } } @@ -223,7 +225,7 @@ .label { margin-bottom: 1rem; font-size: 2rem; - color: var(--color-surface-light5); + color: @color-surface-light5; animation: 1s linear infinite alternate flash; } @@ -231,7 +233,7 @@ flex: none; width: 5rem; height: 5rem; - fill: var(--color-surface-light5); + fill: @color-surface-light5; animation: 1s linear infinite alternate flash; }