.icon-refresh { position: relative; width: 1rem; height: 1rem; box-shadow: 0 0 0.3rem #0065fb; border-radius: 50%; overflow: hidden; background: linear-gradient(0deg, rgb(255 255 255) 0%, #e1e1e1 100%); } .icon-refresh::before { content: ""; width: 0.5rem; height: 0.5rem; display: block; border-radius: 50%; margin: calc(0.25rem - 0.05rem) auto; background: linear-gradient(0deg, rgb(249 249 249) 0%, #a5c7f9 100%); } .icon-print { display: flex; position: relative; width: 1rem; height: 1rem; } .icon-print i:nth-child(1) { position: absolute; bottom: 0.15rem; z-index: 2; width: 1rem; height: 0.5rem; background-color: #000; border-radius: 0.1rem; } .icon-print i:nth-child(2) { position: absolute; left: 0.25rem; z-index: 1; width: 0.5rem; height: 1rem; background-color: #999; } .icon-print i:nth-child(2)::before { content: ""; position: absolute; left: calc(50% - 0.15rem); top: 1px; z-index: 1; width: 0.3rem; height: 1px; border-top: 1px solid var(--color-fff); border-bottom: 1px solid var(--color-fff); background-color: var(--color-fff); padding: 1px 0; background-clip: content-box; box-sizing: content-box; } .arithmetic-worksheets { position: relative; display: var(--flex-display); flex-direction: var(--flex-row); } .arithmetic-worksheets .print-area { width: calc(100% - 26rem); } .arithmetic-worksheets .print-settings { position: absolute; top: 0; right: 0; z-index: 1; width: 25rem; } .arithmetic-worksheets .print-settings .print-settings-child { position: fixed; width: 25rem; background-color: rgba(255, 255, 255, 0.9); padding: 1rem; box-shadow: 0 0.5rem 1.5rem #dfdfdf; display: var(--flex-display); flex-direction: var(--flex-col); gap: 0.6rem; } .arithmetic-worksheets .print-settings .print-btn { display: var(--flex-display); flex-direction: var(--flex-row); background-color: #fafafa; color: #fff; border-radius: 0.36rem; cursor: pointer; } .arithmetic-worksheets .print-settings .print-btn div { display: var(--flex-display); flex-direction: var(--flex-row); flex: var(--flex-1-2); height: 3rem; align-items: center; justify-content: center; gap: var(--gap-0\.6); font-size: var(--font-size-small); } .arithmetic-worksheets .print-settings .print-btn .generator { color: #0066ff; border: #0066ff 0.1rem solid; border-radius: 0.36rem 0 0 0.36rem; opacity: 0.2; } .arithmetic-worksheets .print-settings .print-btn .generator[data-wativate-generator="true"] { opacity: 1; } .arithmetic-worksheets .print-settings .print-btn .print { background-color: #0066ff; border-radius: 0 0.36rem 0.36rem 0; } .arithmetic-worksheets .print-settings .print-btn .print .icon-print i:nth-child(1) { background-color: #999; } .arithmetic-worksheets .print-settings .print-btn .print .icon-print i:nth-child(2) { background-color: #fff; } .arithmetic-worksheets .print-settings .print-btn .print .icon-print i:nth-child(2):before { border-top: 0.1rem solid #000; border-bottom: 0.1rem solid #000; background-color: #000; } .arithmetic-worksheets .print-settings .print-settings-option { display: var(--flex-display); flex-direction: var(--flex-col); gap: 0.6rem; overflow: auto; } .arithmetic-worksheets .print-settings .print-settings-option .selection-template { display: var(--flex-display); align-items: var(--items-center); } .arithmetic-worksheets .print-settings .print-settings-option .selection-template .description { flex: 0 0 5rem; word-break: break-word; font-size: var(--font-size-small); } .arithmetic-worksheets .print-settings .print-settings-option .selection-template .operation { flex: 0 0 calc(100% - 5rem); } .arithmetic-worksheets .print-settings .print-settings-option .hide-options{ visibility: hidden; display: none; } @media screen and (max-width: 1024px) { .arithmetic-worksheets { flex-direction: var(--flex-col); } .arithmetic-worksheets .print-area { width: initial; margin-top: 1rem; } .arithmetic-worksheets .print-area .print-page { border: #999 0.1rem solid; box-shadow: none; } .arithmetic-worksheets .print-settings { position: relative; width: initial; } .arithmetic-worksheets .print-settings .print-settings-child{ position: relative; width: initial; } .arithmetic-worksheets .print-settings .print-settings-option { position: var(--position-relative); width: initial; } }