diff options
Diffstat (limited to 'client/src/sass/include/_variables.scss')
-rw-r--r-- | client/src/sass/include/_variables.scss | 44 |
1 files changed, 36 insertions, 8 deletions
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index c8316473d..d2a5d2bd9 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss | |||
@@ -16,9 +16,10 @@ $grey-foreground-hover-color: #303030; | |||
16 | $grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%); | 16 | $grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%); |
17 | 17 | ||
18 | $main-color: hsl(24, 90%, 50%); | 18 | $main-color: hsl(24, 90%, 50%); |
19 | $main-hover-color: lighten($main-color, 5%); | ||
20 | $main-color-lighter: lighten($main-color, 10%); | 19 | $main-color-lighter: lighten($main-color, 10%); |
21 | $main-color-lightest: lighten($main-color, 40%); | 20 | $main-color-lightest: lighten($main-color, 40%); |
21 | $main-hover-color: lighten($main-color, 5%); | ||
22 | |||
22 | $secondary-color: hsl(187, 77%, 34%); | 23 | $secondary-color: hsl(187, 77%, 34%); |
23 | 24 | ||
24 | $support-button: inherit; | 25 | $support-button: inherit; |
@@ -47,18 +48,34 @@ $menu-bottom-color: #C6C6C6; | |||
47 | $menu-width: 240px; | 48 | $menu-width: 240px; |
48 | $menu-lateral-padding: 26px; | 49 | $menu-lateral-padding: 26px; |
49 | 50 | ||
50 | $sub-menu-color: #F7F7F7; | 51 | $sub-menu-background-color: #F7F7F7; |
51 | $sub-menu-height: 81px; | 52 | $sub-menu-height: 81px; |
52 | 53 | ||
54 | $channel-background-color: #f6ede8; | ||
55 | |||
56 | $banner-inverted-ratio: 1/6; | ||
57 | |||
58 | $max-channels-width: 1200px; | ||
59 | |||
53 | $footer-height: 30px; | 60 | $footer-height: 30px; |
54 | $footer-margin: 30px; | 61 | $footer-margin: 30px; |
55 | 62 | ||
56 | $separator-border-color: rgba(0, 0, 0, 0.10); | 63 | $separator-border-color: rgba(0, 0, 0, 0.10); |
57 | 64 | ||
58 | $video-miniature-width: 238px; | ||
59 | $video-miniature-margin-bottom: 15px; | 65 | $video-miniature-margin-bottom: 15px; |
60 | $video-thumbnail-height: 122px; | 66 | |
61 | $video-thumbnail-width: 223px; | 67 | $video-miniature-row-name-font-size: 1.3em; |
68 | $video-miniature-row-mobile-name-font-size: 14px; | ||
69 | |||
70 | $video-miniature-row-info-font-size: 14px; | ||
71 | $video-miniature-row-mobile-info-font-size: 12px; | ||
72 | |||
73 | $video-thumbnail-height: 153px; | ||
74 | $video-thumbnail-width: 280px; | ||
75 | $video-thumbnail-medium-height: 114px; | ||
76 | $video-thumbnail-medium-width: 201px; | ||
77 | $video-thumbnail-small-height: 71px; | ||
78 | $video-thumbnail-small-width: 125px; | ||
62 | 79 | ||
63 | $theater-bottom-space: 115px; | 80 | $theater-bottom-space: 115px; |
64 | 81 | ||
@@ -98,7 +115,9 @@ $variables: ( | |||
98 | 115 | ||
99 | --menuBackgroundColor: var(--menuBackgroundColor), | 116 | --menuBackgroundColor: var(--menuBackgroundColor), |
100 | --menuForegroundColor: var(--menuForegroundColor), | 117 | --menuForegroundColor: var(--menuForegroundColor), |
101 | --submenuColor: var(--submenuColor), | 118 | |
119 | --submenuBackgroundColor: var(--submenuBackgroundColor), | ||
120 | --channelBackgroundColor: var(--channelBackgroundColor), | ||
102 | 121 | ||
103 | --inputForegroundColor: var(--inputForegroundColor), | 122 | --inputForegroundColor: var(--inputForegroundColor), |
104 | --inputBackgroundColor: var(--inputBackgroundColor), | 123 | --inputBackgroundColor: var(--inputBackgroundColor), |
@@ -116,11 +135,20 @@ $variables: ( | |||
116 | --supportButtonHeartColor: var(--supportButtonHeartColor), | 135 | --supportButtonHeartColor: var(--supportButtonHeartColor), |
117 | 136 | ||
118 | --embedForegroundColor: var(--embedForegroundColor), | 137 | --embedForegroundColor: var(--embedForegroundColor), |
119 | --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor) | 138 | --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor), |
139 | |||
140 | --horizontalMarginContent: var(--horizontalMarginContent), | ||
141 | --videosHorizontalMarginContent: var(--videosHorizontalMarginContent), | ||
142 | --mainColWidth: var(--mainColWidth) | ||
120 | ); | 143 | ); |
121 | 144 | ||
145 | // SASS type check our CSS variables | ||
122 | @function pvar($variable) { | 146 | @function pvar($variable) { |
123 | @return map-get($variables, $variable); | 147 | @if map-has-key($variables, $variable) { |
148 | @return map-get($variables, $variable); | ||
149 | } @else { | ||
150 | @error "ERROR: Variable #{$variable} does not exist"; | ||
151 | } | ||
124 | } | 152 | } |
125 | 153 | ||
126 | /*** z-index groups ***/ | 154 | /*** z-index groups ***/ |