client/src/sass/application.scss

   1 @import '_variables';
   2 @import '_mixins';
   3
   4 $icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
   5 @import '_bootstrap';
   6
   7 $FontPathSourceSansPro: '../../node_modules/npm-font-source-sans-pro/fonts';
   8 @import '~npm-font-source-sans-pro/source-sans-pro';
   9
  10 @import '~primeng/resources/themes/bootstrap/theme.css';
  11 @import '~primeng/resources/primeng.css';
  12 @import '~video.js/dist/video-js.css';
  13
  14 @import './video-js-custom';
  15 @import './loading-bar';
  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 }
  26
  27 #incompatible-browser {
  28   display: none;
  29   text-align: center;
  30   position: absolute;
  31   width: 100%;
  32   top: 45%;
  33 }
  34
  35 strong {
  36   font-weight: $font-semibold;
  37 }
  38
  39 input.readonly {
  40   /* Force blank on readonly inputs */
  41   background-color: #fff !important;
  42 }
  43
  44 label {
  45   font-weight: $font-bold;
  46   font-size: 15px;
  47 }
  48
  49 .form-error {
  50   display: block;
  51   color: $red-error;
  52   margin-top: 5px;
  53 }
  54
  55 .input-error {
  56   border-color: $red-error !important;
  57 }
  58
  59 .glyphicon-black {
  60   color: black;
  61 }
  62
  63 .main-col {
  64   margin-left: $menu-width;
  65
  66   .margin-content {
  67     margin-left: $not-expanded-horizontal-margins;
  68     margin-right: $not-expanded-horizontal-margins;
  69   }
  70
  71   .sub-menu {
  72     background-color: #F7F7F7;
  73     width: 100%;
  74     height: 81px;
  75     margin-bottom: 30px;
  76     display: flex;
  77     align-items: center;
  78     padding-left: $not-expanded-horizontal-margins;
  79   }
  80
  81   // Override some properties if the main content is expanded (no menu on the left)
  82   &.expanded {
  83     margin-left: 0;
  84
  85     .margin-content {
  86       margin-left: $expanded-horizontal-margins;
  87       margin-right: $expanded-horizontal-margins;
  88     }
  89
  90     .sub-menu {
  91       padding-left: $expanded-horizontal-margins;
  92     }
  93   }
  94 }
  95
  96 .title-page {
  97   color: #000;
  98   font-size: 16px;
  99   display: inline-block;
 100   margin-right: 55px;
 101   font-weight: $font-semibold;
 102   @include disable-default-a-behaviour;
 103
 104   &.active, &.title-page-single {
 105     border-bottom: 2px solid $orange-color;
 106     font-weight: $font-bold;
 107     margin-top: 30px;
 108     margin-bottom: 25px;
 109   }
 110
 111   &:hover, &:active, &:focus {
 112     color: #000;
 113   }
 114
 115   @media screen and (max-width: 500px) {
 116     margin-right: 20px;
 117   }
 118 }
 119
 120 .admin-sub-header {
 121   display: flex;
 122   align-items: center;
 123   margin-bottom: 30px;
 124
 125   .form-sub-title {
 126     flex-grow: 1;
 127   }
 128 }
 129
 130 .form-sub-title {
 131   font-size: 20px;
 132   font-weight: bold;
 133 }
 134
 135 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 136 .glyphicon-refresh-animate {
 137   animation: spin .7s infinite linear;
 138 }
 139
 140 @keyframes spin {
 141   from { transform: scale(1) rotate(0deg);}
 142   to { transform: scale(1) rotate(360deg);}
 143 }
 144
 145 // ngprime data table customizations
 146 p-table {
 147   font-size: 15px !important;
 148
 149   td {
 150     border: 1px solid #E5E5E5 !important;
 151     padding-left: 15px !important;
 152     overflow: hidden !important;
 153     text-overflow: ellipsis !important;
 154     white-space: nowrap !important;
 155   }
 156
 157   tr {
 158     background-color: #fff !important;
 159     height: 46px;
 160   }
 161
 162   .ui-table-tbody {
 163     tr {
 164       &:hover {
 165         background-color: #f0f0f0 !important;
 166       }
 167
 168       &:not(:hover) {
 169         .action-cell * {
 170           display: none !important;
 171         }
 172       }
 173
 174       &:first-child td {
 175         border-top: none !important;
 176       }
 177
 178       &:last-child td {
 179         border-bottom: none !important;
 180       }
 181     }
 182
 183     .expander {
 184       cursor: pointer;
 185       position: relative;
 186       top: 1px;
 187     }
 188   }
 189
 190   th {
 191     border: none !important;
 192     border-bottom: 1px solid #f0f0f0 !important;
 193     text-align: left !important;
 194     padding: 5px 0 5px 15px !important;
 195     font-weight: $font-semibold !important;
 196     color: #000 !important;
 197
 198     &.ui-sortable-column:hover {
 199       background-color: #f0f0f0 !important;
 200       border: 1px solid #f0f0f0 !important;
 201       border-width: 0 1px !important;
 202
 203       &:first-child {
 204         border-width: 0 1px 0 0 !important;
 205       }
 206     }
 207
 208     &.ui-state-highlight {
 209       background-color: #fff !important;
 210
 211       .fa {
 212         @extend .glyphicon;
 213         font-size: 11px;
 214
 215         &.fa-sort-asc {
 216           @extend .glyphicon-triangle-top;
 217         }
 218
 219         &.fa-sort-desc {
 220           @extend .glyphicon-triangle-bottom;
 221         }
 222       }
 223     }
 224   }
 225
 226   .action-cell {
 227     width: 250px !important;
 228     padding: 0 !important;
 229     text-align: center;
 230   }
 231
 232   p-paginator {
 233     .ui-paginator-bottom {
 234       position: relative;
 235       border: none !important;
 236       border: 1px solid #f0f0f0 !important;
 237       height: 40px;
 238       display: flex;
 239       justify-content: center;
 240       align-items: center;
 241
 242       a {
 243         color: #000 !important;
 244         font-weight: $font-semibold !important;
 245         margin-right: 20px !important;
 246         outline: 0 !important;
 247         border-radius: 3px !important;
 248         padding: 5px 2px !important;
 249
 250         &.ui-state-active {
 251           &, &:hover, &:active, &:focus {
 252             color: #fff !important;
 253             background-color: $orange-color !important;
 254           }
 255         }
 256       }
 257     }
 258   }
 259 }
 260
 261 // Bootstrap customizations
 262 .dropdown-menu {
 263   border-radius: 3px;
 264   box-shadow: 0 3px 6px;
 265   font-size: 15px;
 266
 267   .dropdown-item {
 268     padding: 3px 15px;
 269   }
 270
 271   a {
 272     color: #000 !important;
 273   }
 274 }
 275
 276 .modal {
 277   .modal-header {
 278     border-bottom: none;
 279     margin-bottom: 5px;
 280
 281     .modal-title {
 282       font-size: 20px;
 283       font-weight: $font-semibold;
 284     }
 285
 286     .close {
 287       @include icon(24px);
 288
 289       position: relative;
 290       right: -1px;
 291       float: right;
 292       background-image: url('../assets/images/global/cross.svg');
 293     }
 294   }
 295
 296   .inputs {
 297     margin-top: 40px;
 298     margin-bottom: 0;
 299     text-align: right;
 300
 301     .action-button-cancel {
 302       @include peertube-button;
 303       @include grey-button;
 304
 305       display: inline-block;
 306       margin-right: 10px;
 307     }
 308
 309     .action-button-submit {
 310       @include peertube-button;
 311       @include orange-button;
 312     }
 313   }
 314 }
 315
 316 tabset:not(.bootstrap) {
 317   .nav {
 318     font-size: 16px !important;
 319     border: none !important;
 320
 321     .nav-item .nav-link {
 322       margin-right: 30px;
 323       padding: 0;
 324       border-radius: 3px;
 325       border: none !important;
 326
 327       .tab-link {
 328         display: flex !important;
 329         align-items: center;
 330         min-height: 30px !important;
 331         padding: 0 15px;
 332       }
 333
 334       &, & a {
 335         color: #000 !important;
 336         @include disable-default-a-behaviour;
 337       }
 338
 339       &.active, &:hover {
 340         background-color: #F0F0F0;
 341       }
 342
 343       &.active {
 344         font-weight: $font-semibold !important;
 345       }
 346     }
 347   }
 348 }
 349
 350 tabset.bootstrap {
 351   .nav-item .nav-link {
 352     &, & a {
 353       color: #000;
 354       @include disable-default-a-behaviour;
 355     }
 356   }
 357 }
 358
 359 .orange-button {
 360   @include peertube-button;
 361   @include orange-button;
 362 }
 363
 364 .orange-button-link {
 365   @include peertube-button-link;
 366   @include orange-button;
 367 }
 368
 369 .grey-button {
 370   @include peertube-button;
 371   @include grey-button;
 372 }
 373
 374 .grey-button-link {
 375   @include peertube-button-link;
 376   @include grey-button;
 377 }
 378
 379 // In tables, don't have a hover different background
 380 table {
 381   .action-button-edit, .action-button-delete {
 382     &:hover, &:active, &:focus, &[disabled], &.disabled {
 383       background-color: $grey-color !important;
 384     }
 385   }
 386 }
 387
 388 @media screen and (max-width: 900px) {
 389   .main-col {
 390     &, &.expanded {
 391       .margin-content {
 392         margin-left: 50px;
 393         margin-right: 50px;
 394       }
 395
 396       .sub-menu {
 397         padding-left: 50px;
 398       }
 399     }
 400   }
 401 }
 402
 403 // On small screen, menu is absolute
 404 @media screen and (max-width: 600px) {
 405   .title-menu-left {
 406     width: 100% !important;
 407     position: absolute !important;
 408     z-index: 10000;
 409   }
 410
 411   .main-col {
 412     margin-left: 0;
 413
 414     &, &.expanded {
 415       .margin-content {
 416         margin-left: 15px;
 417         margin-right: 15px;
 418       }
 419
 420       .sub-menu {
 421         padding-left: 15px;
 422         margin-bottom: 10px;
 423       }
 424
 425       input[type=text], input[type=password] {
 426         width: 100% !important;
 427       }
 428     }
 429   }
 430
 431   bs-dropdown-container {
 432     z-index: 10000;
 433   }
 434 }