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):not(.dropdown-root):not(.action-dropdown):not(.input-group-prepend) {
  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) + 1 !important;
  41
  42   border-radius: 3px;
  43   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);
  44   font-size: 15px;
  45
  46   .dropdown-header {
  47     padding-left: 1rem;
  48   }
  49
  50   .dropdown-item {
  51     padding: 3px 15px;
  52
  53     &.active {
  54       color: pvar(--mainBackgroundColor) !important;
  55       background-color: pvar(--mainHoverColor);
  56       opacity: .9;
  57     }
  58
  59     &::after {
  60       display: none;
  61     }
  62   }
  63
  64   button {
  65     @include disable-default-a-behaviour;
  66   }
  67
  68   a {
  69     @include disable-default-a-behaviour;
  70     color: #000 !important;
  71   }
  72 }
  73
  74
  75 @media screen and (min-width: #{breakpoint(md)}) {
  76   .modal:before {
  77     vertical-align: middle;
  78     content: " ";
  79     height: 100%;
  80   }
  81
  82   .modal-dialog {
  83     text-align: left;
  84
  85     &:not(.modal-lg):not(.modal-xl) {
  86       min-width: 500px;
  87       width: 40vw;
  88       max-width: 900px;
  89     }
  90   }
  91 }
  92
  93 .modal {
  94   text-align: center;
  95
  96   .modal-content {
  97     background-color: pvar(--mainBackgroundColor);
  98   }
  99
 100   .modal-header {
 101     border-bottom: none;
 102     margin-bottom: 5px;
 103
 104     .modal-title {
 105       font-size: 20px;
 106       font-weight: $font-semibold;
 107     }
 108
 109     my-global-icon {
 110       @include icon(22px);
 111
 112       position: relative;
 113       top: 5px;
 114       float: right;
 115
 116       margin: 0;
 117       padding: 0;
 118       opacity: .5;
 119
 120       &[iconName="cross"] {
 121         @include icon(16px);
 122         top: -3px;
 123       }
 124     }
 125   }
 126
 127   .inputs {
 128     margin-bottom: 0;
 129     text-align: right;
 130
 131     .action-button-cancel {
 132       @include peertube-button;
 133       @include tertiary-button;
 134
 135       display: inline-block;
 136       margin-right: 10px;
 137     }
 138
 139     .action-button-submit {
 140       @include peertube-button;
 141       @include orange-button;
 142     }
 143   }
 144 }
 145
 146 // Nav customizations
 147 .nav .nav-link {
 148   display: flex !important;
 149   align-items: center;
 150   height: 30px !important;
 151   padding: 10px 15px !important;
 152 }
 153
 154 .nav.nav-pills {
 155   font-size: 16px !important;
 156
 157   .nav-link.active {
 158     font-weight: $font-semibold !important;
 159   }
 160
 161   a {
 162     @include disable-default-a-behaviour;
 163
 164     color: pvar(--mainForegroundColor);
 165   }
 166 }
 167
 168 .nav-tabs {
 169
 170   .nav-link {
 171     @include disable-default-a-behaviour;
 172
 173     color: pvar(--mainForegroundColor) !important;
 174   }
 175 }
 176
 177 .nav-tabs .nav-link {
 178   &:not(.active) {
 179     border-bottom: 3px solid transparent;
 180   }
 181   &.active {
 182     font-weight: $font-semibold;
 183     background-color: pvar(--mainBackgroundColor) !important;
 184     border: none;
 185     border-bottom: 2px solid pvar(--mainColor);
 186   }
 187   &:hover {
 188     border-top-color: transparent;
 189     border-left-color: transparent;
 190     border-right-color: transparent;
 191   }
 192 }
 193
 194 .card {
 195   background-color: pvar(--mainBackgroundColor);
 196   border-color: #dee2e6;
 197 }
 198
 199 .collapse-transition {
 200   // Animation when we show/hide the filters
 201   transition: max-height 0.3s;
 202   display: block !important;
 203   overflow: hidden !important;
 204   max-height: 0;
 205
 206   &.show {
 207     max-height: 1500px;
 208   }
 209 }
 210
 211 .dropdown-divider {
 212   margin: 0.3rem 0;
 213 }
 214
 215 ngb-modal-backdrop {
 216   z-index: z(modal) - 1 !important;
 217 }
 218
 219 ngb-modal-window {
 220   z-index: z(modal) !important;
 221 }
 222
 223 ngb-popover-window {
 224   z-index: z(popover) !important;
 225 }
 226
 227 ngb-tooltip-window {
 228   z-index: z(tooltip) !important;
 229 }
 230
 231 .btn-outline-secondary {
 232   border-color: $input-border-color;
 233
 234   &:focus-within,
 235   &:focus,
 236   &:hover {
 237     color: #fff;
 238     background-color: #6c757d;
 239   }
 240 }
 241
 242 .btn-outline-tertiary {
 243   color: pvar(--secondaryColor);
 244   border-color: pvar(--secondaryColor);
 245
 246   &:focus-within,
 247   &:focus,
 248   &:hover {
 249     color: pvar(--mainBackgroundColor);
 250     background-color: pvar(--secondaryColor);
 251   }
 252 }
 253
 254 // input box-shadow on focus
 255 .form-control {
 256   font-size: 15px;
 257   color: pvar(--mainForegroundColor);
 258   background-color: pvar(--inputBackgroundColor);
 259   outline: none;
 260
 261   &:focus-within,
 262   &:focus {
 263     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 264
 265     &.input-error {
 266       box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
 267     }
 268   }
 269 }
 270
 271 .input-group {
 272   & > .form-control {
 273     flex: initial;
 274   }
 275   input.form-control {
 276     width: unset !important;
 277     flex-grow: 1;
 278   }
 279
 280   .input-group-prepend + input {
 281     border-top-left-radius: 0 !important;
 282     border-bottom-left-radius: 0 !important;
 283   }
 284 }
 285
 286 .has-feedback.has-clear {
 287   position: relative;
 288
 289   input {
 290     padding-right: 1.5rem !important;
 291   }
 292
 293   .form-control-clear {
 294     color: rgba(0, 0, 0, 0.4);
 295     /*
 296      * Enable pointer events as they have been disabled since Bootstrap 3.3
 297      * See https://github.com/twbs/bootstrap/pull/14104
 298      */
 299     pointer-events: all;
 300     display: flex;
 301     justify-content: center;
 302     align-items: center;
 303     position: absolute;
 304     right: .5rem;
 305     height: 95%;
 306
 307     &:hover {
 308       color: rgba(0, 0, 0, 0.7);
 309       cursor: pointer;
 310     }
 311   }
 312
 313   input:placeholder-shown + .form-control-clear {
 314     display: none;
 315   }
 316 }