239 lines
6.9 KiB
CSS
239 lines
6.9 KiB
CSS
:host {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
--canvas-bg: #f8f9fa;
|
||
--canvas-grid: #dee2e6;
|
||
--paper-bg: #fffbf0;
|
||
--paper-shadow: rgba(0,0,0,0.1);
|
||
--selection-color: #0d6efd;
|
||
}
|
||
|
||
:host-context([data-bs-theme="dark"]) {
|
||
--canvas-bg: #0f1114;
|
||
--canvas-grid: #2b3035;
|
||
--paper-shadow: rgba(0,0,0,0.8);
|
||
/* 紙張保持米黃，因為它是實物模擬 */
|
||
}
|
||
|
||
|
||
.designer-root {
|
||
/* 防止瀏覽器預設捲動影響畫布 */
|
||
overflow: hidden;
|
||
}
|
||
|
||
.canvas-area {
|
||
background-color: var(--canvas-bg);
|
||
background-image: linear-gradient(45deg, var(--canvas-grid) 25%, transparent 25%), linear-gradient(-45deg, var(--canvas-grid) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--canvas-grid) 75%), linear-gradient(-45deg, transparent 75%, var(--canvas-grid) 75%);
|
||
background-size: 20px 20px;
|
||
transition: background-color 0.3s;
|
||
min-height: 100vw;
|
||
|
||
}
|
||
|
||
.tablet-paper {
|
||
background-color: var(--paper-bg);
|
||
box-shadow: 0 10px 30px var(--paper-shadow);
|
||
transition: all 0.3s;
|
||
overflow: hidden;
|
||
/* 確保在列印時被視為一個分頁單元 */
|
||
page-break-inside: avoid;
|
||
}
|
||
|
||
.tablet-element {
|
||
cursor: move;
|
||
padding: 4px;
|
||
color: black !important; /* 強制墨水為黑色 */
|
||
border: 1px solid transparent;
|
||
transition: writing-mode 0.3s, transform 0.2s;
|
||
}
|
||
.tablet-element:hover { border-color: rgba(13, 110, 253, 0.3); }
|
||
|
||
|
||
/* 直書模式核心 */
|
||
.vertical-text {
|
||
writing-mode: vertical-rl;
|
||
text-orientation: mixed; /* 這是關鍵：中文直立，英文轉90度 */
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
/* 縱中橫 (讓直書中的數字變成橫向) */
|
||
.tate-chu-yoko {
|
||
text-combine-upright: all; /* 擠在一起 */
|
||
/* 或者使用 digits 4 (但在某些瀏覽器支援度不一，all 比較保險) */
|
||
display: inline-block;
|
||
letter-spacing: 0; /* 數字之間不要有間距 */
|
||
}
|
||
|
||
/* 名單金字塔佈局容器 */
|
||
.roster-container {
|
||
width: 100%; height: 600px;
|
||
writing-mode: vertical-rl; /* 直書 */
|
||
display: flex;
|
||
/*flex-direction: column;*/ /* 雖然是直書，但物理上我們是將「上層區」和「下層區」垂直堆疊 */
|
||
flex-direction: row; /* 上下分層 (Top / Bottom) */
|
||
align-items: center; /* 左右置中對齊 */
|
||
justify-content: center;
|
||
gap: 20px; /* 這是「上層」跟「下層」之間的距離，可以設大一點 */
|
||
}
|
||
|
||
.roster-row {
|
||
display: flex;
|
||
flex-direction: row-reverse; /* 直書由右至左，所以 Row 要反向或依需求調整 */
|
||
justify-content: center;
|
||
gap: 8px; /* 名字之間的間距 */
|
||
margin-left: 10px; /* 上下排之間的間距 (因為是直書，margin-left 是物理上的左邊/下方) */
|
||
}
|
||
|
||
.name-group {
|
||
display: flex;
|
||
flex-direction: column; /* ★★★ 關鍵：這讓名字左右並排 ★★★ */
|
||
justify-content: center;
|
||
align-items: center;
|
||
/* gap 由 HTML 動態綁定 */
|
||
}
|
||
|
||
.roster-name {
|
||
text-orientation: upright;
|
||
/*font-weight: bold;*/
|
||
white-space: nowrap;
|
||
line-height: 1.2;
|
||
font-family: 'Kaiti', serif;
|
||
/* 確保名字本身不會佔據過多寬度導致間距看起來很大 */
|
||
width: fit-content;
|
||
height:200px;
|
||
}
|
||
|
||
|
||
/* 選取框 */
|
||
.selection-border {
|
||
position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px;
|
||
border: 2px solid var(--selection-color); pointer-events: none; z-index: 100;
|
||
}
|
||
|
||
.resize-handle {
|
||
position: absolute; width: 10px; height: 10px; background: white;
|
||
border: 2px solid var(--selection-color); border-radius: 50%;
|
||
}
|
||
.top-left { top: -6px; left: -6px; } .top-right { top: -6px; right: -6px; }
|
||
.bottom-left { bottom: -6px; left: -6px; } .bottom-right { bottom: -6px; right: -6px; }
|
||
|
||
.x-small { font-size: 0.7rem; } .ls-1 { letter-spacing: 1px; }
|
||
.bg-gradient-primary { background: linear-gradient(135deg, #0d6efd 0%, #0043a8 100%); }
|
||
.bg-gradient-dark { background: linear-gradient(135deg, #212529 0%, #000000 100%); }
|
||
|
||
.page-info-badge {
|
||
background: rgba(255,255,255,0.9); padding: 5px 15px; border-radius: 20px; font-weight: bold; color: #333;
|
||
}
|
||
|
||
/* Print Mode */
|
||
@media print {
|
||
app-floating-widget, .canvas-area, .page-info-badge { display: none !important; }
|
||
:host { display: block; background: white; }
|
||
|
||
.tablet-paper {
|
||
position: relative !important;
|
||
margin: 0;
|
||
page-break-after: always; /* 強制分頁 */
|
||
box-shadow: none !important; background: transparent !important;
|
||
width: 100% !important; height: 100% !important;
|
||
-webkit-print-color-adjust: exact; print-color-adjust: exact;
|
||
}
|
||
.tablet-paper:last-child { page-break-after: auto; }
|
||
|
||
.paper-size-label, .selection-border { display: none; }
|
||
|
||
/* 確保背景圖列印 */
|
||
img.bg-image-layer {
|
||
-webkit-print-color-adjust: exact; print-color-adjust: exact;
|
||
display: block !important;
|
||
}
|
||
}
|
||
|
||
.resizable-box {
|
||
width: 300px;
|
||
height: 200px;
|
||
border: 1px solid #ccc;
|
||
|
||
/* 關鍵屬性 */
|
||
resize: both; /* 允許水平和垂直調整 (或是 horizontal, vertical) */
|
||
overflow: auto; /* 必須設定 overflow (非 visible) resize 才會生效 */
|
||
|
||
/* 選用：限制最小最大尺寸 */
|
||
min-width: 100px;
|
||
min-height: 100px;
|
||
}
|
||
|
||
|
||
.combined-vertical-mode {
|
||
writing-mode: vertical-rl; /* 設定為直排 */
|
||
font-family: "KaiTi", "BiauKai", serif;
|
||
font-size: 48px;
|
||
font-weight: bold;
|
||
letter-spacing: 0.1em;
|
||
/* 為了讓排版置中好看，可以加這行 */
|
||
align-items: center;
|
||
}
|
||
|
||
.combined {
|
||
/* --- 關鍵修改 --- */
|
||
|
||
/* 1. 取消原本的擠壓設定 */
|
||
text-combine-upright: none;
|
||
|
||
/* 2. 將這三個字改回「橫向排版」 */
|
||
writing-mode: horizontal-tb;
|
||
|
||
/* 3. 讓它變成一個區塊，這樣字體才會撐開空間，不會擠在一起 */
|
||
display: inline-block;
|
||
|
||
/* 4. (選用) 調整它跟下方直書文字的對齊方式 */
|
||
vertical-align: middle;
|
||
|
||
/* 5. (選用) 如果希望字與字之間稍微寬鬆一點 */
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.combined-small {
|
||
font-size: 32px !important;
|
||
}
|
||
|
||
.auto-wrap-text {
|
||
/* 1. 設定為直書模式 */
|
||
writing-mode: vertical-rl;
|
||
text-orientation: upright; /* 讓文字直立 */
|
||
|
||
/* 2. 關鍵：限制最大高度 */
|
||
/* 設定為 8em 代表大約 8 個字的高度，超過就會自動換行 */
|
||
max-height: 8em;
|
||
|
||
/* 3. 關鍵：允許換行 */
|
||
white-space: normal; /* 或 pre-wrap */
|
||
|
||
/* 4. 調整換行的方向與對齊 (選用) */
|
||
display: inline-block; /* 讓容器隨內容撐開 */
|
||
word-break: break-all; /* 確保長單字或連續文字也能強制切斷換行 */
|
||
}
|
||
|
||
.ancestor-wrapper {
|
||
/* 重置為橫向流，這樣 column 才會是真正的上下堆疊 */
|
||
writing-mode: horizontal-tb;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center; /* 水平置中 */
|
||
justify-content: center;
|
||
width: fit-content;
|
||
}
|
||
|
||
.main-name {
|
||
line-height: 1.2;
|
||
/* 保持大字 */
|
||
}
|
||
|
||
.sub-text {
|
||
font-size: 0.6em; /* 縮小字體 */
|
||
line-height: 1.2;
|
||
margin-top: 4px; /* 與上方林張的間距 */
|
||
white-space: nowrap; /* 避免自動換行 */
|
||
writing-mode:vertical-rl
|
||
} |