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       &[iconName="cross"] {
 114         @include icon(16px);
 115         top: -3px;
 116       }
 117     }
 118   }
 119
 120   .inputs {
 121     margin-bottom: 0;
 122     text-align: right;
 123
 124     .action-button-cancel {
 125       @include peertube-button;
 126       @include tertiary-button;
 127
 128       display: inline-block;
 129       margin-right: 10px;
 130     }
 131
 132     .action-button-submit {
 133       @include peertube-button;
 134       @include orange-button;
 135     }
 136   }
 137 }
 138
 139 // Nav customizations
 140 .nav .nav-link {
 141   display: flex !important;
 142   align-items: center;
 143   height: 30px !important;
 144   padding: 10px 15px !important;
 145 }
 146
 147 .nav.nav-pills {
 148   font-size: 16px !important;
 149
 150   .nav-link.active {
 151     font-weight: $font-semibold !important;
 152   }
 153
 154   a {
 155     @include disable-default-a-behaviour;
 156
 157     color: var(--mainForegroundColor);
 158   }
 159 }
 160
 161 .nav-tabs {
 162
 163   .nav-link {
 164     @include disable-default-a-behaviour;
 165
 166     color: var(--mainForegroundColor) !important;
 167   }
 168 }
 169
 170 .nav-tabs .nav-link {
 171   &:not(.active) {
 172     border-bottom: 3px solid transparent;
 173   }
 174   &.active {
 175     font-weight: $font-semibold;
 176     background-color: var(--mainBackgroundColor) !important;
 177     border: none;
 178     border-bottom: 2px solid var(--mainColor);
 179   }
 180   &:hover {
 181     border-top-color: transparent;
 182     border-left-color: transparent;
 183     border-right-color: transparent;
 184   }
 185 }
 186
 187 .card {
 188   background-color: var(--mainBackgroundColor);
 189   border-color: #dee2e6;
 190 }
 191
 192 .collapse-transition {
 193   // Animation when we show/hide the filters
 194   transition: max-height 0.3s;
 195   display: block !important;
 196   overflow: hidden !important;
 197   max-height: 0;
 198
 199   &.show {
 200     max-height: 1500px;
 201   }
 202 }
 203
 204 .dropdown-divider {
 205   margin: 0.3rem 0;
 206 }
 207
 208 ngb-modal-backdrop {
 209   z-index: z(modal) - 1 !important;
 210 }
 211
 212 ngb-modal-window {
 213   z-index: z(modal) !important;
 214 }
 215
 216 ngb-popover-window {
 217   z-index: z(popover) !important;
 218 }
 219
 220 ngb-tooltip-window {
 221   z-index: z(tooltip) !important;
 222 }
 223
 224 .btn-outline-tertiary {
 225   color: var(--secondaryColor);
 226   border-color: var(--secondaryColor);
 227
 228   &:hover {
 229     color: var(--mainBackgroundColor);
 230     background-color: var(--secondaryColor);
 231   }
 232 }
 233
 234 // input box-shadow on focus
 235 .form-control {
 236   font-size: 15px;
 237   color: var(--mainForegroundColor);
 238   background-color: var(--inputBackgroundColor);
 239   outline: none;
 240
 241   &:focus-within,
 242   &:focus {
 243     box-shadow: 0 0 0 .2rem var(--mainColorLightest);
 244
 245     &.input-error {
 246       box-shadow: 0 0 0 .2rem #{scale-color($red, $alpha: -75%)};
 247     }
 248   }
 249 }