1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
3 @use '_variables' as *;
6 @import './_bootstrap-variables';
8 @import '~bootstrap/scss/functions';
9 @import '~bootstrap/scss/variables';
11 @import '~bootstrap/scss/mixins';
12 @import '~bootstrap/scss/root';
13 @import '~bootstrap/scss/reboot';
14 @import '~bootstrap/scss/type';
15 @import '~bootstrap/scss/grid';
16 @import '~bootstrap/scss/tables';
17 @import '~bootstrap/scss/forms';
18 @import '~bootstrap/scss/buttons';
19 @import '~bootstrap/scss/dropdown';
20 @import '~bootstrap/scss/button-group';
21 @import '~bootstrap/scss/input-group';
22 @import '~bootstrap/scss/nav';
23 @import '~bootstrap/scss/card';
24 @import '~bootstrap/scss/badge';
25 @import '~bootstrap/scss/alert';
26 @import '~bootstrap/scss/close';
27 @import '~bootstrap/scss/modal';
28 @import '~bootstrap/scss/tooltip';
29 @import '~bootstrap/scss/popover';
30 @import '~bootstrap/scss/utilities';
32 @import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
34 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
35 .glyphicon-refresh-animate {
36 animation: spin 0.7s infinite linear;
39 .glyphicon-duplicate {
53 transform: scale(1) rotate(0deg);
57 transform: scale(1) rotate(360deg);
61 /* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
64 z-index: z(dropdown) !important;
69 z-index: z(menu) - 1 !important;
77 z-index: inherit !important;
80 .btn-group > .btn:not(:first-child) {
81 border-top-left-radius: 0 !important;
82 border-bottom-left-radius: 0 !important;
86 z-index: z(dropdown) + 1 !important;
89 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
92 color: pvar(--mainForegroundColor);
93 background-color: pvar(--mainBackgroundColor);
96 @include padding-left(1rem);
102 color: pvar(--mainForegroundColor);
103 background-color: pvar(--mainBackgroundColor);
106 color: pvar(--mainBackgroundColor) !important;
107 background-color: pvar(--mainHoverColor);
113 color: pvar(--mainForegroundColor) !important;
114 background-color: pvar(--mainBackgroundHoverColor);
123 @include disable-default-a-behaviour;
127 @include disable-default-a-behaviour;
135 @media screen and (min-width: #{breakpoint(md)}) {
137 vertical-align: middle;
145 &:not(.modal-lg):not(.modal-xl) {
157 background-color: pvar(--mainBackgroundColor);
158 word-break: break-word;
167 font-weight: $font-semibold;
181 &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
193 > .peertube-button:not(:first-child) {
194 @include margin-left(10px);
200 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
202 overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
203 width: 100vw; // Make sure the content fits all the available width
206 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
207 @media (hover: none) and (pointer: coarse) {
210 overflow: hidden !important;
213 // On touchscreen devices display content overlay when opened menu
217 background-color: #000;
230 // Nav customizations
232 display: flex !important;
234 height: 30px !important;
235 padding: 10px 15px !important;
239 font-size: 16px !important;
240 font-weight: $font-semibold !important;
243 opacity: 0.6 !important;
249 opacity: 1 !important;
254 @include disable-default-a-behaviour;
256 color: pvar(--mainForegroundColor);
260 .nav-tabs .nav-link {
261 @include disable-default-a-behaviour;
263 color: pvar(--mainForegroundColor);
264 font-weight: $font-semibold;
266 border-bottom: 2px solid transparent;
270 color: pvar(--mainForegroundColor);
271 background-color: pvar(--mainBackgroundColor) !important;
272 border-bottom-color: pvar(--mainColor);
284 background-color: pvar(--mainBackgroundColor);
285 border-color: #dee2e6;
288 .collapse-transition {
289 // Animation when we show/hide the filters
290 transition: max-height 0.3s;
291 display: block !important;
292 overflow: hidden !important;
297 overflow: inherit !important;
306 z-index: z(modal) - 1 !important;
310 z-index: z(modal) !important;
314 z-index: z(popover) !important;
318 z-index: z(tooltip) !important;
321 .btn-outline-secondary {
322 border-color: $input-border-color;
328 background-color: #6c757d;
332 .btn-outline-tertiary {
333 color: pvar(--secondaryColor);
334 border-color: pvar(--secondaryColor);
339 color: pvar(--mainBackgroundColor);
340 background-color: pvar(--secondaryColor);
344 .btn-group.select-button {
345 font-weight: $font-semibold;
348 @include orange-button;
352 @include grey-button;
356 @include peertube-button-link;
358 box-shadow: none !important;
360 &:not(:first-child) {
361 border-top-left-radius: 0 !important;
362 border-bottom-left-radius: 0 !important;
366 border-top-right-radius: 0 !important;
367 border-bottom-right-radius: 0 !important;
372 // input box-shadow on focus
375 color: pvar(--mainForegroundColor);
376 background-color: pvar(--inputBackgroundColor);
381 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
384 box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
395 width: unset !important;
399 .input-group-prepend + input {
400 border-top-left-radius: 0 !important;
401 border-bottom-left-radius: 0 !important;
405 .has-feedback.has-clear {
409 @include padding-right(1.5rem !important);
412 .form-control-clear {
413 color: rgba(0, 0, 0, 0.4);
415 * Enable pointer events as they have been disabled since Bootstrap 3.3
416 * See https://github.com/twbs/bootstrap/pull/14104
420 justify-content: center;
428 color: rgba(0, 0, 0, 0.7);
433 input:placeholder-shown + .form-control-clear {
440 border: 1px solid #eee;
441 border-radius: .25rem;
447 color: #6c757d !important;
450 &:not(.callout-light) {
451 border-left-width: .25rem;
455 border-color: pvar(--mainColorLightest);
456 border-left-color: pvar(--mainColor);
460 // Override these properties for Bidi support
461 @each $size, $length in $spacers {
463 @include margin-left($length);
467 @include margin-right($length);
471 @include padding-left($length);
475 @include padding-right($length);