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