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