client/src/sass/application.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 $icon-font-path: '../../node_modules/@neos21/bootstrap3-glyphicons/assets/fonts/';
   5 @import '_bootstrap';
   6
   7 @import '_fonts';
   8
   9 @import '~video.js/dist/video-js.css';
  10
  11 $assets-path: '../assets/';
  12 @import './player/player';
  13 @import './loading-bar';
  14
  15 @import './primeng-custom';
  16
  17 [hidden] {
  18   display: none !important;
  19 }
  20
  21 body {
  22   font-family: $main-fonts;
  23   font-weight: $font-regular;
  24   color: #000;
  25   font-size: 14px;
  26 }
  27
  28 #incompatible-browser {
  29   display: none;
  30   text-align: center;
  31   position: absolute;
  32   width: 100%;
  33   top: 45%;
  34 }
  35
  36 strong {
  37   font-weight: $font-semibold;
  38 }
  39
  40 input.readonly {
  41   /* Force blank on readonly inputs */
  42   background-color: #fff !important;
  43 }
  44
  45 input, textarea {
  46   outline: none;
  47 }
  48
  49 label {
  50   font-weight: $font-bold;
  51   font-size: 15px;
  52 }
  53
  54 .form-error {
  55   display: block;
  56   color: $red-error;
  57   margin-top: 5px;
  58 }
  59
  60 .input-error {
  61   border-color: $red-error !important;
  62 }
  63
  64 .glyphicon-black {
  65   color: black;
  66 }
  67
  68 .main-col {
  69   margin-left: $menu-width;
  70   width: auto;
  71
  72   .margin-content {
  73     margin-left: $not-expanded-horizontal-margins;
  74     margin-right: $not-expanded-horizontal-margins;
  75     flex-grow: 1;
  76   }
  77
  78   .sub-menu {
  79     background-color: #F7F7F7;
  80     width: 100%;
  81     height: 81px;
  82     margin-bottom: 30px;
  83     display: flex;
  84     align-items: center;
  85     padding-left: $not-expanded-horizontal-margins;
  86     padding-right: $not-expanded-horizontal-margins;
  87   }
  88
  89   // Override some properties if the main content is expanded (no menu on the left)
  90   &.expanded {
  91     margin-left: 0;
  92
  93     .margin-content {
  94       margin-left: $expanded-horizontal-margins;
  95       margin-right: $expanded-horizontal-margins;
  96     }
  97
  98     .sub-menu {
  99       padding-left: $expanded-horizontal-margins;
 100       padding-right: $expanded-horizontal-margins;
 101     }
 102   }
 103 }
 104
 105 .title-page {
 106   color: #000;
 107   font-size: 16px;
 108   display: inline-block;
 109   margin-right: 55px;
 110   font-weight: $font-semibold;
 111   @include disable-default-a-behaviour;
 112
 113   &.active, &.title-page-single {
 114     border-bottom: 2px solid $orange-color;
 115     font-weight: $font-bold;
 116     margin-top: 30px;
 117     margin-bottom: 25px;
 118   }
 119
 120   &:hover, &:active, &:focus {
 121     color: #000;
 122   }
 123
 124   @media screen and (max-width: 500px) {
 125     margin-right: 20px;
 126   }
 127 }
 128
 129 .admin-sub-header {
 130   display: flex;
 131   align-items: center;
 132   margin-bottom: 30px;
 133
 134   .form-sub-title {
 135     flex-grow: 1;
 136   }
 137
 138   .admin-sub-nav a {
 139     @include disable-default-a-behaviour;
 140
 141     font-size: 16px;
 142     color: #000;
 143     padding: 5px 15px;
 144     border-radius: 0.25rem;
 145
 146     &.active {
 147       font-weight: $font-semibold;
 148       background-color: #f0f0f0;
 149     }
 150   }
 151 }
 152
 153 .form-sub-title {
 154   font-size: 20px;
 155   font-weight: bold;
 156 }
 157
 158 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 159 .glyphicon-refresh-animate {
 160   animation: spin .7s infinite linear;
 161 }
 162
 163 @keyframes spin {
 164   from { transform: scale(1) rotate(0deg);}
 165   to { transform: scale(1) rotate(360deg);}
 166 }
 167
 168 // Bootstrap customizations
 169 .dropdown-menu {
 170   border-radius: 3px;
 171   box-shadow: 0 3px 6px;
 172   font-size: 15px;
 173
 174   .dropdown-item {
 175     padding: 3px 15px;
 176   }
 177
 178   a {
 179     color: #000 !important;
 180   }
 181 }
 182
 183 .modal {
 184   .modal-header {
 185     border-bottom: none;
 186     margin-bottom: 5px;
 187
 188     .modal-title {
 189       font-size: 20px;
 190       font-weight: $font-semibold;
 191     }
 192
 193     .close {
 194       @include icon(24px);
 195
 196       position: relative;
 197       top: 3px;
 198       float: right;
 199       background-image: url('../assets/images/global/cross.svg');
 200
 201       margin: 0;
 202       padding: 0;
 203       opacity: 1;
 204     }
 205   }
 206
 207   .inputs {
 208     margin-top: 40px;
 209     margin-bottom: 0;
 210     text-align: right;
 211
 212     .action-button-cancel {
 213       @include peertube-button;
 214       @include grey-button;
 215
 216       display: inline-block;
 217       margin-right: 10px;
 218     }
 219
 220     .action-button-submit {
 221       @include peertube-button;
 222       @include orange-button;
 223     }
 224   }
 225 }
 226
 227 // Nav customizations
 228 .nav .nav-link {
 229   display: flex !important;
 230   align-items: center;
 231   height: 30px !important;
 232   padding: 10px 15px !important;
 233 }
 234
 235 .nav.nav-pills {
 236   font-size: 16px !important;
 237
 238   .nav-link.active {
 239     font-weight: $font-semibold !important;
 240   }
 241
 242   a {
 243     @include disable-default-a-behaviour;
 244
 245     color: #000;
 246   }
 247 }
 248
 249 ngb-tabset.bootstrap {
 250
 251   .nav-link {
 252     &, & a {
 253       @include disable-default-a-behaviour;
 254
 255       color: #000 !important;
 256     }
 257   }
 258 }
 259
 260 .orange-button {
 261   @include peertube-button;
 262   @include orange-button;
 263 }
 264
 265 .orange-button-link {
 266   @include peertube-button-link;
 267   @include orange-button;
 268 }
 269
 270 .grey-button {
 271   @include peertube-button;
 272   @include grey-button;
 273 }
 274
 275 .grey-button-link {
 276   @include peertube-button-link;
 277   @include grey-button;
 278 }
 279
 280 // In tables, don't have a hover different background
 281 table {
 282   .action-button-edit, .action-button-delete {
 283     &:hover, &:active, &:focus, &[disabled], &.disabled {
 284       background-color: $grey-color !important;
 285     }
 286   }
 287 }
 288
 289 @media screen and (max-width: 900px) {
 290   .main-col {
 291     &, &.expanded {
 292       .margin-content {
 293         margin-left: 50px;
 294         margin-right: 50px;
 295       }
 296
 297       .sub-menu {
 298         padding-left: 50px;
 299
 300         .title-page {
 301           font-size: 15px;
 302         }
 303       }
 304     }
 305   }
 306 }
 307
 308 @media screen and (max-width: 600px) {
 309   .menu-wrapper {
 310     width: 100% !important;
 311     z-index: 10000;
 312   }
 313
 314   .main-col {
 315     margin-left: 0;
 316
 317     &, &.expanded {
 318       .margin-content {
 319         margin-left: 15px;
 320         margin-right: 15px;
 321       }
 322
 323       .sub-menu {
 324         padding-left: 15px;
 325         padding-right: 15px;
 326         margin-bottom: 10px;
 327       }
 328
 329       input[type=text], input[type=password] {
 330         width: 100% !important;
 331       }
 332     }
 333   }
 334 }