MediaWiki:Common.css: Difference between revisions

Line 286:

border-radius: 8px;

overflow: hidden;

box-shadow: 0 ~~4px 10px~~ rgba(61, 43, 31, 0.1);

box-shadow: 0 8px 18px rgba(20, 12, 4, 0.25);

border: 1px solid rgba(179, 160, 125, 0.3);

transition: all 0.2s ease;

Line 294:

.category-card:hover {

transform: translateY(-4px);

box-shadow: 0 ~~10px 20px~~ rgba(61, 43, 31, 0.15), 0 0 15px rgba(255, 215, 0, 0.15);

box-shadow: 0 16px 28px rgba(20, 12, 4, 0.35), 0 0 15px rgba(255, 215, 0, 0.15);

border-color: #b3a07d;

}

.tile-top.tile-image {

background: radial-gradient(circle, #ffffff 0%, #f1e7d3 100%) !important;

height: ~~120px~~;

height: 180px;

display: flex;

align-items: center;

Line 307:

}

.tile-top.tile-image img {

max-width: ~~80px~~;

max-width: 135px;

max-height: ~~80px~~;

max-height: 135px;

object-fit: contain;

filter: drop-shadow(0 ~~4px 6px~~ rgba(0,0,0,0.2));

filter: drop-shadow(0 14px 16px rgba(20, 12, 4, 0.5));

transition: transform 0.2s ease;

transition: transform 0.2s ease, filter 0.2s ease;

}

.category-card:hover .tile-top.tile-image img {

transform: scale(1.05);

filter: drop-shadow(0 18px 20px rgba(20, 12, 4, 0.6));

}

.tile-bottom.link-button {

@@ Line 286: / Line 286: @@
      border-radius: 8px;
      overflow: hidden;
-     box-shadow: 0 4px 10px rgba(61, 43, 31, 0.1);
+     box-shadow: 0 8px 18px rgba(20, 12, 4, 0.25);
      border: 1px solid rgba(179, 160, 125, 0.3);
      transition: all 0.2s ease;
@@ Line 294: / Line 294: @@
 .category-card:hover {
      transform: translateY(-4px);
-     box-shadow: 0 10px 20px rgba(61, 43, 31, 0.15), 0 0 15px rgba(255, 215, 0, 0.15);
+     box-shadow: 0 16px 28px rgba(20, 12, 4, 0.35), 0 0 15px rgba(255, 215, 0, 0.15);
      border-color: #b3a07d;
 }
 .tile-top.tile-image {
      background: radial-gradient(circle, #ffffff 0%, #f1e7d3 100%) !important;
-     height: 120px;
+     height: 180px;
      display: flex;
      align-items: center;
@@ Line 307: / Line 307: @@
 }
 .tile-top.tile-image img {
-     max-width: 80px;
+     max-width: 135px;
-     max-height: 80px;
+     max-height: 135px;
      object-fit: contain;
-     filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
+     filter: drop-shadow(0 14px 16px rgba(20, 12, 4, 0.5));
-     transition: transform 0.2s ease;
+     transition: transform 0.2s ease, filter 0.2s ease;
 }
 .category-card:hover .tile-top.tile-image img {
      transform: scale(1.05);
+    filter: drop-shadow(0 18px 20px rgba(20, 12, 4, 0.6));
 }
 .tile-bottom.link-button {