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/transitions';
19 @import 'bootstrap/scss/dropdown';
20 @import 'bootstrap/scss/button-group';
21 @import 'bootstrap/scss/nav';
22 @import 'bootstrap/scss/card';
23 @import 'bootstrap/scss/accordion';
24 @import 'bootstrap/scss/alert';
25 @import 'bootstrap/scss/close';
26 @import 'bootstrap/scss/modal';
27 @import 'bootstrap/scss/tooltip';
28 @import 'bootstrap/scss/popover';
29 @import 'bootstrap/scss/spinners';
31 @import 'bootstrap/scss/helpers';
32 @import 'bootstrap/scss/utilities/api';
35 --bs-border-color-translucent: #{pvar(--inputBorderColor)};
39 --bs-accordion-color: #{pvar(--mainForegroundColor)};
40 --bs-accordion-bg: #{pvar(--mainBackgroundColor)};
42 --bs-accordion-btn-color: var(--bs-accordion-color);
43 --bs-accordion-btn-bg: var(--bs-accordion-bg);
47 --bs-popover-bg: #{pvar(--mainBackgroundColor)};
48 --bs-popover-body-color: #{pvar(--mainForegroundColor)};
49 --bs-popover-header-color: #{pvar(--mainForegroundColor)};
51 font-family: $main-fonts;
59 cursor: pointer !important;
62 // ---------------------------------------------------------------------------
64 // ---------------------------------------------------------------------------
67 --bs-dropdown-link-hover-bg: #{pvar(--mainBackgroundHoverColor)};
68 --bs-dropdown-link-color: #{pvar(--mainForegroundColor)};
69 --bs-dropdown-border-color: #{pvar(--inputBorderColor)};
72 @include padding-left(1rem);
79 color: pvar(--mainBackgroundColor) !important;
80 background-color: pvar(--mainHoverColor);
90 @include disable-default-a-behaviour;
98 // ---------------------------------------------------------------------------
100 // ---------------------------------------------------------------------------
108 // ---------------------------------------------------------------------------
110 // ---------------------------------------------------------------------------
112 @media screen and (min-width: #{breakpoint(md)}) {
114 vertical-align: middle;
122 &:not(.modal-lg):not(.modal-xl) {
134 background-color: pvar(--mainBackgroundColor);
135 word-break: break-word;
144 font-weight: $font-semibold;
162 > *:not(:first-child) {
163 @include margin-left(10px);
169 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
171 overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
172 width: 100vw; // Make sure the content fits all the available width
175 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
176 @media (hover: none) and (pointer: coarse) {
179 overflow: hidden !important;
182 // On touchscreen devices display content overlay when opened menu
186 background-color: #000;
199 // ---------------------------------------------------------------------------
201 // ---------------------------------------------------------------------------
204 display: flex !important;
206 height: 30px !important;
210 font-size: 16px !important;
211 font-weight: $font-semibold !important;
214 opacity: 0.7 !important;
220 opacity: 1 !important;
225 @include disable-default-a-behaviour;
227 color: pvar(--mainForegroundColor);
231 .nav-tabs .nav-link {
232 @include disable-default-a-behaviour;
234 color: pvar(--mainForegroundColor);
235 font-weight: $font-semibold;
237 border-bottom: 2px solid transparent;
241 color: pvar(--mainForegroundColor);
242 background-color: pvar(--mainBackgroundColor) !important;
243 border-bottom-color: pvar(--mainColor);
254 // ---------------------------------------------------------------------------
255 // Card, collapse and accordion
256 // ---------------------------------------------------------------------------
259 background-color: pvar(--mainBackgroundColor);
260 border-color: #dee2e6;
267 font-weight: $font-bold;
270 color: pvar(--mainColorLighter);
275 // ---------------------------------------------------------------------------
276 // Buttons & form controls
277 // ---------------------------------------------------------------------------
280 font-size: $button-font-size;
284 .btn-outline-secondary {
285 border-color: pvar(--inputBorderColor);
291 background-color: #6c757d;
295 .btn-group.select-button {
296 font-weight: $font-semibold;
299 @include orange-button;
303 @include grey-button;
307 @include peertube-button-link;
309 box-shadow: none !important;
311 &:not(:first-child) {
312 border-top-left-radius: 0 !important;
313 border-bottom-left-radius: 0 !important;
317 border-top-right-radius: 0 !important;
318 border-bottom-right-radius: 0 !important;
324 color: pvar(--mainForegroundColor);
325 background-color: pvar(--inputBackgroundColor);
331 > .input-group-text {
336 > .input-group-text {
341 .input-group-text > .dropdown-toggle {
349 border-top-right-radius: 3px !important;
350 border-bottom-right-radius: 3px !important;
356 @include padding-right(1.5rem !important);
359 .form-control-clear {
361 justify-content: center;
375 input:placeholder-shown + .form-control-clear {
381 // Prevent invalid height in parent: https://stackoverflow.com/a/22425601