MediaWiki:Gadget-Infobox.css: Difference between revisions

Browse history interactively

← Older edit

@@ Line 44: / Line 44: @@
 }
-.druid-infobox .druid-title {
+.druid-infobox .druid-title,
+.druid-infobox .druid-subtitle {
      background: var(--druid-secondary-background-color);
      color: var(--druid-secondary-background-label-color);
@@ Line 52: / Line 53: @@
      font-family: 'PetitPlanet', 'Montserrat', sans-serif;
      padding: 0.15em 0.6em;
+}
+/* Only when subtitle is immediately after title */
+.druid-infobox > div:has(> .druid-title):has(+ div > .druid-subtitle) > .druid-title {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+/* Only when no images */
+.druid-infobox:not(:has(.druid-main-image, .druid-main-images)) .druid-title {
+  margin-bottom: var(--druid-gap);
+}
+.druid-infobox .druid-subtitle {
+    background: rgba(var(--color-accent--rgb), 0.8);
+    font-size: 1.2em;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
 }
@@ Line 94: / Line 113: @@
      margin: calc(1px + var(--druid-gap)) 0;
      border-radius: var(--druid-inner-border-radius);
+}
+/* Only if no image */
+.druid-infobox div.druid-main-image:not(:has(*)) {
+    height: var(--druid-gap);
 }
@@ Line 305: / Line 329: @@
 .quality-label.quality-gold::before { background: #C79D39; }
-/*****************************************
+/* Hide dummy infobox until extension is removed */
-   TODO:
-   Delete all Portable Infobox CSS after converting all Portable Infoboxes
-   into DRUID Infoboxes
-*****************************************/
-.portable-infobox {
-    min-width: 320px;
-    background: var(--background-color-1);
-    border-radius: 20px;
-    padding: 10px;
-}
-.pi-title {
-    background-color: var(--color-accent);
-    text-align: center;
-    border-radius: 10px;
-    color: var(--color-accent-text);
-    margin-bottom: 5px !important;
-}
-.pi-data {
-    background-color: var(--background-color-2);
-    border-radius: 10px;
-    margin-bottom: 5px;
-    border: none;
-}
-.pi-data:last-child {
-    margin-bottom: 0;
-}
-.pi-data-label {
-    color: var(--color-progressive);
-    font-family: 'Inter' !important;
-    font-weight: 700 !important;
-}
-.portable-infobox .pi-data-label {
-    flex: 95px;
-}
-.pi-image img {
-    border-radius: 10px;
-    overflow: hidden;
-    margin-bottom: 5px !important;
-}
-.pi-media-collection-tabs {
-    gap: 5px;
-    align-items: stretch !important;
-    margin-bottom: 2px !important;
-}
-.pi-media-collection-tabs .current {
-    background-color: var(--background-color-4) !important;
-}
-.pi-media-collection-tabs li {
-    border-radius: 10px !important;
-    background-color: var(--background-color-2) !important;
-}
-.pi-section-navigation .pi-section-tab, .pi-media-collection .pi-tab-link {
-    max-width: none !important;
-    flex-grow: 1;
-}
-.pi-media-collection .pi-tab-link {
-    border: 0;
-}
-.pi-header {
-    background-color: transparent !important;
-    text-align: center;
-    font-weight: 500 !important;
-}
-/* Group styling */
-.pi-horizontal-group {
-    margin-bottom: 5px;
-    border: 1px solid transparent !important;
-    border-spacing: 5px 0;
-    border-collapse: collapse;
-    border-radius: 10px;
-    overflow: hidden;
-}
-.pi-horizontal-group {
-    td,
-    th {
-        border-color: var(--background-color-1) !important;
-        border-width: 5px !important;
-        background-color: var(--background-color-2);
-    }
-}
-.pi-group {
-    border: none;
-}
-/* Hide dummy infobox */
 aside.pi-theme-dummy,
 aside.pi-theme-dummy ~ aside.portable-infobox + p > br:first-child,