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