]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blame_incremental - client/src/sass/include/_variables.scss
Add external login buttons
[github/Chocobozzz/PeerTube.git] / client / src / sass / include / _variables.scss
... / ...
CommitLineData
1@import '_bootstrap-variables';
2
3$small-view: 800px;
4$mobile-view: 500px;
5
6$main-fonts: 'Source Sans Pro', sans-serif;
7$font-regular: 400;
8$font-semibold: 600;
9$font-bold: 700;
10
11$grey-background-color: #E5E5E5;
12$grey-background-hover-color: #EFEFEF;
13$grey-foreground-color: #585858;
14$grey-foreground-hover-color: #303030;
15$grey-button-outline-color: scale-color($grey-foreground-color, $alpha: -95%);
16
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%);
21$main-color-lightest: lighten($main-color, 40%);
22$secondary-color: hsl(187, 77, 34);
23//
24
25$support-button: inherit;
26$support-button-heart: #e83e8c;
27
28$bg-color: #fff;
29$fg-color: #000;
30
31$red: #FF0000;
32$green: #39CC0B;
33
34$grey-actor-name: #777272;
35
36$expanded-horizontal-margins: 150px;
37$not-expanded-horizontal-margins: 30px;
38
39$button-height: 30px;
40
41$header-height: 50px;
42$header-border-color: #e9eff6;
43$search-input-width: 375px;
44
45$menu-background: #000;
46$menu-color: #fff;
47$menu-bottom-color: #C6C6C6;
48$menu-width: 240px;
49$menu-lateral-padding: 26px;
50
51$sub-menu-color: #F7F7F7;
52
53$footer-height: 30px;
54$footer-margin: 30px;
55
56$separator-border-color: rgba(0, 0, 0, 0.10);
57
58$video-miniature-width: 238px;
59$video-miniature-margin-bottom: 30px;
60$video-thumbnail-height: 122px;
61$video-thumbnail-width: 223px;
62$video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height;
63
64$theater-bottom-space: 115px;
65
66$input-background-color: $bg-color;
67$input-placeholder-color: #898989;
68
69$textarea-background-color: $grey-background-hover-color;
70
71$sub-menu-margin-bottom: 30px;
72$sub-menu-margin-bottom-small-view: 10px;
73
74$activated-action-button-color: black;
75
76$focus-box-shadow-form: 0 0 0 .2rem;
77
78/*** map theme ***/
79
80// pass variables into a sass map,
81// to be warned of non-existing variables
82$variables: (
83 --mainColor: var(--mainColor),
84 --mainColorLighter: var(--mainColorLighter),
85 --mainColorLightest: var(--mainColorLightest),
86 --mainHoverColor: var(--mainHoverColor),
87 --mainBackgroundColor: var(--mainBackgroundColor),
88 --mainForegroundColor: var(--mainForegroundColor),
89 --secondaryColor: var(--secondaryColor),
90
91 --menuBackgroundColor: var(--menuBackgroundColor),
92 --menuForegroundColor: var(--menuForegroundColor),
93 --submenuColor: var(--submenuColor),
94
95 --inputBackgroundColor: var(--inputBackgroundColor),
96 --inputPlaceholderColor: var(--inputPlaceholderColor),
97
98 --textareaBackgroundColor: var(--textareaBackgroundColor),
99
100 --actionButtonColor: var(--actionButtonColor),
101 --supportButtonColor: var(--supportButtonColor),
102 --supportButtonBackgroundColor: var(--supportButtonBackgroundColor),
103 --supportButtonHeartColor: var(--supportButtonHeartColor),
104
105 --embedForegroundColor: var(--embedForegroundColor),
106 --embedBigPlayBackgroundColor: var(--embedBigPlayBackgroundColor)
107);
108
109@function var($variable) {
110 @return map-get($variables, $variable);
111}
112
113/*** z-index groups ***/
114
115$zindex: (
116 miniature : 10,
117 privacymsg : 20,
118 typeahead : 30,
119 header : 1000,
120 menu : 11000,
121 dropdown : 12000,
122 popover : 13000,
123 tooltip : 14000,
124 loadbar : 15000,
125 modal : 16000,
126 help-popover : 17000,
127 notification : 18000,
128 hotkeys : 19000
129);
130
131@function z($label) {
132 @return map-get($zindex, $label);
133}