MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1,072: / Line 1,072: @@
 /* ============================================================================
-SV Universal Popup v2 — Refinements (TESTING)
+SV Universal Popup v2 (TESTING)
-Changes:
+- Popup B aesthetic, site-wide
-) Remove hint blocks entirely (redundant).
+- Small: hover/focus (non-click open on hover-capable devices)
-) Center + enlarge popup header titles (Users/Requirements).
+- Large: click/tap open, header click to close, outside click to close
-) Make small sentence/paragraph popups much narrower (wrap early ~6 words/line).
+- JS adds .sv-uipop-v2 to <html> when enabled
 ============================================================================ */
-/* --- 1) Remove redundant hint text (legacy + any remaining markup) --- */
+.sv-uipop-v2 .sv-def-tip,
-.sv-disclose-pop-hint,
+.sv-uipop-v2 .sv-pop-tip{
-.mw-parser-output .sv-disclose-pop-hint{
+   display:none !important; /* hide legacy injected black tooltips/pops */
-   display:none !important;
 }
-/* Optional: also hide the old tip hint if it shows up anywhere */
+/* ---- Universal shell (Popup B look) ------------------------------------ */
-.sv-tip-pop-hint,
-.mw-parser-output .sv-tip-pop-hint{
+.sv-uipop{
-   display:none !important;
+  position:fixed;
+  z-index:99999;
+  /* JS sets top/left */
+  top:0;
+  left:0;
+  box-sizing:border-box;
+  border-radius:var(--sv-ui-rad-lg);
+  border:1px solid var(--sv-ui-pop-line, var(--sv-ui-line2));
+  background:var(--sv-ui-pop-bg, var(--sv-ui-bg0));
+  background-image:
+    radial-gradient(900px 260px at 35% 0, rgba(106,166,255,0.14), rgba(0,0,0,0) 60%),
+    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00));
+  color:var(--sv-ui-text1);
+  box-shadow:var(--sv-ui-pop-shadow, 0 10px 30px rgba(0,0,0,0.35)),
+             inset 0 1px 0 rgba(255,255,255,0.04);
+  overflow:hidden;
+}
+.sv-uipop[aria-hidden="true"]{
+   display:none;
+}
+/* “More square” sizing; JS will clamp to viewport */
+.sv-uipop--sm{
+  width:320px;
+  max-width:calc(100vw - 20px);
+  max-height:min(45vh, 320px);
+}
+.sv-uipop--lg{
+  width:420px;
+  max-width:calc(100vw - 20px);
+  max-height:min(65vh, 520px);
 }
-/* --- 1b) Center + enlarge legacy disclose titles (Users/Requirements) --- */
+/* Header bar (required for large, optional for small) */
-.sv-disclose-pop-head,
+.sv-uipop-head{
-.mw-parser-output .sv-disclose-pop-head{
+  display:flex;
-   justify-content:center !important;
+  align-items:center;
+  justify-content:space-between;
+  gap:12px;
+  padding:10px 12px;
+  border-bottom:1px solid var(--sv-ui-line1);
+   background:var(--sv-ui-bg1);
 }
-.sv-disclose-pop-title,
+.sv-uipop-head--clickable{
-.mw-parser-output .sv-disclose-pop-title{
+   cursor:pointer;
-   width:100%;
+}
-  text-align:center;
-  font-size:16px;
+.sv-uipop-title{
    font-weight:900;
+  font-size:13px;
    letter-spacing:0.02em;
+  color:var(--color-emphasized, var(--sv-ui-text1));
+}
+.sv-uipop-hint{
+  font-size:12px;
+  color:var(--sv-ui-text3);
+  white-space:nowrap;
+}
+/* Body */
+.sv-uipop-body{
+  padding:10px 12px 12px;
+  font-size:13px;
+  line-height:1.4;
+  color:var(--sv-ui-text2);
+  overflow:auto;
+  overflow-wrap:anywhere;
+  word-break:break-word;
+}
+.sv-uipop-body--pre{
+  white-space:pre-line;
+}
+/* Links in popups */
+.sv-uipop a{
+  color:var(--color-link, var(--sv-ui-accent));
+  text-decoration:underline;
+  text-decoration-thickness:2px;
+  text-underline-offset:2px;
+}
+.sv-uipop a:hover{
+  text-decoration-thickness:3px;
+}
+/* Normalize “Users/Requirements” list styling, supporting both old + new classes */
+.sv-uipop :where(.sv-disclose-list, .sv-uipop-list){
+  margin:0;
+  padding:0;
+  list-style:none;
 }
-/* ============================================================================
+.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li{
-Universal Popup v2 (the injected panel) — header/title tuning + sizing
+  padding:6px 0;
-============================================================================ */
+  border-top:1px solid var(--sv-ui-line1);
+  font-size:13px;
+  color:var(--sv-ui-text2);
+}
-/* Large/click headers: centered “dialog title” look */
+.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{
-.sv-uipop-head--center{
+  border-top:none;
-   justify-content:center;
+   padding-top:0;
 }
-.sv-uipop-head--center .sv-uipop-title{
+.sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){
-   width:100%;
+   padding-top:10px;
-  text-align:center;
-  font-size:16px;
    font-weight:900;
+  font-size:12px;
    letter-spacing:0.02em;
+  color:var(--sv-ui-text1);
 }
-/* For click-open popups, we don’t show a hint at all */
+/* Optional actions row (Definitions with links, etc.) */
-.sv-uipop-head--center .sv-uipop-hint{
+.sv-uipop-actions{
-   display:none !important;
+  margin-top:10px;
+  padding-top:10px;
+  border-top:1px solid var(--sv-ui-line1);
+   display:flex;
+  gap:10px;
+  flex-wrap:wrap;
 }
-/* --- 2) Narrow small text popups: early wrap (“~6 words”) ---
+.sv-uipop-action{
-   TemplateStyles-safe: avoid min(); use width + max-width */
+  display:inline-flex;
-.sv-uipop--sm{
+  align-items:center;
-   width:calc(100vw - 20px);
+  justify-content:center;
-   max-width:34ch;
+  padding:7px 10px;
-   box-sizing:border-box;
+  border-radius:var(--sv-ui-rad-pill);
+  border:1px solid var(--sv-ui-line2);
+  background:var(--sv-ui-bg2);
+   color:var(--sv-ui-text1);
+   font-weight:900;
+   font-size:12px;
+  text-decoration:none;
 }
+.sv-uipop-action:hover{
-/* Slightly tighter large width (still comfortable) */
+   background:var(--sv-ui-bg3);
-.sv-uipop--lg{
-   width:calc(100vw - 20px);
-  max-width:400px;
-  box-sizing:border-box;
 }