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