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):not(.column-toggle) {
  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
 147 // On desktop browsers, make the content and header horizontally sticked to right not move when modal open and close
 148 .modal-open {
 149   overflow-y: scroll !important; // Make sure vertical scroll bar is always visible on desktop browsers to get disabled scrollbar effect
 150   width: 100vw; // Make sure the content fits all the available width
 151 }
 152
 153 // Nav customizations
 154 .nav .nav-link {
 155   display: flex !important;
 156   align-items: center;
 157   height: 30px !important;
 158   padding: 10px 15px !important;
 159 }
 160
 161 .nav.nav-pills {
 162   font-size: 16px !important;
 163   font-weight: $font-semibold !important;
 164
 165   .nav-link {
 166     opacity: 0.6 !important;
 167
 168     &.active, &:hover, &:active, &:focus {
 169       opacity: 1 !important;
 170     }
 171   }
 172
 173   a {
 174     @include disable-default-a-behaviour;
 175
 176     color: pvar(--mainForegroundColor);
 177   }
 178 }
 179
 180 .nav-tabs .nav-link {
 181   @include disable-default-a-behaviour;
 182
 183   color: pvar(--mainForegroundColor);
 184   font-weight: $font-semibold;
 185   border: none;
 186   border-bottom: 2px solid transparent;
 187   opacity: 0.6;
 188
 189   &.active {
 190     color: pvar(--mainForegroundColor);
 191     background-color: pvar(--mainBackgroundColor) !important;
 192     border-bottom-color: pvar(--mainColor);
 193   }
 194
 195   &.active, &:hover, &:active, &:focus {
 196     opacity: 1;
 197   }
 198 }
 199
 200 .card {
 201   background-color: pvar(--mainBackgroundColor);
 202   border-color: #dee2e6;
 203 }
 204
 205 .collapse-transition {
 206   // Animation when we show/hide the filters
 207   transition: max-height 0.3s;
 208   display: block !important;
 209   overflow: hidden !important;
 210   max-height: 0;
 211
 212   &.show {
 213     max-height: 1500px;
 214   }
 215 }
 216
 217 .dropdown-divider {
 218   margin: 0.3rem 0;
 219 }
 220
 221 ngb-modal-backdrop {
 222   z-index: z(modal) - 1 !important;
 223 }
 224
 225 ngb-modal-window {
 226   z-index: z(modal) !important;
 227 }
 228
 229 ngb-popover-window {
 230   z-index: z(popover) !important;
 231 }
 232
 233 ngb-tooltip-window {
 234   z-index: z(tooltip) !important;
 235 }
 236
 237 .btn-outline-secondary {
 238   border-color: $input-border-color;
 239
 240   &:focus-within,
 241   &:focus,
 242   &:hover {
 243     color: #fff;
 244     background-color: #6c757d;
 245   }
 246 }
 247
 248 .btn-outline-tertiary {
 249   color: pvar(--secondaryColor);
 250   border-color: pvar(--secondaryColor);
 251
 252   &:focus-within,
 253   &:focus,
 254   &:hover {
 255     color: pvar(--mainBackgroundColor);
 256     background-color: pvar(--secondaryColor);
 257   }
 258 }
 259
 260 // input box-shadow on focus
 261 .form-control {
 262   font-size: 15px;
 263   color: pvar(--mainForegroundColor);
 264   background-color: pvar(--inputBackgroundColor);
 265   outline: none;
 266
 267   &:focus-within,
 268   &:focus {
 269     box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
 270
 271     &.input-error {
 272       box-shadow: #{$focus-box-shadow-form} #{scale-color($red, $alpha: -75%)};
 273     }
 274   }
 275 }
 276
 277 .input-group {
 278   & > .form-control {
 279     flex: initial;
 280   }
 281   input.form-control {
 282     width: unset !important;
 283     flex-grow: 1;
 284   }
 285
 286   .input-group-prepend + input {
 287     border-top-left-radius: 0 !important;
 288     border-bottom-left-radius: 0 !important;
 289   }
 290 }
 291
 292 .has-feedback.has-clear {
 293   position: relative;
 294
 295   input {
 296     padding-right: 1.5rem !important;
 297   }
 298
 299   .form-control-clear {
 300     color: rgba(0, 0, 0, 0.4);
 301     /*
 302      * Enable pointer events as they have been disabled since Bootstrap 3.3
 303      * See https://github.com/twbs/bootstrap/pull/14104
 304      */
 305     pointer-events: all;
 306     display: flex;
 307     justify-content: center;
 308     align-items: center;
 309     position: absolute;
 310     right: .5rem;
 311     height: 95%;
 312     font-size: 14px;
 313
 314     &:hover {
 315       color: rgba(0, 0, 0, 0.7);
 316       cursor: pointer;
 317     }
 318   }
 319
 320   input:placeholder-shown + .form-control-clear {
 321     display: none;
 322   }
 323 }