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 {
  14     transform: scale(1) rotate(0deg);
  15   }
  16   to {
  17     transform: scale(1) rotate(360deg);
  18   }
  19 }
  20
  21 .dropdown-menu {
  22   border-radius: 3px;
  23   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  24   font-size: 15px;
  25
  26   .dropdown-item {
  27     padding: 3px 15px;
  28
  29     &:active {
  30       color: #000 !important;
  31     }
  32   }
  33
  34   button {
  35     @include disable-default-a-behaviour;
  36   }
  37
  38   a {
  39     @include disable-default-a-behaviour;
  40     color: #000 !important;
  41   }
  42 }
  43
  44
  45 @media screen and (min-width: 768px) {
  46   .modal:before {
  47     display: inline-block;
  48     vertical-align: middle;
  49     content: " ";
  50     height: 100%;
  51   }
  52
  53   .modal-dialog {
  54     display: inline-block;
  55     text-align: left;
  56     vertical-align: middle;
  57     min-width: 500px;
  58     width: 40vw;
  59     max-width: 900px;
  60   }
  61 }
  62
  63 .modal {
  64   text-align: center;
  65
  66   .modal-content {
  67     background-color: var(--mainBackgroundColor);
  68   }
  69
  70   .modal-header {
  71     border-bottom: none;
  72     margin-bottom: 5px;
  73
  74     .modal-title {
  75       font-size: 20px;
  76       font-weight: $font-semibold;
  77     }
  78
  79     my-global-icon {
  80       @include icon(24px);
  81
  82       position: relative;
  83       top: 3px;
  84       float: right;
  85
  86       margin: 0;
  87       padding: 0;
  88       opacity: 1;
  89     }
  90   }
  91
  92   .inputs {
  93     margin-bottom: 0;
  94     text-align: right;
  95
  96     .action-button-cancel {
  97       @include peertube-button;
  98       @include grey-button;
  99
 100       display: inline-block;
 101       margin-right: 10px;
 102     }
 103
 104     .action-button-submit {
 105       @include peertube-button;
 106       @include orange-button;
 107     }
 108   }
 109 }
 110
 111 // Nav customizations
 112 .nav .nav-link {
 113   display: flex !important;
 114   align-items: center;
 115   height: 30px !important;
 116   padding: 10px 15px !important;
 117 }
 118
 119 .nav.nav-pills {
 120   font-size: 16px !important;
 121
 122   .nav-link.active {
 123     font-weight: $font-semibold !important;
 124   }
 125
 126   a {
 127     @include disable-default-a-behaviour;
 128
 129     color: var(--mainForegroundColor);
 130   }
 131 }
 132
 133 ngb-tabset.bootstrap {
 134
 135   .nav-link {
 136     &, & a {
 137       @include disable-default-a-behaviour;
 138
 139       color: var(--mainForegroundColor) !important;
 140     }
 141   }
 142
 143   .nav-pills .nav-link.active {
 144     color: #000 !important;
 145   }
 146 }
 147
 148 .nav-tabs .nav-link.active {
 149   background-color: var(--mainBackgroundColor) !important;
 150   border-bottom: none;
 151 }
 152
 153 .card {
 154   background-color: var(--mainBackgroundColor);
 155   border-color: #dee2e6;
 156 }
 157
 158 .collapse-transition {
 159   // Animation when we show/hide the filters
 160   transition: max-height 0.3s;
 161   display: block !important;
 162   overflow: hidden !important;
 163   max-height: 0;
 164
 165   &.show {
 166     max-height: 1500px;
 167   }
 168 }
 169
 170 .dropdown-divider {
 171   margin: 0.3rem 0;
 172 }
 173
 174 ngb-modal-backdrop {
 175   z-index: 10000 !important;
 176 }
 177
 178 .btn-outline-tertiary {
 179   color: var(--secondaryColor);
 180   border-color: var(--secondaryColor);
 181
 182   &:hover {
 183     color: var(--mainBackgroundColor);
 184     background-color: var(--secondaryColor);
 185   }
 186 }