MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1,069: / Line 1,069: @@
    letter-spacing: 0.02em;
    color: var(--sv-ui-text2);
+}
+/* ============================================================================
+SV Universal Popup v2 (TESTING)
+- Popup B aesthetic, site-wide
+- Small: hover/focus (non-click open on hover-capable devices)
+- Large: click/tap open, header click to close, outside click to close
+- JS adds .sv-uipop-v2 to <html> when enabled
+============================================================================ */
+.sv-uipop-v2 .sv-def-tip,
+.sv-uipop-v2 .sv-pop-tip{
+  display:none !important; /* hide legacy injected black tooltips/pops */
+}
+/* ---- Universal shell (Popup B look) ------------------------------------ */
+.sv-uipop{
+  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);
+}
+/* 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;
+  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{
+  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{
+  border-top:none;
+  padding-top:0;
+}
+.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.) */
+.sv-uipop-actions{
+  margin-top:10px;
+  padding-top:10px;
+  border-top:1px solid var(--sv-ui-line1);
+  display:flex;
+  gap:10px;
+  flex-wrap:wrap;
+}
+.sv-uipop-action{
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  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);
 }