client/src/sass/bootstrap.scss

   1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   2
   3 @use '_variables' as *;
   4 @use '_mixins' as *;
   5
   6 @import './_bootstrap-variables';
   7
   8 @import '~bootstrap/scss/functions';
   9 @import '~bootstrap/scss/variables';
  10
  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';
  31
  32 @import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
  33
  34 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
  35 .glyphicon-refresh-animate {
  36   animation: spin 0.7s infinite linear;
  37 }
  38
  39 .glyphicon-duplicate {
  40   font-size: 70%;
  41 }
  42
  43 .flex-auto {
  44   flex: auto;
  45 }
  46
  47 .c-hand {
  48   cursor: pointer;
  49 }
  50
  51 @keyframes spin {
  52   from {
  53     transform: scale(1) rotate(0deg);
  54   }
  55
  56   to {
  57     transform: scale(1) rotate(360deg);
  58   }
  59 }
  60
  61 /* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
  62 .dropdown,
  63 .dropup {
  64   z-index: z(dropdown) !important;
  65 }
  66
  67 .list-overflow-menu,
  68 .parent-entry {
  69   z-index: z(menu) - 1 !important;
  70 }
  71
  72 .btn-group,
  73 .dropdown-root,
  74 .action-dropdown,
  75 .input-group-prepend,
  76 .column-toggle {
  77   z-index: inherit !important;
  78 }
  79
  80 .btn-group > .btn:not(:first-child) {
  81   border-top-left-radius: 0 !important;
  82   border-bottom-left-radius: 0 !important;
  83 }
  84
  85 .dropdown-menu {
  86   z-index: z(dropdown) + 1 !important;
  87
  88   border-radius: 3px;
  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);
  90   font-size: 15px;
  91
  92   color: pvar(--mainForegroundColor);
  93   background-color: pvar(--mainBackgroundColor);
  94
  95   .dropdown-header {
  96     @include padding-left(1rem);
  97   }
  98
  99   .dropdown-item {
 100     padding: 3px 15px;
 101
 102     color: pvar(--mainForegroundColor);
 103     background-color: pvar(--mainBackgroundColor);
 104
 105     &.active {
 106       color: pvar(--mainBackgroundColor) !important;
 107       background-color: pvar(--mainHoverColor);
 108       opacity: 0.9;
 109     }
 110
 111     a:active,
 112     &:hover {
 113       color: pvar(--mainForegroundColor) !important;
 114       background-color: pvar(--mainBackgroundHoverColor);
 115     }
 116
 117     &::after {
 118       display: none;
 119     }
 120   }
 121
 122   button {
 123     @include disable-default-a-behaviour;
 124   }
 125
 126   a {
 127     @include disable-default-a-behaviour;
 128   }
 129 }
 130
 131 .badge {
 132   line-height: 1.1;
 133 }
 134
 135 @media screen and (min-width: #{breakpoint(md)}) {
 136   .modal::before {
 137     vertical-align: middle;
 138     content: ' ';
 139     height: 100%;
 140   }
 141
 142   .modal-dialog {
 143     text-align: start;
 144
 145     &:not(.modal-lg):not(.modal-xl) {
 146       min-width: 500px;
 147       width: 40vw;
 148       max-width: 900px;
 149     }
 150   }
 151 }
 152
 153 .modal {
 154   text-align: center;
 155
 156   .modal-content {
 157     background-color: pvar(--mainBackgroundColor);
 158     word-break: break-word;
 159   }
 160
 161   .modal-header {
 162     border-bottom: 0;
 163     margin-bottom: 5px;
 164
 165     .modal-title {
 166       font-size: 20px;
 167       font-weight: $font-semibold;
 168     }
 169
 170     my-global-icon {
 171       @include icon(22px);
 172
 173       position: relative;
 174       top: 5px;
 175       float: right;
 176
 177       margin: 0;
 178       padding: 0;
 179       opacity: 0.5;
 180
 181       &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
 182         @include icon(16px);
 183
 184         top: -3px;
 185       }
 186     }
 187   }
 188
 189   .inputs {
 190     margin-bottom: 0;
 191     text-align: end;
 192
 193     > *:not(:first-child) {
 194       @include margin-left(10px);
 195     }
 196   }
 197 }
 198
 199
 200 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
 201 .modal-open {
 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
 204 }
 205
 206 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
 207 @media (hover: none) and (pointer: coarse) {
 208   .modal-open,
 209   .menu-open {
 210     overflow: hidden !important;
 211   }
 212
 213   // On touchscreen devices display content overlay when opened menu
 214   .menu-open {
 215     .main-col {
 216       &::before {
 217         background-color: #000;
 218         width: 100vw;
 219         height: 100vh;
 220         opacity: 0.75;
 221         content: '';
 222         display: block;
 223         position: fixed;
 224         z-index: z(overlay);
 225       }
 226     }
 227   }
 228 }
 229
 230 // Nav customizations
 231 .nav .nav-link {
 232   display: flex !important;
 233   align-items: center;
 234   height: 30px !important;
 235   padding: 10px 15px !important;
 236 }
 237
 238 .nav.nav-pills {
 239   font-size: 16px !important;
 240   font-weight: $font-semibold !important;
 241
 242   .nav-link {
 243     opacity: 0.6 !important;
 244
 245     &.active,
 246     &:hover,
 247     &:active,
 248     &:focus {
 249       opacity: 1 !important;
 250     }
 251   }
 252
 253   a {
 254     @include disable-default-a-behaviour;
 255
 256     color: pvar(--mainForegroundColor);
 257   }
 258 }
 259
 260 .nav-tabs .nav-link {
 261   @include disable-default-a-behaviour;
 262
 263   color: pvar(--mainForegroundColor);
 264   font-weight: $font-semibold;
 265   border: 0;
 266   border-bottom: 2px solid transparent;
 267   opacity: 0.6;
 268
 269   &.active {
 270     color: pvar(--mainForegroundColor);
 271     background-color: pvar(--mainBackgroundColor) !important;
 272     border-bottom-color: pvar(--mainColor);
 273   }
 274
 275   &.active,
 276   &:hover,
 277   &:active,
 278   &:focus {
 279     opacity: 1;
 280   }
 281 }
 282
 283 .card {
 284   background-color: pvar(--mainBackgroundColor);
 285   border-color: #dee2e6;
 286 }
 287
 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;
 293   max-height: 0;
 294
 295   &.show {
 296     max-height: 1500px;
 297     overflow: inherit !important;
 298   }
 299 }
 300
 301 .dropdown-divider {
 302   margin: 0.3rem 0;
 303 }
 304
 305 ngb-modal-backdrop {
 306   z-index: z(modal) - 1 !important;
 307 }
 308
 309 ngb-modal-window {
 310   z-index: z(modal) !important;
 311 }
 312
 313 ngb-popover-window {
 314   z-index: z(popover) !important;
 315 }
 316
 317 ngb-tooltip-window {
 318   z-index: z(tooltip) !important;
 319 }
 320
 321 .btn-outline-secondary {
 322   border-color: $input-border-color;
 323
 324   &:focus-within,
 325   &:focus,
 326   &:hover {
 327     color: #fff;
 328     background-color: #6c757d;
 329   }
 330 }
 331
 332 .btn-outline-tertiary {
 333   color: pvar(--secondaryColor);
 334   border-color: pvar(--secondaryColor);
 335
 336   &:focus-within,
 337   &:focus,
 338   &:hover {
 339     color: pvar(--mainBackgroundColor);
 340     background-color: pvar(--secondaryColor);
 341   }
 342 }
 343
 344 .btn-group.select-button {
 345   font-weight: $font-semibold;
 346
 347   .active {
 348     @include orange-button;
 349   }
 350
 351   :not(.active) {
 352     @include grey-button;
 353   }
 354
 355   > * {
 356     @include peertube-button-link;
 357
 358     box-shadow: none !important;
 359
 360     &:not(:first-child) {
 361       border-top-left-radius: 0 !important;
 362       border-bottom-left-radius: 0 !important;
 363     }
 364
 365     &:not(:last-child) {
 366       border-top-right-radius: 0 !important;
 367       border-bottom-right-radius: 0 !important;
 368     }
 369   }
 370 }
 371
 372 // input box-shadow on focus
 373 .form-control {
 374   font-size: 15px;
 375   color: pvar(--mainForegroundColor);
 376   background-color: pvar(--inputBackgroundColor);
 377   outline: none;
 378
 379   &:focus-within,
 380   &:focus {
 381     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 382
 383     &.input-error {
 384       box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
 385     }
 386   }
 387 }
 388
 389 .input-group {
 390   > .form-control {
 391     flex: initial;
 392   }
 393
 394   input.form-control {
 395     width: unset !important;
 396     flex-grow: 1;
 397   }
 398
 399   .input-group-prepend + input {
 400     border-top-left-radius: 0 !important;
 401     border-bottom-left-radius: 0 !important;
 402   }
 403 }
 404
 405 .has-feedback.has-clear {
 406   position: relative;
 407
 408   input {
 409     @include padding-right(1.5rem !important);
 410   }
 411
 412   .form-control-clear {
 413     color: rgba(0, 0, 0, 0.4);
 414     /*
 415      * Enable pointer events as they have been disabled since Bootstrap 3.3
 416      * See https://github.com/twbs/bootstrap/pull/14104
 417      */
 418     pointer-events: all;
 419     display: flex;
 420     justify-content: center;
 421     align-items: center;
 422     position: absolute;
 423     right: .5rem;
 424     height: 95%;
 425     font-size: 14px;
 426
 427     &:hover {
 428       color: rgba(0, 0, 0, 0.7);
 429       cursor: pointer;
 430     }
 431   }
 432
 433   input:placeholder-shown + .form-control-clear {
 434     display: none;
 435   }
 436 }
 437
 438 .callout {
 439   padding: 1.25rem;
 440   border: 1px solid #eee;
 441   border-radius: .25rem;
 442
 443   > label {
 444     position: relative;
 445     top: -5px;
 446     left: -10px;
 447     color: #6c757d !important;
 448   }
 449
 450   &:not(.callout-light) {
 451     border-left-width: .25rem;
 452   }
 453
 454   &.callout-info {
 455     border-color: pvar(--mainColorLightest);
 456     border-left-color: pvar(--mainColor);
 457   }
 458 }
 459
 460 // Override these properties for Bidi support
 461 @each $size, $length in $spacers {
 462   .ml-#{$size} {
 463     @include margin-left($length);
 464   }
 465
 466   .mr-#{$size} {
 467     @include margin-right($length);
 468   }
 469
 470   .pl-#{$size} {
 471     @include padding-left($length);
 472   }
 473
 474   .pr-#{$size} {
 475     @include padding-right($length);
 476   }
 477 }