1 @use '_variables' as *;
4 @import './_bootstrap-variables';
6 @import '~bootstrap/scss/functions';
7 @import '~bootstrap/scss/variables';
8 @import '~bootstrap/scss/mixins';
9 @import '~bootstrap/scss/utilities';
11 @import '~bootstrap/scss/root';
12 @import '~bootstrap/scss/reboot';
13 @import '~bootstrap/scss/type';
14 @import '~bootstrap/scss/grid';
15 @import '~bootstrap/scss/forms';
16 @import '~bootstrap/scss/buttons';
17 @import '~bootstrap/scss/dropdown';
18 @import '~bootstrap/scss/button-group';
19 @import '~bootstrap/scss/nav';
20 @import '~bootstrap/scss/card';
21 @import '~bootstrap/scss/accordion';
22 @import '~bootstrap/scss/alert';
23 @import '~bootstrap/scss/close';
24 @import '~bootstrap/scss/modal';
25 @import '~bootstrap/scss/tooltip';
26 @import '~bootstrap/scss/popover';
27 @import '~bootstrap/scss/spinners';
29 @import '~bootstrap/scss/helpers';
30 @import '~bootstrap/scss/utilities/api';
37 cursor: pointer !important;
40 // ---------------------------------------------------------------------------
42 // ---------------------------------------------------------------------------
46 @include padding-left(1rem);
50 color: pvar(--mainForegroundColor);
54 color: pvar(--mainBackgroundColor) !important;
55 background-color: pvar(--mainHoverColor);
65 @include disable-default-a-behaviour;
73 // ---------------------------------------------------------------------------
75 // ---------------------------------------------------------------------------
83 // ---------------------------------------------------------------------------
85 // ---------------------------------------------------------------------------
87 @media screen and (min-width: #{breakpoint(md)}) {
89 vertical-align: middle;
97 &:not(.modal-lg):not(.modal-xl) {
109 background-color: pvar(--mainBackgroundColor);
110 word-break: break-word;
119 font-weight: $font-semibold;
137 > *:not(:first-child) {
138 @include margin-left(10px);
144 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
146 overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
147 width: 100vw; // Make sure the content fits all the available width
150 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
151 @media (hover: none) and (pointer: coarse) {
154 overflow: hidden !important;
157 // On touchscreen devices display content overlay when opened menu
161 background-color: #000;
172 // ---------------------------------------------------------------------------
174 // ---------------------------------------------------------------------------
177 display: flex !important;
179 height: 30px !important;
180 padding: 10px 15px !important;
184 font-size: 16px !important;
185 font-weight: $font-semibold !important;
188 opacity: 0.7 !important;
194 opacity: 1 !important;
199 @include disable-default-a-behaviour;
201 color: pvar(--mainForegroundColor);
205 .nav-tabs .nav-link {
206 @include disable-default-a-behaviour;
208 color: pvar(--mainForegroundColor);
209 font-weight: $font-semibold;
211 border-bottom: 2px solid transparent;
215 color: pvar(--mainForegroundColor);
216 background-color: pvar(--mainBackgroundColor) !important;
217 border-bottom-color: pvar(--mainColor);
228 // ---------------------------------------------------------------------------
229 // Card, collapse and accordion
230 // ---------------------------------------------------------------------------
233 background-color: pvar(--mainBackgroundColor);
234 border-color: #dee2e6;
237 .collapse-transition {
238 // Animation when we show/hide the filters
239 transition: max-height 0.3s;
240 display: block !important;
241 overflow: hidden !important;
246 overflow: inherit !important;
254 font-weight: $font-bold;
257 color: pvar(--mainColorLighter);
262 // ---------------------------------------------------------------------------
263 // Buttons & form controls
264 // ---------------------------------------------------------------------------
267 font-size: $button-font-size;
271 .btn-outline-secondary {
272 border-color: pvar(--inputBorderColor);
278 background-color: #6c757d;
282 .btn-group.select-button {
283 font-weight: $font-semibold;
286 @include orange-button;
290 @include grey-button;
294 @include peertube-button-link;
296 box-shadow: none !important;
298 &:not(:first-child) {
299 border-top-left-radius: 0 !important;
300 border-bottom-left-radius: 0 !important;
304 border-top-right-radius: 0 !important;
305 border-bottom-right-radius: 0 !important;
311 color: pvar(--mainForegroundColor);
312 background-color: pvar(--inputBackgroundColor);
318 > .input-group-text {
319 height: $button-height;
322 > .input-group-text {
327 .input-group-text > .dropdown-toggle {
332 border-top-right-radius: 3px !important;
333 border-bottom-right-radius: 3px !important;
339 @include padding-right(1.5rem !important);
342 .form-control-clear {
344 justify-content: center;
358 input:placeholder-shown + .form-control-clear {