yangxiangyuan
206 lines
6.5 KiB
CSS
206 lines
6.5 KiB
CSS
.root, :root { --card-title-size: 32px; --card-list-size: 24px; --card-padding: 24px }
|
||
.html, body { height: 100%; overflow: hidden }
|
||
.wall { display: grid; gap: 12px; padding: 8px; min-height: calc(100vh - 60px); height: 100vh; box-sizing: border-box }
|
||
.cards { display: grid; grid-template-columns: 1fr; grid-auto-rows: 1fr; height: 100%; gap: 0; align-content: stretch; overflow: hidden }
|
||
.cards-inner { display: flex; height: 100%; gap: 12px; will-change: transform; transition: transform 300ms ease }
|
||
.cards-inner .card { flex: 0 0 calc(50% - 6px) }
|
||
.cards { position: relative }
|
||
.card { border: 2px solid #111; border-radius: 16px; padding: var(--card-padding); background: rgba(255,255,255,0.96) }
|
||
.card { height: 100%; display: flex; flex-direction: column; position: relative; z-index: 1; overflow: hidden }
|
||
.card::before { content: ""; position: absolute; inset: 0; border-radius: 16px; background-image: var(--card-bg-image, none); background-repeat: var(--card-bg-repeat, repeat); background-size: var(--card-bg-size, 120px 120px); background-position: center; opacity: var(--card-bg-opacity, 0.08); z-index: 0 }
|
||
.card > * { position: relative; z-index: 1 }
|
||
.card .list { flex: 1; font-size: var(--card-list-size) }
|
||
.card .lines { flex: 1; font-size: var(--card-list-size); line-height: 1.5 }
|
||
.card .lines div { margin: 6px 0 }
|
||
.card .title { font-size: var(--card-title-size) }
|
||
.card .title { font-size: 32px; font-weight: 700; margin-bottom: 12px }
|
||
.card .list { font-size: 24px; line-height: 1.5 }
|
||
.card .list li { margin: 6px 0 }
|
||
.card .meta { margin-top: 8px; font-size: 16px; color: #666 }
|
||
.status { margin: 8px 0; padding: 8px; border: 1px solid #ffd666; background: #fffbe6; color: #a87000; border-radius: 8px }
|
||
.controls { display: flex; gap: 8px; align-items: center }
|
||
.preview { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 6px; max-height: 100%; overflow-y: auto }
|
||
.thumb { border: 1px solid #bbb; border-radius: 10px; padding: 6px; background: #fff; cursor: pointer }
|
||
.thumb .title { font-size: 12px; font-weight: 600; margin-bottom: 4px }
|
||
.preview .title { display: block; max-width: 6em; word-break: break-all; overflow-wrap: anywhere; white-space: normal }
|
||
.thumb .list { display: none }
|
||
.thumb.active { border-color: #1677ff }
|
||
.debug { margin: 12px 0; padding: 8px; border: 1px dashed #aaa; }
|
||
.debug-actions { display: flex; gap: 8px; margin-bottom: 8px }
|
||
.debug-output { height: 240px; overflow: auto; background: #fafafa; padding: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; white-space: pre-wrap }
|
||
|
||
/* Landscape preference */
|
||
@media (orientation: landscape) {
|
||
.wall {
|
||
grid-template-columns: 1fr auto;
|
||
grid-template-rows: 1fr auto;
|
||
grid-template-areas:
|
||
"cards preview"
|
||
"controls controls";
|
||
align-items: start;
|
||
}
|
||
.preview { display: grid; grid-template-columns: 1fr; grid-auto-rows: min-content; gap: 6px; overflow: auto; width: 8em; box-sizing: border-box }
|
||
.thumb { min-width: unset; width: 100% }
|
||
.preview .title { max-width: 8em }
|
||
.weather { grid-column: 1 / -1 !important }
|
||
.controls { grid-column: 1 / -1 !important; width: 100% }
|
||
}
|
||
|
||
/* Portrait phones (iPhone 14/Pro/Max widths ~393–430px) */
|
||
@media (max-width: 480px) {
|
||
.wall { gap: 8px; padding: 6px; min-height: 100vh }
|
||
.cards { gap: 8px }
|
||
.card { padding: var(--card-padding) }
|
||
.card .title { font-size: var(--card-title-size) }
|
||
.card .list { font-size: var(--card-list-size) }
|
||
.preview { display: flex; gap: 6px; overflow: hidden; flex-wrap: nowrap }
|
||
.thumb { min-width: 90px; padding: 4px }
|
||
.thumb .title { font-size: 11px }
|
||
.thumb .list { font-size: 9px; line-height: 1.25 }
|
||
.controls { gap: 6px }
|
||
}
|
||
|
||
/* Portrait mobile: allow vertical scroll */
|
||
@media (max-width: 480px) and (orientation: portrait) {
|
||
html, body { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch }
|
||
.wall { min-height: auto }
|
||
}
|
||
|
||
/* Mobile iPad/iPhone friendly */
|
||
@media (max-width: 800px) {
|
||
.card .title { font-size: 28px }
|
||
.card .list { font-size: 20px }
|
||
.debug-output { height: 160px }
|
||
.controls { flex-wrap: wrap }
|
||
}
|
||
/* Portrait strict sizing for preview and weather */
|
||
@media (orientation: portrait) {
|
||
.preview { height: 4em; display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; align-items: center }
|
||
.thumb { height: 3.6em; padding: 4px 6px; display: flex; align-items: center }
|
||
.preview .title { line-height: 1em; max-width: 8em; max-height: 4em; word-break: break-all; overflow: hidden; white-space: normal }
|
||
}
|
||
|
||
.wall-settings-modal {
|
||
max-width: 640px;
|
||
width: 90vw;
|
||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
|
||
border-radius: 14px;
|
||
padding: 20px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.wall-settings-modal h3 {
|
||
margin: 0 0 8px 0;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.wall-settings-modal label {
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
font-size: 13px;
|
||
color: #555;
|
||
}
|
||
|
||
.wall-settings-modal input,
|
||
.wall-settings-modal select {
|
||
width: 100%;
|
||
}
|
||
|
||
.wall-cards-modal {
|
||
width: 80vw;
|
||
max-width: 80vw;
|
||
max-height: 80vh;
|
||
height: 80vh;
|
||
padding: 20px;
|
||
border-radius: 14px;
|
||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
|
||
display: grid;
|
||
grid-template-rows: auto auto 1fr auto;
|
||
gap: 12px;
|
||
}
|
||
|
||
.wall-cards-modal h3 {
|
||
margin: 0;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.cards-modal-toolbar {
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
|
||
.cards-modal-main {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
|
||
gap: 12px;
|
||
min-height: 0;
|
||
}
|
||
|
||
.cards-modal-list {
|
||
border: 1px solid #e5e5e5;
|
||
border-radius: 8px;
|
||
padding: 8px;
|
||
background: #fafafa;
|
||
overflow: auto;
|
||
}
|
||
|
||
.cards-modal-editor {
|
||
display: grid;
|
||
grid-template-rows: auto 1fr auto;
|
||
gap: 8px;
|
||
min-height: 0;
|
||
}
|
||
|
||
.cards-modal-textarea {
|
||
display: grid;
|
||
grid-template-rows: auto 1fr;
|
||
min-height: 0;
|
||
}
|
||
|
||
.cards-modal-textarea textarea {
|
||
width: 100%;
|
||
height: 100%;
|
||
resize: none;
|
||
}
|
||
|
||
.cards-table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.cards-table th,
|
||
.cards-table td {
|
||
padding: 4px 6px;
|
||
border-bottom: 1px solid #e5e5e5;
|
||
}
|
||
|
||
.cards-table tr:hover {
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
.wall-cards-modal label {
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
font-size: 13px;
|
||
color: #555;
|
||
}
|
||
|
||
.wall-cards-modal input,
|
||
.wall-cards-modal textarea {
|
||
width: 100%;
|
||
}
|
||
|
||
@media (max-width: 800px) {
|
||
.wall-cards-modal {
|
||
width: 96vw;
|
||
max-width: 96vw;
|
||
grid-template-rows: auto auto 1fr auto;
|
||
}
|
||
.cards-modal-main {
|
||
grid-template-columns: 1fr;
|
||
grid-template-rows: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||
}
|
||
}
|