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