687 lines
10 KiB
CSS
687 lines
10 KiB
CSS
/*頁面設定*/
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 0;
|
|
orphans: 4;
|
|
widows: 2;
|
|
}
|
|
|
|
@page a4-p {
|
|
size: A4 portrait;
|
|
margin: 0;
|
|
}
|
|
|
|
@page a4-l {
|
|
size: A4 landscape;
|
|
margin: 0;
|
|
}
|
|
@page a4-l2 {
|
|
size: 210mm 297mm landscape;
|
|
margin: 0;
|
|
}
|
|
|
|
@page a4-l-2x5 {
|
|
size: A4 landscape;
|
|
/* size: 59mm 104mm; */
|
|
margin: 0;
|
|
}
|
|
|
|
@page tablet-l {
|
|
size: 274mm 392mm;
|
|
margin: 0;
|
|
}
|
|
|
|
@page tablet-m {
|
|
size: 214mm 305mm;
|
|
margin: 0;
|
|
}
|
|
|
|
@page tablet-s {
|
|
size: 197mm 215mm;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
--page-w: 210mm;
|
|
--page-h: 297mm;
|
|
font-family: 標楷體;
|
|
font-size: 32pt;
|
|
margin: 0;
|
|
}
|
|
|
|
body.a4-p {
|
|
page: a4-p;
|
|
}
|
|
|
|
body.a4-l {
|
|
page: a4-l;
|
|
}
|
|
|
|
body.a4-l-2x5 {
|
|
page: a4-l2;
|
|
--page-w: 210mm;
|
|
--page-h: 297mm;
|
|
}
|
|
body.a4-l-2x5 .pages{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: var(--page-w);
|
|
max-width: var(--page-w);
|
|
}
|
|
body.a4-l-2x5 .page {
|
|
margin: 0;
|
|
flex: 0 0 auto;
|
|
/* width: 50%; */
|
|
width: calc(var(--page-w) / 2);
|
|
height: calc(var(--page-h) / 5);
|
|
position: relative;
|
|
outline: 0.25pt dotted #EEE;
|
|
font-size: 9pt;
|
|
}
|
|
body.a4-l-2x5 .page .content{
|
|
position: absolute;
|
|
height: calc(var(--page-w) / 2);
|
|
width: calc(var(--page-h) / 5);
|
|
margin: 0;
|
|
transform: rotate(-90deg);
|
|
top: 0;
|
|
left: -60mm;
|
|
/* right: 0; */
|
|
/* bottom: 0; */
|
|
transform-origin: top right;
|
|
}
|
|
body.a4-l-2x5 .page .bg {
|
|
width: 52%;
|
|
}
|
|
body.a4-l-2x5 .page .bg img{
|
|
height: auto;
|
|
}
|
|
body.a4-l-2x5 .page .text-block.vertical {
|
|
--fs_w: var(--divw)/var(--lines);
|
|
--fs_h: var(--divh)/var(--line_len);
|
|
--fs: min(var(--fs_w), var(--fs_h));
|
|
font-size:9pt;
|
|
line-height: calc(var(--fs_w) * 1.0);
|
|
}
|
|
body.a4-l-2x5 .page .top_text_1{
|
|
font-size: 9pt;
|
|
top:2mm;
|
|
}
|
|
body.a4-l-2x5 .page .top_text_2{
|
|
font-size: 9pt;
|
|
}
|
|
body.a4-l-2x5 .page .top_text_3{
|
|
font-size: 9pt;
|
|
}
|
|
body.a4-l-2x5 .page .right_text {
|
|
--divw: 10mm;
|
|
--divh: 70mm;
|
|
position: absolute;
|
|
right: 10mm;
|
|
top: 20mm;
|
|
}
|
|
body.a4-l-2x5 .page .mid_text {
|
|
--divw: 15mm;
|
|
--divh: 60mm;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 53%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
body.a4-l-2x5 .page .mid_text_2 {
|
|
--divw: 15mm;
|
|
--divh: 20mm;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 15%;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
body.a4-l-2x5 .page .left_text{
|
|
--divw: 20mm;
|
|
--divh: 50mm;
|
|
position: absolute;
|
|
left: 0mm;
|
|
top: 40mm;
|
|
}
|
|
body.a4-l-2x5 .page .txt_up {
|
|
top: 30mm;
|
|
left:0;
|
|
width: 20mm;
|
|
text-align: center;
|
|
line-height: 20mm;
|
|
}
|
|
body.a4-l-2x5 .page .txt_down {
|
|
top: 85mm;
|
|
left: 0;
|
|
width: 20mm;
|
|
text-align: center;
|
|
line-height: 20mm;
|
|
height: 10mm;
|
|
}
|
|
body.a4-l-2x5 .page:nth-child(8n) {
|
|
outline: 0.25pt solid #DDD;
|
|
page-break-after: always;
|
|
}
|
|
body.a4-p {
|
|
--page-w: 210mm;
|
|
--page-h: 297mm;
|
|
page: a4-p;
|
|
font-size: 22pt;
|
|
}
|
|
body.a4-l {
|
|
--page-w: 297mm;
|
|
--page-h: 210mm;
|
|
page: a4-l;
|
|
font-size: 22pt;
|
|
}
|
|
body.a4-l2 {
|
|
--page-w: 297mm;
|
|
--page-h: 210mm;
|
|
page: a4-l2;
|
|
font-size: 22pt;
|
|
}
|
|
body.tablet-l {
|
|
--page-w: 274mm;
|
|
--page-h: 392mm;
|
|
page: tablet-l;
|
|
font-size: 22pt;
|
|
}
|
|
body.tablet-m {
|
|
--page-w: 214mm;
|
|
--page-h: 305mm;
|
|
page: tablet-m;
|
|
font-size: 22pt;
|
|
}
|
|
|
|
body.tablet-s {
|
|
--page-w: 197mm;
|
|
--page-h: 215mm;
|
|
page: tablet-s;
|
|
font-size: 18pt;
|
|
}
|
|
|
|
.page {
|
|
margin: 0 auto;
|
|
width: var(--page-w);
|
|
height: var(--page-h);
|
|
position: relative;
|
|
page-break-inside:avoid;
|
|
}
|
|
|
|
.content {
|
|
margin: 0 auto;
|
|
position: relative;
|
|
}
|
|
|
|
.border {
|
|
/* outline: 0.25pt solid #000; */
|
|
}
|
|
|
|
.text {}
|
|
|
|
/*自動字型*/
|
|
.text-block {
|
|
/* border: .25pt solid #000; */
|
|
/* margin: 5mm; */
|
|
|
|
font-family: 標楷體;
|
|
text-align: start;
|
|
vertical-align: middle;
|
|
|
|
/* --divw: 120mm; */
|
|
/* --divh: 50mm; */
|
|
--line_len: 10;
|
|
--lines: 1;
|
|
--fs_w: var(--divw)/var(--line_len);
|
|
--fs_h: var(--divh)/var(--lines);
|
|
--fs: min(var(--fs_w), var(--fs_h), var(--font-max));
|
|
|
|
width: var(--divw);
|
|
height: var(--divh);
|
|
|
|
font-size: var(--fs);
|
|
line-height: calc(var(--fs_h) * 1.0);
|
|
}
|
|
|
|
.text-block.vertical {
|
|
--fs_w: var(--divw)/var(--lines);
|
|
--fs_h: var(--divh)/var(--line_len);
|
|
--fs: min(var(--fs_w), var(--fs_h), var(--font-max));
|
|
line-height: calc(var(--fs_w) * 1.0);
|
|
}
|
|
|
|
.vertical {
|
|
writing-mode: vertical-rl;
|
|
text-orientation: upright;
|
|
}
|
|
|
|
.text-start {
|
|
text-align: start;
|
|
}
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.text-end {
|
|
text-align: end;
|
|
}
|
|
|
|
.bg {
|
|
position: relative;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.bg > svg,
|
|
.bg > img {
|
|
display: block;
|
|
}
|
|
|
|
.bg img {
|
|
width: 100%;
|
|
height: var(--page-h);
|
|
/*outline: 0.25pt solid #000;*/
|
|
}
|
|
|
|
.block {
|
|
/*background: #ddd;*/
|
|
}
|
|
|
|
.mid_text {
|
|
--divw: 50mm;
|
|
--divh: 220mm;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 53%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
.mid_text_2 {
|
|
--divw: 50mm;
|
|
--divh: 50mm;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 20%;
|
|
transform: translate(-50%, 0);
|
|
}
|
|
|
|
.right_text {
|
|
--divw: 10mm;
|
|
--divh: 260mm;
|
|
position: absolute;
|
|
right: 8mm;
|
|
top: 80mm;
|
|
}
|
|
|
|
.left_text {
|
|
--divw: 20mm;
|
|
--divh: 160mm;
|
|
position: absolute;
|
|
left: 0mm;
|
|
top: 180mm;
|
|
}
|
|
|
|
.txt_up,
|
|
.txt_down {
|
|
position: absolute;
|
|
left: 3.5mm;
|
|
}
|
|
|
|
.txt_up {
|
|
top: 155mm;
|
|
}
|
|
|
|
.txt_down {
|
|
bottom: 30mm;
|
|
}
|
|
|
|
.top_text_1,
|
|
.top_text_2,
|
|
.top_text_3 {
|
|
position: absolute;
|
|
}
|
|
|
|
.top_text_1 {
|
|
top: 0;
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 20pt;
|
|
}
|
|
|
|
.top_text_2,
|
|
.top_text_3 {
|
|
top: 9mm;
|
|
width: 40%;
|
|
font-size: 0.7em;
|
|
}
|
|
|
|
.top_text_2 {
|
|
text-align: right;
|
|
right: 2mm;
|
|
}
|
|
|
|
.top_text_3 {
|
|
text-align: left;
|
|
left: 2mm;
|
|
}
|
|
|
|
|
|
/*大牌位相關*/
|
|
body.tablet-l .content {
|
|
width: 124mm;
|
|
}
|
|
|
|
/*中牌位相關*/
|
|
body.tablet-m .content {
|
|
width: 92mm;
|
|
}
|
|
|
|
body.tablet-m .mid_text {
|
|
--divw: 45mm;
|
|
--divh: 180mm;
|
|
}
|
|
body.tablet-m .mid_text_2 {
|
|
--divw: 45mm;
|
|
--divh: 50mm;
|
|
bottom:17%;
|
|
}
|
|
|
|
body.tablet-m .right_text {
|
|
--divw: 8mm;
|
|
--divh: 200mm;
|
|
right: 6mm;
|
|
top: 64mm;
|
|
}
|
|
|
|
body.tablet-m .left_text {
|
|
--divw: 15mm;
|
|
--divh: 98mm;
|
|
top: 165mm;
|
|
}
|
|
|
|
body.tablet-m .txt_up,
|
|
body.tablet-m .txt_down {
|
|
left: 3mm;
|
|
}
|
|
|
|
body.tablet-m .txt_up {
|
|
top: 148mm;
|
|
}
|
|
|
|
body.tablet-m .txt_down {
|
|
bottom: 25mm;
|
|
}
|
|
|
|
body.tablet-m .top_text_1 {
|
|
font-size: 16pt;
|
|
}
|
|
|
|
body.tablet-m .top_text_2,
|
|
body.tablet-m .top_text_3 {
|
|
top: 9mm;
|
|
}
|
|
|
|
body.tablet-m .top_text_2 {
|
|
right: 1mm;
|
|
}
|
|
|
|
body.tablet-m .top_text_3 {
|
|
left: 1mm;
|
|
}
|
|
|
|
/*小牌位相關*/
|
|
body.tablet-s .content {
|
|
width: 65mm;
|
|
}
|
|
|
|
body.tablet-s .mid_text_2 {
|
|
--divw: 32mm;
|
|
--divh: 50mm;
|
|
bottom: 17%;
|
|
}
|
|
body.tablet-s .mid_text {
|
|
--divw: 32mm;
|
|
--divh: 126mm;
|
|
}
|
|
|
|
body.tablet-s .right_text {
|
|
--divw: 6mm;
|
|
--divh: 120mm;
|
|
right: 5mm;
|
|
top: 45mm;
|
|
}
|
|
|
|
body.tablet-s .left_text {
|
|
--divw: 10mm;
|
|
--divh: 64mm;
|
|
top: 114mm;
|
|
}
|
|
|
|
body.tablet-s .txt_up,
|
|
body.tablet-s .txt_down {
|
|
font-size: .8em;
|
|
left: 2mm;
|
|
}
|
|
|
|
body.tablet-s .txt_up {
|
|
top: 102mm;
|
|
}
|
|
|
|
body.tablet-s .txt_down {
|
|
bottom: 25mm;
|
|
}
|
|
|
|
body.tablet-s .top_text_1 {
|
|
font-size: 16pt;
|
|
}
|
|
|
|
body.tablet-s .top_text_2,
|
|
body.tablet-s .top_text_3 {
|
|
top: 7mm;
|
|
}
|
|
|
|
body.tablet-s .top_text_2 {
|
|
right: 1mm;
|
|
}
|
|
|
|
body.tablet-s .top_text_3 {
|
|
left: 1mm;
|
|
}
|
|
/*------*/
|
|
@page a3 {
|
|
size: a3 portrait;
|
|
margin: 0;
|
|
}
|
|
@page a3l {
|
|
size: a3 landscape;
|
|
margin: 0;
|
|
}
|
|
@page a4 {
|
|
size: a4 portrait;
|
|
margin: 0;
|
|
}
|
|
@page a4l {
|
|
size: a4 landscape;
|
|
margin: 0;
|
|
}
|
|
@page a5 {
|
|
size: a5 portrait;
|
|
margin: 0;
|
|
}
|
|
|
|
body{
|
|
--font-max: 22pt;
|
|
--bg-padding: 0;
|
|
}
|
|
.bg{
|
|
padding: var(--bg-padding);
|
|
}
|
|
.bg img{
|
|
height: calc(var(--page-h) - var(--bg-padding) * 2);
|
|
max-height: var(--page-h);
|
|
}
|
|
.content{
|
|
width: var(--page-w);
|
|
height: var(--page-h);
|
|
outline: 0.25pt solid #000;
|
|
}
|
|
/*-----------*/
|
|
|
|
body.tblt-l.a3{
|
|
page: a3;
|
|
--page-w: 285mm;
|
|
--page-h: 400mm;
|
|
--bg-padding: 4mm;
|
|
--font-max: 44pt;
|
|
font-size: 22pt;
|
|
}
|
|
body.tblt-l.a3 .page{
|
|
page-break-after: always;
|
|
}
|
|
body.tblt-l.a3 .content {
|
|
--page-w: 137mm;
|
|
}
|
|
body.tblt-l.a3 .mid_text_2{
|
|
--divh: 60mm;
|
|
}
|
|
|
|
body.tblt-m{
|
|
page: a4;
|
|
--page-w: 200mm;
|
|
--page-h: 285mm;
|
|
--bg-padding: 0;
|
|
--font-max: 32pt;
|
|
font-size: 22pt;
|
|
}
|
|
body.tblt-m .mid_text{
|
|
--divw: 45mm;
|
|
--divh: 160mm;
|
|
}
|
|
body.tblt-m .mid_text_2 {
|
|
--divw: 45mm;
|
|
--divh: 60mm;
|
|
}
|
|
body.tblt-m .right_text{
|
|
--divw: 10mm;
|
|
--divh: 160mm;
|
|
}
|
|
body.tblt-m .left_text {
|
|
--divw: 20mm;
|
|
--divh: 100mm;
|
|
left: 0mm;
|
|
top: 150mm;
|
|
}
|
|
body.tblt-m.a4{
|
|
page: a4;
|
|
}
|
|
body.tblt-m.a4 .page{
|
|
--page-w: 100mm;
|
|
--page-h: 285mm;
|
|
page-break-after: always;
|
|
}
|
|
body.tblt-m.a4-merge{
|
|
page: a4;
|
|
}
|
|
body.tblt-m.a4-merge .page{
|
|
--page-w: 100mm;
|
|
float: left;
|
|
}
|
|
|
|
|
|
body.tblt-s{
|
|
--bg-padding: 0;
|
|
--font-max: 28pt;
|
|
font-size: 22pt;
|
|
}
|
|
body.tblt-s .page{
|
|
--page-w: 70mm;
|
|
page-break-after: always;
|
|
}
|
|
body.tblt-s .mid_text{
|
|
--divw: 30mm;
|
|
--divh: 110mm;
|
|
}
|
|
body.tblt-s .mid_text_2 {
|
|
--divw: 30mm;
|
|
--divh: 60mm;
|
|
}
|
|
body.tblt-s .right_text{
|
|
--divw: 15mm;
|
|
--divh: 120mm;
|
|
right: 0mm;
|
|
top:60mm;
|
|
}
|
|
body.tblt-s .left_text {
|
|
--divw: 15mm;
|
|
--divh: 80mm;
|
|
left: 0mm;
|
|
top: 100mm;
|
|
}
|
|
body.tblt-s.a5{
|
|
page: a5;
|
|
--page-w: 138mm;
|
|
--page-h: 200mm;
|
|
}
|
|
body.tblt-s.a4l-merge{
|
|
page: a4l;
|
|
--page-w: 200mm;
|
|
--page-h: 285mm;
|
|
}
|
|
body.tblt-s.a4l-merge .page{
|
|
--page-w: 70mm;
|
|
--page-h: 200mm;
|
|
page-break-after: auto;
|
|
float: left;
|
|
}
|
|
body.tblt-s.a3-merge{
|
|
page: a3;
|
|
--page-w: 285mm;
|
|
--page-h: 410mm;
|
|
}
|
|
body.tblt-s.a3-merge .page{
|
|
--page-w: 70mm;
|
|
--page-h: 200mm;
|
|
page-break-after: auto;
|
|
float: left;
|
|
}
|
|
|
|
body.tblt-xs{
|
|
--bg-padding: 0;
|
|
--font-max: 18pt;
|
|
font-size: 14pt;
|
|
}
|
|
body.tblt-xs.a3-merge .page{
|
|
--page-w: 57mm;
|
|
--page-h: 100mm;
|
|
page-break-after: auto;
|
|
float: left;
|
|
}
|
|
body.tblt-xs.a4l-merge{
|
|
page:a4l;
|
|
}
|
|
body.tblt-xs.a4l-merge .page{
|
|
--page-w: 57mm;
|
|
--page-h: 100mm;
|
|
page-break-after: auto;
|
|
float: left;
|
|
}
|
|
body.tblt-xs .top_text_1{
|
|
font-size: 14pt;
|
|
}
|
|
body.tblt-xs .mid_text{
|
|
--divw: 15mm;
|
|
--divh: 56mm;
|
|
}
|
|
body.tblt-xs .mid_text_2 {
|
|
--divw: 15mm;
|
|
--divh: 56mm;
|
|
}
|
|
body.tblt-xs .right_text{
|
|
--divw: 15mm;
|
|
--divh: 70mm;
|
|
right: 0mm;
|
|
top: 20mm;
|
|
}
|
|
body.tblt-xs .left_text {
|
|
--divw: 15mm;
|
|
--divh: 60mm;
|
|
left: 0mm;
|
|
top: 30mm;
|
|
} |