MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 372: / Line 372: @@
-.module-icon-name .sv-herobar-icon {
+table.spiritvale-skill-infobox .module-icon-name .sv-herobar-1-wrap {
-     position: relative;
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto;
+    column-gap: 0.65em;
+    row-gap: 0.35em;
+    align-items: center;
+    justify-content: center;
+}
+table.spiritvale-skill-infobox .module-icon-name .sv-herobar-icon {
+     grid-column: 1;
+    grid-row: 1;
      width: 80px;
      height: 80px;
@@ Line 381: / Line 392: @@
      line-height: 0;
 }
-.module-icon-name .sv-herobar-icon img {
+table.spiritvale-skill-infobox .module-icon-name .sv-herobar-icon img {
      max-width: 80px;
      max-height: 80px;
@@ Line 388: / Line 399: @@
      object-fit: contain;
 }
-.module-icon-name .sv-tip-btn--notes {
-     position: absolute;
+table.spiritvale-skill-infobox .module-icon-name .sv-herobar-text {
-     left: 6px;
+    grid-column: 2;
-     top: 50%;
+    grid-row: 1;
-     transform: translateY(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+table.spiritvale-skill-infobox .module-icon-name .sv-herobar-title-row {
+     display: inline-flex;
+    align-items: center;
+    justify-content: center;
+     gap: 0.45em;
+}
+table.spiritvale-skill-infobox .module-icon-name .sv-pill-row--req {
+     grid-column: 1 / -1;
+     grid-row: 2;
+    justify-self: center;
+    margin-top: 2px;
+}
+table.spiritvale-skill-infobox .module-icon-name .sv-tip-btn--notes {
      display: inline-flex;
      align-items: center;
      justify-content: center;
-     width: 20px;
+     min-width: 30px;
-     height: 20px;
+     height: 30px;
      border-radius: 999px;
-     background: transparent;
+     border: 1px solid rgba(255,255,255,.18);
-     border: 0;
+     background: rgba(255,255,255,.10);
-     padding: 0;
+     cursor: pointer;
 }
-.module-icon-name .sv-ico {
+table.spiritvale-skill-infobox .module-icon-name .sv-tip-btn--notes:hover {
-     width: 16px;
+     background: rgba(255,255,255,.14);
-    height: 16px;
-    display: block;
 }
-.module-icon-name .sv-ico--info {
+table.spiritvale-skill-infobox .module-icon-name .sv-tip-btn--notes:focus-visible {
-     width: 16px;
+    outline: 2px solid rgba(255,255,255,.28);
-     height: 16px;
+    outline-offset: 2px;
+}
+table.spiritvale-skill-infobox .module-icon-name .sv-ico--info {
+     width: 22px;
+     height: 22px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
+    font-weight: 900;
+    font-size: 15px;
      line-height: 1;
-    text-align: center;
-    font-weight: 800;
-    font-size: 12px;
      background: var(--sv-ico-bg, #6aa6ff);
      color: var(--sv-ico-fg, #081018);
 }
-.module-icon-name .sv-herobar-text {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-}
-.module-icon-name .sv-pill-row { margin-top: 0; }
-.module-icon-name .sv-herobar-text .sv-tip-btn--notes {
-    position: static;
-    transform: none;
-    margin-right: 6px;
-    margin-bottom: 4px;
-    align-self: flex-start;
-}
 .module-icon-name .sv-pill--req {
      display: inline-flex;