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