client/src/sass/bootstrap.scss

   1 @use '_variables' as *;
   2 @use '_mixins' as *;
   3
   4 @import './_bootstrap-variables';
   5
   6 @import 'bootstrap/scss/functions';
   7 @import 'bootstrap/scss/variables';
   8 @import 'bootstrap/scss/maps';
   9 @import 'bootstrap/scss/mixins';
  10 @import 'bootstrap/scss/utilities';
  11
  12 @import 'bootstrap/scss/root';
  13 @import 'bootstrap/scss/reboot';
  14 @import 'bootstrap/scss/type';
  15 @import 'bootstrap/scss/grid';
  16 @import 'bootstrap/scss/forms';
  17 @import 'bootstrap/scss/buttons';
  18 @import 'bootstrap/scss/transitions';
  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';
  29 @import 'bootstrap/scss/spinners';
  30
  31 @import 'bootstrap/scss/helpers';
  32 @import 'bootstrap/scss/utilities/api';
  33
  34 body {
  35   --bs-border-color-translucent: #{pvar(--inputBorderColor)};
  36 }
  37
  38 .accordion {
  39   --bs-accordion-color: #{pvar(--mainForegroundColor)};
  40   --bs-accordion-bg: #{pvar(--mainBackgroundColor)};
  41
  42   --bs-accordion-btn-color: var(--bs-accordion-color);
  43   --bs-accordion-btn-bg: var(--bs-accordion-bg);
  44 }
  45
  46 .popover {
  47   --bs-popover-bg: #{pvar(--mainBackgroundColor)};
  48   --bs-popover-body-color: #{pvar(--mainForegroundColor)};
  49   --bs-popover-header-color: #{pvar(--mainForegroundColor)};
  50
  51   font-family: $main-fonts;
  52 }
  53
  54 .flex-auto {
  55   flex: auto;
  56 }
  57
  58 .c-hand {
  59   cursor: pointer !important;
  60 }
  61
  62 // ---------------------------------------------------------------------------
  63 // Dropdown
  64 // ---------------------------------------------------------------------------
  65
  66 .dropdown-menu {
  67   --bs-dropdown-link-hover-bg: #{pvar(--mainBackgroundHoverColor)};
  68   --bs-dropdown-link-color: #{pvar(--mainForegroundColor)};
  69   --bs-dropdown-border-color: #{pvar(--inputBorderColor)};
  70
  71   text-align: start;
  72
  73   .dropdown-header {
  74     @include padding-left(1rem);
  75   }
  76
  77   .dropdown-item {
  78     padding: 3px 15px;
  79
  80     &.active {
  81       color: pvar(--mainBackgroundColor) !important;
  82       background-color: pvar(--mainHoverColor);
  83       opacity: 0.9;
  84     }
  85
  86     &::after {
  87       display: none;
  88     }
  89   }
  90
  91   a {
  92     @include disable-default-a-behaviour;
  93   }
  94 }
  95
  96 .dropdown-divider {
  97   margin: 0.3rem 0;
  98 }
  99
 100 // ---------------------------------------------------------------------------
 101 // Alert
 102 // ---------------------------------------------------------------------------
 103
 104 .alert {
 105   p:last-child {
 106     margin-bottom: 0;
 107   }
 108 }
 109
 110 // ---------------------------------------------------------------------------
 111 // Modal
 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       opacity: 0.5;
 153
 154       &:hover {
 155         opacity: 0.8;
 156       }
 157     }
 158   }
 159
 160   .inputs {
 161     margin-bottom: 0;
 162     text-align: end;
 163
 164     > *:not(:first-child) {
 165       @include margin-left(10px);
 166     }
 167   }
 168 }
 169
 170
 171 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
 172 .modal-open {
 173   overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
 174   width: 100vw; // Make sure the content fits all the available width
 175 }
 176
 177 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
 178 @media (hover: none) and (pointer: coarse) {
 179   .modal-open,
 180   .menu-open {
 181     overflow: hidden !important;
 182   }
 183
 184   // On touchscreen devices display content overlay when opened menu
 185   .menu-open {
 186     .main-col {
 187       &::before {
 188         background-color: #000;
 189         width: 100vw;
 190         height: 100vh;
 191         opacity: 0.75;
 192         content: '';
 193         display: block;
 194         position: fixed;
 195         z-index: z(overlay);
 196       }
 197     }
 198   }
 199 }
 200
 201 // ---------------------------------------------------------------------------
 202 // Nav
 203 // ---------------------------------------------------------------------------
 204
 205 .nav .nav-link {
 206   display: flex !important;
 207   align-items: center;
 208   height: 30px !important;
 209 }
 210
 211 .nav.nav-pills {
 212   font-size: 16px !important;
 213   font-weight: $font-semibold !important;
 214
 215   .nav-link {
 216     opacity: 0.7 !important;
 217
 218     &.active,
 219     &:hover,
 220     &:active,
 221     &:focus {
 222       opacity: 1 !important;
 223     }
 224   }
 225
 226   a {
 227     @include disable-default-a-behaviour;
 228
 229     color: pvar(--mainForegroundColor);
 230   }
 231 }
 232
 233 .nav-tabs .nav-link {
 234   @include disable-default-a-behaviour;
 235
 236   color: pvar(--mainForegroundColor);
 237   font-weight: $font-semibold;
 238   border: 0;
 239   border-bottom: 2px solid transparent;
 240   opacity: 0.7;
 241
 242   &.active {
 243     color: pvar(--mainForegroundColor);
 244     background-color: pvar(--mainBackgroundColor) !important;
 245     border-bottom-color: pvar(--mainColor);
 246   }
 247
 248   &.active,
 249   &:hover,
 250   &:active,
 251   &:focus {
 252     opacity: 1;
 253   }
 254 }
 255
 256 // ---------------------------------------------------------------------------
 257 // Card, collapse and accordion
 258 // ---------------------------------------------------------------------------
 259
 260 .card {
 261   background-color: pvar(--mainBackgroundColor);
 262   border-color: #dee2e6;
 263 }
 264
 265 .accordion-button {
 266   font-size: 18px;
 267
 268   &:not(.collapsed) {
 269     font-weight: $font-bold;
 270
 271     my-global-icon {
 272       color: pvar(--mainColorLighter);
 273     }
 274   }
 275 }
 276
 277 // ---------------------------------------------------------------------------
 278 // Buttons & form controls
 279 // ---------------------------------------------------------------------------
 280
 281 .btn:not(.btn-sm) {
 282   font-size: $button-font-size;
 283   line-height: 1.2;
 284 }
 285
 286 .btn-outline-secondary {
 287   border-color: pvar(--inputBorderColor);
 288
 289   &:focus-within,
 290   &:focus,
 291   &:hover {
 292     color: #fff;
 293     background-color: #6c757d;
 294   }
 295 }
 296
 297 .btn-group.select-button {
 298   font-weight: $font-semibold;
 299
 300   .active {
 301     @include orange-button;
 302   }
 303
 304   :not(.active) {
 305     @include grey-button;
 306   }
 307
 308   > * {
 309     @include peertube-button-link;
 310
 311     box-shadow: none !important;
 312
 313     &:not(:first-child) {
 314       border-top-left-radius: 0 !important;
 315       border-bottom-left-radius: 0 !important;
 316     }
 317
 318     &:not(:last-child) {
 319       border-top-right-radius: 0 !important;
 320       border-bottom-right-radius: 0 !important;
 321     }
 322   }
 323 }
 324
 325 .form-control {
 326   color: pvar(--mainForegroundColor);
 327   background-color: pvar(--inputBackgroundColor);
 328   outline: none;
 329 }
 330
 331 .input-group {
 332   > .btn,
 333   > .input-group-text {
 334     padding-top: 4px;
 335     padding-bottom: 4px;
 336   }
 337
 338   > .input-group-text {
 339     line-height: normal;
 340     opacity: 0.9;
 341   }
 342
 343   .input-group-text > .dropdown-toggle {
 344     display: flex;
 345   }
 346 }
 347
 348 .input-group,
 349 .btn-group {
 350   .last-in-group {
 351     border-top-right-radius: 3px !important;
 352     border-bottom-right-radius: 3px !important;
 353   }
 354 }
 355
 356 .has-clear {
 357   input {
 358     @include padding-right(1.5rem !important);
 359   }
 360
 361   .form-control-clear {
 362     display: flex;
 363     justify-content: center;
 364     align-items: center;
 365     height: 95%;
 366     font-size: 14px;
 367     position: absolute;
 368     right: .5rem;
 369     opacity: 0.4;
 370
 371     &:hover {
 372       opacity: 0.7;
 373       cursor: pointer;
 374     }
 375   }
 376
 377   input:placeholder-shown + .form-control-clear {
 378     display: none;
 379   }
 380 }
 381
 382 .text-truncate {
 383   // Prevent invalid height in parent: https://stackoverflow.com/a/22425601
 384   vertical-align: top;
 385 }