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