vuetify/lib/styles/core.css

Vue Material Component Framework

@layer vuetify-core {
  @layer reset, base;
}
@layer vuetify-components;
@layer vuetify-overrides;
@layer vuetify-utilities {
  @layer theme-base;
  @layer typography;
  @layer helpers;
  @layer theme-background;
  @layer theme-foreground;
}
@layer vuetify-final {
  @layer transitions, trumps;
}
@layer vuetify-final.transitions {
  @keyframes v-shake {
    59% {
      margin-left: 0;
    }
    60%, 80% {
      margin-left: 2px;
    }
    70%, 90% {
      margin-left: -2px;
    }
  }
}
@layer vuetify-core.reset {
  html {
    box-sizing: border-box;
    /* Prevent adjustments of font size after orientation changes in iOS */
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    margin: 0;
  }
  body {
    margin: 0;
  }
  *,
  ::before,
  ::after {
    background-repeat: no-repeat;
    box-sizing: inherit;
  }
  ::before,
  ::after {
    text-decoration: inherit;
    vertical-align: inherit;
  }
  input {
    border-radius: 0;
  }
  /* Replace pointer cursor in disabled elements */
  [disabled] {
    cursor: default;
  }
  [type=number]::-webkit-inner-spin-button,
  [type=number]::-webkit-outer-spin-button {
    /* Correct the cursor style of increment and decrement buttons in Chrome */
    height: auto;
  }
  [type=search] {
    -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
    outline-offset: -2px; /* Correct the outline style in Safari */
  }
  [type=search]::-webkit-search-cancel-button,
  [type=search]::-webkit-search-decoration {
    /* Remove the inner padding in Chrome and Safari on macOS */
    -webkit-appearance: none;
  }
  button,
  input,
  optgroup,
  select,
  textarea {
    font: inherit;
  }
  optgroup {
    /* Restore the font weight unset by the previous rule */
    font-weight: bold;
  }
  /* Apply cursor pointer to button elements */
  button,
  [type=button],
  [type=reset],
  [type=submit],
  [role=button] {
    cursor: pointer;
    color: inherit;
  }
  /* Specify the progress cursor of updating elements */
  [aria-busy=true] {
    cursor: progress;
  }
  /* Specify the pointer cursor of trigger elements */
  [aria-controls] {
    cursor: pointer;
  }
  /* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
  [aria-disabled=true] {
    cursor: default;
  }
}
@layer vuetify-final.transitions {
  @media (prefers-reduced-motion: no-preference) {
    .dialog-transition-enter-active,
    .dialog-bottom-transition-enter-active,
    .dialog-top-transition-enter-active {
      transition-duration: 225ms;
      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
    .dialog-transition-leave-active,
    .dialog-bottom-transition-leave-active,
    .dialog-top-transition-leave-active {
      transition-duration: 125ms;
      transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    }
    .dialog-transition-enter-active, .dialog-transition-leave-active,
    .dialog-bottom-transition-enter-active,
    .dialog-bottom-transition-leave-active,
    .dialog-top-transition-enter-active,
    .dialog-top-transition-leave-active {
      transition-property: transform, opacity;
      pointer-events: none;
    }
    .dialog-transition-enter-from, .dialog-transition-leave-to {
      transform: scale(0.9);
      opacity: 0;
    }
    .dialog-transition-enter-to, .dialog-transition-leave-from {
      opacity: 1;
    }
    .dialog-bottom-transition-enter-from, .dialog-bottom-transition-leave-to {
      transform: translateY(calc(50vh + 50%));
    }
    .dialog-top-transition-enter-from, .dialog-top-transition-leave-to {
      transform: translateY(calc(-50vh - 50%));
    }
    .picker-transition-enter-active,
    .picker-reverse-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .picker-transition-leave-active,
    .picker-reverse-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .picker-transition-move,
    .picker-reverse-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .picker-transition-enter-from, .picker-transition-leave-to,
    .picker-reverse-transition-enter-from,
    .picker-reverse-transition-leave-to {
      opacity: 0;
    }
    .picker-transition-leave-from, .picker-transition-leave-active, .picker-transition-leave-to,
    .picker-reverse-transition-leave-from,
    .picker-reverse-transition-leave-active,
    .picker-reverse-transition-leave-to {
      position: absolute;
    }
    .picker-transition-enter-active, .picker-transition-leave-active,
    .picker-reverse-transition-enter-active,
    .picker-reverse-transition-leave-active {
      transition-property: transform, opacity;
    }
    .picker-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .picker-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .picker-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .picker-transition-enter-from {
      transform: translate(100%, 0);
    }
    .picker-transition-leave-to {
      transform: translate(-100%, 0);
    }
    .picker-reverse-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .picker-reverse-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .picker-reverse-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .picker-reverse-transition-enter-from {
      transform: translate(-100%, 0);
    }
    .picker-reverse-transition-leave-to {
      transform: translate(100%, 0);
    }
    .expand-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .expand-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .expand-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .expand-transition-enter-active, .expand-transition-leave-active {
      transition-property: height;
    }
    .expand-x-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .expand-x-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .expand-x-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .expand-x-transition-enter-active, .expand-x-transition-leave-active {
      transition-property: width;
    }
    .expand-both-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .expand-both-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .expand-both-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .expand-both-transition-enter-active, .expand-both-transition-leave-active {
      transition-property: height, width !important;
    }
    .scale-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scale-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scale-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scale-transition-leave-to {
      opacity: 0;
    }
    .scale-transition-leave-active {
      transition-duration: 100ms;
    }
    .scale-transition-enter-from {
      opacity: 0;
      transform: scale(0);
    }
    .scale-transition-enter-active, .scale-transition-leave-active {
      transition-property: transform, opacity;
    }
    .scale-rotate-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scale-rotate-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scale-rotate-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scale-rotate-transition-leave-to {
      opacity: 0;
    }
    .scale-rotate-transition-leave-active {
      transition-duration: 100ms;
    }
    .scale-rotate-transition-enter-from {
      opacity: 0;
      transform: scale(0) rotate(-45deg);
    }
    .scale-rotate-transition-enter-active, .scale-rotate-transition-leave-active {
      transition-property: transform, opacity;
    }
    .scale-rotate-reverse-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scale-rotate-reverse-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scale-rotate-reverse-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scale-rotate-reverse-transition-leave-to {
      opacity: 0;
    }
    .scale-rotate-reverse-transition-leave-active {
      transition-duration: 100ms;
    }
    .scale-rotate-reverse-transition-enter-from {
      opacity: 0;
      transform: scale(0) rotate(45deg);
    }
    .scale-rotate-reverse-transition-enter-active, .scale-rotate-reverse-transition-leave-active {
      transition-property: transform, opacity;
    }
    .message-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .message-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .message-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .message-transition-enter-from, .message-transition-leave-to {
      opacity: 0;
      transform: translateY(-15px);
    }
    .message-transition-leave-from, .message-transition-leave-active {
      position: absolute;
    }
    .message-transition-enter-active, .message-transition-leave-active {
      transition-property: transform, opacity;
    }
    .slide-y-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-y-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-y-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-y-transition-enter-from, .slide-y-transition-leave-to {
      opacity: 0;
      transform: translateY(-15px);
    }
    .slide-y-transition-enter-active, .slide-y-transition-leave-active {
      transition-property: transform, opacity;
    }
    .slide-y-reverse-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-y-reverse-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-y-reverse-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-y-reverse-transition-enter-from, .slide-y-reverse-transition-leave-to {
      opacity: 0;
      transform: translateY(15px);
    }
    .slide-y-reverse-transition-enter-active, .slide-y-reverse-transition-leave-active {
      transition-property: transform, opacity;
    }
    .scroll-y-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-y-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-y-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-y-transition-enter-from, .scroll-y-transition-leave-to {
      opacity: 0;
    }
    .scroll-y-transition-enter-from {
      transform: translateY(-15px);
    }
    .scroll-y-transition-leave-to {
      transform: translateY(15px);
    }
    .scroll-y-transition-enter-active, .scroll-y-transition-leave-active {
      transition-property: transform, opacity;
    }
    .scroll-y-reverse-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-y-reverse-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-y-reverse-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-y-reverse-transition-enter-from, .scroll-y-reverse-transition-leave-to {
      opacity: 0;
    }
    .scroll-y-reverse-transition-enter-from {
      transform: translateY(15px);
    }
    .scroll-y-reverse-transition-leave-to {
      transform: translateY(-15px);
    }
    .scroll-y-reverse-transition-enter-active, .scroll-y-reverse-transition-leave-active {
      transition-property: transform, opacity;
    }
    .scroll-x-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-x-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-x-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-x-transition-enter-from, .scroll-x-transition-leave-to {
      opacity: 0;
    }
    .scroll-x-transition-enter-from {
      transform: translateX(-15px);
    }
    .scroll-x-transition-leave-to {
      transform: translateX(15px);
    }
    .scroll-x-transition-enter-active, .scroll-x-transition-leave-active {
      transition-property: transform, opacity;
    }
    .scroll-x-reverse-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-x-reverse-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-x-reverse-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scroll-x-reverse-transition-enter-from, .scroll-x-reverse-transition-leave-to {
      opacity: 0;
    }
    .scroll-x-reverse-transition-enter-from {
      transform: translateX(15px);
    }
    .scroll-x-reverse-transition-leave-to {
      transform: translateX(-15px);
    }
    .scroll-x-reverse-transition-enter-active, .scroll-x-reverse-transition-leave-active {
      transition-property: transform, opacity;
    }
    .slide-x-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-x-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-x-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-x-transition-enter-from, .slide-x-transition-leave-to {
      opacity: 0;
      transform: translateX(-15px);
    }
    .slide-x-transition-enter-active, .slide-x-transition-leave-active {
      transition-property: transform, opacity;
    }
    .slide-x-reverse-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-x-reverse-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-x-reverse-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .slide-x-reverse-transition-enter-from, .slide-x-reverse-transition-leave-to {
      opacity: 0;
      transform: translateX(15px);
    }
    .slide-x-reverse-transition-enter-active, .slide-x-reverse-transition-leave-active {
      transition-property: transform, opacity;
    }
    .fade-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .fade-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .fade-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .fade-transition-enter-from, .fade-transition-leave-to {
      opacity: 0;
    }
    .fade-transition-enter-active, .fade-transition-leave-active {
      transition-property: opacity;
    }
    .fab-transition-enter-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .fab-transition-leave-active {
      transition-duration: 0.3s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .fab-transition-move {
      transition-duration: 0.5s;
      transition-property: transform;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
    .fab-transition-enter-from, .fab-transition-leave-to {
      transform: scale(0) rotate(-45deg);
    }
    .fab-transition-enter-active, .fab-transition-leave-active {
      transition-property: transform;
    }
  }
}
@layer vuetify-core.base {
  .v-locale--is-rtl {
    direction: rtl;
  }
  .v-locale--is-ltr {
    direction: ltr;
  }
}
@layer vuetify-components {
  .blockquote {
    margin: 0;
    padding: 16px 0 16px 24px;
    font-size: 18px;
    font-weight: 300;
  }
}
@layer vuetify-core.base {
  html {
    font-family: var(--v-font-body, "Roboto", sans-serif);
    line-height: 1.5;
    font-size: 1rem;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  html.overflow-y-hidden {
    overflow-y: hidden;
  }
  :root {
    --v-theme-overlay-multiplier: 1;
    --v-scrollbar-offset: 0px;
  }
  @supports (-webkit-touch-callout: none) {
    body {
      cursor: pointer;
    }
  }
}