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