client/src/sass/application.scss

   1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   2
   3 @import '_bootstrap-variables';
   4 @import '_variables';
   5 @import '_mixins';
   6
   7 @import '_fonts';
   8
   9 @import '~video.js/dist/video-js.css';
  10
  11 $assets-path: '../../assets/';
  12 @import './player/index';
  13
  14 @import './bootstrap';
  15 @import './primeng-custom';
  16 @import './ng-select.scss';
  17
  18 [hidden] {
  19   display: none !important;
  20 }
  21
  22 body {
  23   /*** theme ***/
  24   // now beware sass requires interpolation
  25   // for css custom properties #{$var}
  26   --mainColor: #{$main-color};
  27   --mainColorLighter: #{$main-color-lighter};
  28   --mainColorLightest: #{$main-color-lightest};
  29   --mainHoverColor: #{$main-hover-color};
  30   --mainBackgroundColor: #{$bg-color};
  31   --mainForegroundColor: #{$fg-color};
  32   --secondaryColor: #{$secondary-color};
  33
  34   --greyForegroundColor: #{$grey-foreground-color};
  35   --greyBackgroundColor: #{$grey-background-color};
  36
  37   --menuBackgroundColor: #{$menu-background};
  38   --menuForegroundColor: #{$menu-color};
  39
  40   --submenuColor: #{$sub-menu-color};
  41   --channelBackgroundColor: #{$channel-background-color};
  42
  43   --inputForegroundColor: #{$input-foreground-color};
  44   --inputBackgroundColor: #{$input-background-color};
  45   --inputPlaceholderColor: #{$input-placeholder-color};
  46
  47   --textareaForegroundColor: #{$textarea-foreground-color};
  48   --textareaBackgroundColor: #{$textarea-background-color};
  49   --markdownTextareaBackgroundColor: #{$markdown-textarea-background-color};
  50
  51   --actionButtonColor: #{$grey-foreground-color};
  52   --supportButtonBackgroundColor: #{transparent};
  53   --supportButtonColor: #{pvar(--actionButtonColor)};
  54   --supportButtonHeartColor: #{$support-button-heart};
  55
  56   --activatedActionButtonColor: #{$activated-action-button-color};
  57
  58   --expanded-horizontal-margin-content: #{$expanded-horizontal-margins};
  59
  60   font-family: $main-fonts;
  61   font-weight: $font-regular;
  62   color: pvar(--mainForegroundColor);
  63   background-color: pvar(--mainBackgroundColor);
  64   font-size: 14px;
  65   // On desktop browsers, make sure vertical scroll bar is always visible
  66   // Allow to disable the scrollbar instead of hide it when the content fit the body
  67   // And not move the content and header horizontally sticked to right when the content is updating
  68   overflow-y: scroll;
  69 }
  70
  71 ::selection {
  72   color: pvar(--mainBackgroundColor);
  73   background-color: pvar(--mainHoverColor);
  74 }
  75
  76 noscript,
  77 #incompatible-browser {
  78   display: block;
  79   font-size: 1.2rem;
  80   max-width: 600px;
  81   margin: 1rem auto;
  82 }
  83
  84 strong {
  85   font-weight: $font-semibold;
  86 }
  87
  88 input.readonly {
  89   /* Force blank on readonly inputs */
  90   background-color: pvar(--inputBackgroundColor) !important;
  91 }
  92
  93 input, textarea {
  94   outline: none;
  95   color: pvar(--inputForegroundColor);
  96 }
  97
  98 button {
  99   background: unset;
 100   @include disable-outline;
 101 }
 102
 103 label {
 104   font-weight: $font-bold;
 105   font-size: 15px;
 106 }
 107
 108 code {
 109   background-color: pvar(--greyBackgroundColor);
 110   color: pvar(--greyForegroundColor);
 111   border-radius: 3px;
 112   padding: .2em .4em;
 113   margin: auto .4em;
 114   font-size: 75%;
 115   display: inline-block;
 116   vertical-align: middle;
 117 }
 118
 119 .form-error {
 120   display: block;
 121   color: $red;
 122   margin-top: 5px;
 123 }
 124
 125 .input-error
 126 my-input-toggle-hidden ::ng-deep input {
 127   border-color: $red !important;
 128 }
 129
 130 .fullWidth {
 131   width: 100%;
 132   margin-left: auto;
 133   margin-right: auto;
 134   max-width: initial;
 135 }
 136
 137 .glyphicon-black {
 138   color: black;
 139 }
 140
 141 .row {
 142   margin: 0 !important;
 143 }
 144
 145 .main-col {
 146   margin-left: $menu-width;
 147   width: calc(100% - #{$menu-width});
 148   outline: none;
 149
 150   .margin-content {
 151     margin-left: $not-expanded-horizontal-margins;
 152     margin-right: $not-expanded-horizontal-margins;
 153     flex-grow: 1;
 154   }
 155
 156   .sub-menu {
 157     background-color: pvar(--submenuColor);
 158     width: 100%;
 159     display: flex;
 160     align-items: center;
 161     padding-left: $not-expanded-horizontal-margins;
 162     padding-right: $not-expanded-horizontal-margins;
 163     height: $sub-menu-height;
 164     margin-bottom: $sub-menu-margin-bottom;
 165
 166     &.sub-menu-fixed {
 167       position: fixed;
 168       z-index: #{z('sub-menu') - 1};
 169     }
 170   }
 171
 172   // Use an appropriate offset top when sub-menu fixed
 173   .margin-content.offset-content {
 174     padding-top: $sub-menu-height + $sub-menu-margin-bottom;
 175   }
 176
 177   // Override some properties if the main content is expanded (no menu on the left)
 178   &.expanded {
 179     margin-left: 0;
 180     width: 100%;
 181
 182     .margin-content {
 183       margin-left: var(--expanded-horizontal-margin-content);
 184       margin-right: var(--expanded-horizontal-margin-content);
 185     }
 186
 187     .sub-menu {
 188       padding-left: var(--expanded-horizontal-margin-content);
 189       padding-right: var(--expanded-horizontal-margin-content);
 190     }
 191   }
 192
 193   &.lock-scroll .main-row > router-outlet + * {
 194     // Lock and hide body scrollbars
 195     position: fixed;
 196
 197     // Lock and hide sub-menu scrollbars
 198     .sub-menu {
 199       overflow-x: hidden;
 200     }
 201   }
 202 }
 203
 204 .title-page {
 205   opacity: 0.6;
 206   color: pvar(--mainForegroundColor);
 207   font-size: 16px;
 208   display: inline-block;
 209   margin-right: 55px;
 210   font-weight: $font-semibold;
 211   @include disable-default-a-behaviour;
 212
 213   border-bottom: 2px solid transparent;
 214
 215   &.title-page-single {
 216     margin-top: 30px;
 217     margin-bottom: 25px;
 218   }
 219
 220   &.active {
 221     border-bottom-color: pvar(--mainColor);
 222   }
 223
 224   &.title-page-single {
 225     font-size: 125%;
 226   }
 227
 228   &:hover, &:active, &:focus {
 229     color: pvar(--mainForegroundColor);
 230   }
 231
 232   &.active, &:hover,  &:active, &:focus, &.title-page-single {
 233     opacity: 1;
 234     outline: 0px hidden !important;
 235   }
 236
 237   @media screen and (max-width: $mobile-view) {
 238     margin-right: 15px;
 239   }
 240 }
 241
 242 .title-page-about,
 243 .title-page-settings {
 244   white-space: nowrap;
 245   font-size: 115%;
 246 }
 247
 248 .admin-sub-header {
 249   display: flex;
 250   align-items: center;
 251   margin-bottom: 30px;
 252
 253   .form-sub-title {
 254     flex-grow: 1;
 255   }
 256
 257   .admin-sub-nav a {
 258     @include disable-default-a-behaviour;
 259
 260     font-size: 16px;
 261     color: pvar(--mainForegroundColor);
 262     padding: 5px 15px;
 263     border-radius: 0.25rem;
 264     font-weight: $font-semibold;
 265     opacity: 0.6;
 266
 267     &.active {
 268       background-color: pvar(--submenuColor);
 269     }
 270
 271     &.active, &:hover, &:active, &:focus {
 272       opacity: 1;
 273     }
 274   }
 275 }
 276
 277 .form-sub-title {
 278   font-size: 20px;
 279   font-weight: bold;
 280 }
 281
 282 // In tables, don't have a hover different background
 283 table {
 284   .action-button-edit, .action-button-delete {
 285     &:hover, &:active, &:focus, &[disabled], &.disabled {
 286       background-color: $grey-background-color !important;
 287     }
 288   }
 289 }
 290
 291 .no-results {
 292   height: 40vh;
 293   max-height: 500px;
 294
 295   display: flex;
 296   flex-direction: column;
 297   align-items: center;
 298   justify-content: center;
 299   font-size: 16px;
 300   font-weight: $font-semibold;
 301 }
 302
 303 .dropdown-item {
 304   @include dropdown-with-icon-item;
 305
 306   my-global-icon {
 307     width: 22px;
 308     height: 22px;
 309   }
 310 }
 311
 312 /* offsetTop for scrollToAnchor */
 313
 314 .anchor {
 315   position: relative;
 316   top: #{-($header-height + 20px)};
 317 }
 318
 319 .offset-content { // if sub-menu fixed
 320   .anchor {
 321     top: #{-($header-height + $sub-menu-height + 20px)};
 322   }
 323 }
 324
 325 .form-group-description {
 326   @extend .text-muted;
 327
 328   font-size: 90%;
 329   margin-top: 10px;
 330 }
 331
 332 ngx-loading-bar {
 333   z-index: z(header) + 1 !important;
 334 }
 335
 336 @media screen and (max-width: #{breakpoint(xxl)}) {
 337   .main-col {
 338     &.expanded {
 339       .margin-content {
 340         --expanded-horizontal-margin-content: #{$expanded-horizontal-margins/2};
 341       }
 342     }
 343   }
 344 }
 345
 346 @media screen and (max-width: #{breakpoint(lg)}) {
 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     &, &.expanded {
 350       .margin-content {
 351         --expanded-horizontal-margin-content: #{$expanded-horizontal-margins/3};
 352       }
 353
 354       .sub-menu {
 355         padding-left: 50px;
 356         padding-right: 50px;
 357
 358         .title-page {
 359           font-size: 17px;
 360         }
 361       }
 362     }
 363   }
 364 }
 365
 366 @media screen and (min-width: $mobile-view) and (max-width: $small-view) {
 367   .main-col {
 368     width: 100%;
 369   }
 370 }
 371
 372 @media screen and (max-width: $small-view) {
 373   .main-col {
 374     margin-left: 0;
 375
 376     &, &.expanded {
 377       .margin-content {
 378         --expanded-horizontal-margin-content: 15px;
 379       }
 380
 381       .sub-menu {
 382         width: 100vw;
 383         padding-left: 15px;
 384         padding-right: 15px;
 385         margin-bottom: $sub-menu-margin-bottom-small-view;
 386         overflow-x: auto;
 387       }
 388
 389       // Use an appropriate offset top when sub-menu fixed
 390       .margin-content.offset-content {
 391         padding-top: $sub-menu-height + $sub-menu-margin-bottom-small-view;
 392       }
 393
 394       .admin-sub-header {
 395         @include admin-sub-header-responsive(15px*2);
 396       }
 397
 398       my-markdown-textarea {
 399         .root {
 400           max-width: 100% !important;
 401         }
 402       }
 403
 404       input[type=text],
 405       input[type=password],
 406       input[type=email],
 407       textarea,
 408       .peertube-select-container {
 409         flex-grow: 1;
 410       }
 411
 412       .caption input[type=text] {
 413         width: unset !important;
 414         flex-grow: 1;
 415       }
 416     }
 417   }
 418 }
 419
 420 // overflow-databale responsive rules
 421 @media screen and (min-width: #{breakpoint(lg)}) {
 422   .main-col {
 423     &.expanded {
 424       @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/2, $mobile-paginator: false);
 425     }
 426
 427     &:not(.expanded) {
 428       @include overflow-datatable(breakpoint(lg), $not-expanded-horizontal-margins + $menu-width/2, $mobile-paginator: false);
 429     }
 430   }
 431 }
 432
 433 @media screen and (max-width: #{breakpoint(lg)}) {
 434   .main-col {
 435     &.expanded {
 436       @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3);
 437     }
 438
 439     &:not(.expanded) {
 440       @include overflow-datatable(breakpoint(lg), $expanded-horizontal-margins/3 + $menu-width/2);
 441     }
 442   }
 443 }
 444
 445 @media screen and (max-width: $small-view) {
 446   .main-col {
 447     &:not(.expanded),
 448     &.expanded {
 449       @include overflow-datatable(breakpoint(lg), 15px);
 450     }
 451   }
 452 }
 453
 454 @media screen and (min-width: $small-view) and (max-width: #{$small-view + $menu-width}) {
 455   .main-col {
 456     &:not(.expanded) {
 457       .admin-sub-header {
 458         @include admin-sub-header-responsive($expanded-horizontal-margins/3 + $menu-width/2);
 459       }
 460
 461       .sub-menu {
 462         overflow-x: auto;
 463         width: calc(100vw - #{$menu-width});
 464       }
 465     }
 466   }
 467 }
 468
 469 // Utils
 470
 471 .peertube-button {
 472   @include peertube-button;
 473 }
 474
 475 .peertube-button-link {
 476   @include peertube-button-link;
 477 }
 478
 479 .orange-button {
 480   @include orange-button;
 481 }
 482
 483 .orange-button-inverted {
 484   @include orange-button-inverted;
 485 }