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