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