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 @import './z-index';
  21
  22 [hidden] {
  23   display: none !important;
  24 }
  25
  26 body {
  27   /*** theme ***/
  28   // now beware sass requires interpolation
  29   // for css custom properties #{$var}
  30   --mainColor: #{$main-color};
  31   --mainColorLighter: #{$main-color-lighter};
  32   --mainColorLightest: #{$main-color-lightest};
  33
  34   --mainHoverColor: #{$main-hover-color};
  35   --mainBackgroundHoverColor: #{$main-background-hover-color};
  36
  37   --mainBackgroundColor: #{$bg-color};
  38   --mainForegroundColor: #{$fg-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 a {
  98   text-decoration: none;
  99 }
 100
 101 strong {
 102   font-weight: $font-semibold;
 103 }
 104
 105 input[readonly] {
 106   /* Force blank on readonly inputs */
 107   background-color: pvar(--inputBackgroundColor) !important;
 108 }
 109
 110 input,
 111 textarea {
 112   outline: none;
 113   color: pvar(--inputForegroundColor);
 114 }
 115
 116 button {
 117   @include disable-outline;
 118
 119   background: unset;
 120 }
 121
 122 label {
 123   font-weight: $font-bold;
 124   font-size: 15px;
 125   margin-bottom: 0.5rem;
 126 }
 127
 128 code {
 129   background-color: pvar(--greyBackgroundColor);
 130   color: pvar(--greyForegroundColor);
 131   border-radius: 3px;
 132   padding: .2em .4em;
 133   margin: auto .4em;
 134   font-size: 75%;
 135   display: inline-block;
 136   vertical-align: middle;
 137 }
 138
 139 .form-group {
 140   margin-bottom: 1rem;
 141 }
 142
 143 .form-error,
 144 .form-warning {
 145   display: block;
 146   margin-top: 5px;
 147 }
 148
 149 .form-error {
 150   color: $red;
 151 }
 152
 153 .input-error,
 154 my-input-toggle-hidden ::ng-deep input {
 155   border-color: $red !important;
 156 }
 157
 158 .full-width {
 159   width: 100%;
 160   margin: 0 auto;
 161   max-width: initial;
 162 }
 163
 164 .main-col {
 165   @include margin-left($menu-width);
 166
 167   width: calc(100% - #{$menu-width});
 168   outline: none;
 169
 170   .margin-content {
 171     margin: 0 pvar(--horizontalMarginContent);
 172     flex-grow: 1;
 173   }
 174
 175   .sub-menu {
 176     background-color: pvar(--submenuBackgroundColor);
 177     width: 100%;
 178     display: flex;
 179     align-items: center;
 180     padding: 0 pvar(--horizontalMarginContent);
 181     height: $sub-menu-height;
 182     margin-bottom: $sub-menu-margin-bottom;
 183     overflow-x: auto;
 184
 185     &.sub-menu-fixed {
 186       position: fixed;
 187       z-index: #{z('sub-menu') - 1};
 188       max-width: pvar(--mainColWidth);
 189     }
 190   }
 191
 192   // Use an appropriate offset top when sub-menu fixed
 193   .margin-content.offset-content {
 194     padding-top: $sub-menu-height + $sub-menu-margin-bottom;
 195   }
 196
 197   // Override some properties if the main content is expanded (no menu on the left)
 198   &.expanded {
 199     --horizontalMarginContent: #{$expanded-horizontal-margins};
 200     --mainColWidth: 100vw;
 201
 202     @include margin-left(0);
 203     width: 100%;
 204   }
 205
 206   &.lock-scroll .main-row > router-outlet + * {  /* stylelint-disable-line selector-max-compound-selectors */
 207     // Lock and hide body scrollbars
 208     position: fixed;
 209
 210     // Lock and hide sub-menu scrollbars
 211     .sub-menu { /* stylelint-disable-line */
 212       overflow-x: hidden;
 213     }
 214   }
 215 }
 216
 217 .title-page {
 218   @include disable-default-a-behaviour;
 219   @include margin-right(55px);
 220
 221   opacity: 0.6;
 222   color: pvar(--mainForegroundColor);
 223   font-size: 16px;
 224   display: inline-block;
 225   font-weight: $font-semibold;
 226   border-bottom: 2px solid transparent;
 227
 228   &.title-page-single {
 229     margin-top: 30px;
 230     margin-bottom: 25px;
 231   }
 232
 233   &.active {
 234     border-bottom-color: pvar(--mainColor);
 235   }
 236
 237   &.title-page-single {
 238     font-size: 125%;
 239   }
 240
 241   &:hover,
 242   &:active,
 243   &:focus {
 244     color: pvar(--mainForegroundColor);
 245   }
 246
 247   &.active,
 248   &:hover,
 249   &:active,
 250   &:focus,
 251   &.title-page-single {
 252     opacity: 1;
 253     outline: 0 hidden !important;
 254   }
 255
 256   @media screen and (max-width: $mobile-view) {
 257     @include margin-left(15px);
 258   }
 259 }
 260
 261 .title-page-about,
 262 .title-page-settings {
 263   white-space: nowrap;
 264   font-size: 115%;
 265 }
 266
 267 .admin-sub-header {
 268   display: flex;
 269   align-items: center;
 270   margin-bottom: 30px;
 271 }
 272
 273 // In tables, don't have a hover different background
 274 table {
 275   my-edit-button,
 276   my-delete-button {
 277     .action-button {
 278       &:hover,
 279       &:active,
 280       &:focus,
 281       &[disabled],
 282       &.disabled {
 283         background-color: pvar(--greyBackgroundColor) !important;
 284         opacity: 0.8;
 285       }
 286     }
 287   }
 288 }
 289
 290 .no-results {
 291   height: 40vh;
 292   max-height: 500px;
 293
 294   display: flex;
 295   flex-direction: column;
 296   align-items: center;
 297   justify-content: center;
 298   font-size: 16px;
 299   font-weight: $font-semibold;
 300 }
 301
 302 .dropdown-item {
 303   @include dropdown-with-icon-item;
 304
 305   my-global-icon {
 306     width: 22px;
 307     height: 22px;
 308   }
 309 }
 310
 311 /* offsetTop for scrollToAnchor */
 312
 313 .anchor {
 314   position: relative;
 315   top: #{-($header-height + 20px)};
 316 }
 317
 318 .offset-content { // if sub-menu fixed
 319   .anchor {
 320     top: #{-($header-height + $sub-menu-height + 20px)};
 321   }
 322 }
 323
 324 .form-group-description {
 325   @extend .muted !optional;
 326
 327   font-size: 90%;
 328   margin-top: 10px;
 329 }
 330
 331 .callout {
 332   padding: 1.25rem;
 333   border: 1px solid #eee;
 334   border-radius: .25rem;
 335   position: relative;
 336
 337   > label {
 338     position: relative;
 339     top: -5px;
 340     left: -10px;
 341     color: #6c757d !important;
 342   }
 343
 344   &:not(.callout-light) {
 345     border-left-width: .25rem;
 346   }
 347
 348   &.callout-info {
 349     border-color: pvar(--mainColorLightest);
 350     border-left-color: pvar(--mainColor);
 351   }
 352 }
 353
 354 @media screen and (max-width: #{breakpoint(xxl)}) {
 355   .main-col {
 356     --horizontalMarginContent: #{math.div($not-expanded-horizontal-margins, 2)};
 357     --videosHorizontalMarginContent: 30px;
 358
 359     &.expanded {
 360       --horizontalMarginContent: #{math.div($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 overridden from 500px to 800px by changes below to $small-view */
 371   .main-col,
 372   .main-col.expanded {
 373     --horizontalMarginContent: #{math.div($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
 414     my-markdown-textarea {
 415       .root {
 416         max-width: 100% !important;
 417       }
 418     }
 419
 420     input[type=text],
 421     input[type=password],
 422     input[type=email],
 423     textarea,
 424     .peertube-select-container {
 425       flex-grow: 1;
 426     }
 427
 428     .caption input[type=text] {
 429       width: unset !important;
 430       flex-grow: 1;
 431     }
 432   }
 433 }