client/src/sass/application.scss

   1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   2
   3 @import '_variables';
   4 @import '_mixins';
   5
   6 @import '_fonts';
   7
   8 @import '~video.js/dist/video-js.css';
   9
  10 $assets-path: '../assets/';
  11 @import './player/index';
  12 @import './loading-bar';
  13
  14 @import './bootstrap';
  15 @import './primeng-custom';
  16
  17 [hidden] {
  18   display: none !important;
  19 }
  20
  21 body {
  22   /*** theme ***/
  23   // now beware node-sass requires interpolation
  24   // for css custom properties #{$var}
  25   --mainColor: #{$orange-color};
  26   --mainHoverColor: #{$orange-hover-color};
  27   --mainBackgroundColor: #{$bg-color};
  28   --mainForegroundColor: #{$fg-color};
  29   --secondaryColor: #{$cyan-color};
  30
  31   --menuBackgroundColor: #{$menu-background};
  32   --menuForegroundColor: #{$menu-color};
  33   --submenuColor: #{$sub-menu-color};
  34
  35   --inputColor: #{$input-background-color};
  36   --inputPlaceholderColor: #{$input-placeholder-color};
  37
  38   --actionButtonColor: #{$grey-foreground-color};
  39   --supportButtonBackgroundColor: #{transparent};
  40   --supportButtonColor: #{var(--actionButtonColor)};
  41   --supportButtonHeartColor: #{$support-button-heart};
  42
  43   font-family: $main-fonts;
  44   font-weight: $font-regular;
  45   color: var(--mainForegroundColor);
  46   background-color: var(--mainBackgroundColor);
  47   font-size: 14px;
  48 }
  49
  50 #incompatible-browser {
  51   display: none;
  52   text-align: center;
  53   position: absolute;
  54   width: 100%;
  55   top: 45%;
  56 }
  57
  58 strong {
  59   font-weight: $font-semibold;
  60 }
  61
  62 input.readonly {
  63   /* Force blank on readonly inputs */
  64   background-color: var(--inputColor) !important;
  65 }
  66
  67 input, textarea {
  68   outline: none;
  69   color: var(--mainForegroundColor);
  70 }
  71
  72 .btn-outline-secondary {
  73   border-color: $input-border-color;
  74 }
  75
  76 label {
  77   font-weight: $font-bold;
  78   font-size: 15px;
  79 }
  80
  81 .form-error {
  82   display: block;
  83   color: $red;
  84   margin-top: 5px;
  85 }
  86
  87 .input-error {
  88   border-color: $red !important;
  89 }
  90
  91 .fullWidth {
  92   width: 100%;
  93   margin-left: auto;
  94   margin-right: auto;
  95   max-width: initial;
  96 }
  97
  98 .glyphicon-black {
  99   color: black;
 100 }
 101
 102 .main-col {
 103   margin-left: $menu-width;
 104   width: auto;
 105
 106   .margin-content {
 107     margin-left: $not-expanded-horizontal-margins;
 108     margin-right: $not-expanded-horizontal-margins;
 109     flex-grow: 1;
 110   }
 111
 112   .sub-menu {
 113     background-color: var(--submenuColor);
 114     width: 100%;
 115     height: 81px;
 116     margin-bottom: $sub-menu-margin-bottom;
 117     display: flex;
 118     align-items: center;
 119     padding-left: $not-expanded-horizontal-margins;
 120     padding-right: $not-expanded-horizontal-margins;
 121   }
 122
 123   // Override some properties if the main content is expanded (no menu on the left)
 124   &.expanded {
 125     margin-left: 0;
 126
 127     .margin-content {
 128       margin-left: $expanded-horizontal-margins;
 129       margin-right: $expanded-horizontal-margins;
 130     }
 131
 132     .sub-menu {
 133       padding-left: $expanded-horizontal-margins;
 134       padding-right: $expanded-horizontal-margins;
 135     }
 136   }
 137 }
 138
 139 .title-page {
 140   color: var(--mainForegroundColor);
 141   font-size: 16px;
 142   display: inline-block;
 143   margin-right: 55px;
 144   font-weight: $font-semibold;
 145   @include disable-default-a-behaviour;
 146
 147   &.active, &.title-page-single {
 148     margin-top: 30px;
 149     margin-bottom: 25px;
 150   }
 151
 152   &.active {
 153     font-weight: $font-bold;
 154     border-bottom: 2px solid var(--mainColor);
 155   }
 156
 157   &.title-page-single {
 158     font-size: 125%;
 159   }
 160
 161   &:hover, &:active, &:focus {
 162     color: var(--mainForegroundColor);
 163   }
 164
 165   @media screen and (max-width: 500px) {
 166     margin-right: 15px;
 167   }
 168 }
 169
 170 .admin-sub-header {
 171   display: flex;
 172   align-items: center;
 173   margin-bottom: 30px;
 174
 175   .form-sub-title {
 176     flex-grow: 1;
 177   }
 178
 179   .admin-sub-nav a {
 180     @include disable-default-a-behaviour;
 181
 182     font-size: 16px;
 183     color: var(--mainForegroundColor);
 184     padding: 5px 15px;
 185     border-radius: 0.25rem;
 186
 187     &.active {
 188       font-weight: $font-semibold;
 189       background-color: #f0f0f0;
 190       color: #000;
 191     }
 192   }
 193 }
 194
 195 .form-sub-title {
 196   font-size: 20px;
 197   font-weight: bold;
 198 }
 199
 200 @keyframes spin {
 201   from { transform: scale(1) rotate(0deg);}
 202   to { transform: scale(1) rotate(360deg);}
 203 }
 204
 205 .orange-button {
 206   @include peertube-button;
 207   @include orange-button;
 208 }
 209
 210 .orange-button-link {
 211   @include peertube-button-link;
 212   @include orange-button;
 213 }
 214
 215 .grey-button {
 216   @include peertube-button;
 217   @include grey-button;
 218 }
 219
 220 .grey-button-link {
 221   @include peertube-button-link;
 222   @include grey-button;
 223 }
 224
 225 // In tables, don't have a hover different background
 226 table {
 227   .action-button-edit, .action-button-delete {
 228     &:hover, &:active, &:focus, &[disabled], &.disabled {
 229       background-color: $grey-background-color !important;
 230     }
 231   }
 232 }
 233
 234 .no-results {
 235   height: 40vh;
 236   display: flex;
 237   align-items: center;
 238   justify-content: center;
 239   font-size: 16px;
 240   font-weight: $font-semibold;
 241 }
 242
 243 @media screen and (max-width: 1600px) {
 244   .main-col {
 245     &.expanded {
 246       .margin-content {
 247         margin-left: $expanded-horizontal-margins/2;
 248         margin-right: $expanded-horizontal-margins/2;
 249       }
 250     }
 251   }
 252 }
 253
 254 @media screen and (max-width: 900px) {
 255   .main-col {
 256     &.expanded {
 257       .margin-content {
 258         margin-left: $expanded-horizontal-margins/3;
 259         margin-right: $expanded-horizontal-margins/3;
 260       }
 261
 262       .sub-menu {
 263         padding-left: 50px;
 264
 265         .title-page {
 266           font-size: 15px;
 267         }
 268       }
 269     }
 270   }
 271 }
 272
 273 @media screen and (max-width: $small-view) {
 274   .main-col {
 275     margin-left: 0;
 276
 277     &, &.expanded {
 278       .margin-content {
 279         margin-left: 15px;
 280         margin-right: 15px;
 281       }
 282
 283       .sub-menu {
 284         width: 100vw;
 285         overflow-x: auto;
 286         padding-left: 15px;
 287         padding-right: 15px;
 288         margin-bottom: 10px;
 289       }
 290
 291       input[type=text], input[type=password] {
 292         width: 100% !important;
 293       }
 294     }
 295   }
 296 }