client/src/sass/application.scss

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