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