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