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