Template:Callout/styles.css: Difference between revisions

← Older edit Newer edit →

@@ Line 2: / Line 2: @@
    border-left: 3px solid #999;
    padding: 0.75em 1em;
-   margin: 1em 0;
+   margin: 0.75em 0; /* reduced whitespace */
+  background: #fafafa; /* consistent background */
+  border-radius: 4px;
 }
-.callout-icon{
-	  font-size:1.1em;
+.callout-header {
-}
+  display: flex;
-.callout-label {
+   align-items: center;
-   font-weight: bold;
+   gap: 0.35em;
-   margin-right: 0.25em;
+   margin-bottom: 0.4em;
-   font-size:1.1em;
 }
-.callout-tip {
+.callout-icon {
-   border-left-color: #4a90e2;
+   font-size: 1.2em;
 }
-.callout-warning {
+.callout-label {
-   border-left-color: #d9534f;
+   font-weight: bold;
+  font-size: 1.1em;
 }
-.callout-protip {
+.callout-title {
-   border-left-color: #5cb85c;
+   font-weight: normal;
+  opacity: 0.8;
 }
-.callout-note {
+.callout-body {
-   border-left-color: #999;
+   margin-left: 1.6em;
+  line-height: 1.5;
 }
-.callout-title{
+/* Type-specific accents */
-	font-weight:bold;
+.callout-tip { border-left-color: #4a90e2; }
-	font-size:1.1em;
+.callout-warning { border-left-color: #d9534f; }
-}
+.callout-protip { border-left-color: #5cb85c; }
+.callout-note { border-left-color: #999; }
-.callout-text{
+/* Mobile */
-	font-weight:normal;
+@media (max-width: 600px) {
-	font-size:1.15em;
+  .callout {
+    padding: 0.75em;
+  }
+  .callout-body {
+    margin-left: 1.2em;
+  }
 }