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