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