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-accordion-color: #{pvar(--mainForegroundColor)};
35 --bs-accordion-bg: #{pvar(--mainBackgroundColor)};
43 cursor: pointer !important;
46 // ---------------------------------------------------------------------------
48 // ---------------------------------------------------------------------------
52 @include padding-left(1rem);
56 color: pvar(--mainForegroundColor);
60 color: pvar(--mainBackgroundColor) !important;
61 background-color: pvar(--mainHoverColor);
71 @include disable-default-a-behaviour;
79 // ---------------------------------------------------------------------------
81 // ---------------------------------------------------------------------------
89 // ---------------------------------------------------------------------------
91 // ---------------------------------------------------------------------------
93 @media screen and (min-width: #{breakpoint(md)}) {
95 vertical-align: middle;
103 &:not(.modal-lg):not(.modal-xl) {
115 background-color: pvar(--mainBackgroundColor);
116 word-break: break-word;
125 font-weight: $font-semibold;
143 > *:not(:first-child) {
144 @include margin-left(10px);
150 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
152 overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
153 width: 100vw; // Make sure the content fits all the available width
156 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
157 @media (hover: none) and (pointer: coarse) {
160 overflow: hidden !important;
163 // On touchscreen devices display content overlay when opened menu
167 background-color: #000;
178 // ---------------------------------------------------------------------------
180 // ---------------------------------------------------------------------------
183 display: flex !important;
185 height: 30px !important;
186 padding: 10px 15px !important;
190 font-size: 16px !important;
191 font-weight: $font-semibold !important;
194 opacity: 0.7 !important;
200 opacity: 1 !important;
205 @include disable-default-a-behaviour;
207 color: pvar(--mainForegroundColor);
211 .nav-tabs .nav-link {
212 @include disable-default-a-behaviour;
214 color: pvar(--mainForegroundColor);
215 font-weight: $font-semibold;
217 border-bottom: 2px solid transparent;
221 color: pvar(--mainForegroundColor);
222 background-color: pvar(--mainBackgroundColor) !important;
223 border-bottom-color: pvar(--mainColor);
234 // ---------------------------------------------------------------------------
235 // Card, collapse and accordion
236 // ---------------------------------------------------------------------------
239 background-color: pvar(--mainBackgroundColor);
240 border-color: #dee2e6;
243 .collapse-transition {
244 // Animation when we show/hide the filters
245 transition: max-height 0.3s;
246 display: block !important;
247 overflow: hidden !important;
252 overflow: inherit !important;
260 font-weight: $font-bold;
263 color: pvar(--mainColorLighter);
268 // ---------------------------------------------------------------------------
269 // Buttons & form controls
270 // ---------------------------------------------------------------------------
273 font-size: $button-font-size;
277 .btn-outline-secondary {
278 border-color: pvar(--inputBorderColor);
284 background-color: #6c757d;
288 .btn-group.select-button {
289 font-weight: $font-semibold;
292 @include orange-button;
296 @include grey-button;
300 @include peertube-button-link;
302 box-shadow: none !important;
304 &:not(:first-child) {
305 border-top-left-radius: 0 !important;
306 border-bottom-left-radius: 0 !important;
310 border-top-right-radius: 0 !important;
311 border-bottom-right-radius: 0 !important;
317 color: pvar(--mainForegroundColor);
318 background-color: pvar(--inputBackgroundColor);
324 > .input-group-text {
325 height: $button-height;
328 > .input-group-text {
333 .input-group-text > .dropdown-toggle {
341 border-top-right-radius: 3px !important;
342 border-bottom-right-radius: 3px !important;
348 @include padding-right(1.5rem !important);
351 .form-control-clear {
353 justify-content: center;
367 input:placeholder-shown + .form-control-clear {