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