zimonianhua
3d6ba87546
- 为 Header 组件添加 fixed 定位，并调整 body 顶部内边距 - 为主内容区域增加内边距和最大宽度限制以提升可读性 - 为多个 Segment 组件添加 basic 属性以移除背景和阴影 - 新增 CSS 工具类 `neu-no-shadow` 用于透明化元素 - 优化按钮间距、菜单项悬停效果及活动状态样式
312 lines
8.0 KiB
CSS
312 lines
8.0 KiB
CSS
/* Neumorphism Global Styles */
|
|
|
|
:root {
|
|
--neu-bg: #e0e5ec;
|
|
--neu-bg-light: #f0f0f3;
|
|
--neu-shadow-dark: #b8bcc2;
|
|
--neu-shadow-light: #ffffff;
|
|
--neu-accent: #6d5dfc;
|
|
--neu-text: #333333;
|
|
--neu-text-muted: #6b7280;
|
|
--neu-radius: 12px;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
padding-top: 70px; /* Increased for better header separation */
|
|
overflow-y: scroll;
|
|
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, "Microsoft YaHei", sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
background-color: var(--neu-bg);
|
|
color: var(--neu-text);
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
body::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
code {
|
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 24px; /* Increased padding */
|
|
max-width: 1200px; /* Limit width for better readability */
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.small-icon .icon {
|
|
font-size: 1em !important;
|
|
}
|
|
|
|
.quote {
|
|
margin-left: 0;
|
|
padding: 0 1em;
|
|
border-left: 0.25em solid #ddd;
|
|
}
|
|
|
|
a {
|
|
color: var(--neu-accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: #5a4ad1; /* Slightly darker accent */
|
|
}
|
|
|
|
/* Utility Classes */
|
|
.neu-raised {
|
|
background: var(--neu-bg);
|
|
border-radius: var(--neu-radius);
|
|
box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
|
|
border: none !important;
|
|
}
|
|
|
|
.neu-raised-sm {
|
|
background: var(--neu-bg);
|
|
border-radius: var(--neu-radius);
|
|
box-shadow: 4px 4px 8px var(--neu-shadow-dark), -4px -4px 8px var(--neu-shadow-light);
|
|
border: none !important;
|
|
}
|
|
|
|
.neu-pressed {
|
|
background: var(--neu-bg);
|
|
border-radius: var(--neu-radius);
|
|
box-shadow: inset 8px 8px 16px var(--neu-shadow-dark), inset -8px -8px 16px var(--neu-shadow-light);
|
|
border: none !important;
|
|
}
|
|
|
|
.neu-pressed-sm {
|
|
background: var(--neu-bg);
|
|
border-radius: var(--neu-radius);
|
|
box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light);
|
|
border: none !important;
|
|
}
|
|
|
|
.neu-circle {
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
/* New Helper to remove shadow */
|
|
.neu-no-shadow {
|
|
box-shadow: none !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
}
|
|
|
|
/* Semantic UI Overrides */
|
|
|
|
/* Segments, Cards, Messages */
|
|
.ui.segment,
|
|
.ui.card,
|
|
.ui.cards > .card,
|
|
.ui.message {
|
|
background: var(--neu-bg) !important;
|
|
border: none !important;
|
|
box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light) !important;
|
|
border-radius: var(--neu-radius) !important;
|
|
color: var(--neu-text) !important;
|
|
}
|
|
|
|
/* Special class for transparent segments */
|
|
.ui.basic.segment {
|
|
box-shadow: none !important;
|
|
background: transparent !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.ui.card > .content > .header,
|
|
.ui.cards > .card > .content > .header,
|
|
.ui.header {
|
|
color: var(--neu-text) !important;
|
|
}
|
|
|
|
.ui.card > .content > .meta,
|
|
.ui.cards > .card > .content > .meta {
|
|
color: var(--neu-text-muted) !important;
|
|
}
|
|
|
|
/* Remove internal borders in segments/cards if desired, or keep them soft */
|
|
.ui.segment:after, .ui.segment:before {
|
|
display: none;
|
|
}
|
|
|
|
/* Buttons */
|
|
.ui.button {
|
|
background: var(--neu-bg) !important;
|
|
color: var(--neu-text) !important;
|
|
border: none !important;
|
|
box-shadow: 5px 5px 10px var(--neu-shadow-dark), -5px -5px 10px var(--neu-shadow-light) !important;
|
|
border-radius: 10px !important;
|
|
transition: all 0.2s ease !important;
|
|
font-weight: 600 !important;
|
|
margin-right: 8px !important; /* Add spacing between buttons */
|
|
}
|
|
|
|
.ui.button:hover {
|
|
background: var(--neu-bg) !important;
|
|
box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.ui.button:active,
|
|
.ui.button.active {
|
|
background: var(--neu-bg) !important;
|
|
box-shadow: inset 4px 4px 8px var(--neu-shadow-dark), inset -4px -4px 8px var(--neu-shadow-light) !important;
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Circular Buttons */
|
|
.ui.circular.button {
|
|
border-radius: 50% !important;
|
|
}
|
|
|
|
/* Primary/Positive/Negative buttons - use accent color text or slight tint */
|
|
.ui.primary.button, .ui.blue.button {
|
|
color: var(--neu-accent) !important;
|
|
}
|
|
.ui.positive.button, .ui.green.button {
|
|
color: #21ba45 !important;
|
|
}
|
|
.ui.negative.button, .ui.red.button {
|
|
color: #db2828 !important;
|
|
}
|
|
|
|
/* Inputs */
|
|
.ui.form input:not([type]),
|
|
.ui.form input[type=date],
|
|
.ui.form input[type=datetime-local],
|
|
.ui.form input[type=email],
|
|
.ui.form input[type=file],
|
|
.ui.form input[type=number],
|
|
.ui.form input[type=password],
|
|
.ui.form input[type=search],
|
|
.ui.form input[type=tel],
|
|
.ui.form input[type=text],
|
|
.ui.form input[type=time],
|
|
.ui.form input[type=url],
|
|
.ui.input > input,
|
|
.ui.form textarea {
|
|
background: var(--neu-bg) !important;
|
|
border: none !important;
|
|
box-shadow: inset 5px 5px 10px var(--neu-shadow-dark), inset -5px -5px 10px var(--neu-shadow-light) !important;
|
|
border-radius: var(--neu-radius) !important;
|
|
color: var(--neu-text) !important;
|
|
padding: 1em !important;
|
|
}
|
|
|
|
.ui.form input:focus, .ui.input > input:focus, .ui.form textarea:focus {
|
|
color: var(--neu-accent) !important;
|
|
}
|
|
|
|
/* Menu / Header */
|
|
.ui.menu {
|
|
background: var(--neu-bg) !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Fixed Header Style */
|
|
.ui.menu.fixed {
|
|
box-shadow: 0px 4px 10px var(--neu-shadow-dark) !important;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.ui.menu .item {
|
|
color: var(--neu-text) !important;
|
|
margin: 0 4px !important;
|
|
border-radius: 8px !important;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.ui.menu .item:before {
|
|
background: transparent !important;
|
|
}
|
|
|
|
.ui.menu .item:hover {
|
|
background: transparent !important;
|
|
box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light) !important;
|
|
}
|
|
|
|
.ui.menu .active.item {
|
|
background: transparent !important;
|
|
color: var(--neu-accent) !important;
|
|
font-weight: bold !important;
|
|
box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light) !important;
|
|
}
|
|
|
|
/* Dropdown */
|
|
.ui.dropdown .menu {
|
|
background: var(--neu-bg) !important;
|
|
border: none !important;
|
|
box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light) !important;
|
|
border-radius: var(--neu-radius) !important;
|
|
}
|
|
|
|
.ui.dropdown .menu > .item {
|
|
color: var(--neu-text) !important;
|
|
border-top: none !important;
|
|
}
|
|
|
|
.ui.dropdown .menu > .item:hover {
|
|
background: transparent !important;
|
|
box-shadow: inset 3px 3px 6px var(--neu-shadow-dark), inset -3px -3px 6px var(--neu-shadow-light) !important;
|
|
border-radius: 8px !important;
|
|
}
|
|
|
|
/* Labels */
|
|
.ui.label {
|
|
background: var(--neu-bg) !important;
|
|
box-shadow: 3px 3px 6px var(--neu-shadow-dark), -3px -3px 6px var(--neu-shadow-light) !important;
|
|
border: none !important;
|
|
color: var(--neu-text) !important;
|
|
border-radius: 6px !important;
|
|
}
|
|
|
|
/* Tables */
|
|
.ui.table {
|
|
background: var(--neu-bg) !important;
|
|
border: none !important;
|
|
box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light) !important;
|
|
border-radius: var(--neu-radius) !important;
|
|
}
|
|
.ui.table thead th {
|
|
background: var(--neu-bg) !important;
|
|
border-bottom: 1px solid rgba(0,0,0,0.05) !important;
|
|
color: var(--neu-text) !important;
|
|
}
|
|
.ui.table tbody td {
|
|
border-top: 1px solid rgba(0,0,0,0.05) !important;
|
|
}
|
|
|
|
/* Modal */
|
|
.ui.modal {
|
|
background: var(--neu-bg) !important;
|
|
border-radius: var(--neu-radius) !important;
|
|
box-shadow: 10px 10px 20px var(--neu-shadow-dark), -10px -10px 20px var(--neu-shadow-light) !important;
|
|
}
|
|
.ui.modal > .header, .ui.modal > .content, .ui.modal > .actions {
|
|
background: var(--neu-bg) !important;
|
|
border: none !important;
|
|
color: var(--neu-text) !important;
|
|
}
|
|
|
|
/* Divider */
|
|
.ui.divider {
|
|
border-top: 1px solid rgba(0,0,0,0.05) !important;
|
|
border-bottom: 1px solid rgba(255,255,255,0.8) !important;
|
|
}
|
|
|
|
.custom-footer {
|
|
font-size: 1.1em;
|
|
color: var(--neu-text-muted);
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
.hide-on-mobile {
|
|
display: none !important;
|
|
}
|
|
}
|