]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame - client/src/sass/include/_variables.scss
Make video-add-nav tabs scrollable on small devices (#2677)
[github/Chocobozzz/PeerTube.git] / client / src / sass / include / _variables.scss
CommitLineData
9b8a7aa8
RK
1@import '_bootstrap-variables';
2
8ff3f883
C
3$small-view: 800px;
4$mobile-view: 500px;
5
8a8e02a4 6$main-fonts: 'Source Sans Pro', sans-serif;
b33f657c
C
7$font-regular: 400;
8$font-semibold: 600;
9$font-bold: 700;
10
457bb213
C
11$grey-background-color: #E5E5E5;
12$grey-background-hover-color: #EFEFEF;
13$grey-foreground-color: #585858;
14$grey-foreground-hover-color: #303030;
a6d5ff76 15$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
457bb213 16
680b5496
RK
17// Palette
18$main-color: hsl(24, 90%, 50%);
19$main-hover-color: lighten($main-color, 5%);
20$main-color-lighter: lighten($main-color, 10%);
a6d5ff76 21$main-color-lightest: lighten($main-color, 40%);
680b5496
RK
22$secondary-color: hsl(187, 77, 34);
23//
aa0f1963 24
0240da5c
RK
25$support-button: inherit;
26$support-button-heart: #e83e8c;
2fcc2294 27
769ac6c1
RK
28$bg-color: #fff;
29$fg-color: #000;
41a676db
C
30
31$red: #FF0000;
32$green: #39CC0B;
383bfc83 33
22a16e36
C
34$grey-actor-name: #777272;
35
c30745f3 36$expanded-horizontal-margins: 150px;
d178b5c1 37$not-expanded-horizontal-margins: 30px;
c30745f3 38
b33f657c
C
39$button-height: 30px;
40
b33f657c 41$header-height: 50px;
383bfc83 42$header-border-color: #e9eff6;
26c6ee80
C
43$search-input-width: 375px;
44
9a0fc840 45$menu-background: #000;
26c6ee80 46$menu-color: #fff;
8afc19a6 47$menu-bottom-color: #C6C6C6;
26c6ee80 48$menu-width: 240px;
35c29307 49$menu-lateral-padding: 26px;
26c6ee80 50
9a0fc840
RK
51$sub-menu-color: #F7F7F7;
52
efbf0ed7
C
53$footer-height: 30px;
54$footer-margin: 30px;
55
897ec54d 56$footer-border-color: $header-border-color;
3290f37c 57
f0a39880
C
58$separator-border-color: rgba(0, 0, 0, 0.10);
59
11dd0c2e 60$video-miniature-width: 238px;
dc890263 61$video-miniature-margin-bottom: 30px;
e5fc7811
C
62$video-thumbnail-height: 122px;
63$video-thumbnail-width: 223px;
8fc02e47 64$video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height;
054a103b 65
432e7ddc 66$theater-bottom-space: 115px;
9a0fc840 67
db6d617d 68$input-background-color: $bg-color;
9a0fc840
RK
69$input-placeholder-color: #898989;
70
bce47964
C
71$sub-menu-margin-bottom: 30px;
72
0240da5c
RK
73$activated-action-button-color: black;
74
6a4c30de
RK
75$focus-box-shadow-form: 0 0 0 .2rem;
76
9a0fc840
RK
77/*** map theme ***/
78
79// pass variables into a sass map,
80// to be warned of non-existing variables
81$variables: (
82 --mainColor: var(--mainColor),
d3217560 83 --mainColorLighter: var(--mainColorLighter),
a6d5ff76 84 --mainColorLightest: var(--mainColorLightest),
9a0fc840
RK
85 --mainHoverColor: var(--mainHoverColor),
86 --mainBackgroundColor: var(--mainBackgroundColor),
87 --mainForegroundColor: var(--mainForegroundColor),
aa0f1963 88 --secondaryColor: var(--secondaryColor),
2fcc2294 89
1d9d9cfd
RK
90 --menuBackgroundColor: var(--menuBackgroundColor),
91 --menuForegroundColor: var(--menuForegroundColor),
9a0fc840 92 --submenuColor: var(--submenuColor),
2fcc2294 93
14aa8556 94 --inputBackgroundColor: var(--inputBackgroundColor),
5efab546 95 --inputPlaceholderColor: var(--inputPlaceholderColor),
2fcc2294 96
0240da5c 97 --actionButtonColor: var(--actionButtonColor),
2fcc2294
C
98 --supportButtonColor: var(--supportButtonColor),
99 --supportButtonBackgroundColor: var(--supportButtonBackgroundColor),
0240da5c 100 --supportButtonHeartColor: var(--supportButtonHeartColor),
2fcc2294 101
5efab546
C
102 --embedForegroundColor: var(--embedForegroundColor),
103 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
9a0fc840
RK
104);
105
9a0fc840
RK
106@function var($variable) {
107 @return map-get($variables, $variable);
108}
36f2981f
RK
109
110/*** z-index groups ***/
111
112$zindex: (
555fdc8c
RK
113 miniature : 10,
114 privacymsg : 20,
115 typeahead : 30,
36f2981f 116 header : 1000,
36f2981f
RK
117 menu : 11000,
118 dropdown : 12000,
757ffdfe
RK
119 popover : 13000,
120 tooltip : 14000,
121 loadbar : 15000,
122 modal : 16000,
d3217560
RK
123 help-popover : 17000,
124 notification : 18000,
125 hotkeys : 19000
36f2981f
RK
126);
127
128@function z($label) {
129 @return map-get($zindex, $label);
130}