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   --actionButtonColor: #{$grey-foreground-color};
  42   --supportButtonBackgroundColor: #{transparent};
  43   --supportButtonColor: #{var(--actionButtonColor)};
  44   --supportButtonHeartColor: #{$support-button-heart};
  45
  46   font-family: $main-fonts;
  47   font-weight: $font-regular;
  48   color: var(--mainForegroundColor);
  49   background-color: var(--mainBackgroundColor);
  50   font-size: 14px;
  51 }
  52
  53 ::selection {
  54   color: var(--mainBackgroundColor);
  55   background-color: var(--mainHoverColor);
  56 }
  57
  58 #incompatible-browser {
  59   display: none;
  60   text-align: center;
  61   position: absolute;
  62   width: 100%;
  63   top: 45%;
  64 }
  65
  66 strong {
  67   font-weight: $font-semibold;
  68 }
  69
  70 input.readonly {
  71   /* Force blank on readonly inputs */
  72   background-color: var(--inputBackgroundColor) !important;
  73 }
  74
  75 input, textarea {
  76   outline: none;
  77   color: var(--mainForegroundColor);
  78 }
  79
  80 label {
  81   font-weight: $font-bold;
  82   font-size: 15px;
  83 }
  84
  85 .form-error {
  86   display: block;
  87   color: $red;
  88   margin-top: 5px;
  89 }
  90
  91 .input-error {
  92   border-color: $red !important;
  93 }
  94
  95 .fullWidth {
  96   width: 100%;
  97   margin-left: auto;
  98   margin-right: auto;
  99   max-width: initial;
 100 }
 101
 102 .glyphicon-black {
 103   color: black;
 104 }
 105
 106 .row {
 107   margin: 0 !important;
 108 }
 109
 110 .main-col {
 111   margin-left: $menu-width;
 112   width: calc(100% - #{$menu-width});
 113   outline: none;
 114
 115   .margin-content {
 116     margin-left: $not-expanded-horizontal-margins;
 117     margin-right: $not-expanded-horizontal-margins;
 118     flex-grow: 1;
 119   }
 120
 121   .sub-menu {
 122     background-color: var(--submenuColor);
 123     width: 100%;
 124     height: 81px;
 125     margin-bottom: $sub-menu-margin-bottom;
 126     display: flex;
 127     align-items: center;
 128     padding-left: $not-expanded-horizontal-margins;
 129     padding-right: $not-expanded-horizontal-margins;
 130   }
 131
 132   // Override some properties if the main content is expanded (no menu on the left)
 133   &.expanded {
 134     margin-left: 0;
 135     width: 100%;
 136
 137     .margin-content {
 138       margin-left: $expanded-horizontal-margins;
 139       margin-right: $expanded-horizontal-margins;
 140     }
 141
 142     .sub-menu {
 143       padding-left: $expanded-horizontal-margins;
 144       padding-right: $expanded-horizontal-margins;
 145     }
 146   }
 147 }
 148
 149 .title-page {
 150   color: var(--mainForegroundColor);
 151   font-size: 16px;
 152   display: inline-block;
 153   margin-right: 55px;
 154   font-weight: $font-semibold;
 155   @include disable-default-a-behaviour;
 156
 157   &.active, &.title-page-single {
 158     margin-top: 30px;
 159     margin-bottom: 25px;
 160   }
 161
 162   &.active {
 163     font-weight: $font-bold;
 164     border-bottom: 2px solid var(--mainColor);
 165   }
 166
 167   &.title-page-single {
 168     font-size: 125%;
 169   }
 170
 171   &:hover, &:active, &:focus {
 172     color: var(--mainForegroundColor);
 173   }
 174
 175   @media screen and (max-width: $mobile-view) {
 176     margin-right: 15px;
 177   }
 178 }
 179
 180 .title-page-about,
 181 .title-page-settings {
 182   white-space: nowrap;
 183   font-size: 115%;
 184   font-weight: $font-regular;
 185
 186   &.active {
 187     font-weight: $font-semibold;
 188   }
 189 }
 190
 191 .admin-sub-header {
 192   display: flex;
 193   align-items: center;
 194   margin-bottom: 30px;
 195
 196   .form-sub-title {
 197     flex-grow: 1;
 198   }
 199
 200   .admin-sub-nav a {
 201     @include disable-default-a-behaviour;
 202
 203     font-size: 16px;
 204     color: var(--mainForegroundColor);
 205     padding: 5px 15px;
 206     border-radius: 0.25rem;
 207
 208     &.active {
 209       font-weight: $font-semibold;
 210       background-color: #f0f0f0;
 211       color: #000;
 212     }
 213   }
 214 }
 215
 216 .form-sub-title {
 217   font-size: 20px;
 218   font-weight: bold;
 219 }
 220
 221 @keyframes spin {
 222   from { transform: scale(1) rotate(0deg);}
 223   to { transform: scale(1) rotate(360deg);}
 224 }
 225
 226 // In tables, don't have a hover different background
 227 table {
 228   .action-button-edit, .action-button-delete {
 229     &:hover, &:active, &:focus, &[disabled], &.disabled {
 230       background-color: $grey-background-color !important;
 231     }
 232   }
 233 }
 234
 235 .no-results {
 236   height: 40vh;
 237   display: flex;
 238   align-items: center;
 239   justify-content: center;
 240   font-size: 16px;
 241   font-weight: $font-semibold;
 242 }
 243
 244 .dropdown-item {
 245   @include dropdown-with-icon-item;
 246
 247   my-global-icon {
 248     width: 22px;
 249     height: 22px;
 250   }
 251 }
 252
 253 .anchor {
 254   position: relative;
 255   top: #{-($header-height + 20px)};
 256 }
 257
 258 @media screen and (max-width: #{map-get($grid-breakpoints, xxl)}) {
 259   .main-col {
 260     &.expanded {
 261       .margin-content {
 262         margin-left: $expanded-horizontal-margins/2;
 263         margin-right: $expanded-horizontal-margins/2;
 264       }
 265     }
 266   }
 267 }
 268
 269 @media screen and (max-width: #{map-get($grid-breakpoints, lg)}) {
 270   .main-col {
 271     &.expanded {
 272       .margin-content {
 273         margin-left: $expanded-horizontal-margins/3;
 274         margin-right: $expanded-horizontal-margins/3;
 275       }
 276
 277       .sub-menu {
 278         padding-left: 50px;
 279         padding-right: 50px;
 280
 281         .title-page {
 282           font-size: 17px;
 283         }
 284       }
 285     }
 286   }
 287 }
 288
 289 @media screen and (max-width: $small-view) {
 290   .main-col {
 291     margin-left: 0;
 292
 293     &, &.expanded {
 294       .margin-content {
 295         margin-left: 15px;
 296         margin-right: 15px;
 297       }
 298
 299       .sub-menu {
 300         width: 100vw;
 301         overflow-x: auto;
 302         padding-left: 15px;
 303         padding-right: 15px;
 304         margin-bottom: $sub-menu-margin-bottom-small-view;
 305       }
 306
 307       input[type=text],
 308       input[type=password],
 309       input[type=email],
 310       textarea {
 311         width: 100% !important;
 312       }
 313     }
 314   }
 315 }