client/src/sass/bootstrap.scss

   1 $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   2 @import '_bootstrap';
   3
   4 @import '_variables';
   5 @import '_mixins';
   6
   7 // Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
   8 .glyphicon-refresh-animate {
   9   animation: spin .7s infinite linear;
  10 }
  11
  12 @keyframes spin {
  13   from { transform: scale(1) rotate(0deg);}
  14   to { transform: scale(1) rotate(360deg);}
  15 }
  16
  17 .dropdown-menu {
  18   border-radius: 3px;
  19   box-shadow: 0 3px 6px;
  20   font-size: 15px;
  21
  22   .dropdown-item {
  23     padding: 3px 15px;
  24
  25     &:active {
  26       color: #000 !important;
  27     }
  28   }
  29
  30   button {
  31     @include disable-default-a-behaviour;
  32   }
  33
  34   a {
  35     @include disable-default-a-behaviour;
  36     color: #000 !important;
  37   }
  38 }
  39
  40 .modal {
  41   .modal-content {
  42     background-color: var(--mainBackgroundColor);
  43   }
  44
  45   .modal-header {
  46     border-bottom: none;
  47     margin-bottom: 5px;
  48
  49     .modal-title {
  50       font-size: 20px;
  51       font-weight: $font-semibold;
  52     }
  53
  54     my-global-icon {
  55       @include icon(24px);
  56
  57       position: relative;
  58       top: 3px;
  59       float: right;
  60
  61       margin: 0;
  62       padding: 0;
  63       opacity: 1;
  64     }
  65   }
  66
  67   .inputs {
  68     margin-bottom: 0;
  69     text-align: right;
  70
  71     .action-button-cancel {
  72       @include peertube-button;
  73       @include grey-button;
  74
  75       display: inline-block;
  76       margin-right: 10px;
  77     }
  78
  79     .action-button-submit {
  80       @include peertube-button;
  81       @include orange-button;
  82     }
  83   }
  84 }
  85
  86 // Nav customizations
  87 .nav .nav-link {
  88   display: flex !important;
  89   align-items: center;
  90   height: 30px !important;
  91   padding: 10px 15px !important;
  92 }
  93
  94 .nav.nav-pills {
  95   font-size: 16px !important;
  96
  97   .nav-link.active {
  98     font-weight: $font-semibold !important;
  99   }
 100
 101   a {
 102     @include disable-default-a-behaviour;
 103
 104     color: var(--mainForegroundColor);
 105   }
 106 }
 107
 108 ngb-tabset.bootstrap {
 109
 110   .nav-link {
 111     &, & a {
 112       @include disable-default-a-behaviour;
 113
 114       color: var(--mainForegroundColor) !important;
 115     }
 116   }
 117
 118   .nav-pills .nav-link.active {
 119     color: #000 !important;
 120   }
 121 }
 122
 123 .nav-tabs .nav-link.active {
 124   background-color: var(--mainBackgroundColor) !important;
 125   border-bottom: none;
 126 }
 127
 128 .card {
 129   background-color: var(--mainBackgroundColor);
 130   border-color: #dee2e6;
 131 }
 132
 133 .collapse-transition {
 134   // Animation when we show/hide the filters
 135   transition: max-height 0.3s;
 136   display: block !important;
 137   overflow: hidden !important;
 138   max-height: 0;
 139
 140   &.show {
 141     max-height: 1500px;
 142   }
 143 }