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