|
|
| (同じ利用者による、間の16版が非表示) |
| 1行目: |
1行目: |
| /* University eSports Wiki - Home Page Specific Styles */
| | __NOTOC__ |
| /* Scope everything under .uw-home to avoid affecting other pages */
| | <div class="uw-home"> |
| /* Home page full width */
| | {{HomeHero|title=Uni-Wiki|subtitle=日本の大学eスポーツシーンを集約・記録するプラットフォーム}} |
| body.page-Home .mw-body,
| | <div class="uw-action-grid"> |
| body.page-Home .mw-content-container,
| | {{HomeActionCard|title=PLAYERS|link=Category:Players|image=Player.png|position=65% 15%}} |
| body.page-Home .mw-body-content,
| | {{HomeActionCard|title=UNIVERSITIES|link=Category:Universities|image=teams.png|position=80% 20%}} |
| body.page-Home .mw-parser-output {
| | {{HomeActionCard|title=TOURNAMENTS|link=Category:Tournaments|image=tournament.png|position=center 35%}} |
| max-width: none !important;
| | {{HomeActionCard|title=RANKINGS|link=Rankings|image=Cargo_boxes_in_Cutlass_Black.jpg}} |
| width: 100% !important;
| | {{HomeActionCard|title=STATS|link=Stats|image=ArcCorp_Area_18_Night.jpg}} |
| padding-left: 0 !important;
| | </div> |
| padding-right: 0 !important;
| | <div class="uw-body-grid"> |
| margin-left: 0 !important;
| | <div class="uw-glass-box"> |
| margin-right: 0 !important;
| | <div style="color: #00f2ff; font-weight: 700; margin-bottom: 1rem;">LATEST NEWS</div> |
| }
| | （ここに最新情報を記載）</div> |
| /* Star Citizen Wiki Style Refinement (Parser-Friendly) */
| | <div class="uw-glass-box"> |
| :root {
| | <div style="color: #00f2ff; font-weight: 700; margin-bottom: 1rem;">ON THE WIKI</div> |
| --uw-color-cyan: #00f2ff;
| | <ul><li>[[Special:RecentChanges|最近の更新]] |
| --uw-glass-bg: rgba(255, 255, 255, 0.03);
| | </li><li>[[Project:Help|ヘルプポータル]] |
| --uw-glass-border: rgba(255, 255, 255, 0.1);
| | </li><li>[[Project:Create|ページの作成(管理者専用)]] |
| --uw-glass-border-faint: rgba(255, 255, 255, 0.08);
| | </li></ul><div style="margin-top: 1.5rem;">[[Discord参加リンク|Discordに参加する]]</div> |
| } | | </div> |
| /* Home Page Base */
| | </div> |
| .uw-home {
| | </div> |
| max-width: 100% !important;
| |
| font-family: 'Inter', -apple-system, sans-serif;
| |
| color: #eee;
| |
| } | |
| /* Hero Section (Centered) */
| |
| .uw-home-hero {
| |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| align-items: center !important;
| |
| justify-content: center !important;
| |
| text-align: center !important;
| |
| padding: 100px 20px 120px !important;
| |
| background: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%) !important;
| |
| position: relative;
| |
| overflow: hidden;
| |
| color: #fff;
| |
| width: 100% !important;
| |
| box-sizing: border-box;
| |
| }
| |
| /* Fix for parser injecting tags between hero and search trigger */
| |
| .uw-home-hero>p,
| |
| .uw-home-hero>div:not([class]) {
| |
| width: 100% !important;
| |
| display: flex !important;
| |
| flex-direction: column !important;
| |
| align-items: center !important;
| |
| }
| |
| .uw-home-hero-welcome {
| |
| font-size: 0.9rem;
| |
| color: var(--uw-color-cyan);
| |
| margin-bottom: 1rem;
| |
| letter-spacing: 2px;
| |
| text-transform: uppercase;
| |
| }
| |
| .uw-home-hero h1 {
| |
| font-size: clamp(3rem, 10vw, 5rem);
| |
| font-weight: 900;
| |
| margin: 0.5rem 0 0.2rem;
| |
| color: #fff;
| |
| border: none !important;
| |
| letter-spacing: -0.04em;
| |
| /* Tight letter spacing */
| |
| line-height: 0.95;
| |
| text-transform: uppercase;
| |
| }
| |
| .uw-home-hero-subtitle {
| |
| font-size: 1.15rem;
| |
| color: #a0a0a0;
| |
| max-width: 800px;
| |
| margin: 0 auto 3rem;
| |
| line-height: 1.5;
| |
| letter-spacing: -0.01em;
| |
| font-weight: 500;
| |
| }
| |
| /* Search Trigger (Decorative Bar that opens global search) */
| |
| .uw-search-trigger {
| |
| width: 90%;
| |
| max-width: 700px;
| |
| /* Slightly adjusted for better balance */
| |
| margin: 2rem auto 0;
| |
| position: relative;
| |
| cursor: pointer;
| |
| display: flex !important;
| |
| flex-direction: row !important;
| |
| align-items: center !important;
| |
| justify-content: flex-start !important;
| |
| padding: 1.1rem 1.8rem;
| |
| background: rgba(14, 26, 34, 0.88);
| |
| border: 1px solid rgba(0, 242, 255, 0.15);
| |
| border-radius: 80px;
| |
| transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
| |
| backdrop-filter: blur(20px);
| |
| box-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
| |
| user-select: none;
| |
| box-sizing: border-box;
| |
| white-space: nowrap;
| |
| } | |
| /* CRITICAL: Handle MediaWiki parser injected <p> and <br> tags */
| |
| .uw-search-trigger p {
| |
| display: contents !important;
| |
| /* Makes the <p> invisible to flexbox, using its children instead */
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| }
| |
| .uw-search-trigger br {
| |
| display: none !important;
| |
| }
| |
| .uw-search-trigger:hover { | |
| border-color: var(--uw-color-cyan);
| |
| background: rgba(20, 35, 45, 0.95);
| |
| box-shadow: 0 0 15px rgba(0, 242, 255, 0.25), 0 8px 35px rgba(0, 0, 0, 0.7);
| |
| transform: translateY(-2px);
| |
| } | |
| .uw-search-trigger .search-icon {
| |
| font-size: 1.2rem;
| |
| opacity: 0.6;
| |
| margin-right: 1.2rem;
| |
| display: flex !important;
| |
| align-items: center;
| |
| flex-shrink: 0;
| |
| } | |
| .uw-search-trigger .search-placeholder {
| |
| color: #999;
| |
| font-size: 1.05rem;
| |
| flex-grow: 1;
| |
| text-align: left;
| |
| font-weight: 400;
| |
| margin-right: 1rem;
| |
| display: flex !important;
| |
| align-items: center;
| |
| letter-spacing: 0.02em;
| |
| }
| |
| /* Keyboard Shortcut Indicator ( / ) */
| |
| .uw-search-trigger .search-shortcut {
| |
| background: rgba(255, 255, 255, 0.08);
| |
| color: #777;
| |
| min-width: 32px;
| |
| height: 30px;
| |
| display: flex !important;
| |
| align-items: center;
| |
| justify-content: center;
| |
| border-radius: 6px;
| |
| font-size: 0.85rem;
| |
| font-family: 'Inter', -apple-system, monospace;
| |
| border: 1px solid rgba(255, 255, 255, 0.12);
| |
| flex-shrink: 0;
| |
| } | |
| /* Action Cards Grid (Horizontal Style) */
| |
| .uw-action-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(5, 1fr);
| |
| gap: 0.8rem;
| |
| max-width: 1400px;
| |
| margin: -40px auto 4rem;
| |
| padding: 0 2rem;
| |
| position: relative;
| |
| z-index: 2;
| |
| } | |
| /* グリッド内にパースされる不要なタグの対策 */
| |
| .uw-action-grid>p,
| |
| .uw-action-grid>br {
| |
| display: none !important;
| |
| }
| |
| .uw-action-card {
| |
| height: 80px;
| |
| background-color: rgba(255, 255, 255, 0.05);
| |
| /* 画像がない場合のフォールバック */
| |
| background-size: cover;
| |
| background-position: center;
| |
| border-radius: 6px;
| |
| overflow: hidden;
| |
| position: relative;
| |
| text-decoration: none !important;
| |
| transition: transform 0.2s ease, filter 0.2s ease;
| |
| border: 1px solid rgba(255, 255, 255, 0.1);
| |
| } | |
| .uw-action-card:hover {
| |
| transform: translateY(-2px);
| |
| filter: brightness(1.2);
| |
| }
| |
| .uw-action-card-title a {
| |
| color: #fff !important;
| |
| text-decoration: none !important;
| |
| }
| |
| /* 擬似要素でクリック領域をカード全体に広げる */
| |
| .uw-action-card-title a::after {
| |
| content: '';
| |
| position: absolute;
| |
| inset: 0;
| |
| z-index: 10;
| |
| }
| |
| .uw-action-card::before {
| |
| content: '';
| |
| position: absolute;
| |
| inset: 0;
| |
| background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6));
| |
| } | |
| .uw-action-card-title {
| |
| position: absolute;
| |
| left: 1rem;
| |
| bottom: 0.8rem;
| |
| color: #fff;
| |
| font-weight: 700;
| |
| font-size: 0.95rem;
| |
| z-index: 1;
| |
| text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
| |
| } | |
| /* Feature & Stats Section */ | |
| .uw-body-grid {
| |
| display: grid;
| |
| grid-template-columns: 1.5fr 1fr;
| |
| gap: 1.5rem;
| |
| max-width: 1400px;
| |
| margin: 0 auto;
| |
| padding: 0 2rem 6rem;
| |
| }
| |
| .uw-glass-box {
| |
| background: var(--uw-glass-bg);
| |
| border: 1px solid var(--uw-glass-border);
| |
| border-radius: 12px;
| |
| padding: 2rem;
| |
| }
| |
| .uw-section-title {
| |
| font-size: 0.8rem;
| |
| font-weight: 700;
| |
| text-transform: uppercase;
| |
| letter-spacing: 1px;
| |
| color: var(--uw-color-cyan);
| |
| margin-bottom: 2rem;
| |
| display: flex;
| |
| justify-content: space-between;
| |
| align-items: center;
| |
| }
| |
| /* Stats Styling */
| |
| .uw-stat-grid {
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr;
| |
| gap: 1rem;
| |
| margin-top: 1rem;
| |
| }
| |
| .uw-stat-item {
| |
| text-align: center;
| |
| }
| |
| .uw-stat-value {
| |
| font-size: 2rem;
| |
| font-weight: 800;
| |
| color: #fff;
| |
| }
| |
| .uw-stat-label {
| |
| font-size: 0.75rem;
| |
| color: #666;
| |
| text-transform: uppercase;
| |
| }
| |
| /* Button & Links */
| |
| .uw-discord-btn {
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 0.8rem;
| |
| background: #5865F2;
| |
| color: #fff !important;
| |
| padding: 1rem;
| |
| border-radius: 8px;
| |
| font-weight: 700;
| |
| text-decoration: none !important;
| |
| margin-bottom: 1rem;
| |
| }
| |
| .uw-patreon-btn {
| |
| background: #FF424D;
| |
| /* same as discord style... */
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| gap: 0.8rem;
| |
| color: #fff !important;
| |
| padding: 1rem;
| |
| border-radius: 8px;
| |
| font-weight: 700;
| |
| text-decoration: none !important;
| |
| }
| |
| /* Responsive */
| |
| @media (max-width: 1024px) {
| |
| .uw-body-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| /* タイトル上部のタブも消す */ | |
| body.page-Home .page-actions {
| |
| display: none;
| |
| }
| |
| /* 余白調整（上が詰まるので） */
| |
| body.page-Home .mw-body {
| |
| margin-top: 0;
| |
| padding-top: 0;
| |
| }
| |
| body.page-Home .mw-body {
| |
| max-width: 100% !important;
| |
| }
| |
| /* ===== Homeページのタイトルを非表示 ===== */
| |
| body.page-Home .mw-first-heading {
| |
| display: none;
| |
| }
| |
| body.page-Home .mw-indicators {
| |
| display: none;
| |
| }
| |
| /* サブタイトル（提供: ○○）を非表示 */
| |
| #siteSub {
| |
| display: none;
| |
| }
| |
| /* ===== サイドバー/ナビゲーションの表示を保証 ===== */
| |
| body.page-Home .citizen-drawer,
| |
| body.page-Home #citizen-section-nav,
| |
| body.page-Home .citizen-sidebar {
| |
| display: block !important;
| |
| }
| |
| /* スクロール時に出現する固定ヘッダー（スティッキーヘッダー）を非表示 */ | |
| body.page-Home .citizen-header--sticky,
| |
| body.page-Home .citizen-sticky-header {
| |
| display: none !important;
| |
| }
| |
| /* 最終更新、著作権情報、アイコンなどを非表示 */
| |
| body.page-Home #footer-info,
| |
| body.page-Home #footer-info-lastmod,
| |
| body.page-Home #footer-info-copyright,
| |
| body.page-Home #footer-icons,
| |
| body.page-Home .citizen-footer__info {
| |
| display: none !important;
| |
| }
| |
| /* カテゴリ表示を非表示 */
| |
| body.page-Home #catlinks,
| |
| body.page-Home .catlinks {
| |
| display: none !important;
| |
| }
| |
| /* ===== InfoBox Styles ===== */
| |
| .uw-infobox {
| |
| float: right !important;
| |
| width: 300px !important;
| |
| margin: 0 0 1.5rem 1.5rem !important;
| |
| background: var(--uw-glass-bg) !important;
| |
| border: 1px solid var(--uw-glass-border) !important;
| |
| border-radius: 12px !important;
| |
| overflow: hidden !important;
| |
| backdrop-filter: blur(10px) !important;
| |
| font-size: 0.9rem !important;
| |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
| |
| z-index: 10;
| |
| position: relative;
| |
| clear: right;
| |
| }
| |
| .uw-infobox-header {
| |
| background: rgba(0, 242, 255, 0.1) !important;
| |
| color: var(--uw-color-cyan) !important;
| |
| padding: 1rem !important;
| |
| font-weight: 800 !important;
| |
| text-align: center !important;
| |
| border-bottom: 1px solid var(--uw-glass-border) !important;
| |
| text-transform: uppercase !important;
| |
| letter-spacing: 1px !important;
| |
| }
| |
| .uw-infobox-image {
| |
| padding: 1.5rem !important;
| |
| background: rgba(0, 0, 0, 0.2) !important;
| |
| text-align: center !important;
| |
| }
| |
| .uw-infobox-image img {
| |
| max-width: 100% !important;
| |
| height: auto !important;
| |
| }
| |
| .uw-infobox-section-title {
| |
| background: rgba(255, 255, 255, 0.05) !important;
| |
| padding: 0.4rem 1rem !important;
| |
| font-size: 0.75rem !important;
| |
| font-weight: 700 !important;
| |
| color: #888 !important;
| |
| text-transform: uppercase !important;
| |
| letter-spacing: 1px !important;
| |
| border-top: 1px solid var(--uw-glass-border-faint) !important;
| |
| border-bottom: 1px solid var(--uw-glass-border-faint) !important;
| |
| }
| |
| .uw-infobox-row {
| |
| display: flex !important;
| |
| padding: 0.6rem 1rem !important;
| |
| border-bottom: 1px solid var(--uw-glass-border-faint) !important;
| |
| }
| |
| .uw-infobox-row:last-child {
| |
| border-bottom: none;
| |
| }
| |
| .uw-infobox-label {
| |
| width: 40%;
| |
| color: #aaa;
| |
| font-weight: 600;
| |
| }
| |
| .uw-infobox-value {
| |
| width: 60%;
| |
| color: #eee;
| |
| }
| |
| /* Responsive InfoBox */
| |
| @media (max-width: 768px) {
| |
| .uw-infobox {
| |
| float: none;
| |
| width: 100%;
| |
| margin: 1rem 0;
| |
| }
| |
| }
| |
