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