client/src/sass/application.scss

   1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   2
   3 @use 'sass:math';
   4
   5 @use '_variables' as *;
   6 @use '_mixins' as *;
   7
   8 @use '_fonts';
   9
  10 @use './classes';
  11
  12 @use './custom-markup';
  13
  14 @use './ng-select';
  15
  16 // Needs an import because we extends glyphicon icons in primeng
  17 @import './bootstrap';
  18 @import './primeng-custom';
  19
  20 [hidden] {
  21   display: none !important;
  22 }
  23
  24 body {
  25   /*** theme ***/
  26   // now beware sass requires interpolation
  27   // for css custom properties #{$var}
  28   --mainColor: #{$main-color};
  29   --mainColorLighter: #{$main-color-lighter};
  30   --mainColorLightest: #{$main-color-lightest};
  31   --mainHoverColor: #{$main-hover-color};
  32   --mainBackgroundColor: #{$bg-color};
  33   --mainForegroundColor: #{$fg-color};
  34   --secondaryColor: #{$secondary-color};
  35
  36   --greyForegroundColor: #{$grey-foreground-color};
  37   --greyBackgroundColor: #{$grey-background-color};
  38
  39   --menuBackgroundColor: #{$menu-background};
  40   --menuForegroundColor: #{$menu-color};
  41
  42   --submenuBackgroundColor: #{$sub-menu-background-color};
  43   --channelBackgroundColor: #{$channel-background-color};
  44
  45   --inputForegroundColor: #{$input-foreground-color};
  46   --inputBackgroundColor: #{$input-background-color};
  47   --inputPlaceholderColor: #{$input-placeholder-color};
  48
  49   --textareaForegroundColor: #{$textarea-foreground-color};
  50   --textareaBackgroundColor: #{$textarea-background-color};
  51   --markdownTextareaBackgroundColor: #{$markdown-textarea-background-color};
  52
  53   --actionButtonColor: #{$grey-foreground-color};
  54   --supportButtonBackgroundColor: #{transparent};
  55   --supportButtonColor: #{pvar(--actionButtonColor)};
  56   --supportButtonHeartColor: #{$support-button-heart};
  57
  58   --activatedActionButtonColor: #{$activated-action-button-color};
  59
  60   --horizontalMarginContent: #{$not-expanded-horizontal-margins};
  61   --videosHorizontalMarginContent: 6vw;
  62   --mainColWidth: calc(100vw - #{$menu-width});
  63
  64   font-family: $main-fonts;
  65   font-weight: $font-regular;
  66   color: pvar(--mainForegroundColor);
  67   background-color: pvar(--mainBackgroundColor);
  68   font-size: 14px;
  69   // On desktop browsers, make sure vertical scroll bar is always visible
  70   // Allow to disable the scrollbar instead of hide it when the content fit the body
  71   // And not move the content and header horizontally sticked to right when the content is updating
  72   overflow-y: scroll;
  73
  74   // Fix "reboot" style that set text-align: left
  75   text-align: start;
  76 }
  77
  78 ::selection {
  79   color: pvar(--mainBackgroundColor);
  80   background-color: pvar(--mainHoverColor);
  81 }
  82
  83 noscript,
  84 #incompatible-browser {
  85   display: block;
  86   font-size: 1.2rem;
  87   max-width: 600px;
  88   margin: 1rem auto;
  89 }
  90
  91 strong {
  92   font-weight: $font-semibold;
  93 }
  94
  95 input[readonly] {
  96   /* Force blank on readonly inputs */
  97   background-color: pvar(--inputBackgroundColor) !important;
  98 }
  99
 100 input,
 101 textarea {
 102   outline: none;
 103   color: pvar(--inputForegroundColor);
 104 }
 105
 106 button {
 107   @include disable-outline;
 108
 109   background: unset;
 110 }
 111
 112 label {
 113   font-weight: $font-bold;
 114   font-size: 15px;
 115 }
 116
 117 code {
 118   background-color: pvar(--greyBackgroundColor);
 119   color: pvar(--greyForegroundColor);
 120   border-radius: 3px;
 121   padding: .2em .4em;
 122   margin: auto .4em;
 123   font-size: 75%;
 124   display: inline-block;
 125   vertical-align: middle;
 126 }
 127
 128 .form-error,
 129 .form-warning {
 130   display: block;
 131   margin-top: 5px;
 132 }
 133
 134 .form-error {
 135   color: $red;
 136 }
 137
 138 .input-error,
 139 my-input-toggle-hidden ::ng-deep input {
 140   border-color: $red !important;
 141 }
 142
 143 .full-width {
 144   width: 100%;
 145   margin: 0 auto;
 146   max-width: initial;
 147 }
 148
 149 .glyphicon-black {
 150   color: #000;
 151 }
 152
 153 .row {
 154   margin: 0 !important;
 155 }
 156
 157 .main-col {
 158   @include margin-left($menu-width);
 159
 160   width: calc(100% - #{$menu-width});
 161   outline: none;
 162
 163   .margin-content {
 164     margin: 0 pvar(--horizontalMarginContent);
 165     flex-grow: 1;
 166   }
 167
 168   .sub-menu {
 169     background-color: pvar(--submenuBackgroundColor);
 170     width: 100%;
 171     display: flex;
 172     align-items: center;
 173     padding: 0 pvar(--horizontalMarginContent);
 174     height: $sub-menu-height;
 175     margin-bottom: $sub-menu-margin-bottom;
 176     overflow-x: auto;
 177
 178     &.sub-menu-fixed {
 179       position: fixed;
 180       z-index: #{z('sub-menu') - 1};
 181       max-width: pvar(--mainColWidth);
 182     }
 183   }
 184
 185   // Use an appropriate offset top when sub-menu fixed
 186   .margin-content.offset-content {
 187     padding-top: $sub-menu-height + $sub-menu-margin-bottom;
 188   }
 189
 190   // Override some properties if the main content is expanded (no menu on the left)
 191   &.expanded {
 192     --horizontalMarginContent: #{$expanded-horizontal-margins};
 193     --mainColWidth: 100vw;
 194
 195     @include margin-left(0);
 196     width: 100%;
 197   }
 198
 199   &.lock-scroll .main-row > router-outlet + * {  /* stylelint-disable-line selector-max-compound-selectors */
 200     // Lock and hide body scrollbars
 201     position: fixed;
 202
 203     // Lock and hide sub-menu scrollbars
 204     .sub-menu { /* stylelint-disable-line */
 205       overflow-x: hidden;
 206     }
 207   }
 208 }
 209
 210 .title-page {
 211   @include disable-default-a-behaviour;
 212   @include margin-right(55px);
 213
 214   opacity: 0.6;
 215   color: pvar(--mainForegroundColor);
 216   font-size: 16px;
 217   display: inline-block;
 218   font-weight: $font-semibold;
 219   border-bottom: 2px solid transparent;
 220
 221   &.title-page-single {
 222     margin-top: 30px;
 223     margin-bottom: 25px;
 224   }
 225
 226   &.active {
 227     border-bottom-color: pvar(--mainColor);
 228   }
 229
 230   &.title-page-single {
 231     font-size: 125%;
 232   }
 233
 234   &:hover,
 235   &:active,
 236   &:focus {
 237     color: pvar(--mainForegroundColor);
 238   }
 239
 240   &.active,
 241   &:hover,
 242   &:active,
 243   &:focus,
 244   &.title-page-single {
 245     opacity: 1;
 246     outline: 0 hidden !important;
 247   }
 248
 249   @media screen and (max-width: $mobile-view) {
 250     @include margin-left(15px);
 251   }
 252 }
 253
 254 .title-page-about,
 255 .title-page-settings {
 256   white-space: nowrap;
 257   font-size: 115%;
 258 }
 259
 260 .admin-sub-header {
 261   display: flex;
 262   align-items: center;
 263   margin-bottom: 30px;
 264
 265   .admin-sub-nav a {
 266     @include disable-default-a-behaviour;
 267
 268     font-size: 16px;
 269     color: pvar(--mainForegroundColor);
 270     padding: 5px 15px;
 271     border-radius: 0.25rem;
 272     font-weight: $font-semibold;
 273     opacity: 0.6;
 274
 275     &.active {
 276       background-color: pvar(--submenuBackgroundColor);
 277     }
 278
 279     &.active,
 280     &:hover,
 281     &:active,
 282     &:focus {
 283       opacity: 1;
 284     }
 285   }
 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: #{math.div($not-expanded-horizontal-margins, 2)};
 350     --videosHorizontalMarginContent: 30px;
 351
 352     &.expanded {
 353       --horizontalMarginContent: #{math.div($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: #{math.div($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       .admin-sub-nav {
 407         display: block;
 408         overflow-x: auto;
 409         white-space: nowrap;
 410         height: 50px;
 411         padding: 10px 0;
 412         width: 100%;
 413
 414         a {
 415           @include margin-left(5px);
 416         }
 417       }
 418     }
 419
 420     my-markdown-textarea {
 421       .root {
 422         max-width: 100% !important;
 423       }
 424     }
 425
 426     input[type=text],
 427     input[type=password],
 428     input[type=email],
 429     textarea,
 430     .peertube-select-container {
 431       flex-grow: 1;
 432     }
 433
 434     .caption input[type=text] {
 435       width: unset !important;
 436       flex-grow: 1;
 437     }
 438   }
 439 }