Template:Navcard: Difference between revisions

← Older edit

VisualWikitext

@@ Line 1: / Line 1: @@
 __NOTOC____NOEDITSECTION____NOTITLE__{{#css:
    #link-overlay {
-    height: 180px;
-    width: 200px;
      border: solid;
-     border-radius: 2px;
+     border-radius: 4px;
+    border-color: #c8ccd1;
      overflow: hidden;
+  }
+  .display {
+    height: 100%;
+    width: 200px;
+  }
+  .mini {
+    height: 120px;
+    width: 150px;
+    font-size: 18px;
+  }
+  .regular {
+    height: 150px;
+    width: 180px;
+    font-size: 23px;
    }
@@ Line 11: / Line 27: @@
      background-color: #f7faeb;
      color: #000;
-  }
-  @media screen {
-	html.skin-theme-clientpref-night .background-basic {
-		background-color: #383838;
-		color: #ace;
-	}
    }
@@ Line 34: / Line 43: @@
      height: 75%;
      width: auto;
-     transition: transform .4s;
+     overflow: hidden;
-  }
-  img {
-    height: 100%;
-    width: 200px;
-    object-fit: cover;
    }
@@ Line 48: / Line 51: @@
      width: auto;
      text-align: center;
-     font-size: 24px;
+     align-content: center;
-     margin: auto;
+    color: #54595d;
+    background-color: #eaecf0;
    }
-   #link-overlay:hover + img {
+   @media screen {
-    transform: scale(1.2);
+	html.skin-theme-clientpref-night .background-basic {
+		background-color: #383838;
+		color: #ace;
+	}
+    html.skin-theme-clientpref-night #title {
+        color: #a2a9b1;
+        background-color: #27292d;
+    }
+     html.skin-theme-clientpref-night #link-overlay {
+        border-color: #404244;
+    }
    }
 }}
-<div id="link-overlay"><div id="test">[[File:Invisible-png.png|link={{{link|Stillwind}}}|class=test]]</div><div id="container"><div id="img-container">[[File:Stillwindsclimate.jpg|link=]]</div><div id="title">{{{text|Category}}}</div></div></div>
+<div id="link-overlay" class="{{{size|regular}}}"><div id="test">[[File:Invisible-png.png|link={{{link|Stillwind}}}|class=test]]</div><div id="container"><div id="img-container">[[File:{{{image|Stillwindsclimate.jpg}}}|link=|center|class=display]]</div><div id="title">'''{{{text|Category}}}'''</div></div></div>