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