client/src/sass/application.scss

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