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