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 '~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 }
  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 // Bootstrap customizations
 146 .dropdown-menu {
 147   border-radius: 3px;
 148   box-shadow: 0 3px 6px;
 149   font-size: 15px;
 150
 151   .dropdown-item {
 152     padding: 3px 15px;
 153   }
 154
 155   a {
 156     color: #000 !important;
 157   }
 158 }
 159
 160 .modal {
 161   .modal-header {
 162     border-bottom: none;
 163     margin-bottom: 5px;
 164
 165     .modal-title {
 166       font-size: 20px;
 167       font-weight: $font-semibold;
 168     }
 169
 170     .close {
 171       @include icon(24px);
 172
 173       position: relative;
 174       right: -1px;
 175       float: right;
 176       background-image: url('../assets/images/global/cross.svg');
 177     }
 178   }
 179
 180   .inputs {
 181     margin-top: 40px;
 182     margin-bottom: 0;
 183     text-align: right;
 184
 185     .action-button-cancel {
 186       @include peertube-button;
 187       @include grey-button;
 188
 189       display: inline-block;
 190       margin-right: 10px;
 191     }
 192
 193     .action-button-submit {
 194       @include peertube-button;
 195       @include orange-button;
 196     }
 197   }
 198 }
 199
 200 tabset:not(.bootstrap) {
 201   .nav {
 202     font-size: 16px !important;
 203     border: none !important;
 204
 205     .nav-item .nav-link {
 206       margin-right: 30px;
 207       padding: 0;
 208       border-radius: 3px;
 209       border: none !important;
 210
 211       .tab-link {
 212         display: flex !important;
 213         align-items: center;
 214         min-height: 30px !important;
 215         padding: 0 15px;
 216       }
 217
 218       &, & a {
 219         color: #000 !important;
 220         @include disable-default-a-behaviour;
 221       }
 222
 223       &.active, &:hover {
 224         background-color: #F0F0F0;
 225       }
 226
 227       &.active {
 228         font-weight: $font-semibold !important;
 229       }
 230     }
 231   }
 232 }
 233
 234 tabset.bootstrap {
 235   margin-left: 0;
 236
 237   .nav-item .nav-link {
 238     &, & a {
 239       color: #000;
 240       @include disable-default-a-behaviour;
 241     }
 242   }
 243 }
 244
 245 .orange-button {
 246   @include peertube-button;
 247   @include orange-button;
 248 }
 249
 250 .orange-button-link {
 251   @include peertube-button-link;
 252   @include orange-button;
 253 }
 254
 255 .grey-button {
 256   @include peertube-button;
 257   @include grey-button;
 258 }
 259
 260 .grey-button-link {
 261   @include peertube-button-link;
 262   @include grey-button;
 263 }
 264
 265 // In tables, don't have a hover different background
 266 table {
 267   .action-button-edit, .action-button-delete {
 268     &:hover, &:active, &:focus, &[disabled], &.disabled {
 269       background-color: $grey-color !important;
 270     }
 271   }
 272 }
 273
 274 @media screen and (max-width: 900px) {
 275   .main-col {
 276     &, &.expanded {
 277       .margin-content {
 278         margin-left: 50px;
 279         margin-right: 50px;
 280       }
 281
 282       .sub-menu {
 283         padding-left: 50px;
 284       }
 285     }
 286   }
 287 }
 288
 289 // On small screen, menu is absolute
 290 @media screen and (max-width: 600px) {
 291   .menu-wrapper {
 292     width: 100% !important;
 293     position: absolute !important;
 294     z-index: 10000;
 295   }
 296
 297   .main-col {
 298     margin-left: 0;
 299
 300     &, &.expanded {
 301       .margin-content {
 302         margin-left: 15px;
 303         margin-right: 15px;
 304       }
 305
 306       .sub-menu {
 307         padding-left: 15px;
 308         margin-bottom: 10px;
 309       }
 310
 311       input[type=text], input[type=password] {
 312         width: 100% !important;
 313       }
 314     }
 315   }
 316
 317   bs-dropdown-container {
 318     z-index: 10000;
 319   }
 320 }