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
  48 .dropdown-menu {
  49   z-index: z(dropdown) + 1 !important;
  50
  51   border-radius: 3px;
  52   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);
  53   font-size: 15px;
  54
  55   .dropdown-header {
  56     padding-left: 1rem;
  57   }
  58
  59   .dropdown-item {
  60     padding: 3px 15px;
  61
  62     &.active {
  63       color: pvar(--mainBackgroundColor) !important;
  64       background-color: pvar(--mainHoverColor);
  65       opacity: .9;
  66     }
  67
  68     &::after {
  69       display: none;
  70     }
  71   }
  72
  73   button {
  74     @include disable-default-a-behaviour;
  75   }
  76
  77   a {
  78     @include disable-default-a-behaviour;
  79     color: #000 !important;
  80   }
  81 }
  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: left;
  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   }
 108
 109   .modal-header {
 110     border-bottom: none;
 111     margin-bottom: 5px;
 112
 113     .modal-title {
 114       font-size: 20px;
 115       font-weight: $font-semibold;
 116     }
 117
 118     my-global-icon {
 119       @include icon(22px);
 120
 121       position: relative;
 122       top: 5px;
 123       float: right;
 124
 125       margin: 0;
 126       padding: 0;
 127       opacity: .5;
 128
 129       &[iconName="cross"] {
 130         @include icon(16px);
 131         top: -3px;
 132       }
 133     }
 134   }
 135
 136   .inputs {
 137     margin-bottom: 0;
 138     text-align: right;
 139
 140     .action-button-cancel {
 141       @include peertube-button;
 142       @include tertiary-button;
 143
 144       display: inline-block;
 145       margin-right: 10px;
 146     }
 147
 148     .action-button-submit {
 149       @include peertube-button;
 150       @include orange-button;
 151     }
 152   }
 153 }
 154
 155
 156 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
 157 .modal-open {
 158   overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
 159   width: 100vw; // Make sure the content fits all the available width
 160 }
 161
 162 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
 163 @media (hover: none) and (pointer: coarse) {
 164   .modal-open, .menu-open {
 165     overflow: hidden !important;
 166   }
 167
 168   // On touchscreen devices display content overlay when opened menu
 169   .menu-open {
 170     .main-col {
 171       &::before {
 172         background-color: black;
 173         width: 100vw;
 174         height: 100vh;
 175         opacity: 0.75;
 176         content: '';
 177         display: block;
 178         position: fixed;
 179         z-index: z('menu') - 1;
 180       }
 181     }
 182   }
 183 }
 184
 185 // Nav customizations
 186 .nav .nav-link {
 187   display: flex !important;
 188   align-items: center;
 189   height: 30px !important;
 190   padding: 10px 15px !important;
 191 }
 192
 193 .nav.nav-pills {
 194   font-size: 16px !important;
 195   font-weight: $font-semibold !important;
 196
 197   .nav-link {
 198     opacity: 0.6 !important;
 199
 200     &.active, &:hover, &:active, &: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: none;
 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, &:hover, &:active, &:focus {
 228     opacity: 1;
 229   }
 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   }
 247 }
 248
 249 .dropdown-divider {
 250   margin: 0.3rem 0;
 251 }
 252
 253 ngb-modal-backdrop {
 254   z-index: z(modal) - 1 !important;
 255 }
 256
 257 ngb-modal-window {
 258   z-index: z(modal) !important;
 259 }
 260
 261 ngb-popover-window {
 262   z-index: z(popover) !important;
 263 }
 264
 265 ngb-tooltip-window {
 266   z-index: z(tooltip) !important;
 267 }
 268
 269 .btn-outline-secondary {
 270   border-color: $input-border-color;
 271
 272   &:focus-within,
 273   &:focus,
 274   &:hover {
 275     color: #fff;
 276     background-color: #6c757d;
 277   }
 278 }
 279
 280 .btn-outline-tertiary {
 281   color: pvar(--secondaryColor);
 282   border-color: pvar(--secondaryColor);
 283
 284   &:focus-within,
 285   &:focus,
 286   &:hover {
 287     color: pvar(--mainBackgroundColor);
 288     background-color: pvar(--secondaryColor);
 289   }
 290 }
 291
 292 // input box-shadow on focus
 293 .form-control {
 294   font-size: 15px;
 295   color: pvar(--mainForegroundColor);
 296   background-color: pvar(--inputBackgroundColor);
 297   outline: none;
 298
 299   &:focus-within,
 300   &:focus {
 301     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 302
 303     &.input-error {
 304       box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
 305     }
 306   }
 307 }
 308
 309 .input-group {
 310   & > .form-control {
 311     flex: initial;
 312   }
 313   input.form-control {
 314     width: unset !important;
 315     flex-grow: 1;
 316   }
 317
 318   .input-group-prepend + input {
 319     border-top-left-radius: 0 !important;
 320     border-bottom-left-radius: 0 !important;
 321   }
 322 }
 323
 324 .has-feedback.has-clear {
 325   position: relative;
 326
 327   input {
 328     padding-right: 1.5rem !important;
 329   }
 330
 331   .form-control-clear {
 332     color: rgba(0, 0, 0, 0.4);
 333     /*
 334      * Enable pointer events as they have been disabled since Bootstrap 3.3
 335      * See https://github.com/twbs/bootstrap/pull/14104
 336      */
 337     pointer-events: all;
 338     display: flex;
 339     justify-content: center;
 340     align-items: center;
 341     position: absolute;
 342     right: .5rem;
 343     height: 95%;
 344     font-size: 14px;
 345
 346     &:hover {
 347       color: rgba(0, 0, 0, 0.7);
 348       cursor: pointer;
 349     }
 350   }
 351
 352   input:placeholder-shown + .form-control-clear {
 353     display: none;
 354   }
 355 }