NapCatQQ/static/assets/style.css

body, html {
    background: var(--bg_bottom_standard);
    color: var(--text_primary);
    font-family: "Color Emoji", system-ui, "PingFang SC", PingFangSC-Regular, "Microsoft YaHei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", Arial, Helvetica, sans-serif, "Apple Braille", "Color Emoji Fix";
    min-height: 100vh;
    scroll-behavior: smooth;
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
  
    --z_index_popover: 999;
    --nt_mix_tokens: nt_brand_standard_2_overlay_hover_brand_2_mix,nt_brand_standard_2_overlay_pressed_brand_2_mix,nt_feedback_error_2_overlay_hover_brand_2_mix,nt_feedback_error_2_overlay_pressed_brand_2_mix,nt_icon_white_2_overlay_hover_2_mix,nt_icon_white_2_overlay_pressed_2_mix,nt_bubble_host_2_overlay_pressed_brand_2_mix,nt_bg_white_2_overlay_pressed_brand_2_mix,nt_bg_white_2_overlay_hover_2_mix,nt_bg_white_2_overlay_pressed_2_mix,nt_fg_white_2_overlay_hover_2_mix,nt_fg_white_2_overlay_pressed_2_mix,nt_icon_red_2_overlay_hover_2_mix,nt_icon_red_2_overlay_pressed_2_mix,nt_fg_grey_standard_2_overlay_hover_2_mix,nt_fg_grey_standard_2_overlay_pressed_2_mix,nt_bubble_guest_2_overlay_pressed_2_mix,nt_icon_primary_2_20_2_alpha,nt_bg_grey_standard_2_95_2_alpha,nt_tag_red_2_20_2_alpha,nt_tag_red_2_25_2_alpha,nt_tag_blue_2_20_2_alpha,nt_tag_blue_2_25_2_alpha,nt_tag_blue_2_10_2_alpha,nt_tag_purple_2_20_2_alpha,nt_brand_standard_2_20_2_alpha,nt_tag_sage_green_2_20_2_alpha,nt_feedback_error_2_20_2_alpha,nt_text_white_2_60_2_alpha,nt_bg_white_2_70_2_alpha,nt_bg_white_2_90_2_alpha,nt_bg_white_2_97_2_alpha,nt_bg_white_2_40_2_alpha,nt_bg_white_2_30_2_alpha,nt_text_white_2_80_2_alpha,nt_brand_standard_2_50_2_alpha,nt_bg_nav_secondary_2_60_2_alpha,nt_bg_nav_2_60_2_alpha,nt_feedback_error_2_10_2_alpha,nt_brand_standard_2_10_2_alpha,nt_on_brand_primary_2_40_2_alpha,nt_text_primary_2_72_2_alpha,nt_text_white_2_72_2_alpha;
  }
  
  a, address, article, aside, b, blockquote, body, div, em, fieldset, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, img, label, legend, li, main, nav, ol, p, s, section, span, table, tbody, td, tfoot, th, thead, tr, ul {
    box-sizing: border-box;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    border: 0px;
    margin: 0px;
    padding: 0px;
  }
  
  #app {
    position: relative;
    display: block;
    padding: 20px;
    min-height: 100vh;
    background: transparent;
  }
  
  .fake-bar {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
  }
  
  /* ======== Input ======== */
  .q-input {
    align-items: center;
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--text_secondary);
    display: inline-flex;
    position: relative;
    width: 100%;
    border: 1px solid transparent;
  }
  
  .q-input input, .q-input textarea {
    appearance: none;
    background-color: transparent;
    box-sizing: border-box;
    color: var(--text_primary);
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    font-size: 14px;
    height: fit-content;
    outline-color: initial;
    outline-style: none;
    outline-width: initial;
    resize: none;
    width: 100%;
    border: none;
  }
  
  /* ======== Switch ======== */
  .q-switch {
    background-color: var(--fill_standard_primary);
    border-radius: 14px;
    box-sizing: border-box;
    display: inline-flex;
    position: relative;
    transition-behavior: normal;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.38, 0, 0.24, 1);
    transition-delay: 0s;
    transition-property: all;
    width: 28px;
    padding: 3px;
  }
  
  .q-switch__handle {
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 4px;
    box-sizing: border-box;
    display: inline-block;
    height: 10px;
    position: relative;
    transition-behavior: normal;
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.38, 0, 0.24, 1);
    transition-delay: 0s;
    transition-property: all;
    width: 10px;
    z-index: 2;
    background: var(--icon_white);
  }
  
  .q-switch:not(.is-disabled):hover {
    background: var(--fill_standard_secondary);
  }
  
  .q-switch:not(.is-disabled):active {
    background: var(--nt_bg_white_2_overlay_pressed_brand_2_mix);
  }
  .q-switch:not(.is-disabled):active .q-switch__handle {
    width: 12px;
  }
  
  .q-switch.is-active {
    background-color: var(--brand_standard);
  }
  
  .q-switch.is-active .q-switch__handle {
    transform: translateX(12px);
  }
  
  .q-switch.is-active:not(.is-disabled):hover {
    background: var(--nt_brand_standard_2_overlay_hover_brand_2_mix);
  }
  
  .q-switch.is-active:not(.is-disabled):active {
    background: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix);
  }
  .q-switch.is-active:not(.is-disabled):active .q-switch__handle {
    transform: translateX(10px);
  }
  
  /* ======== Button ======== */
  .q-button {
    align-items: center;
    background-color: var(--brand_standard);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
    display: inline-flex;
    font-size: 14px;
    justify-content: center;
    line-height: 18px;
    outline-color: initial;
    outline-style: none;
    outline-width: initial;
    position: relative;
    vertical-align: text-bottom;
    border: 1px solid var(--fg_grey_standard);
    padding: 5px 11px;
  }
  
  .q-button--small {
    font-size: 12px;
    line-height: 14px;
    min-width: 62px;
    padding: 4px 7px;
  }
  
  .q-button--primary {
    background-color: var(--brand_standard);
    border-color: var(--brand_standard);
    color: var(--on_brand_primary);
  }
  
  .q-button--secondary {
    background-color: transparent;
    border-color: var(--fg_grey_standard);
    color: var(--text_primary);
  }
  
  .q-button:not([disabled]):hover {
    background-color: var(--overlay_hover);
  }
  
  .q-button:not([disabled]):active {
    background-color: var(--overlay_pressed);
  }
  
  .q-button--primary:hover {
    background-color: var(--nt_brand_standard_2_overlay_hover_brand_2_mix);
    border-color: var(--nt_brand_standard_2_overlay_hover_brand_2_mix);
  }
  
  .q-button--primary:active {
    background-color: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix);
    border-color: var(--nt_brand_standard_2_overlay_pressed_brand_2_mix);
  }
  
  .q-button[disabled] {
    opacity: 0.3;
    cursor: not-allowed;
  }
  
  .q-button--secondary[disabled] {
    background-color: transparent;
  }