mirror of
https://github.com/NapNeko/NapCatQQ.git
synced 2024-11-16 04:45:46 +00:00
feat: webui style
This commit is contained in:
手瓜一十雪
parent
a46313e483
commit
f95db623a5
201
static/assets/style.css
Normal file
201
static/assets/style.css
Normal file
@ -0,0 +1,201 @@
|
||||
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;
|
||||
}
|
||||
@ -6,9 +6,10 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- 源样式 -->
|
||||
<link rel="stylesheet" href="./assets/NapCat.css" />
|
||||
<link rel="stylesheet" href="./assets/color.css" />
|
||||
<!-- 修补样式 -->
|
||||
<link rel="stylesheet" href="./assets/webcomponents.css" />
|
||||
<link rel="stylesheet" href="./assets/style.css" />
|
||||
<link rel="stylesheet" href="./assets/color.css" />
|
||||
<!-- 脚手架 -->
|
||||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
||||
<title>NapCat-WebUi</title>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user