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