]>
Commit | Line | Data |
---|---|---|
63c4db6d C |
1 | @import '_variables'; |
2 | ||
26c6ee80 | 3 | @mixin disable-default-a-behaviour { |
cadb46d8 | 4 | &:hover, &:focus, &:active { |
26c6ee80 C |
5 | text-decoration: none !important; |
6 | outline: none !important; | |
7 | } | |
8 | } | |
c30745f3 C |
9 | |
10 | @mixin peertube-input-text($width) { | |
11 | display: inline-block; | |
12 | height: $button-height; | |
13 | width: $width; | |
14 | background: #fff; | |
15 | border: 1px solid #C6C6C6; | |
16 | border-radius: 3px; | |
17 | padding-left: 15px; | |
15ca2e87 | 18 | padding-right: 15px; |
c30745f3 C |
19 | |
20 | &::placeholder { | |
21 | color: #585858; | |
22 | } | |
23 | } | |
24 | ||
5f0805d3 C |
25 | @mixin peertube-textarea ($width, $height) { |
26 | @include peertube-input-text($width); | |
27 | ||
28 | height: $height; | |
29 | padding: 5px 15px; | |
30 | font-size: 15px; | |
31 | } | |
32 | ||
7b272fd7 | 33 | @mixin orange-button { |
15a7387d C |
34 | &, &:active, &:focus { |
35 | color: #fff; | |
36 | background-color: $orange-color; | |
37 | } | |
7b272fd7 | 38 | |
15a7387d | 39 | &:hover { |
0727cab0 | 40 | color: #fff; |
7b272fd7 C |
41 | background-color: $orange-hoover-color; |
42 | } | |
4cc66133 C |
43 | |
44 | &[disabled], &.disabled { | |
45 | cursor: default; | |
cadb46d8 C |
46 | color: #fff; |
47 | background-color: #C6C6C6; | |
4cc66133 | 48 | } |
7b272fd7 C |
49 | } |
50 | ||
51 | @mixin grey-button { | |
15a7387d C |
52 | &, &:active, &:focus { |
53 | background-color: $grey-color; | |
54 | color: #585858; | |
55 | } | |
7b272fd7 | 56 | |
4cc66133 | 57 | &:hover, &:active, &:focus, &[disabled], &.disabled { |
0727cab0 | 58 | color: #585858; |
7b272fd7 C |
59 | background-color: $grey-hoover-color; |
60 | } | |
4cc66133 C |
61 | |
62 | &[disabled], &.disabled { | |
63 | cursor: default; | |
64 | } | |
7b272fd7 C |
65 | } |
66 | ||
c30745f3 C |
67 | @mixin peertube-button { |
68 | border: none; | |
c30745f3 C |
69 | font-weight: $font-semibold; |
70 | font-size: 15px; | |
71 | height: $button-height; | |
72 | line-height: $button-height; | |
73 | border-radius: 3px; | |
74 | text-align: center; | |
c30745f3 C |
75 | padding: 0 17px 0 13px; |
76 | cursor: pointer; | |
e600e1fe | 77 | outline: 0; |
c30745f3 C |
78 | } |
79 | ||
80 | @mixin peertube-button-link { | |
81 | display: inline-block; | |
82 | ||
c30745f3 | 83 | @include disable-default-a-behaviour; |
ce0e281d | 84 | @include peertube-button; |
c30745f3 | 85 | } |
2295ce6c | 86 | |
c5911fd3 C |
87 | @mixin peertube-button-file ($width) { |
88 | position: relative; | |
89 | overflow: hidden; | |
90 | display: inline-block; | |
91 | width: $width; | |
92 | ||
93 | @include peertube-button; | |
94 | @include orange-button; | |
95 | ||
96 | input[type=file] { | |
97 | position: absolute; | |
98 | top: 0; | |
99 | right: 0; | |
100 | min-width: 100%; | |
101 | min-height: 100%; | |
102 | font-size: 100px; | |
103 | text-align: right; | |
104 | filter: alpha(opacity=0); | |
105 | opacity: 0; | |
106 | outline: none; | |
107 | background: white; | |
108 | cursor: inherit; | |
109 | display: block; | |
110 | } | |
111 | } | |
112 | ||
0727cab0 C |
113 | @mixin icon ($size) { |
114 | display: inline-block; | |
115 | background-repeat: no-repeat; | |
116 | background-size: contain; | |
117 | width: $size; | |
118 | height: $size; | |
119 | vertical-align: middle; | |
120 | cursor: pointer; | |
121 | } | |
4cc66133 | 122 | |
15a7387d C |
123 | @mixin peertube-select-container ($width) { |
124 | padding: 0; | |
125 | margin: 0; | |
4cc66133 | 126 | border: 1px solid #C6C6C6; |
4cc66133 C |
127 | width: $width; |
128 | border-radius: 3px; | |
15a7387d C |
129 | overflow: hidden; |
130 | background: #fff; | |
131 | position: relative; | |
5f0805d3 | 132 | font-size: 15px; |
15a7387d C |
133 | |
134 | &:after { | |
135 | top: 50%; | |
136 | right: calc(0% + 15px); | |
137 | content: " "; | |
138 | height: 0; | |
139 | width: 0; | |
140 | position: absolute; | |
141 | pointer-events: none; | |
142 | border: 5px solid rgba(0, 0, 0, 0); | |
143 | border-top-color: #000000; | |
144 | margin-top: -2px; | |
145 | z-index: 100; | |
146 | } | |
147 | ||
148 | select { | |
108af661 | 149 | padding: 0 35px 0 12px; |
15a7387d C |
150 | width: calc(100% + 2px); |
151 | position: relative; | |
152 | left: 1px; | |
153 | border: none; | |
154 | box-shadow: none; | |
155 | background: transparent none; | |
156 | appearance: none; | |
157 | cursor: pointer; | |
158 | height: $button-height; | |
108af661 | 159 | text-overflow: ellipsis; |
15a7387d C |
160 | |
161 | &:focus { | |
162 | outline: none; | |
163 | } | |
164 | ||
165 | &:-moz-focusring { | |
166 | color: transparent; | |
167 | text-shadow: 0 0 0 #000; | |
168 | } | |
169 | } | |
170 | } | |
171 | ||
172 | @mixin peertube-select-disabled-container ($width) { | |
173 | @include peertube-select-container($width); | |
174 | ||
175 | background-color: #E5E5E5; | |
176 | ||
177 | select { | |
178 | cursor: default; | |
179 | } | |
4cc66133 | 180 | } |
a0d69908 | 181 | |
5f0805d3 C |
182 | // Thanks: https://codepen.io/triss90/pen/XNEdRe/ |
183 | @mixin peertube-radio-container { | |
184 | input[type="radio"] { | |
185 | display: none; | |
186 | ||
187 | & + label { | |
188 | font-weight: $font-regular; | |
189 | cursor: pointer; | |
190 | ||
191 | &:before { | |
192 | position: relative; | |
193 | top: -2px; | |
194 | content: ''; | |
195 | background: #fff; | |
196 | border-radius: 100%; | |
197 | border: 1px solid #000; | |
198 | display: inline-block; | |
199 | width: 15px; | |
200 | height: 15px; | |
201 | vertical-align: middle; | |
202 | cursor: pointer; | |
203 | text-align: center; | |
204 | margin-right: 10px; | |
205 | } | |
206 | } | |
207 | ||
208 | &:checked + label:before { | |
209 | background-color: #000; | |
210 | box-shadow: inset 0 0 0 4px #fff; | |
211 | } | |
212 | ||
213 | &:focus + label:before { | |
214 | outline: none; | |
215 | border-color: #000; | |
216 | } | |
217 | } | |
218 | } | |
219 | ||
a0d69908 C |
220 | @mixin peertube-checkbox ($border-width) { |
221 | display: none; | |
222 | ||
223 | & + label { | |
224 | position: relative; | |
225 | width: 18px; | |
226 | height: 18px; | |
227 | border: $border-width solid #000; | |
228 | border-radius: 3px; | |
229 | vertical-align: middle; | |
230 | cursor: pointer; | |
231 | ||
232 | &:after { | |
233 | content: ''; | |
234 | position: absolute; | |
235 | top: calc(2px - #{$border-width}); | |
236 | left: 5px; | |
237 | width: 5px; | |
238 | height: 12px; | |
239 | opacity: 0; | |
240 | transform: rotate(45deg) scale(0); | |
241 | border-right: 2px solid #fff; | |
242 | border-bottom: 2px solid #fff; | |
243 | } | |
244 | } | |
245 | ||
246 | &:checked + label { | |
247 | border-color: transparent; | |
248 | background: $orange-color; | |
249 | animation: jelly 0.6s ease; | |
250 | ||
251 | &:after { | |
252 | opacity: 1; | |
253 | transform: rotate(45deg) scale(1); | |
254 | } | |
255 | } | |
256 | ||
257 | & + label + label { | |
258 | font-size: 15px; | |
259 | font-weight: $font-regular; | |
260 | margin-left: 5px; | |
261 | cursor: pointer; | |
6693df9d | 262 | display: inline; |
a0d69908 C |
263 | } |
264 | } | |
265 | ||
4e8c8728 C |
266 | |
267 | @mixin avatar ($size) { | |
268 | object-fit: cover; | |
269 | border-radius:50%; | |
270 | width: $size; | |
271 | height: $size; | |
272 | } |