MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 13: / Line 13: @@
 }
-/* Prettify stub boxes */
 .stub-box {
-  max-width: 600px;
+   display: inline-flex;
-   display: flex;
    align-items: center;
+  justify-content: flex-start;
    background-color: #e9e9e9;
    border-left: 4px solid #09bb62;
@@ Line 23: / Line 22: @@
    border-radius: 8px;
    font-size: 0.95em;
-   box-shadow: 0 0 4px rgba(0,0,0,0.2);
+   box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+  margin: 1em auto;              /* center horizontally */
+  max-width: 100%;               /* never overflow container */
+  white-space: normal;           /* allow multi-line text */
+  gap: 10px;                     /* spacing between icon and text */
 }
-.stub-image {
-   display: flex;
+.stub-text {
-  align-items: center;
+   text-align: left;
-   margin-right: 10px;
+   line-height: 1.4em;
-  padding: 0;
 }
 .stub-image img {
    display: block;
-   margin: 0;
+   max-height: 32px;
-   padding: 0;
+  width: auto;
-   line-height: 1;
+}
-   vertical-align: middle;
+.stub-word {
+  color: #4f504c;
+}
+.alert-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: #e9e9e9;
+  padding: 10px 15px;
+  border-radius: 8px;
+  font-size: 0.95em;
+   box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+  margin: 1em auto;              /* center horizontally */
+   max-width: 100%;               /* never overflow container */
+   white-space: normal;           /* allow multi-line text */
+  gap: 10px;                     /* spacing between icon and text */
 }
-.stub-text {
+.alert-text {
    text-align: left;
    line-height: 1.4em;
 }
-.stub-word {
-   color: #4f504c;
+.alert-image img {
+   display: block;
+  max-height: 32px;
+  width: auto;
 }
 /* Main page stuff */
@@ Line 99: / Line 129: @@
 .vector-body .table-bg-always,
 .table-bg-blue {
-   background-color: color-mix(in srgb, #3288bd, transparent 50%) !important;
+   background-color: color-mix(in srgb, #3288bd, transparent 80%) !important;
-   color: var(--bg-main) !important;
+   color: #3288bd !important;
 }
 .vector-body .table-bg-common,
 .table-bg-green {
-   background-color: color-mix(in srgb, #abdda4, transparent 50%) !important;
+   background-color: color-mix(in srgb, #abdda4, transparent 80%) !important;
-   color: var(--bg-main) !important;
+   color: #abdda4 !important;
 }
 .vector-body .table-bg-uncommon,
 .table-bg-yellow {
-   background-color: color-mix(in srgb, #fee08b, transparent 50%) !important;
+   background-color: color-mix(in srgb, #fee08b, transparent 80%) !important;
-   color: var(--bg-main) !important;
+   color: #fee08b !important;
 }
 .vector-body .table-bg-rare,
 .table-bg-orange {
-   background-color: color-mix(in srgb, #f46d43, transparent 50%) !important;
+   background-color: color-mix(in srgb, #f46d43, transparent 80%) !important;
-   color: var(--bg-main) !important;
+   color: #f46d43 !important;
 }
 .vector-body .table-bg-veryrare,
 .table-bg-red {
-   background-color: color-mix(in srgb, #d53e4f, transparent 50%) !important;
+   background-color: color-mix(in srgb, #d53e4f, transparent 80%) !important;
-   color: var(--bg-main) !important;
+   color: #d53e4f !important;
 }
 .vector-body .table-bg-ultrarare,
 .table-bg-purple {
-   background-color: color-mix(in srgb, #9b91af, transparent 50%) !important;
+   background-color: color-mix(in srgb, #9b91af, transparent 80%) !important;
-   color: var(--bg-main) !important;
+   color: #9b91af !important;
 }
 .vector-body .table-bg-random,
 .table-bg-pink {
-   background-color: color-mix(in srgb, #5e4fa2, transparent 50%) !important;
+   background-color: color-mix(in srgb, #5e4fa2, transparent 80%) !important;
+  color: #5e4fa2 !important;
 }
 .vector-body .table-bg-gray,
 .table-bg-grey {
    background:#5d6773 !important;
-   color: var(--bg-main) !important;
+   color: #5d6773 !important;
 }
 .vector-body .table-bg-fade {