client/src/sass/bootstrap.scss

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