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