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