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
  92 @media screen and (min-width: #{breakpoint(md)}) {
  93   .modal:before {
  94     vertical-align: middle;
  95     content: " ";
  96     height: 100%;
  97   }
  98
  99   .modal-dialog {
 100     text-align: left;
 101
 102     &:not(.modal-lg):not(.modal-xl) {
 103       min-width: 500px;
 104       width: 40vw;
 105       max-width: 900px;
 106     }
 107   }
 108 }
 109
 110 .modal {
 111   text-align: center;
 112
 113   .modal-content {
 114     background-color: pvar(--mainBackgroundColor);
 115   }
 116
 117   .modal-header {
 118     border-bottom: none;
 119     margin-bottom: 5px;
 120
 121     .modal-title {
 122       font-size: 20px;
 123       font-weight: $font-semibold;
 124     }
 125
 126     my-global-icon {
 127       @include icon(22px);
 128
 129       position: relative;
 130       top: 5px;
 131       float: right;
 132
 133       margin: 0;
 134       padding: 0;
 135       opacity: .5;
 136
 137       &[iconName="cross"] {
 138         @include icon(16px);
 139         top: -3px;
 140       }
 141     }
 142   }
 143
 144   .inputs {
 145     margin-bottom: 0;
 146     text-align: right;
 147
 148     .action-button-cancel {
 149       @include peertube-button;
 150       @include tertiary-button;
 151
 152       display: inline-block;
 153       margin-right: 10px;
 154     }
 155
 156     .action-button-submit {
 157       @include peertube-button;
 158       @include orange-button;
 159     }
 160   }
 161 }
 162
 163
 164 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
 165 .modal-open {
 166   overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
 167   width: 100vw; // Make sure the content fits all the available width
 168 }
 169
 170 // On touchscreen devices, simply overflow: hidden to avoid detached overlay on scroll
 171 @media (hover: none) and (pointer: coarse) {
 172   .modal-open, .menu-open {
 173     overflow: hidden !important;
 174   }
 175
 176   // On touchscreen devices display content overlay when opened menu
 177   .menu-open {
 178     .main-col {
 179       &::before {
 180         background-color: black;
 181         width: 100vw;
 182         height: 100vh;
 183         opacity: 0.75;
 184         content: '';
 185         display: block;
 186         position: fixed;
 187         z-index: z('menu') - 1;
 188       }
 189     }
 190   }
 191 }
 192
 193 // Nav customizations
 194 .nav .nav-link {
 195   display: flex !important;
 196   align-items: center;
 197   height: 30px !important;
 198   padding: 10px 15px !important;
 199 }
 200
 201 .nav.nav-pills {
 202   font-size: 16px !important;
 203   font-weight: $font-semibold !important;
 204
 205   .nav-link {
 206     opacity: 0.6 !important;
 207
 208     &.active, &:hover, &:active, &:focus {
 209       opacity: 1 !important;
 210     }
 211   }
 212
 213   a {
 214     @include disable-default-a-behaviour;
 215
 216     color: pvar(--mainForegroundColor);
 217   }
 218 }
 219
 220 .nav-tabs .nav-link {
 221   @include disable-default-a-behaviour;
 222
 223   color: pvar(--mainForegroundColor);
 224   font-weight: $font-semibold;
 225   border: none;
 226   border-bottom: 2px solid transparent;
 227   opacity: 0.6;
 228
 229   &.active {
 230     color: pvar(--mainForegroundColor);
 231     background-color: pvar(--mainBackgroundColor) !important;
 232     border-bottom-color: pvar(--mainColor);
 233   }
 234
 235   &.active, &:hover, &:active, &:focus {
 236     opacity: 1;
 237   }
 238 }
 239
 240 .card {
 241   background-color: pvar(--mainBackgroundColor);
 242   border-color: #dee2e6;
 243 }
 244
 245 .collapse-transition {
 246   // Animation when we show/hide the filters
 247   transition: max-height 0.3s;
 248   display: block !important;
 249   overflow: hidden !important;
 250   max-height: 0;
 251
 252   &.show {
 253     max-height: 1500px;
 254   }
 255 }
 256
 257 .dropdown-divider {
 258   margin: 0.3rem 0;
 259 }
 260
 261 ngb-modal-backdrop {
 262   z-index: z(modal) - 1 !important;
 263 }
 264
 265 ngb-modal-window {
 266   z-index: z(modal) !important;
 267 }
 268
 269 ngb-popover-window {
 270   z-index: z(popover) !important;
 271 }
 272
 273 ngb-tooltip-window {
 274   z-index: z(tooltip) !important;
 275 }
 276
 277 .btn-outline-secondary {
 278   border-color: $input-border-color;
 279
 280   &:focus-within,
 281   &:focus,
 282   &:hover {
 283     color: #fff;
 284     background-color: #6c757d;
 285   }
 286 }
 287
 288 .btn-outline-tertiary {
 289   color: pvar(--secondaryColor);
 290   border-color: pvar(--secondaryColor);
 291
 292   &:focus-within,
 293   &:focus,
 294   &:hover {
 295     color: pvar(--mainBackgroundColor);
 296     background-color: pvar(--secondaryColor);
 297   }
 298 }
 299
 300 // input box-shadow on focus
 301 .form-control {
 302   font-size: 15px;
 303   color: pvar(--mainForegroundColor);
 304   background-color: pvar(--inputBackgroundColor);
 305   outline: none;
 306
 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   & > .form-control {
 319     flex: initial;
 320   }
 321   input.form-control {
 322     width: unset !important;
 323     flex-grow: 1;
 324   }
 325
 326   .input-group-prepend + input {
 327     border-top-left-radius: 0 !important;
 328     border-bottom-left-radius: 0 !important;
 329   }
 330 }
 331
 332 .has-feedback.has-clear {
 333   position: relative;
 334
 335   input {
 336     padding-right: 1.5rem !important;
 337   }
 338
 339   .form-control-clear {
 340     color: rgba(0, 0, 0, 0.4);
 341     /*
 342      * Enable pointer events as they have been disabled since Bootstrap 3.3
 343      * See https://github.com/twbs/bootstrap/pull/14104
 344      */
 345     pointer-events: all;
 346     display: flex;
 347     justify-content: center;
 348     align-items: center;
 349     position: absolute;
 350     right: .5rem;
 351     height: 95%;
 352     font-size: 14px;
 353
 354     &:hover {
 355       color: rgba(0, 0, 0, 0.7);
 356       cursor: pointer;
 357     }
 358   }
 359
 360   input:placeholder-shown + .form-control-clear {
 361     display: none;
 362   }
 363 }