.worksheets-renderer {} .worksheets-renderer .page-box { position: var(--position-relative); display: var(--flex-display); flex-direction: var(--flex-col); gap: var(--gap); margin: 1rem; height: 100%; } .worksheets-renderer .content-header { display: var(--flex-display); flex-direction: var(--flex-row); justify-content: var(--justify-between); height: 7rem; } .worksheets-renderer .content-header .basic-information { display: var(--flex-display); flex-direction: var(--flex-col); flex: 0 0 calc( 100% - 6rem ); gap: var(--gap); justify-content: var(--justify-center); } .worksheets-renderer .content-header .basic-information .page-title { display: var(--flex-display); flex-direction: var(--flex-col); justify-content: var(--justify-start); height: 4rem; line-height: 1.5rem; font-size: var(--font-size-big); font-weight: bold; } .worksheets-renderer .content-header .basic-information .student-information { display: var(--flex-display); flex-direction: var(--flex-row); font-size: var(--font-size-small); gap: 0.5rem; } .worksheets-renderer .content-header .basic-information .student-information div { display: var(--flex-display); flex: 0 0 calc(20% - 0.5rem); } .worksheets-renderer .content-header .basic-information .student-information div .line { display: var(--flex-display); flex: 1; border-bottom: #000 0.1rem solid; } .worksheets-renderer .content-header .qr-code { display: var(--flex-display); flex-direction: var(--flex-col); } .worksheets-renderer .content-header .qr-code canvas { width: 6rem; height: 6rem; } .worksheets-renderer .content-header .qr-code .label { display: var(--flex-display); flex-direction: var(--flex-col); height: 1rem; line-height: 1rem; align-items: var(--items-center); font-size: var(--font-size-small);; } .worksheets-renderer .content-footer { display: var(--flex-display); flex-direction: var(--flex-row); justify-content: var(--justify-between); position: var(--position-absolute); left: 0; bottom: 0; width: 100%; } .worksheets-renderer .content-footer .page-number { display: var(--flex-display); justify-content: var(--justify-start); flex: var(--flex-1-2); } .worksheets-renderer .content-footer .source { display: var(--flex-display); justify-content: var(--justify-end); flex: var(--flex-1-2); } .worksheets-renderer .content-main { display: var(--flex-display); flex-direction: row; flex-wrap: wrap; row-gap: 2rem; } .worksheets-renderer .content-main .preview-tips { font-size: 2rem; display: var(--flex-display); align-items: var(--items-center); justify-content: var(--justify-center); flex: var(--flex-1); opacity: 0.36; } .worksheets-renderer .content-main .item { display: var(--flex-display); flex-direction: var(--flex-row); flex-wrap: var(--flex-nowrap); align-items: var(--items-start); gap: var(--gap-0\.6); box-sizing: border-box; } .worksheets-renderer .content-main .item.columns-5 { flex: 0 0 20%; } .worksheets-renderer .content-main .item.columns-4 { flex: 0 0 25%; } .worksheets-renderer .content-main .item.columns-3 { flex: 0 0 33.333333%; } .worksheets-renderer .content-main .item.columns-2 { flex: 0 0 50%; } .worksheets-renderer .content-main .item.columns-1 { flex: 0 0 100%; } .worksheets-renderer .content-main .item .serial-number { width: 26px; height: 1rem; line-height: 1rem; font-size: var(--font-size-small); text-align: right; opacity: 0.5; } .worksheets-renderer .content-main .item .content { flex: 1; }