MediaWiki:Gadget-Infobox.css: Difference between revisions

Browse history interactively

← Older edit Newer edit →

@@ Line 8: / Line 8: @@
      --druid-quaternary-background-color: var(--background-color-2b);
      --druid-quinary-background-color: var(--background-color-1b);
-     --druid-border-color: var(--border-color-base);
+     --druid-border-color: rgba(var(--color-accent--rgb), 0.5);
-     --druid-link-color: var(--background-color-4);
+     --druid-link-color: rgba(var(--color-accent--rgb), 0.5);
      --druid-link-label-color: var(--color-base);
      --druid-outer-border-radius: 10px;
@@ Line 50: / Line 50: @@
      text-align: center;
      font-size: 1.5em;
+    font-family: 'PetitPlanet', 'Montserrat', sans-serif;
+    padding: 0.15em 0.6em;
 }
@@ Line 56: / Line 58: @@
      color: var(--druid-tertiary-background-label-color);
      text-align: center;
-     font-size: 1.5em;
+     font-size: 1.35em;
-}
+     font-family: 'PetitPlanet', 'Montserrat', sans-serif;
-.druid-infobox .druid-section {
-     font-size: 1.25em;
-    font-weight: 500;
      border-radius: var(--druid-inner-border-radius);
      margin-bottom: var(--druid-gap);
+    padding: 0.15em 0.6em;
 }
@@ Line 89: / Line 88: @@
 .druid-main-image img,
 .druid-main-images img {
-	background: var(--druid-quinary-background-color);
+     max-width: 324px;
-     max-width: 320px;
      max-height: 500px;
      width: auto;
      height: auto;
-     margin: calc(2px + var(--druid-gap)) 0;
+     margin: calc(1px + var(--druid-gap)) 0;
-    padding: var(--druid-gap);
      border-radius: var(--druid-inner-border-radius);
 }
@@ Line 104: / Line 101: @@
      flex-wrap: wrap;
      justify-content: space-evenly;
-     padding: calc(2px + var(--druid-gap)) 0 0 0;
+     padding: calc(1px + var(--druid-gap)) 0 0 0;
      gap: var(--druid-gap);
 }
@@ Line 120: / Line 117: @@
      background: var(--druid-link-color);
      color: var(--druid-link-label-color);
+    border-color: transparent;
 }
 .druid-main-images-label:not(.focused):hover {
-     background: var(--druid-quinary-background-color);
+     background: rgba(var(--color-accent--rgb), 0.15);
      border-color: var(--druid-link-color);
 }
@@ Line 241: / Line 239: @@
      border-radius: var(--druid-inner-border-radius);
      box-sizing: border-box;
-}
-.druid-infobox .druid-title {
-    font-weight: 700;
 }
@@ Line 271: / Line 265: @@
      padding-left: 0.75em;
 }
+.archive-number {
+    padding: calc(var(--druid-gap)/4) var(--druid-gap);
+    border-radius: var(--druid-inner-border-radius);
+    outline: 1px solid rgba(128, 128, 128, 0.3);
+    margin-right: 0.25em;
+}
+.archive-number.quality-none { background: var(--druid-secondary-background-color); }
+.archive-number.quality-gray { background: #C7CAB4; }
+.archive-number.quality-green { background: #83D083; }
+.archive-number.quality-blue { background: #95BFCC; }
+.archive-number.quality-purple { background: #A680B1; }
+.archive-number.quality-gold { background: #C79D39; }
+.quality-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    border-radius: var(--druid-inner-border-radius);
+    line-height: 1;
+    vertical-align: middle;
+}
+.quality-label::before {
+    content: "";
+    width: 0.8rem;
+    height: 0.8rem;
+    border-radius: calc(var(--druid-inner-border-radius) - var(--druid-gap));
+    display: inline-block;
+    outline: 1px solid rgba(64, 64, 64, 0.3);
+}
+.quality-label.quality-none::before { background: var(--druid-quaternary-background-color); }
+.quality-label.quality-gray::before { background: #C7CAB4; }
+.quality-label.quality-green::before { background: #83D083; }
+.quality-label.quality-blue::before { background: #95BFCC; }
+.quality-label.quality-purple::before { background: #A680B1; }
+.quality-label.quality-gold::before { background: #C79D39; }
 /*****************************************