styles bugfix

This commit is contained in:
2026-05-07 15:28:26 +02:00
parent e5ee067db4
commit c848633a1f
8 changed files with 371 additions and 122 deletions

View File

@@ -212,13 +212,12 @@ button:not(:disabled).yellowbutton:hover { background:var(--theme-button-yellow-
<span class="cb-box" aria-hidden="true"></span>
</label>
*/
.cb { display:inline-flex; align-items:center; gap:10px; user-select:none; transform:translateY(2px); }
.cb input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.cb-box { width:20px; height:20px; border-radius:6px; background:var(--theme-checkbox-backcolor); border-width:2px; border-style:solid; display:inline-grid; place-items:center; transition:transform var(--times-transition-transform) ease, border-color var(--times-transition-colors) ease, background var(--times-transition-colors) ease; }
.cb-box::after { content:""; width:12px; height:8px; transform:scale(0) translateY(-2px); background-repeat:no-repeat; background-position:center; background-size:contain; background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L4 7l7-7' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); transition:transform var(--times-transition-transform) cubic-bezier(.2,.9,.2,1); }
.cb { display:inline-grid;grid-auto-flow:column;align-items:center;gap:10px;user-select:none;vertical-align:middle; }
.cb input { position:absolute;opacity:0;width:0;height:0;pointer-events:none; }
.cb-box { width:20px;height:20px;border-radius:6px;background:var(--theme-checkbox-backcolor);border:2px solid;display:grid;place-items:center;transition:transform var(--times-transition-transform) ease,border-color var(--times-transition-colors) ease,background var(--times-transition-colors) ease;flex-shrink:0; }
.cb-box::after { content:"";width:10px;height:6px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)scale(0);transform-origin:center;transition:transform var(--times-transition-transform)cubic-bezier(.2,.9,.2,1); }
.cb input:checked + .cb-box::after { transform: rotate(-45deg) scale(1) translate(1px, -1px); }
.cb input:checked + .cb-box { transform:translateY(-1px); }
.cb input:checked + .cb-box::after { transform:scale(1) translate(-1px, 1px); }
table .cb input:checked + .cb-box::after { transform:scale(1) translate(1px, 1px); }
.cb input:focus-visible + .cb-box { outline:none; }
/* #endregion */