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