MediaWiki:Common.css: Difference between revisions

Line 2,521:

vertical-align offsets by hand. */

.gr-teeka-cb-wrap {

~~display~~: inline-flex~~; align~~-~~items: center; gap~~: 6px;

/* CHANGED from inline-flex + vertical-align:middle. An inline-flex box

~~vertical-align~~: ~~middle~~;

aligned "middle" is positioned by its own height against the parent's

x-height, so the whole control - checkbox AND label together - sat

progressively lower than the text beside it as the reader enlarged the

type (measured: 1.8px out at 16px, 3.6px at 30px). Left as plain

inline, the label is ordinary text and lines up with its neighbours by

definition; only the checkbox needs aligning, and it does that with an

em-based offset that holds at any size. */

display: inline;

}

.gr-teeka-inline-checkbox {

-webkit-appearance: none; appearance: none;

width: ~~15px~~ !important; height: ~~15px~~ !important;

/* Sized in em so it keeps pace with A- / A+ rather than staying a fixed

min-width: ~~15px~~; min-height: ~~15px~~;

15px box against text that grows; clamped so it stays a sensible

margin: 0; padding: 0; cursor: pointer;

target at both extremes.

Alignment was measured rather than guessed. vertical-align:middle is

the only value that stays consistent as the type size changes (it is

computed from the font's x-height), but it sits about 2.5px low

against this line-height at every size - so that constant bias is

taken back with `top`, giving under a pixel of error from 16px to

30px. The element is already position:relative for its tick. */

width: clamp(13px, 0.8em, 24px) !important;

height: clamp(13px, 0.8em, 24px) !important;

min-width: 13px; min-height: 13px;

margin: 0 6px 0 0; padding: 0; cursor: pointer;

vertical-align: middle; top: -2.5px;

border: 1.5px solid #b5451b; border-radius: 3px;

background: #fff; position: relative; flex-shrink: 0;

Line 2,537:

Line 2,555:

}

.gr-teeka-inline-checkbox:checked::after {

content: ''; position: absolute; left: ~~4px~~; top: ~~1px~~;

/* Placed and sized in % of the box, so the tick follows the em-based

width: ~~4px~~; height: ~~8px~~;

box instead of staying a 4x8px mark inside a checkbox that grew. */

content: ''; position: absolute; left: 32%; top: 8%;

width: 26%; height: 55%;

border: solid #fff; border-width: 0 2px 2px 0;

transform: rotate(45deg);

@@ Line 2,521: / Line 2,521: @@
     vertical-align offsets by hand. */
 .gr-teeka-cb-wrap {
-   display: inline-flex; align-items: center; gap: 6px;
+   /* CHANGED from inline-flex + vertical-align:middle. An inline-flex box
-   vertical-align: middle;
+     aligned "middle" is positioned by its own height against the parent's
+     x-height, so the whole control - checkbox AND label together - sat
+     progressively lower than the text beside it as the reader enlarged the
+     type (measured: 1.8px out at 16px, 3.6px at 30px). Left as plain
+     inline, the label is ordinary text and lines up with its neighbours by
+     definition; only the checkbox needs aligning, and it does that with an
+     em-based offset that holds at any size. */
+   display: inline;
 }
 .gr-teeka-inline-checkbox {
    -webkit-appearance: none; appearance: none;
-   width: 15px !important; height: 15px !important;
+  /* Sized in em so it keeps pace with A- / A+ rather than staying a fixed
-   min-width: 15px; min-height: 15px;
+px box against text that grows; clamped so it stays a sensible
-   margin: 0; padding: 0; cursor: pointer;
+     target at both extremes.
+     Alignment was measured rather than guessed. vertical-align:middle is
+     the only value that stays consistent as the type size changes (it is
+     computed from the font's x-height), but it sits about 2.5px low
+     against this line-height at every size - so that constant bias is
+     taken back with `top`, giving under a pixel of error from 16px to
+px. The element is already position:relative for its tick. */
+   width: clamp(13px, 0.8em, 24px) !important;
+  height: clamp(13px, 0.8em, 24px) !important;
+   min-width: 13px; min-height: 13px;
+   margin: 0 6px 0 0; padding: 0; cursor: pointer;
+  vertical-align: middle; top: -2.5px;
    border: 1.5px solid #b5451b; border-radius: 3px;
    background: #fff; position: relative; flex-shrink: 0;
@@ Line 2,537: / Line 2,555: @@
 }
 .gr-teeka-inline-checkbox:checked::after {
-   content: ''; position: absolute; left: 4px; top: 1px;
+  /* Placed and sized in % of the box, so the tick follows the em-based
-   width: 4px; height: 8px;
+     box instead of staying a 4x8px mark inside a checkbox that grew. */
+   content: ''; position: absolute; left: 32%; top: 8%;
+   width: 26%; height: 55%;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);