Template:Callout/styles.css: Difference between revisions

← Older edit

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