整合去雾网页工具
This commit is contained in:
admin
428
web_dehaze/static/style.css
Normal file
428
web_dehaze/static/style.css
Normal file
@@ -0,0 +1,428 @@
|
||||
:root {
|
||||
--paper: #f4f0e8;
|
||||
--panel: #fffaf1;
|
||||
--ink: #1e2520;
|
||||
--muted: #6d756f;
|
||||
--line: #d8d0c3;
|
||||
--green: #1f6b57;
|
||||
--green-dark: #124839;
|
||||
--cobalt: #295f9f;
|
||||
--amber: #c1842d;
|
||||
--red: #b3473f;
|
||||
--shadow: 0 18px 60px rgba(33, 37, 31, 0.12);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--ink);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(31, 107, 87, 0.06) 1px, transparent 1px),
|
||||
linear-gradient(0deg, rgba(31, 107, 87, 0.05) 1px, transparent 1px),
|
||||
var(--paper);
|
||||
background-size: 28px 28px;
|
||||
font-family: "Aptos", "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(300px, 360px) 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
padding: 24px 20px;
|
||||
border-right: 1px solid var(--line);
|
||||
background: rgba(255, 250, 241, 0.94);
|
||||
box-shadow: var(--shadow);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding-bottom: 22px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.brand-mark {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border: 2px solid var(--ink);
|
||||
background:
|
||||
linear-gradient(135deg, transparent 46%, var(--ink) 47%, var(--ink) 53%, transparent 54%),
|
||||
linear-gradient(45deg, var(--green) 0 48%, var(--amber) 48% 100%);
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.brand p,
|
||||
.eyebrow {
|
||||
margin-top: 6px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.panel-section {
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.panel-section h2,
|
||||
.log-head h2 {
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.image-list,
|
||||
.check-grid {
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.image-item,
|
||||
.check-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
min-height: 42px;
|
||||
padding: 9px 10px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
|
||||
.image-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.image-item.active {
|
||||
border-color: var(--green);
|
||||
background: rgba(31, 107, 87, 0.12);
|
||||
}
|
||||
|
||||
.image-meta,
|
||||
.method-meta {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.check-item.disabled {
|
||||
color: var(--muted);
|
||||
background: rgba(216, 208, 195, 0.34);
|
||||
}
|
||||
|
||||
.check-item input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--green);
|
||||
}
|
||||
|
||||
.compact {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.param-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.param-grid label,
|
||||
.field {
|
||||
display: grid;
|
||||
gap: 6px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.param-grid input,
|
||||
.field select {
|
||||
width: 100%;
|
||||
min-height: 38px;
|
||||
border: 1px solid var(--line);
|
||||
background: #fffdf8;
|
||||
color: var(--ink);
|
||||
padding: 7px 8px;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.primary-btn,
|
||||
.secondary-btn,
|
||||
.text-btn {
|
||||
min-height: 42px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.primary-btn,
|
||||
.secondary-btn {
|
||||
width: 100%;
|
||||
margin-top: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.primary-btn {
|
||||
background: var(--green);
|
||||
}
|
||||
|
||||
.primary-btn:hover {
|
||||
background: var(--green-dark);
|
||||
}
|
||||
|
||||
.secondary-btn {
|
||||
background: var(--cobalt);
|
||||
}
|
||||
|
||||
.secondary-btn:hover {
|
||||
background: #1e4d83;
|
||||
}
|
||||
|
||||
.text-btn {
|
||||
padding: 0 12px;
|
||||
border-color: var(--line);
|
||||
background: #fffdf8;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.slider-row {
|
||||
display: grid;
|
||||
grid-template-columns: 20px 1fr 52px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.slider-row input {
|
||||
accent-color: var(--green);
|
||||
}
|
||||
|
||||
.slider-row strong {
|
||||
color: var(--ink);
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.toggle-line {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
color: var(--muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.toggle-line input {
|
||||
accent-color: var(--green);
|
||||
}
|
||||
|
||||
.workspace {
|
||||
min-width: 0;
|
||||
padding: 26px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.topbar h2 {
|
||||
margin-top: 4px;
|
||||
font-size: clamp(22px, 3vw, 38px);
|
||||
line-height: 1.05;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.job-state {
|
||||
min-width: 92px;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 250, 241, 0.82);
|
||||
text-align: center;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.job-state.running {
|
||||
color: var(--cobalt);
|
||||
border-color: rgba(41, 95, 159, 0.35);
|
||||
}
|
||||
|
||||
.job-state.error {
|
||||
color: var(--red);
|
||||
border-color: rgba(179, 71, 63, 0.4);
|
||||
}
|
||||
|
||||
.job-state.done {
|
||||
color: var(--green);
|
||||
border-color: rgba(31, 107, 87, 0.4);
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 14px;
|
||||
max-height: calc(100vh - 300px);
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
min-height: 230px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(255, 250, 241, 0.82);
|
||||
}
|
||||
|
||||
.result-card header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
min-height: 42px;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.result-card h3 {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.badge {
|
||||
flex: 0 0 auto;
|
||||
padding: 3px 7px;
|
||||
border: 1px solid var(--line);
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.badge.ok {
|
||||
color: var(--green);
|
||||
border-color: rgba(31, 107, 87, 0.4);
|
||||
}
|
||||
|
||||
.badge.pending {
|
||||
color: var(--amber);
|
||||
border-color: rgba(193, 132, 45, 0.42);
|
||||
}
|
||||
|
||||
.image-frame {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 188px;
|
||||
padding: 8px;
|
||||
background:
|
||||
linear-gradient(45deg, rgba(30, 37, 32, 0.05) 25%, transparent 25% 75%, rgba(30, 37, 32, 0.05) 75%),
|
||||
linear-gradient(45deg, rgba(30, 37, 32, 0.05) 25%, transparent 25% 75%, rgba(30, 37, 32, 0.05) 75%);
|
||||
background-position: 0 0, 8px 8px;
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
|
||||
.image-frame img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 38vh;
|
||||
object-fit: contain;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.missing {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.log-panel {
|
||||
margin-top: 18px;
|
||||
border: 1px solid var(--line);
|
||||
background: rgba(30, 37, 32, 0.92);
|
||||
color: #e9eadf;
|
||||
}
|
||||
|
||||
.log-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 44px;
|
||||
padding: 8px 10px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.log-head h2 {
|
||||
margin: 0;
|
||||
color: #f7f2e8;
|
||||
}
|
||||
|
||||
.log-panel .text-btn {
|
||||
min-height: 30px;
|
||||
background: transparent;
|
||||
color: #f7f2e8;
|
||||
border-color: rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
#logBox {
|
||||
height: 172px;
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
font-family: "Cascadia Mono", "Noto Sans Mono", monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.shell {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.control-panel {
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.workspace {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
align-items: start;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.result-grid {
|
||||
max-height: none;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user