Jump to content

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
No edit summary
No edit summary
Line 3: Line 3:


/* new front page CSS */
/* new front page CSS */
/* Hover effects for cards and buttons */
/* Hero Banner */
a[style*="display:inline-block"] {
.hero-banner {
   transition: transform 0.2s, box-shadow 0.2s;
   text-align: center;
  margin: 2em 0;
  background-color: #f8f9fa;
  padding: 2em 1em;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
}
a[style*="display:inline-block"]:hover {
 
.hero-title {
  font-size: 2.5em;
  font-weight: bold;
  margin-top: 0.8em;
  color: #2c3e50;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
 
.hero-subtitle {
  font-size: 1.4em;
  margin-top: 0.4em;
  color: #34495e;
  font-weight: 300;
}
 
.quick-access-buttons {
  margin-top: 1.5em;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
 
.button {
  display: inline-block;
  padding: 0.6em 1.2em;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: all 0.2s;
}
 
.button:hover {
   transform: translateY(-2px);
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
}
div[style*="box-shadow"]:hover {
 
.button-blue {
  background-color: #3498db;
}
 
.button-green {
  background-color: #2ecc71;
}
 
.button-red {
  background-color: #e74c3c;
}
 
/* About Section */
.about-section {
  max-width: 900px;
  margin: 2em auto;
  font-size: 1.1em;
  line-height: 1.7;
  text-align: center;
  color: #333;
  background-color: white;
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
 
.about-section h2 {
  color: #2c3e50;
  margin-bottom: 0.8em;
  font-size: 1.8em;
}
 
.external-links {
  margin-top: 1em;
  display: flex;
  justify-content: center;
  gap: 15px;
}
 
/* Featured Content */
.featured-content {
  margin: 2em auto;
  max-width: 1000px;
}
 
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1em;
}
 
.section-header h2 {
  color: #2c3e50;
  margin: 0;
  font-size: 1.8em;
}
 
.view-more {
  color: #3498db;
  text-decoration: none;
  font-weight: bold;
}
 
.featured-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
 
.featured-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s;
}
 
.featured-card:hover {
   transform: translateY(-3px);
   transform: translateY(-3px);
   box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
   transition: transform 0.3s, box-shadow 0.3s;
}
 
.card-content {
  padding: 1em;
}
 
.card-content h3 {
   margin-top: 0;
  color: #2c3e50;
}
 
.card-content p {
  color: #555;
}
 
.read-more {
  color: #3498db;
  text-decoration: none;
  font-weight: bold;
}
 
/* Main Sections */
.main-sections {
  margin: 2em auto;
  max-width: 1000px;
}
 
.wiki-table {
  width: 100%;
  border-spacing: 1em;
  margin: 0 auto;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
 
.section-header {
  width: 50%;
  vertical-align: top;
  padding: 1.2em;
  border-radius: 6px;
  border: none;
  font-size: 1.3em;
}
 
.blue-header {
  background-color: #e3f2fd;
  color: #1565c0;
}
 
.orange-header {
  background-color: #fff3e0;
  color: #e65100;
}
 
.green-header {
  background-color: #e8f5e9;
  color: #2e7d32;
}
 
.pink-header {
  background-color: #fce4ec;
  color: #c2185b;
}
 
.yellow-header {
  background-color: #fff8e1;
  color: #ff8f00;
}
 
.light-blue-header {
  background-color: #e1f5fe;
  color: #0277bd;
}
 
.purple-header {
  background-color: #f3e5f5;
  color: #7b1fa2;
}
 
.section-content {
  vertical-align: top;
  padding: 1em;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
 
.two-column {
  column-count: 2;
  column-gap: 20px;
}
 
.two-column-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
 
.tag, .date-tag {
  color: #888;
  font-size: 0.9em;
}
 
.view-all {
  text-align: right;
  margin-top: 0.5em;
}
 
/* Wiki Statistics */
.wiki-stats {
  margin: 2em auto;
  max-width: 900px;
  background-color: #f8f9fa;
  padding: 1.5em;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
 
.wiki-stats h2 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 1em;
  font-size: 1.8em;
}
 
.stats-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  text-align: center;
}
 
.stat-box {
  flex: 1;
  min-width: 200px;
  background-color: white;
  padding: 1em;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
 
.stat-number {
  font-size: 2.5em;
  font-weight: bold;
}
 
.stat-blue .stat-number {
  color: #3498db;
}
 
.stat-red .stat-number {
  color: #e74c3c;
}
 
.stat-green .stat-number {
  color: #2ecc71;
}
 
.stat-label {
  color: #555;
}
 
/* Footer */
.wiki-footer {
  text-align: center;
  margin-top: 2em;
  padding: 1.5em;
  background-color: #2c3e50;
  color: #ecf0f1;
  border-radius: 8px;
}
 
.footer-text {
  font-size: 1.1em;
  margin-bottom: 1em;
}
 
.footer-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 1em;
}
 
.footer-links a {
  color: #3498db;
}
}


/* Mobile responsiveness improvements */
.footer-date {
@media (max-width: 768px) {
   font-size: 0.9em;
   .desktop-view {
   margin-top: 1em;
    display: none;
   color: #bdc3c7;
   }
  .mobile-view {
    display: block;
   }
  div[style*="column-count"] {
    column-count: 1 !important;
  }
}
}
@media (min-width: 769px) {
 
  .desktop-view {
/* Hover effects */
    display: block;
.featured-card:hover,
   }
.stat-box:hover {
   .mobile-view {
  transform: translateY(-3px);
    display: none;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }
   transition: transform 0.3s, box-shadow 0.3s;
}
}
/* end of new front page */


/* used by the front page start*/
/* used by the front page start*/
Retrieved from "https://inzoiwiki.com/wiki/MediaWiki:Common.css"