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