Jump to content

Template:Mainpage.css: Difference between revisions

From PokeHero Official Wiki
Created page with "===== Main Page Container Styling =====: #mainpage-header { display: flex; align-items: center; justify-content: center; background: #f8f8ff; border: 2px solid #cc0000; border-radius: 12px; padding: 15px; font-size: 120%; } Logo in header: #mainpage-header .header-logo { flex: 0 0 auto; margin-right: 15px; } Header text: #mainpage-header .header-text { flex: 1; } ===== Category Boxes =====: .mainpage-cate..."
 
No edit summary
Line 1: Line 1:
/* ===== Main Page Container Styling ===== */
/* Header */
#mainpage-header {
#mainpage-header {
     display: flex;
     display: flex;
Line 11: Line 11:
}
}


/* Logo in header */
/* Header logo and text */
#mainpage-header .header-logo {
#mainpage-header .header-logo { flex:0 0 auto; margin-right:15px; }
    flex: 0 0 auto;
#mainpage-header .header-text { flex:1; }
    margin-right: 15px;
}
 
/* Header text */
#mainpage-header .header-text {
    flex: 1;
}


/* ===== Category Boxes ===== */
/* Category boxes */
.mainpage-categories {
.mainpage-categories {
     display: flex;
     display:flex;
     gap: 10px;
     gap:10px;
     justify-content: center;
     justify-content:center;
     margin-top: 15px;
     margin-top:15px;
}
}
.mainpage-categories .category-box {
.mainpage-categories .category-box {
     flex: 1;
     flex:1;
     display: flex;
     display:flex;
     padding: 10px;
     padding:10px;
     border: 1px solid #aaa;
     border:1px solid #aaa;
     border-radius: 8px;
     border-radius:8px;
    /* Auto height to match tallest in the row */
     align-items:center;
     align-items: center;
    background: #fff; /* Default, can override per category */
     transition: box-shadow 0.2s;
     transition: box-shadow 0.2s;
}
}
 
.mainpage-categories .category-text { flex:1; }
/* Text inside category */
.mainpage-categories .category-text {
    flex: 1;
}
 
/* Icon column */
.mainpage-categories .category-icon {
.mainpage-categories .category-icon {
     flex: 0 0 50px;
     flex:0 0 50px;
     display: flex;
     display:flex;
     align-items: center;
     align-items:center;
     justify-content: center;
     justify-content:center;
}
}
/* Hover effect like clickable cards */
.mainpage-categories .category-box:hover {
.mainpage-categories .category-box:hover {
     box-shadow: 0 2px 8px rgba(0,0,0,0.2);
     box-shadow:0 2px 8px rgba(0,0,0,0.2);
     cursor: pointer;
     cursor:pointer;
}
}


/* Optional: category-specific background colors */
/* Discord box */
.category-pokehero { background: #eaf9e8; }
.category-moves    { background: #e8f1fa; }
.category-items    { background: #fff3e6; }
.category-locations{ background: #f6e8fa; }
.category-characters { background: #fceaea; }
.category-mechanics  { background: #eaf8f9; }
 
/* ===== Discord Box Styling ===== */
#mainpage-discord {
#mainpage-discord {
     text-align: center;
     text-align:center;
     margin-top: 20px;
     margin-top:20px;
}
}
#mainpage-discord .discord-box {
#mainpage-discord .discord-box {
     display: inline-flex;
     display:inline-flex;
     align-items: center;
     align-items:center;
     gap: 8px;
     gap:8px;
     border: 1px solid #5865F2;
     border:1px solid #5865F2;
     border-radius: 8px;
     border-radius:8px;
     padding: 8px 12px;
     padding:8px 12px;
     background: #f0f2ff;
     background:#f0f2ff;
     transition: box-shadow 0.2s;
     transition:box-shadow 0.2s;
}
}
 
#mainpage-discord .discord-box img { vertical-align:middle; }
#mainpage-discord .discord-box img {
    vertical-align: middle;
}
 
#mainpage-discord .discord-box:hover {
#mainpage-discord .discord-box:hover {
     box-shadow: 0 2px 8px rgba(0,0,0,0.2);
     box-shadow:0 2px 8px rgba(0,0,0,0.2);
     cursor: pointer;
     cursor:pointer;
}
}
#mainpage-discord p { margin:0; }


/* Remove extra paragraph margins in Discord box */
/* Optional category-specific colors */
#mainpage-discord p {
.category-pokehero { background:#eaf9e8; }
    margin: 0;
.category-moves { background:#e8f1fa; }
}
.category-items { background:#fff3e6; }
.category-locations { background:#f6e8fa; }
.category-characters { background:#fceaea; }
.category-mechanics { background:#eaf8f9; }

Revision as of 11:05, 1 September 2025

/* Header */

  1. mainpage-header {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #f8f8ff;
   border: 2px solid #cc0000;
   border-radius: 12px;
   padding: 15px;
   font-size: 120%;

}

/* Header logo and text */

  1. mainpage-header .header-logo { flex:0 0 auto; margin-right:15px; }
  2. mainpage-header .header-text { flex:1; }

/* Category boxes */ .mainpage-categories {

   display:flex;
   gap:10px;
   justify-content:center;
   margin-top:15px;

} .mainpage-categories .category-box {

   flex:1;
   display:flex;
   padding:10px;
   border:1px solid #aaa;
   border-radius:8px;
   align-items:center;
   transition: box-shadow 0.2s;

} .mainpage-categories .category-text { flex:1; } .mainpage-categories .category-icon {

   flex:0 0 50px;
   display:flex;
   align-items:center;
   justify-content:center;

} .mainpage-categories .category-box:hover {

   box-shadow:0 2px 8px rgba(0,0,0,0.2);
   cursor:pointer;

}

/* Discord box */

  1. mainpage-discord {
   text-align:center;
   margin-top:20px;

}

  1. mainpage-discord .discord-box {
   display:inline-flex;
   align-items:center;
   gap:8px;
   border:1px solid #5865F2;
   border-radius:8px;
   padding:8px 12px;
   background:#f0f2ff;
   transition:box-shadow 0.2s;

}

  1. mainpage-discord .discord-box img { vertical-align:middle; }
  2. mainpage-discord .discord-box:hover {
   box-shadow:0 2px 8px rgba(0,0,0,0.2);
   cursor:pointer;

}

  1. mainpage-discord p { margin:0; }

/* Optional category-specific colors */ .category-pokehero { background:#eaf9e8; } .category-moves { background:#e8f1fa; } .category-items { background:#fff3e6; } .category-locations { background:#f6e8fa; } .category-characters { background:#fceaea; } .category-mechanics { background:#eaf8f9; }