client/src/sass/application.scss

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