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 .form-warning {
 128   display: block;
 129   margin-top: 5px;
 130 }
 131
 132 .form-error {
 133   color: $red;
 134 }
 135
 136 .input-error,
 137 my-input-toggle-hidden ::ng-deep input {
 138   border-color: $red !important;
 139 }
 140
 141 .full-width {
 142   width: 100%;
 143   margin: 0 auto;
 144   max-width: initial;
 145 }
 146
 147 .glyphicon-black {
 148   color: #000;
 149 }
 150
 151 .row {
 152   margin: 0 !important;
 153 }
 154
 155 .main-col {
 156   @include margin-left($menu-width);
 157
 158   width: calc(100% - #{$menu-width});
 159   outline: none;
 160
 161   .margin-content {
 162     margin: 0 pvar(--horizontalMarginContent);
 163     flex-grow: 1;
 164   }
 165
 166   .sub-menu {
 167     background-color: pvar(--submenuBackgroundColor);
 168     width: 100%;
 169     display: flex;
 170     align-items: center;
 171     padding: 0 pvar(--horizontalMarginContent);
 172     height: $sub-menu-height;
 173     margin-bottom: $sub-menu-margin-bottom;
 174     overflow-x: auto;
 175
 176     &.sub-menu-fixed {
 177       position: fixed;
 178       z-index: #{z('sub-menu') - 1};
 179       max-width: pvar(--mainColWidth);
 180     }
 181   }
 182
 183   // Use an appropriate offset top when sub-menu fixed
 184   .margin-content.offset-content {
 185     padding-top: $sub-menu-height + $sub-menu-margin-bottom;
 186   }
 187
 188   // Override some properties if the main content is expanded (no menu on the left)
 189   &.expanded {
 190     --horizontalMarginContent: #{$expanded-horizontal-margins};
 191     --mainColWidth: 100vw;
 192
 193     @include margin-left(0);
 194     width: 100%;
 195   }
 196
 197   &.lock-scroll .main-row > router-outlet + * {  /* stylelint-disable-line selector-max-compound-selectors */
 198     // Lock and hide body scrollbars
 199     position: fixed;
 200
 201     // Lock and hide sub-menu scrollbars
 202     .sub-menu { /* stylelint-disable-line */
 203       overflow-x: hidden;
 204     }
 205   }
 206 }
 207
 208 .title-page {
 209   @include disable-default-a-behaviour;
 210   @include margin-right(55px);
 211
 212   opacity: 0.6;
 213   color: pvar(--mainForegroundColor);
 214   font-size: 16px;
 215   display: inline-block;
 216   font-weight: $font-semibold;
 217   border-bottom: 2px solid transparent;
 218
 219   &.title-page-single {
 220     margin-top: 30px;
 221     margin-bottom: 25px;
 222   }
 223
 224   &.active {
 225     border-bottom-color: pvar(--mainColor);
 226   }
 227
 228   &.title-page-single {
 229     font-size: 125%;
 230   }
 231
 232   &:hover,
 233   &:active,
 234   &:focus {
 235     color: pvar(--mainForegroundColor);
 236   }
 237
 238   &.active,
 239   &:hover,
 240   &:active,
 241   &:focus,
 242   &.title-page-single {
 243     opacity: 1;
 244     outline: 0 hidden !important;
 245   }
 246
 247   @media screen and (max-width: $mobile-view) {
 248     @include margin-left(15px);
 249   }
 250 }
 251
 252 .title-page-about,
 253 .title-page-settings {
 254   white-space: nowrap;
 255   font-size: 115%;
 256 }
 257
 258 .admin-sub-header {
 259   display: flex;
 260   align-items: center;
 261   margin-bottom: 30px;
 262
 263   .form-sub-title {
 264     flex-grow: 1;
 265   }
 266
 267   .admin-sub-nav a {
 268     @include disable-default-a-behaviour;
 269
 270     font-size: 16px;
 271     color: pvar(--mainForegroundColor);
 272     padding: 5px 15px;
 273     border-radius: 0.25rem;
 274     font-weight: $font-semibold;
 275     opacity: 0.6;
 276
 277     &.active {
 278       background-color: pvar(--submenuBackgroundColor);
 279     }
 280
 281     &.active,
 282     &:hover,
 283     &:active,
 284     &:focus {
 285       opacity: 1;
 286     }
 287   }
 288 }
 289
 290 .form-sub-title {
 291   font-size: 20px;
 292   font-weight: bold;
 293 }
 294
 295 // In tables, don't have a hover different background
 296 table {
 297   .action-button-edit,
 298   .action-button-delete {
 299     &:hover,
 300     &:active,
 301     &:focus,
 302     &[disabled],
 303     &.disabled {
 304       background-color: $grey-background-color !important;
 305     }
 306   }
 307 }
 308
 309 .no-results {
 310   height: 40vh;
 311   max-height: 500px;
 312
 313   display: flex;
 314   flex-direction: column;
 315   align-items: center;
 316   justify-content: center;
 317   font-size: 16px;
 318   font-weight: $font-semibold;
 319 }
 320
 321 .dropdown-item {
 322   @include dropdown-with-icon-item;
 323
 324   my-global-icon {
 325     width: 22px;
 326     height: 22px;
 327   }
 328 }
 329
 330 /* offsetTop for scrollToAnchor */
 331
 332 .anchor {
 333   position: relative;
 334   top: #{-($header-height + 20px)};
 335 }
 336
 337 .offset-content { // if sub-menu fixed
 338   .anchor {
 339     top: #{-($header-height + $sub-menu-height + 20px)};
 340   }
 341 }
 342
 343 .form-group-description {
 344   @extend .text-muted;
 345
 346   font-size: 90%;
 347   margin-top: 10px;
 348 }
 349
 350 ngx-loading-bar {
 351   z-index: z(header) + 1 !important;
 352 }
 353
 354 @media screen and (max-width: #{breakpoint(xxl)}) {
 355   .main-col {
 356     --horizontalMarginContent: #{$not-expanded-horizontal-margins / 2};
 357     --videosHorizontalMarginContent: 30px;
 358
 359     &.expanded {
 360       --horizontalMarginContent: #{$expanded-horizontal-margins / 2};
 361     }
 362   }
 363 }
 364
 365 @media screen and (max-width: #{breakpoint(lg)}) {
 366   .main-col {
 367     --videosHorizontalMarginContent: #{pvar(--horizontalMarginContent)};
 368   }
 369
 370   /* the following applies from 500px to 900px and is partially overriden from 500px to 800px by changes below to $small-view */
 371   .main-col,
 372   .main-col.expanded {
 373     --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
 374
 375     .sub-menu {
 376       padding: 0 50px;
 377
 378       .title-page {
 379         font-size: 17px;
 380       }
 381     }
 382   }
 383 }
 384
 385 @media screen and (min-width: $mobile-view) and (max-width: $small-view) {
 386   .main-col {
 387     width: 100%;
 388   }
 389 }
 390
 391 @media screen and (max-width: $small-view) {
 392   .main-col,
 393   .main-col.expanded {
 394     --horizontalMarginContent: 15px;
 395
 396     @include margin-left(0);
 397
 398     .sub-menu {
 399       width: 100vw;
 400       padding: 0 15px;
 401       margin-bottom: $sub-menu-margin-bottom-small-view;
 402       overflow-x: auto;
 403     }
 404
 405     // Use an appropriate offset top when sub-menu fixed
 406     .margin-content.offset-content {
 407       padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
 408     }
 409
 410     .admin-sub-header {
 411       flex-direction: column;
 412
 413       .form-sub-title {
 414         @include margin-right(0 !important);
 415
 416         margin-bottom: 10px;
 417         text-align: center;
 418       }
 419
 420       .admin-sub-nav {
 421         display: block;
 422         overflow-x: auto;
 423         white-space: nowrap;
 424         height: 50px;
 425         padding: 10px 0;
 426         width: 100%;
 427
 428         a {
 429           @include margin-left(5px);
 430         }
 431       }
 432     }
 433
 434     my-markdown-textarea {
 435       .root {
 436         max-width: 100% !important;
 437       }
 438     }
 439
 440     input[type=text],
 441     input[type=password],
 442     input[type=email],
 443     textarea,
 444     .peertube-select-container {
 445       flex-grow: 1;
 446     }
 447
 448     .caption input[type=text] {
 449       width: unset !important;
 450       flex-grow: 1;
 451     }
 452   }
 453 }