mirror of
https://github.com/wekan/wekan.git
synced 2026-11-07 11:02:33 -05:00
Lauri Ojansivu
d5b69137cc
Picking Largest grew the page heading and the minicards and left the header bar, the left menu, the lists, the swimlane header and every popup exactly as they were. The preset was a percentage on the root element, and a root percentage only reaches text whose size is written in a relative unit: rem is measured against the root, em against its parent. WeKan writes most of its sizes in px, and px is absolute, so exactly the rem-sized parts scaled. The base rule made it worse: html, body, input, select, textarea, button re-stated font: 14px, so the body took the stock size straight back off the scaled root. The preset is published as a number as well (--wekan-ui-font-scale), and every px font-size and line-height in the client stylesheets - 433 declarations across 37 files - is written calc(14px * var(--wekan-ui-font-scale, 1)). line-height scales with the size on purpose: 21px of type in an 18px line box is the same setting half-applied. The base font rule is split into font-family and font-size, because the shorthand's size was the one thing the setting had to be able to move. Nothing renders differently until a preset is chosen: the fallback is 1 and the variable is removed for Default. tests/uiFonts.test.cjs fails on any bare px font-size or line-height, so a new one cannot quietly opt out of the setting; the two density guards unwrap the calc as they read the file, so each still pins the size it means. Thanks to xet7 !
185 lines
3.2 KiB
CSS
185 lines
3.2 KiB
CSS
/* Board Conversion Progress Styles */
|
|
.board-conversion-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
inset-inline-start: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
z-index: 9999;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.board-conversion-overlay.active {
|
|
display: flex;
|
|
}
|
|
|
|
.board-conversion-modal {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
max-width: 500px;
|
|
width: 90%;
|
|
max-height: 80vh;
|
|
overflow: hidden;
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.board-conversion-header {
|
|
padding: 20px 24px 16px;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
text-align: center;
|
|
}
|
|
|
|
.board-conversion-header h3 {
|
|
margin: 0 0 8px 0;
|
|
color: #333;
|
|
font-size: calc(20px * var(--wekan-ui-font-scale, 1));
|
|
font-weight: 500;
|
|
}
|
|
|
|
.board-conversion-header h3 i {
|
|
margin-inline-end: 8px;
|
|
color: #2196F3;
|
|
}
|
|
|
|
.board-conversion-header p {
|
|
margin: 0;
|
|
color: #666;
|
|
font-size: calc(14px * var(--wekan-ui-font-scale, 1));
|
|
}
|
|
|
|
.board-conversion-content {
|
|
padding: 24px;
|
|
}
|
|
|
|
.conversion-progress {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 8px;
|
|
background-color: #e0e0e0;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #2196F3, #21CBF3);
|
|
border-radius: 4px;
|
|
transition: width 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.progress-fill::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
inset-inline-start: 0;
|
|
inset-inline-end: 0;
|
|
bottom: 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.3),
|
|
transparent
|
|
);
|
|
animation: shimmer 2s infinite;
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
transform: translateX(100%);
|
|
}
|
|
}
|
|
|
|
.progress-text {
|
|
text-align: center;
|
|
font-weight: 600;
|
|
color: #2196F3;
|
|
font-size: calc(16px * var(--wekan-ui-font-scale, 1));
|
|
}
|
|
|
|
.conversion-status {
|
|
text-align: center;
|
|
margin-bottom: 16px;
|
|
color: #333;
|
|
font-size: calc(16px * var(--wekan-ui-font-scale, 1));
|
|
}
|
|
|
|
.conversion-status i {
|
|
margin-inline-end: 8px;
|
|
color: #2196F3;
|
|
}
|
|
|
|
.conversion-time {
|
|
text-align: center;
|
|
color: #666;
|
|
font-size: calc(14px * var(--wekan-ui-font-scale, 1));
|
|
background-color: #f5f5f5;
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.conversion-time i {
|
|
margin-inline-end: 6px;
|
|
color: #FF9800;
|
|
}
|
|
|
|
.board-conversion-footer {
|
|
padding: 16px 24px 20px;
|
|
border-top: 1px solid #e0e0e0;
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
.conversion-info {
|
|
text-align: center;
|
|
color: #666;
|
|
font-size: calc(13px * var(--wekan-ui-font-scale, 1));
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.conversion-info i {
|
|
margin-inline-end: 6px;
|
|
color: #2196F3;
|
|
}
|
|
|
|
/* Responsive design */
|
|
@media (max-width: 600px) {
|
|
.board-conversion-modal {
|
|
width: 95%;
|
|
margin: 20px;
|
|
}
|
|
|
|
.board-conversion-header,
|
|
.board-conversion-content,
|
|
.board-conversion-footer {
|
|
padding-inline-start: 16px;
|
|
padding-inline-end: 16px;
|
|
}
|
|
|
|
.board-conversion-header h3 {
|
|
font-size: calc(18px * var(--wekan-ui-font-scale, 1));
|
|
}
|
|
}
|