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   .form-sub-title {
 266     flex-grow: 1;
 267   }
 268
 269   .admin-sub-nav a {
 270     @include disable-default-a-behaviour;
 271
 272     font-size: 16px;
 273     color: pvar(--mainForegroundColor);
 274     padding: 5px 15px;
 275     border-radius: 0.25rem;
 276     font-weight: $font-semibold;
 277     opacity: 0.6;
 278
 279     &.active {
 280       background-color: pvar(--submenuBackgroundColor);
 281     }
 282
 283     &.active,
 284     &:hover,
 285     &:active,
 286     &:focus {
 287       opacity: 1;
 288     }
 289   }
 290 }
 291
 292 .form-sub-title {
 293   font-size: 20px;
 294   font-weight: bold;
 295 }
 296
 297 // In tables, don't have a hover different background
 298 table {
 299   .action-button-edit,
 300   .action-button-delete {
 301     &:hover,
 302     &:active,
 303     &:focus,
 304     &[disabled],
 305     &.disabled {
 306       background-color: $grey-background-color !important;
 307     }
 308   }
 309 }
 310
 311 .no-results {
 312   height: 40vh;
 313   max-height: 500px;
 314
 315   display: flex;
 316   flex-direction: column;
 317   align-items: center;
 318   justify-content: center;
 319   font-size: 16px;
 320   font-weight: $font-semibold;
 321 }
 322
 323 .dropdown-item {
 324   @include dropdown-with-icon-item;
 325
 326   my-global-icon {
 327     width: 22px;
 328     height: 22px;
 329   }
 330 }
 331
 332 /* offsetTop for scrollToAnchor */
 333
 334 .anchor {
 335   position: relative;
 336   top: #{-($header-height + 20px)};
 337 }
 338
 339 .offset-content { // if sub-menu fixed
 340   .anchor {
 341     top: #{-($header-height + $sub-menu-height + 20px)};
 342   }
 343 }
 344
 345 .form-group-description {
 346   @extend .text-muted;
 347
 348   font-size: 90%;
 349   margin-top: 10px;
 350 }
 351
 352 ngx-loading-bar {
 353   z-index: z(header) + 1 !important;
 354 }
 355
 356 @media screen and (max-width: #{breakpoint(xxl)}) {
 357   .main-col {
 358     --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)};
 359     --videosHorizontalMarginContent: 30px;
 360
 361     &.expanded {
 362       --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 2)};
 363     }
 364   }
 365 }
 366
 367 @media screen and (max-width: #{breakpoint(lg)}) {
 368   .main-col {
 369     --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
 370   }
 371
 372   /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
 373   .main-col,
 374   .main-col.expanded {
 375     --horizontalMarginContent: #{math.div($expanded-horizontal-margins, 3)};
 376
 377     .sub-menu {
 378       padding: 0 50px;
 379
 380       .title-page {
 381         font-size: 17px;
 382       }
 383     }
 384   }
 385 }
 386
 387 @media screen and (min-width: $mobile-view) and (max-width: $small-view) {
 388   .main-col {
 389     width: 100%;
 390   }
 391 }
 392
 393 @media screen and (max-width: $small-view) {
 394   .main-col,
 395   .main-col.expanded {
 396     --horizontalMarginContent: 15px;
 397
 398     @include margin-left(0);
 399
 400     .sub-menu {
 401       width: 100vw;
 402       padding: 0 15px;
 403       margin-bottom: $sub-menu-margin-bottom-small-view;
 404       overflow-x: auto;
 405     }
 406
 407     // Use an appropriate offset top when sub-menu fixed
 408     .margin-content.offset-content {
 409       padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
 410     }
 411
 412     .admin-sub-header {
 413       flex-direction: column;
 414
 415       .form-sub-title {
 416         @include margin-right(0 !important);
 417
 418         margin-bottom: 10px;
 419         text-align: center;
 420       }
 421
 422       .admin-sub-nav {
 423         display: block;
 424         overflow-x: auto;
 425         white-space: nowrap;
 426         height: 50px;
 427         padding: 10px 0;
 428         width: 100%;
 429
 430         a {
 431           @include margin-left(5px);
 432         }
 433       }
 434     }
 435
 436     my-markdown-textarea {
 437       .root {
 438         max-width: 100% !important;
 439       }
 440     }
 441
 442     input[type=text],
 443     input[type=password],
 444     input[type=email],
 445     textarea,
 446     .peertube-select-container {
 447       flex-grow: 1;
 448     }
 449
 450     .caption input[type=text] {
 451       width: unset !important;
 452       flex-grow: 1;
 453     }
 454   }
 455 }