1 @use '_variables' as *;
4 @import './_bootstrap-variables';
6 @import 'bootstrap/scss/functions';
7 @import 'bootstrap/scss/variables';
8 @import 'bootstrap/scss/maps';
9 @import 'bootstrap/scss/mixins';
10 @import 'bootstrap/scss/utilities';
12 @import 'bootstrap/scss/root';
13 @import 'bootstrap/scss/reboot';
14 @import 'bootstrap/scss/type';
15 @import 'bootstrap/scss/grid';
16 @import 'bootstrap/scss/forms';
17 @import 'bootstrap/scss/buttons';
18 @import 'bootstrap/scss/dropdown';
19 @import 'bootstrap/scss/button-group';
20 @import 'bootstrap/scss/nav';
21 @import 'bootstrap/scss/card';
22 @import 'bootstrap/scss/accordion';
23 @import 'bootstrap/scss/alert';
24 @import 'bootstrap/scss/close';
25 @import 'bootstrap/scss/modal';
26 @import 'bootstrap/scss/tooltip';
27 @import 'bootstrap/scss/popover';
28 @import 'bootstrap/scss/spinners';
30 @import 'bootstrap/scss/helpers';
31 @import 'bootstrap/scss/utilities/api';
34 --bs-border-color-translucent: #{pvar(--inputBorderColor)};
38 --bs-accordion-color: #{pvar(--mainForegroundColor)};
39 --bs-accordion-bg: #{pvar(--mainBackgroundColor)};
43 --bs-popover-bg: #{pvar(--mainBackgroundColor)};
44 --bs-popover-body-color: #{pvar(--mainForegroundColor)};
45 --bs-popover-header-color: #{pvar(--mainForegroundColor)};
47 font-family: $main-fonts;
55 cursor: pointer !important;
58 // ---------------------------------------------------------------------------
60 // ---------------------------------------------------------------------------
63 --bs-dropdown-link-hover-bg: #{pvar(--mainBackgroundHoverColor)};
64 --bs-dropdown-link-color: #{pvar(--mainForegroundColor)};
65 --bs-dropdown-border-color: #{pvar(--inputBorderColor)};
68 @include padding-left(1rem);
75 color: pvar(--mainBackgroundColor) !important;
76 background-color: pvar(--mainHoverColor);
86 @include disable-default-a-behaviour;
94 // ---------------------------------------------------------------------------
96 // ---------------------------------------------------------------------------
104 // ---------------------------------------------------------------------------
106 // ---------------------------------------------------------------------------
108 @media screen and (min-width: #{breakpoint(md)}) {
110 vertical-align: middle;
118 &:not(.modal-lg):not(.modal-xl) {
130 background-color: pvar(--mainBackgroundColor);
131 word-break: break-word;
140 font-weight: $font-semibold;
158 > *:not(:first-child) {
159 @include margin-left(10px);
165 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
167 overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
168 width: 100vw; // Make sure the content fits all the available width
171 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
172 @media (hover: none) and (pointer: coarse) {
175 overflow: hidden !important;
178 // On touchscreen devices display content overlay when opened menu
182 background-color: #000;
195 // ---------------------------------------------------------------------------
197 // ---------------------------------------------------------------------------
200 display: flex !important;
202 height: 30px !important;
203 padding: 10px 15px !important;
207 font-size: 16px !important;
208 font-weight: $font-semibold !important;
211 opacity: 0.7 !important;
217 opacity: 1 !important;
222 @include disable-default-a-behaviour;
224 color: pvar(--mainForegroundColor);
228 .nav-tabs .nav-link {
229 @include disable-default-a-behaviour;
231 color: pvar(--mainForegroundColor);
232 font-weight: $font-semibold;
234 border-bottom: 2px solid transparent;
238 color: pvar(--mainForegroundColor);
239 background-color: pvar(--mainBackgroundColor) !important;
240 border-bottom-color: pvar(--mainColor);
251 // ---------------------------------------------------------------------------
252 // Card, collapse and accordion
253 // ---------------------------------------------------------------------------
256 background-color: pvar(--mainBackgroundColor);
257 border-color: #dee2e6;
260 .collapse-transition {
261 // Animation when we show/hide the filters
262 transition: max-height 0.3s;
263 display: block !important;
264 overflow: hidden !important;
269 overflow: inherit !important;
277 font-weight: $font-bold;
280 color: pvar(--mainColorLighter);
285 // ---------------------------------------------------------------------------
286 // Buttons & form controls
287 // ---------------------------------------------------------------------------
290 font-size: $button-font-size;
294 .btn-outline-secondary {
295 border-color: pvar(--inputBorderColor);
301 background-color: #6c757d;
305 .btn-group.select-button {
306 font-weight: $font-semibold;
309 @include orange-button;
313 @include grey-button;
317 @include peertube-button-link;
319 box-shadow: none !important;
321 &:not(:first-child) {
322 border-top-left-radius: 0 !important;
323 border-bottom-left-radius: 0 !important;
327 border-top-right-radius: 0 !important;
328 border-bottom-right-radius: 0 !important;
334 color: pvar(--mainForegroundColor);
335 background-color: pvar(--inputBackgroundColor);
341 > .input-group-text {
346 > .input-group-text {
351 .input-group-text > .dropdown-toggle {
359 border-top-right-radius: 3px !important;
360 border-bottom-right-radius: 3px !important;
366 @include padding-right(1.5rem !important);
369 .form-control-clear {
371 justify-content: center;
385 input:placeholder-shown + .form-control-clear {