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