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