client/src/sass/bootstrap.scss

   1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   2 @use '_bootstrap';
   3
   4 @use '_variables';
   5 @use '_mixins';
   6
   7 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
   8 .glyphicon-refresh-animate {
   9   animation: spin 0.7s infinite linear;
  10 }
  11
  12 .glyphicon-duplicate {
  13   font-size: 70%;
  14 }
  15
  16 .flex-auto {
  17   flex: auto;
  18 }
  19
  20 .c-hand {
  21   cursor: pointer;
  22 }
  23
  24 @keyframes spin {
  25   from {
  26     transform: scale(1) rotate(0deg);
  27   }
  28
  29   to {
  30     transform: scale(1) rotate(360deg);
  31   }
  32 }
  33
  34 /* rules for dropdowns excepts when in button group, to avoid impacting the dropdown-toggle */
  35 .dropdown {
  36   z-index: z(dropdown) !important;
  37 }
  38
  39 .list-overflow-menu,
  40 .parent-entry {
  41   z-index: z(header) - 1 !important;
  42 }
  43
  44 .btn-group,
  45 .dropdown-root,
  46 .action-dropdown,
  47 .input-group-prepend,
  48 .column-toggle {
  49   z-index: inherit !important;
  50 }
  51
  52 .btn-group > .btn:not(:first-child) {
  53   border-top-left-radius: 0 !important;
  54   border-bottom-left-radius: 0 !important;
  55 }
  56
  57 .dropdown-menu {
  58   z-index: z(dropdown) + 1 !important;
  59
  60   border-radius: 3px;
  61   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  62   font-size: 15px;
  63
  64   .dropdown-header {
  65     @include padding-left(1rem);
  66   }
  67
  68   .dropdown-item {
  69     padding: 3px 15px;
  70
  71     &.active {
  72       color: pvar(--mainBackgroundColor) !important;
  73       background-color: pvar(--mainHoverColor);
  74       opacity: 0.9;
  75     }
  76
  77     &:active {
  78       color: pvar(--mainForegroundColor) !important;
  79     }
  80
  81     &::after {
  82       display: none;
  83     }
  84   }
  85
  86   button {
  87     @include disable-default-a-behaviour;
  88   }
  89
  90   a {
  91     @include disable-default-a-behaviour;
  92     color: #000 !important;
  93   }
  94 }
  95
  96 .badge {
  97   line-height: 1.1;
  98 }
  99
 100 @media screen and (min-width: #{breakpoint(md)}) {
 101   .modal::before {
 102     vertical-align: middle;
 103     content: ' ';
 104     height: 100%;
 105   }
 106
 107   .modal-dialog {
 108     text-align: start;
 109
 110     &:not(.modal-lg):not(.modal-xl) {
 111       min-width: 500px;
 112       width: 40vw;
 113       max-width: 900px;
 114     }
 115   }
 116 }
 117
 118 .modal {
 119   text-align: center;
 120
 121   .modal-content {
 122     background-color: pvar(--mainBackgroundColor);
 123     word-break: break-word;
 124   }
 125
 126   .modal-header {
 127     border-bottom: 0;
 128     margin-bottom: 5px;
 129
 130     .modal-title {
 131       font-size: 20px;
 132       font-weight: $font-semibold;
 133     }
 134
 135     my-global-icon {
 136       @include icon(22px);
 137
 138       position: relative;
 139       top: 5px;
 140       float: right;
 141
 142       margin: 0;
 143       padding: 0;
 144       opacity: 0.5;
 145
 146       &[iconName=cross] { /* stylelint-disable-line selector-max-compound-selectors */
 147         @include icon(16px);
 148
 149         top: -3px;
 150       }
 151     }
 152   }
 153
 154   .inputs {
 155     margin-bottom: 0;
 156     text-align: end;
 157
 158     > .peertube-button:not(:first-child) {
 159       @include margin-left(10px);
 160     }
 161   }
 162 }
 163
 164
 165 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
 166 .modal-open {
 167   overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
 168   width: 100vw; // Make sure the content fits all the available width
 169 }
 170
 171 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
 172 @media (hover: none) and (pointer: coarse) {
 173   .modal-open,
 174   .menu-open {
 175     overflow: hidden !important;
 176   }
 177
 178   // On touchscreen devices display content overlay when opened menu
 179   .menu-open {
 180     .main-col {
 181       &::before {
 182         background-color: #000;
 183         width: 100vw;
 184         height: 100vh;
 185         opacity: 0.75;
 186         content: '';
 187         display: block;
 188         position: fixed;
 189         z-index: z('menu') - 1;
 190       }
 191     }
 192   }
 193 }
 194
 195 // Nav customizations
 196 .nav .nav-link {
 197   display: flex !important;
 198   align-items: center;
 199   height: 30px !important;
 200   padding: 10px 15px !important;
 201 }
 202
 203 .nav.nav-pills {
 204   font-size: 16px !important;
 205   font-weight: $font-semibold !important;
 206
 207   .nav-link {
 208     opacity: 0.6 !important;
 209
 210     &.active,
 211     &:hover,
 212     &:active,
 213     &:focus {
 214       opacity: 1 !important;
 215     }
 216   }
 217
 218   a {
 219     @include disable-default-a-behaviour;
 220
 221     color: pvar(--mainForegroundColor);
 222   }
 223 }
 224
 225 .nav-tabs .nav-link {
 226   @include disable-default-a-behaviour;
 227
 228   color: pvar(--mainForegroundColor);
 229   font-weight: $font-semibold;
 230   border: 0;
 231   border-bottom: 2px solid transparent;
 232   opacity: 0.6;
 233
 234   &.active {
 235     color: pvar(--mainForegroundColor);
 236     background-color: pvar(--mainBackgroundColor) !important;
 237     border-bottom-color: pvar(--mainColor);
 238   }
 239
 240   &.active,
 241   &:hover,
 242   &:active,
 243   &:focus {
 244     opacity: 1;
 245   }
 246 }
 247
 248 .card {
 249   background-color: pvar(--mainBackgroundColor);
 250   border-color: #dee2e6;
 251 }
 252
 253 .collapse-transition {
 254   // Animation when we show/hide the filters
 255   transition: max-height 0.3s;
 256   display: block !important;
 257   overflow: hidden !important;
 258   max-height: 0;
 259
 260   &.show {
 261     max-height: 1500px;
 262   }
 263 }
 264
 265 .dropdown-divider {
 266   margin: 0.3rem 0;
 267 }
 268
 269 ngb-modal-backdrop {
 270   z-index: z(modal) - 1 !important;
 271 }
 272
 273 ngb-modal-window {
 274   z-index: z(modal) !important;
 275 }
 276
 277 ngb-popover-window {
 278   z-index: z(popover) !important;
 279 }
 280
 281 ngb-tooltip-window {
 282   z-index: z(tooltip) !important;
 283 }
 284
 285 .btn-outline-secondary {
 286   border-color: $input-border-color;
 287
 288   &:focus-within,
 289   &:focus,
 290   &:hover {
 291     color: #fff;
 292     background-color: #6c757d;
 293   }
 294 }
 295
 296 .btn-outline-tertiary {
 297   color: pvar(--secondaryColor);
 298   border-color: pvar(--secondaryColor);
 299
 300   &:focus-within,
 301   &:focus,
 302   &:hover {
 303     color: pvar(--mainBackgroundColor);
 304     background-color: pvar(--secondaryColor);
 305   }
 306 }
 307
 308 // input box-shadow on focus
 309 .form-control {
 310   font-size: 15px;
 311   color: pvar(--mainForegroundColor);
 312   background-color: pvar(--inputBackgroundColor);
 313   outline: none;
 314
 315   &:focus-within,
 316   &:focus {
 317     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 318
 319     &.input-error {
 320       box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
 321     }
 322   }
 323 }
 324
 325 .input-group {
 326   > .form-control {
 327     flex: initial;
 328   }
 329
 330   input.form-control {
 331     width: unset !important;
 332     flex-grow: 1;
 333   }
 334
 335   .input-group-prepend + input {
 336     border-top-left-radius: 0 !important;
 337     border-bottom-left-radius: 0 !important;
 338   }
 339 }
 340
 341 .has-feedback.has-clear {
 342   position: relative;
 343
 344   input {
 345     @include padding-right(1.5rem !important);
 346   }
 347
 348   .form-control-clear {
 349     color: rgba(0, 0, 0, 0.4);
 350     /*
 351      * Enable pointer events as they have been disabled since Bootstrap 3.3
 352      * See https://github.com/twbs/bootstrap/pull/14104
 353      */
 354     pointer-events: all;
 355     display: flex;
 356     justify-content: center;
 357     align-items: center;
 358     position: absolute;
 359     right: .5rem;
 360     height: 95%;
 361     font-size: 14px;
 362
 363     &:hover {
 364       color: rgba(0, 0, 0, 0.7);
 365       cursor: pointer;
 366     }
 367   }
 368
 369   input:placeholder-shown + .form-control-clear {
 370     display: none;
 371   }
 372 }
 373
 374 .callout {
 375   padding: 1.25rem;
 376   border: 1px solid #eee;
 377   border-radius: .25rem;
 378
 379   > label {
 380     position: relative;
 381     top: -5px;
 382     left: -10px;
 383     color: #6c757d !important;
 384   }
 385
 386   &:not(.callout-light) {
 387     border-left-width: .25rem;
 388   }
 389
 390   &.callout-info {
 391     border-color: pvar(--mainColorLightest);
 392     border-left-color: pvar(--mainColor);
 393   }
 394 }
 395
 396 // Override these properties for Bidi support
 397 @each $size, $length in $spacers {
 398   .ml-#{$size} {
 399     @include margin-left($length);
 400   }
 401
 402   .mr-#{$size} {
 403     @include margin-right($length);
 404   }
 405
 406   .pl-#{$size} {
 407     @include padding-left($length);
 408   }
 409
 410   .pr-#{$size} {
 411     @include padding-right($length);
 412   }
 413 }