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