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