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-sass/assets/stylesheets/_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';
  23   font-weight: $font-regular;
  24   color: #000;
  25 }
  26
  27 input.readonly {
  28   /* Force blank on readonly inputs */
  29   background-color: #fff !important;
  30 }
  31
  32 label {
  33   font-weight: $font-bold;
  34   font-size: 15px;
  35 }
  36
  37 .form-error {
  38   display: block;
  39   color: $red-error;
  40   margin-top: 5px;
  41 }
  42
  43 .input-error {
  44   border-color: $red-error !important;
  45 }
  46
  47 .glyphicon-black {
  48   color: black;
  49 }
  50
  51 .main-col {
  52   margin-left: $menu-width;
  53
  54   .margin-content {
  55     margin-left: $not-expanded-horizontal-margins;
  56     margin-right: $not-expanded-horizontal-margins;
  57   }
  58
  59   .sub-menu {
  60     background-color: #F7F7F7;
  61     width: 100%;
  62     height: 81px;
  63     margin-bottom: 30px;
  64     display: flex;
  65     align-items: center;
  66     padding-left: $not-expanded-horizontal-margins;
  67   }
  68
  69   // Override some properties if the main content is expanded (no menu on the left)
  70   &.expanded {
  71     margin-left: 0;
  72
  73     .margin-content {
  74       margin-left: $expanded-horizontal-margins;
  75       margin-right: $expanded-horizontal-margins;
  76     }
  77
  78     .sub-menu {
  79       padding-left: $expanded-horizontal-margins;
  80     }
  81   }
  82 }
  83
  84 .title-page {
  85   color: #000;
  86   font-size: 16px;
  87   display: inline-block;
  88   margin-right: 55px;
  89   font-weight: $font-semibold;
  90   @include disable-default-a-behaviour;
  91
  92   &.active, &.title-page-single {
  93     border-bottom: 2px solid $orange-color;
  94     font-weight: $font-bold;
  95     margin-top: 30px;
  96     margin-bottom: 25px;
  97   }
  98
  99   &:hover, &:active, &:focus {
 100     color: #000;
 101   }
 102 }
 103
 104 .admin-sub-header {
 105   display: flex;
 106   align-items: center;
 107   margin-bottom: 30px;
 108
 109   .admin-sub-title {
 110     flex-grow: 1;
 111   }
 112 }
 113
 114 .admin-sub-title {
 115   font-size: 20px;
 116   font-weight: bold;
 117 }
 118
 119 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
 120 .glyphicon-refresh-animate {
 121   -animation: spin .7s infinite linear;
 122   -ms-animation: spin .7s infinite linear;
 123   -webkit-animation: spinw .7s infinite linear;
 124   -moz-animation: spinm .7s infinite linear;
 125 }
 126
 127 @keyframes spin {
 128   from { transform: scale(1) rotate(0deg);}
 129   to { transform: scale(1) rotate(360deg);}
 130 }
 131
 132 @-webkit-keyframes spinw {
 133   from { -webkit-transform: rotate(0deg);}
 134   to { -webkit-transform: rotate(360deg);}
 135 }
 136
 137 @-moz-keyframes spinm {
 138   from { -moz-transform: rotate(0deg);}
 139   to { -moz-transform: rotate(360deg);}
 140 }
 141
 142 // ngprime data table customizations
 143 p-datatable {
 144   font-size: 15px !important;
 145
 146   .ui-datatable-scrollable-header {
 147     background-color: #fff !important;
 148   }
 149
 150   .ui-widget-content {
 151     border: none !important;
 152   }
 153
 154   .ui-datatable-virtual-table {
 155     border-top: none !important;
 156   }
 157
 158   td {
 159     border: 1px solid #E5E5E5 !important;
 160     padding-left: 15px !important;
 161   }
 162
 163   tr {
 164     background-color: #fff !important;
 165     height: 46px;
 166
 167     &:hover {
 168       background-color: #f0f0f0 !important;
 169     }
 170
 171     &:not(:hover) {
 172       .action-cell * {
 173         display: none !important;
 174       }
 175     }
 176
 177     &:first-child td {
 178       border-top: none !important;
 179     }
 180
 181     &:last-child td {
 182       border-bottom: none !important;
 183     }
 184   }
 185
 186   th {
 187     border: none !important;
 188     border-bottom: 1px solid #f0f0f0 !important;
 189     text-align: left !important;
 190     padding: 5px 0 5px 15px !important;
 191     font-weight: $font-semibold !important;
 192     color: #000 !important;
 193
 194     &.ui-sortable-column:hover:not(.ui-state-active) {
 195       background-color: #f0f0f0 !important;
 196       border: 1px solid #f0f0f0 !important;
 197       border-width: 0 1px !important;
 198     }
 199
 200     &.ui-state-active {
 201       color: #fff !important;
 202       background-color: $orange-color !important;
 203       border: 1px solid $orange-color !important;
 204       border-width: 0 1px !important;
 205     }
 206   }
 207
 208   .action-cell {
 209     width: 250px !important;
 210     padding: 0 !important;
 211     text-align: center;
 212   }
 213
 214   p-paginator {
 215     .ui-paginator-bottom {
 216       position: relative;
 217       border: none !important;
 218       border: 1px solid #f0f0f0 !important;
 219       height: 40px;
 220       display: flex;
 221       justify-content: center;
 222       align-items: center;
 223
 224       a {
 225         color: #000 !important;
 226         font-weight: $font-semibold !important;
 227         margin-right: 20px !important;
 228         outline: 0 !important;
 229         border-radius: 3px !important;
 230         padding: 5px 2px !important;
 231
 232         &.ui-state-active {
 233           &, &:hover, &:active, &:focus {
 234             color: #fff !important;
 235             background-color: $orange-color !important;
 236           }
 237         }
 238       }
 239     }
 240   }
 241 }
 242
 243 // Bootstrap customizations
 244 .dropdown-menu {
 245   border-radius: 3px;
 246   box-shadow: 0 3px 6px;
 247   font-size: 15px;
 248
 249   .dropdown-item {
 250     padding: 3px 15px;
 251   }
 252
 253   a {
 254     color: #000 !important;
 255   }
 256 }
 257
 258 .modal {
 259   .modal-header {
 260     border-bottom: none;
 261
 262     .title-page-single {
 263       margin: 0;
 264     }
 265   }
 266 }
 267
 268 .nav {
 269   font-size: 16px !important;
 270   border: none !important;
 271
 272   .nav-item .nav-link {
 273     margin-right: 30px;
 274     padding: 0;
 275     border-radius: 3px;
 276     border: none !important;
 277
 278     .tab-link {
 279       display: flex !important;
 280       align-items: center;
 281       height: 30px !important;
 282       padding: 0 15px;
 283     }
 284
 285     &, & a {
 286       color: #000 !important;
 287       @include disable-default-a-behaviour;
 288     }
 289
 290     &.active, &:hover {
 291       background-color: #F0F0F0;
 292     }
 293
 294     &.active {
 295       font-weight: $font-semibold !important;
 296     }
 297   }
 298 }
 299
 300 .orange-button {
 301   @include peertube-button;
 302   @include orange-button;
 303 }
 304
 305 .orange-button-link {
 306   @include peertube-button-link;
 307   @include orange-button;
 308 }
 309
 310 .grey-button {
 311   @include peertube-button;
 312   @include grey-button;
 313 }
 314
 315 .grey-button-link {
 316   @include peertube-button-link;
 317   @include grey-button;
 318 }
 319
 320 // On small screen, menu is absolute
 321 @media screen and (max-width: 800px) {
 322   .title-menu-left {
 323     width: 150px !important;
 324     position: absolute !important;
 325     z-index: 10000;
 326   }
 327
 328   .main-col {
 329     margin-left: 0;
 330
 331     &, &.expanded {
 332       .margin-content {
 333         margin-left: 10px;
 334         margin-right: 10px;
 335       }
 336
 337       .sub-menu {
 338         padding-left: 10px;
 339         margin-bottom: 10px;
 340       }
 341
 342       input[type=text], input[type=password] {
 343         width: 100% !important;
 344       }
 345     }
 346   }
 347 }