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