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