MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1,072: / Line 1,072: @@
 /* ============================================================================
-SV Universal Popup v2 (TESTING)
+SV Universal Popup v2 — Refinements (TESTING)
-- Popup B aesthetic, site-wide
+Changes:
-- Small: hover/focus (non-click open on hover-capable devices)
+) Remove .sv-disclose-pop-hint entirely (redundant).
-- Large: click/tap open, header click to close, outside click to close
+) Center + enlarge popup header titles (Users/Requirements).
-- JS adds .sv-uipop-v2 to <html> when enabled
+) Make small sentence/paragraph popups much narrower (wrap early ~6 words/line).
 ============================================================================ */
-.sv-uipop-v2 .sv-def-tip,
+/* --- 1) Remove redundant hint text (legacy + any remaining markup) --- */
-.sv-uipop-v2 .sv-pop-tip{
+.sv-disclose-pop-hint,
-   display:none !important; /* hide legacy injected black tooltips/pops */
+.mw-parser-output .sv-disclose-pop-hint{
+   display:none !important;
 }
-/* ---- Universal shell (Popup B look) ------------------------------------ */
+/* Optional: also hide the old tip hint if it shows up anywhere */
+.sv-tip-pop-hint,
-.sv-uipop{
+.mw-parser-output .sv-tip-pop-hint{
-  position:fixed;
+   display:none !important;
-  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"]{
+/* --- 1b) Center + enlarge legacy disclose titles (Users/Requirements) --- */
-   display:none;
+.sv-disclose-pop-head,
+.mw-parser-output .sv-disclose-pop-head{
+   justify-content:center !important;
 }
-/* “More square” sizing; JS will clamp to viewport */
+.sv-disclose-pop-title,
-.sv-uipop--sm{
+.mw-parser-output .sv-disclose-pop-title{
-  width:320px;
+   width:100%;
-  max-width:calc(100vw - 20px);
+   text-align:center;
-  max-height:min(45vh, 320px);
+   font-size:16px;
-}
-.sv-uipop--lg{
-   width:420px;
-  max-width:calc(100vw - 20px);
-   max-height:min(65vh, 520px);
-}
-/* Header bar (required for large, optional for small) */
-.sv-uipop-head{
-  display:flex;
-  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-uipop-head--clickable{
-  cursor:pointer;
-}
-.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;
+Universal Popup v2 (the injected panel) — header/title tuning + sizing
-  color:var(--sv-ui-text3);
+============================================================================ */
-  white-space:nowrap;
-}
-/* Body */
+/* Large/click headers: centered “dialog title” look */
-.sv-uipop-body{
+.sv-uipop-head--center{
-  padding:10px 12px 12px;
+   justify-content:center;
-  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{
-   padding:6px 0;
-  border-top:1px solid var(--sv-ui-line1);
-  font-size:13px;
-  color:var(--sv-ui-text2);
 }
-.sv-uipop :where(.sv-disclose-list, .sv-uipop-list) > li:first-child{
+.sv-uipop-head--center .sv-uipop-title{
-   border-top:none;
+   width:100%;
-   padding-top:0;
+   text-align:center;
-}
+   font-size:16px;
-.sv-uipop :where(.sv-disclose-group-title, .sv-uipop-group-title){
-   padding-top:10px;
    font-weight:900;
-  font-size:12px;
    letter-spacing:0.02em;
-  color:var(--sv-ui-text1);
 }
-/* Optional actions row (Definitions with links, etc.) */
+/* For click-open popups, we don’t show a hint at all */
-.sv-uipop-actions{
+.sv-uipop-head--center .sv-uipop-hint{
-  margin-top:10px;
+   display:none !important;
-  padding-top:10px;
-  border-top:1px solid var(--sv-ui-line1);
-   display:flex;
-  gap:10px;
-  flex-wrap:wrap;
 }
-.sv-uipop-action{
+/* --- 2) Narrow small text popups: early wrap (“~6 words”) --- */
-  display:inline-flex;
+.sv-uipop--sm{
-  align-items:center;
+   width:min(34ch, calc(100vw - 20px));
-  justify-content:center;
+   max-width:min(34ch, calc(100vw - 20px));
-  padding:7px 10px;
-  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{
-   background:var(--sv-ui-bg3);
+/* Slightly tighter large width (still comfortable) */
+.sv-uipop--lg{
+   width:min(400px, calc(100vw - 20px));
+  max-width:min(400px, calc(100vw - 20px));
 }