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';
10 @import '~bootstrap/scss/mixins';
11 @import '~bootstrap/scss/utilities';
13 @import '~bootstrap/scss/root';
14 @import '~bootstrap/scss/reboot';
15 @import '~bootstrap/scss/type';
16 @import '~bootstrap/scss/grid';
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/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';
30 @import '~bootstrap/scss/helpers';
31 @import '~bootstrap/scss/utilities/api';
33 @import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
35 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
36 .glyphicon-refresh-animate {
37 animation: spin 0.7s infinite linear;
45 cursor: pointer !important;
50 transform: scale(1) rotate(0deg);
54 transform: scale(1) rotate(360deg);
58 // ---------------------------------------------------------------------------
60 // ---------------------------------------------------------------------------
64 color: pvar(--mainForegroundColor);
65 background-color: pvar(--mainBackgroundColor);
68 @include padding-left(1rem);
75 color: pvar(--mainBackgroundColor) !important;
76 background-color: pvar(--mainHoverColor);
86 @include disable-default-a-behaviour;
94 // ---------------------------------------------------------------------------
96 // ---------------------------------------------------------------------------
98 @media screen and (min-width: #{breakpoint(md)}) {
100 vertical-align: middle;
108 &:not(.modal-lg):not(.modal-xl) {
120 background-color: pvar(--mainBackgroundColor);
121 word-break: break-word;
130 font-weight: $font-semibold;
144 &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
156 > *:not(:first-child) {
157 @include margin-left(10px);
163 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
165 overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
166 width: 100vw; // Make sure the content fits all the available width
169 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
170 @media (hover: none) and (pointer: coarse) {
173 overflow: hidden !important;
176 // On touchscreen devices display content overlay when opened menu
180 background-color: #000;
193 // ---------------------------------------------------------------------------
195 // ---------------------------------------------------------------------------
198 display: flex !important;
200 height: 30px !important;
201 padding: 10px 15px !important;
205 font-size: 16px !important;
206 font-weight: $font-semibold !important;
209 opacity: 0.6 !important;
215 opacity: 1 !important;
220 @include disable-default-a-behaviour;
222 color: pvar(--mainForegroundColor);
226 .nav-tabs .nav-link {
227 @include disable-default-a-behaviour;
229 color: pvar(--mainForegroundColor);
230 font-weight: $font-semibold;
232 border-bottom: 2px solid transparent;
236 color: pvar(--mainForegroundColor);
237 background-color: pvar(--mainBackgroundColor) !important;
238 border-bottom-color: pvar(--mainColor);
249 // ---------------------------------------------------------------------------
250 // Card, collapse and accordion
251 // ---------------------------------------------------------------------------
254 background-color: pvar(--mainBackgroundColor);
255 border-color: #dee2e6;
258 .collapse-transition {
259 // Animation when we show/hide the filters
260 transition: max-height 0.3s;
261 display: block !important;
262 overflow: hidden !important;
267 overflow: inherit !important;
271 // ---------------------------------------------------------------------------
272 // Buttons & form controls
273 // ---------------------------------------------------------------------------
275 .btn-outline-secondary {
276 border-color: $input-border-color;
282 background-color: #6c757d;
286 .btn-group.select-button {
287 font-weight: $font-semibold;
290 @include orange-button;
294 @include grey-button;
298 @include peertube-button-link;
300 box-shadow: none !important;
302 &:not(:first-child) {
303 border-top-left-radius: 0 !important;
304 border-bottom-left-radius: 0 !important;
308 border-top-right-radius: 0 !important;
309 border-bottom-right-radius: 0 !important;
316 color: pvar(--mainForegroundColor);
317 background-color: pvar(--inputBackgroundColor);
320 // Input box-shadow on focus
323 box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
326 box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
333 > .input-group-text {
334 height: $button-height;
337 > .input-group-text {
343 .input-group-text > .dropdown-toggle {
348 border-top-right-radius: 3px !important;
349 border-bottom-right-radius: 3px !important;
357 @include padding-right(1.5rem !important);
360 .form-control-clear {
361 color: rgba(0, 0, 0, 0.4);
363 justify-content: center;
371 color: rgba(0, 0, 0, 0.7);
376 input:placeholder-shown + .form-control-clear {