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     border-bottom: 2px solid var(--mainColor);
 146     font-weight: $font-bold;
 147     margin-top: 30px;
 148     margin-bottom: 25px;
 149   }
 150
 151   &:hover, &:active, &:focus {
 152     color: var(--mainForegroundColor);
 153   }
 154
 155   @media screen and (max-width: 500px) {
 156     margin-right: 15px;
 157   }
 158 }
 159
 160 .admin-sub-header {
 161   display: flex;
 162   align-items: center;
 163   margin-bottom: 30px;
 164
 165   .form-sub-title {
 166     flex-grow: 1;
 167   }
 168
 169   .admin-sub-nav a {
 170     @include disable-default-a-behaviour;
 171
 172     font-size: 16px;
 173     color: var(--mainForegroundColor);
 174     padding: 5px 15px;
 175     border-radius: 0.25rem;
 176
 177     &.active {
 178       font-weight: $font-semibold;
 179       background-color: #f0f0f0;
 180       color: #000;
 181     }
 182   }
 183 }
 184
 185 .form-sub-title {
 186   font-size: 20px;
 187   font-weight: bold;
 188 }
 189
 190 @keyframes spin {
 191   from { transform: scale(1) rotate(0deg);}
 192   to { transform: scale(1) rotate(360deg);}
 193 }
 194
 195 .orange-button {
 196   @include peertube-button;
 197   @include orange-button;
 198 }
 199
 200 .orange-button-link {
 201   @include peertube-button-link;
 202   @include orange-button;
 203 }
 204
 205 .grey-button {
 206   @include peertube-button;
 207   @include grey-button;
 208 }
 209
 210 .grey-button-link {
 211   @include peertube-button-link;
 212   @include grey-button;
 213 }
 214
 215 // In tables, don't have a hover different background
 216 table {
 217   .action-button-edit, .action-button-delete {
 218     &:hover, &:active, &:focus, &[disabled], &.disabled {
 219       background-color: $grey-background-color !important;
 220     }
 221   }
 222 }
 223
 224 .no-results {
 225   height: 40vh;
 226   display: flex;
 227   align-items: center;
 228   justify-content: center;
 229   font-size: 16px;
 230   font-weight: $font-semibold;
 231 }
 232
 233 @media screen and (max-width: 1600px) {
 234   .main-col {
 235     &.expanded {
 236       .margin-content {
 237         margin-left: $expanded-horizontal-margins/2;
 238         margin-right: $expanded-horizontal-margins/2;
 239       }
 240     }
 241   }
 242 }
 243
 244 @media screen and (max-width: 900px) {
 245   .main-col {
 246     &.expanded {
 247       .margin-content {
 248         margin-left: $expanded-horizontal-margins/3;
 249         margin-right: $expanded-horizontal-margins/3;
 250       }
 251
 252       .sub-menu {
 253         padding-left: 50px;
 254
 255         .title-page {
 256           font-size: 15px;
 257         }
 258       }
 259     }
 260   }
 261 }
 262
 263 @media screen and (max-width: $small-view) {
 264   .main-col {
 265     margin-left: 0;
 266
 267     &, &.expanded {
 268       .margin-content {
 269         margin-left: 15px;
 270         margin-right: 15px;
 271       }
 272
 273       .sub-menu {
 274         width: 100vw;
 275         overflow-x: auto;
 276         padding-left: 15px;
 277         padding-right: 15px;
 278         margin-bottom: 10px;
 279       }
 280
 281       input[type=text], input[type=password] {
 282         width: 100% !important;
 283       }
 284     }
 285   }
 286 }