client/src/sass/application.scss

   1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   2
   3 @import '_bootstrap-variables';
   4 @import '_variables';
   5 @import '_mixins';
   6
   7 @import '_fonts';
   8
   9 @import './bootstrap';
  10 @import './primeng-custom';
  11 @import './ng-select';
  12
  13 @import './classes';
  14
  15 [hidden] {
  16   display: none !important;
  17 }
  18
  19 body {
  20   /*** theme ***/
  21   // now beware sass requires interpolation
  22   // for css custom properties #{$var}
  23   --mainColor: #{$main-color};
  24   --mainColorLighter: #{$main-color-lighter};
  25   --mainColorLightest: #{$main-color-lightest};
  26   --mainHoverColor: #{$main-hover-color};
  27   --mainBackgroundColor: #{$bg-color};
  28   --mainForegroundColor: #{$fg-color};
  29   --secondaryColor: #{$secondary-color};
  30
  31   --greyForegroundColor: #{$grey-foreground-color};
  32   --greyBackgroundColor: #{$grey-background-color};
  33
  34   --menuBackgroundColor: #{$menu-background};
  35   --menuForegroundColor: #{$menu-color};
  36
  37   --submenuBackgroundColor: #{$sub-menu-background-color};
  38   --channelBackgroundColor: #{$channel-background-color};
  39
  40   --inputForegroundColor: #{$input-foreground-color};
  41   --inputBackgroundColor: #{$input-background-color};
  42   --inputPlaceholderColor: #{$input-placeholder-color};
  43
  44   --textareaForegroundColor: #{$textarea-foreground-color};
  45   --textareaBackgroundColor: #{$textarea-background-color};
  46   --markdownTextareaBackgroundColor: #{$markdown-textarea-background-color};
  47
  48   --actionButtonColor: #{$grey-foreground-color};
  49   --supportButtonBackgroundColor: #{transparent};
  50   --supportButtonColor: #{pvar(--actionButtonColor)};
  51   --supportButtonHeartColor: #{$support-button-heart};
  52
  53   --activatedActionButtonColor: #{$activated-action-button-color};
  54
  55   --horizontalMarginContent: #{$not-expanded-horizontal-margins};
  56   --videosHorizontalMarginContent: 6vw;
  57   --mainColWidth: calc(100vw - #{$menu-width});
  58
  59   font-family: $main-fonts;
  60   font-weight: $font-regular;
  61   color: pvar(--mainForegroundColor);
  62   background-color: pvar(--mainBackgroundColor);
  63   font-size: 14px;
  64   // On desktop browsers, make sure vertical scroll bar is always visible
  65   // Allow to disable the scrollbar instead of hide it when the content fit the body
  66   // And not move the content and header horizontally sticked to right when the content is updating
  67   overflow-y: scroll;
  68
  69   // Fix "reboot" style that set text-align: left
  70   text-align: start;
  71 }
  72
  73 ::selection {
  74   color: pvar(--mainBackgroundColor);
  75   background-color: pvar(--mainHoverColor);
  76 }
  77
  78 noscript,
  79 #incompatible-browser {
  80   display: block;
  81   font-size: 1.2rem;
  82   max-width: 600px;
  83   margin: 1rem auto;
  84 }
  85
  86 strong {
  87   font-weight: $font-semibold;
  88 }
  89
  90 input.readonly {
  91   /* Force blank on readonly inputs */
  92   background-color: pvar(--inputBackgroundColor) !important;
  93 }
  94
  95 input,
  96 textarea {
  97   outline: none;
  98   color: pvar(--inputForegroundColor);
  99 }
 100
 101 button {
 102   @include disable-outline;
 103
 104   background: unset;
 105 }
 106
 107 label {
 108   font-weight: $font-bold;
 109   font-size: 15px;
 110 }
 111
 112 code {
 113   background-color: pvar(--greyBackgroundColor);
 114   color: pvar(--greyForegroundColor);
 115   border-radius: 3px;
 116   padding: .2em .4em;
 117   margin: auto .4em;
 118   font-size: 75%;
 119   display: inline-block;
 120   vertical-align: middle;
 121 }
 122
 123 .form-error {
 124   display: block;
 125   color: $red;
 126   margin-top: 5px;
 127 }
 128
 129 .input-error,
 130 my-input-toggle-hidden ::ng-deep input {
 131   border-color: $red !important;
 132 }
 133
 134 .full-width {
 135   width: 100%;
 136   margin: 0 auto;
 137   max-width: initial;
 138 }
 139
 140 .glyphicon-black {
 141   color: #000;
 142 }
 143
 144 .row {
 145   margin: 0 !important;
 146 }
 147
 148 .main-col {
 149   @include margin-left($menu-width);
 150
 151   width: calc(100% - #{$menu-width});
 152   outline: none;
 153
 154   .margin-content {
 155     margin: 0 pvar(--horizontalMarginContent);
 156     flex-grow: 1;
 157   }
 158
 159   .sub-menu {
 160     background-color: pvar(--submenuBackgroundColor);
 161     width: 100%;
 162     display: flex;
 163     align-items: center;
 164     padding: 0 pvar(--horizontalMarginContent);
 165     height: $sub-menu-height;
 166     margin-bottom: $sub-menu-margin-bottom;
 167     overflow-x: auto;
 168
 169     &.sub-menu-fixed {
 170       position: fixed;
 171       z-index: #{z('sub-menu') - 1};
 172       max-width: pvar(--mainColWidth);
 173     }
 174   }
 175
 176   // Use an appropriate offset top when sub-menu fixed
 177   .margin-content.offset-content {
 178     padding-top: $sub-menu-height + $sub-menu-margin-bottom;
 179   }
 180
 181   // Override some properties if the main content is expanded (no menu on the left)
 182   &.expanded {
 183     --horizontalMarginContent: #{$expanded-horizontal-margins};
 184     --mainColWidth: 100vw;
 185
 186     @include margin-left(0);
 187     width: 100%;
 188   }
 189
 190   &.lock-scroll .main-row > router-outlet + * {  /* stylelint-disable-line selector-max-compound-selectors */
 191     // Lock and hide body scrollbars
 192     position: fixed;
 193
 194     // Lock and hide sub-menu scrollbars
 195     .sub-menu { /* stylelint-disable-line */
 196       overflow-x: hidden;
 197     }
 198   }
 199 }
 200
 201 .title-page {
 202   @include disable-default-a-behaviour;
 203   @include margin-right(55px);
 204
 205   opacity: 0.6;
 206   color: pvar(--mainForegroundColor);
 207   font-size: 16px;
 208   display: inline-block;
 209   font-weight: $font-semibold;
 210   border-bottom: 2px solid transparent;
 211
 212   &.title-page-single {
 213     margin-top: 30px;
 214     margin-bottom: 25px;
 215   }
 216
 217   &.active {
 218     border-bottom-color: pvar(--mainColor);
 219   }
 220
 221   &.title-page-single {
 222     font-size: 125%;
 223   }
 224
 225   &:hover,
 226   &:active,
 227   &:focus {
 228     color: pvar(--mainForegroundColor);
 229   }
 230
 231   &.active,
 232   &:hover,
 233   &:active,
 234   &:focus,
 235   &.title-page-single {
 236     opacity: 1;
 237     outline: 0 hidden !important;
 238   }
 239
 240   @media screen and (max-width: $mobile-view) {
 241     @include margin-left(15px);
 242   }
 243 }
 244
 245 .title-page-about,
 246 .title-page-settings {
 247   white-space: nowrap;
 248   font-size: 115%;
 249 }
 250
 251 .admin-sub-header {
 252   display: flex;
 253   align-items: center;
 254   margin-bottom: 30px;
 255
 256   .form-sub-title {
 257     flex-grow: 1;
 258   }
 259
 260   .admin-sub-nav a {
 261     @include disable-default-a-behaviour;
 262
 263     font-size: 16px;
 264     color: pvar(--mainForegroundColor);
 265     padding: 5px 15px;
 266     border-radius: 0.25rem;
 267     font-weight: $font-semibold;
 268     opacity: 0.6;
 269
 270     &.active {
 271       background-color: pvar(--submenuBackgroundColor);
 272     }
 273
 274     &.active,
 275     &:hover,
 276     &:active,
 277     &:focus {
 278       opacity: 1;
 279     }
 280   }
 281 }
 282
 283 .form-sub-title {
 284   font-size: 20px;
 285   font-weight: bold;
 286 }
 287
 288 // In tables, don't have a hover different background
 289 table {
 290   .action-button-edit,
 291   .action-button-delete {
 292     &:hover,
 293     &:active,
 294     &:focus,
 295     &[disabled],
 296     &.disabled {
 297       background-color: $grey-background-color !important;
 298     }
 299   }
 300 }
 301
 302 .no-results {
 303   height: 40vh;
 304   max-height: 500px;
 305
 306   display: flex;
 307   flex-direction: column;
 308   align-items: center;
 309   justify-content: center;
 310   font-size: 16px;
 311   font-weight: $font-semibold;
 312 }
 313
 314 .dropdown-item {
 315   @include dropdown-with-icon-item;
 316
 317   my-global-icon {
 318     width: 22px;
 319     height: 22px;
 320   }
 321 }
 322
 323 /* offsetTop for scrollToAnchor */
 324
 325 .anchor {
 326   position: relative;
 327   top: #{-($header-height + 20px)};
 328 }
 329
 330 .offset-content { // if sub-menu fixed
 331   .anchor {
 332     top: #{-($header-height + $sub-menu-height + 20px)};
 333   }
 334 }
 335
 336 .form-group-description {
 337   @extend .text-muted;
 338
 339   font-size: 90%;
 340   margin-top: 10px;
 341 }
 342
 343 ngx-loading-bar {
 344   z-index: z(header) + 1 !important;
 345 }
 346
 347 @media screen and (max-width: #{breakpoint(xxl)}) {
 348   .main-col {
 349     --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
 350     --videosHorizontalMarginContent: 30px;
 351
 352     &.expanded {
 353       --horizontalMarginContent: #{$expanded-horizontal-margins / 2};
 354     }
 355   }
 356 }
 357
 358 @media screen and (max-width: #{breakpoint(lg)}) {
 359   .main-col {
 360     --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
 361   }
 362
 363   /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
 364   .main-col,
 365   .main-col.expanded {
 366     --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
 367
 368     .sub-menu {
 369       padding: 0 50px;
 370
 371       .title-page {
 372         font-size: 17px;
 373       }
 374     }
 375   }
 376 }
 377
 378 @media screen and (min-width: $mobile-view) and (max-width: $small-view) {
 379   .main-col {
 380     width: 100%;
 381   }
 382 }
 383
 384 @media screen and (max-width: $small-view) {
 385   .main-col,
 386   .main-col.expanded {
 387     --horizontalMarginContent: 15px;
 388
 389     @include margin-left(0);
 390
 391     .sub-menu {
 392       width: 100vw;
 393       padding: 0 15px;
 394       margin-bottom: $sub-menu-margin-bottom-small-view;
 395       overflow-x: auto;
 396     }
 397
 398     // Use an appropriate offset top when sub-menu fixed
 399     .margin-content.offset-content {
 400       padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
 401     }
 402
 403     .admin-sub-header {
 404       flex-direction: column;
 405
 406       .form-sub-title {
 407         @include margin-right(0 !important);
 408
 409         margin-bottom: 10px;
 410         text-align: center;
 411       }
 412
 413       .admin-sub-nav {
 414         display: block;
 415         overflow-x: auto;
 416         white-space: nowrap;
 417         height: 50px;
 418         padding: 10px 0;
 419         width: 100%;
 420
 421         a {
 422           @include margin-left(5px);
 423         }
 424       }
 425     }
 426
 427     my-markdown-textarea {
 428       .root {
 429         max-width: 100% !important;
 430       }
 431     }
 432
 433     input[type=text],
 434     input[type=password],
 435     input[type=email],
 436     textarea,
 437     .peertube-select-container {
 438       flex-grow: 1;
 439     }
 440
 441     .caption input[type=text] {
 442       width: unset !important;
 443       flex-grow: 1;
 444     }
 445   }
 446 }