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 .btn-group > .btn:not(:first-child) {
  62   border-top-left-radius: 0 !important;
  63   border-bottom-left-radius: 0 !important;
  64 }
  65
  66 .dropdown-menu {
  67   border-radius: 3px;
  68   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);
  69   font-size: 15px;
  70
  71   color: pvar(--mainForegroundColor);
  72   background-color: pvar(--mainBackgroundColor);
  73
  74   .dropdown-header {
  75     @include padding-left(1rem);
  76   }
  77
  78   .dropdown-item {
  79     padding: 3px 15px;
  80
  81     color: pvar(--mainForegroundColor);
  82     background-color: pvar(--mainBackgroundColor);
  83
  84     &.active {
  85       color: pvar(--mainBackgroundColor) !important;
  86       background-color: pvar(--mainHoverColor);
  87       opacity: 0.9;
  88     }
  89
  90     a:active,
  91     &:hover {
  92       color: pvar(--mainForegroundColor) !important;
  93       background-color: pvar(--mainBackgroundHoverColor);
  94     }
  95
  96     &::after {
  97       display: none;
  98     }
  99   }
 100
 101   button {
 102     @include disable-default-a-behaviour;
 103   }
 104
 105   a {
 106     @include disable-default-a-behaviour;
 107   }
 108 }
 109
 110 .badge {
 111   line-height: 1.1;
 112 }
 113
 114 @media screen and (min-width: #{breakpoint(md)}) {
 115   .modal::before {
 116     vertical-align: middle;
 117     content: ' ';
 118     height: 100%;
 119   }
 120
 121   .modal-dialog {
 122     text-align: start;
 123
 124     &:not(.modal-lg):not(.modal-xl) {
 125       min-width: 500px;
 126       width: 40vw;
 127       max-width: 900px;
 128     }
 129   }
 130 }
 131
 132 .modal {
 133   text-align: center;
 134
 135   .modal-content {
 136     background-color: pvar(--mainBackgroundColor);
 137     word-break: break-word;
 138   }
 139
 140   .modal-header {
 141     border-bottom: 0;
 142     margin-bottom: 5px;
 143
 144     .modal-title {
 145       font-size: 20px;
 146       font-weight: $font-semibold;
 147     }
 148
 149     my-global-icon {
 150       @include icon(22px);
 151
 152       position: relative;
 153       top: 5px;
 154       float: right;
 155
 156       margin: 0;
 157       padding: 0;
 158       opacity: 0.5;
 159
 160       &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
 161         @include icon(16px);
 162
 163         top: -3px;
 164       }
 165     }
 166   }
 167
 168   .inputs {
 169     margin-bottom: 0;
 170     text-align: end;
 171
 172     > *:not(:first-child) {
 173       @include margin-left(10px);
 174     }
 175   }
 176 }
 177
 178
 179 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
 180 .modal-open {
 181   overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
 182   width: 100vw; // Make sure the content fits all the available width
 183 }
 184
 185 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
 186 @media (hover: none) and (pointer: coarse) {
 187   .modal-open,
 188   .menu-open {
 189     overflow: hidden !important;
 190   }
 191
 192   // On touchscreen devices display content overlay when opened menu
 193   .menu-open {
 194     .main-col {
 195       &::before {
 196         background-color: #000;
 197         width: 100vw;
 198         height: 100vh;
 199         opacity: 0.75;
 200         content: '';
 201         display: block;
 202         position: fixed;
 203         z-index: z(overlay);
 204       }
 205     }
 206   }
 207 }
 208
 209 // Nav customizations
 210 .nav .nav-link {
 211   display: flex !important;
 212   align-items: center;
 213   height: 30px !important;
 214   padding: 10px 15px !important;
 215 }
 216
 217 .nav.nav-pills {
 218   font-size: 16px !important;
 219   font-weight: $font-semibold !important;
 220
 221   .nav-link {
 222     opacity: 0.6 !important;
 223
 224     &.active,
 225     &:hover,
 226     &:active,
 227     &:focus {
 228       opacity: 1 !important;
 229     }
 230   }
 231
 232   a {
 233     @include disable-default-a-behaviour;
 234
 235     color: pvar(--mainForegroundColor);
 236   }
 237 }
 238
 239 .nav-tabs .nav-link {
 240   @include disable-default-a-behaviour;
 241
 242   color: pvar(--mainForegroundColor);
 243   font-weight: $font-semibold;
 244   border: 0;
 245   border-bottom: 2px solid transparent;
 246   opacity: 0.6;
 247
 248   &.active {
 249     color: pvar(--mainForegroundColor);
 250     background-color: pvar(--mainBackgroundColor) !important;
 251     border-bottom-color: pvar(--mainColor);
 252   }
 253
 254   &.active,
 255   &:hover,
 256   &:active,
 257   &:focus {
 258     opacity: 1;
 259   }
 260 }
 261
 262 .card {
 263   background-color: pvar(--mainBackgroundColor);
 264   border-color: #dee2e6;
 265 }
 266
 267 .collapse-transition {
 268   // Animation when we show/hide the filters
 269   transition: max-height 0.3s;
 270   display: block !important;
 271   overflow: hidden !important;
 272   max-height: 0;
 273
 274   &.show {
 275     max-height: 1500px;
 276     overflow: inherit !important;
 277   }
 278 }
 279
 280 .dropdown-divider {
 281   margin: 0.3rem 0;
 282 }
 283
 284 .btn-outline-secondary {
 285   border-color: $input-border-color;
 286
 287   &:focus-within,
 288   &:focus,
 289   &:hover {
 290     color: #fff;
 291     background-color: #6c757d;
 292   }
 293 }
 294
 295 .btn-outline-tertiary {
 296   color: pvar(--secondaryColor);
 297   border-color: pvar(--secondaryColor);
 298
 299   &:focus-within,
 300   &:focus,
 301   &:hover {
 302     color: pvar(--mainBackgroundColor);
 303     background-color: pvar(--secondaryColor);
 304   }
 305 }
 306
 307 .btn-group.select-button {
 308   font-weight: $font-semibold;
 309
 310   .active {
 311     @include orange-button;
 312   }
 313
 314   :not(.active) {
 315     @include grey-button;
 316   }
 317
 318   > * {
 319     @include peertube-button-link;
 320
 321     box-shadow: none !important;
 322
 323     &:not(:first-child) {
 324       border-top-left-radius: 0 !important;
 325       border-bottom-left-radius: 0 !important;
 326     }
 327
 328     &:not(:last-child) {
 329       border-top-right-radius: 0 !important;
 330       border-bottom-right-radius: 0 !important;
 331     }
 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 }