コンテンツにスキップ

「MediaWiki:Common.css」の版間の差分

MediaWiki:Common.css (ソースを閲覧)

2026年8月25日 (火) 18:54時点における版

5,085 バイト追加 、 2026年8月25日 (火)
編集の要約なし
編集の要約なし
タグ: 手動差し戻し
編集の要約なし
704行目: 704行目:
}
}


/* ==================================================
/* =========================================================
   転スラWiki メインページ
   Tensura Wiki - Main page portal
   ================================================== */
   ========================================================= */


.ts-main {
.ts-main {
     max-width: 1200px;
    --ts-blue: #3366cc;
    --ts-blue-dark: #2a4b8d;
    --ts-blue-soft: #f4f7fb;
    --ts-border: #c8ccd1;
    --ts-border-light: #eaecf0;
    --ts-text: #202122;
    --ts-subtext: #54595d;
    --ts-muted: #72777d;
 
     max-width: 1220px;
     margin: 0 auto;
     margin: 0 auto;
    color: var(--ts-text);
}
}


/* ---------- ヘッダー ---------- */


.ts-main-header {
/* ---------------------------------------------------------
     margin: 0 0 22px;
  Intro
     padding: 6px 0 18px;
  --------------------------------------------------------- */
     border-bottom: 1px solid #d8dfe8;
 
.ts-welcome {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
 
     margin: 0 0 24px;
     padding: 4px 0 18px;
     border-bottom: 1px solid var(--ts-border);
}
}


.ts-main-title {
.ts-welcome-title {
     margin: 0;
     margin: 0 0 5px;
     font-size: 2rem;
     font-size: 1.55rem;
     font-weight: 700;
     font-weight: 700;
     color: #202122;
     line-height: 1.35;
}
}


.ts-main-subtitle {
.ts-welcome-desc {
    margin-top: 6px;
     color: var(--ts-subtext);
     color: #54595d;
     line-height: 1.65;
     font-size: 0.95rem;
}
}


.ts-main-count {
.ts-welcome-count {
     margin-top: 8px;
     flex-shrink: 0;
     font-size: 0.9rem;
    color: var(--ts-muted);
    color: #72777d;
     font-size: .9rem;
}
}


.ts-welcome-count strong {
    color: var(--ts-blue-dark);
    font-size: 1.1rem;
}


/* ---------- セクション ---------- */


.ts-section {
/* ---------------------------------------------------------
     margin: 22px 0;
  Section heading
  --------------------------------------------------------- */
 
.ts-main-section {
     margin: 26px 0;
}
}


.ts-section-title {
.ts-main-heading {
     margin: 0 0 12px;
     margin: 0 0 12px !important;
     padding: 0 0 7px 10px;
     padding: 0 0 7px 10px !important;
     border-left: 4px solid #3366cc;
 
     border-bottom: 1px solid #eaecf0;
     border-left: 4px solid var(--ts-blue);
     font-size: 1.25rem;
     border-bottom: 1px solid var(--ts-border-light);
 
     font-size: 1.22rem !important;
     font-weight: 700;
     font-weight: 700;
     color: #202122;
     line-height: 1.4;
}
 
.ts-main-heading::after {
    display: none;
}
}




/* ---------- 6入口 ---------- */
/* ---------------------------------------------------------
  Portal
  --------------------------------------------------------- */


.ts-portal-grid {
.ts-portal-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #c8ccd1;
 
    border-radius: 6px;
     overflow: hidden;
     overflow: hidden;
    border: 1px solid var(--ts-border);
    border-radius: 5px;
     background: #fff;
     background: #fff;
}
}


.ts-portal {
.ts-portal-card {
     position: relative;
     display: grid;
     min-height: 105px;
    grid-template-columns: 48px minmax(0, 1fr);
     padding: 18px 20px;
    gap: 13px;
     border-right: 1px solid #eaecf0;
 
     border-bottom: 1px solid #eaecf0;
     min-height: 108px;
     padding: 17px 18px;
 
     border-right: 1px solid var(--ts-border-light);
     border-bottom: 1px solid var(--ts-border-light);
 
     box-sizing: border-box;
     box-sizing: border-box;
    transition: background-color .15s ease;
}
.ts-portal-card:hover {
    background: var(--ts-blue-soft);
}
}


.ts-portal:nth-child(3n) {
.ts-portal-card:nth-child(3n) {
     border-right: none;
     border-right: 0;
}
}


.ts-portal:nth-last-child(-n+3) {
.ts-portal-card:nth-last-child(-n+3) {
     border-bottom: none;
     border-bottom: 0;
}
}


.ts-portal:hover {
.ts-portal-icon {
     background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
 
    width: 44px;
    height: 44px;
 
    border: 1px solid #a7b9d8;
    border-radius: 5px;
     background: #f8faff;
 
    color: var(--ts-blue-dark);
    font-size: 1.05rem;
    font-weight: 700;
}
}


.ts-portal-title {
.ts-portal-title {
     margin-bottom: 6px;
     margin: 0 0 4px;
     font-size: 1.08rem;
     font-size: 1.02rem;
     font-weight: 700;
     font-weight: 700;
}
}


.ts-portal-title a {
.ts-portal-title a {
     color: #36c;
     color: var(--ts-blue-dark);
}
}


.ts-portal-desc {
.ts-portal-description {
     margin-bottom: 8px;
     margin-bottom: 7px;
     color: #54595d;
     color: var(--ts-subtext);
     font-size: 0.88rem;
     font-size: .87rem;
     line-height: 1.6;
     line-height: 1.55;
}
}


.ts-portal-link {
.ts-portal-more {
     font-size: 0.88rem;
     font-size: .86rem;
}
}




/* ---------- 汎用グリッド ---------- */
/* ---------------------------------------------------------
  Panels
  --------------------------------------------------------- */


.ts-grid-2 {
.ts-grid-4 {
     display: grid;
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 16px;
    border: 1px solid var(--ts-border);
    border-radius: 5px;
    background: #fff;
     overflow: hidden;
}
}


.ts-grid-3 {
.ts-grid-2 {
     display: grid;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px;
    border: 1px solid var(--ts-border);
    border-radius: 5px;
    background: #fff;
     overflow: hidden;
}
}


.ts-panel {
.ts-panel {
     padding: 16px 18px;
    min-width: 0;
     border: 1px solid #c8ccd1;
     padding: 16px 17px 17px;
    border-radius: 6px;
     border-right: 1px solid var(--ts-border-light);
     background: #fff;
}
 
.ts-grid-4 .ts-panel:last-child,
.ts-grid-2 .ts-panel:last-child {
     border-right: none;
}
}


.ts-panel-title {
.ts-panel-heading {
    display: flex;
    align-items: center;
    gap: 7px;
 
     margin: 0 0 12px;
     margin: 0 0 12px;
     padding-bottom: 7px;
     padding-bottom: 7px;
     border-bottom: 1px solid #eaecf0;
 
     font-size: 1.08rem;
     border-bottom: 1px solid var(--ts-border-light);
 
    color: var(--ts-blue-dark);
     font-size: 1rem;
     font-weight: 700;
     font-weight: 700;
    color: #245c9f;
}
}


.ts-panel-symbol {
    color: var(--ts-blue);
    font-size: .95rem;
}


/* ---------- ピックアップ ---------- */
.ts-panel-content {
    font-size: .9rem;
    line-height: 1.7;
}
 
.ts-panel-content ul {
    margin: .2em 0 .2em 1.4em;
}
 
.ts-panel-content li {
    margin: .28em 0;
}
 
 
/* ---------------------------------------------------------
  Pickup
  --------------------------------------------------------- */
 
.ts-pickup-label {
    display: inline-block;


.ts-pickup-name {
     margin-bottom: 7px;
     margin-bottom: 7px;
     font-size: 1.15rem;
    padding: 2px 7px;
 
    border-radius: 3px;
    background: #eef3fb;
 
    color: var(--ts-blue-dark);
    font-size: .72rem;
    font-weight: 700;
}
 
.ts-pickup-title {
    margin-bottom: 7px;
     font-size: 1.1rem;
     font-weight: 700;
     font-weight: 700;
}
}


.ts-pickup-text {
.ts-pickup-text {
     color: #202122;
     color: var(--ts-subtext);
     line-height: 1.7;
     line-height: 1.65;
}
}


.ts-pickup-meta {
.ts-panel-footer {
     margin-top: 12px;
     margin-top: 11px;
     color: #72777d;
     text-align: right;
     font-size: 0.82rem;
     font-size: .85rem;
}
}




/* ---------- リスト ---------- */
/* ---------------------------------------------------------
 
  Mini list / ranking
.ts-list {
  --------------------------------------------------------- */
    margin: 0;
    padding-left: 1.4em;
}
 
.ts-list li {
    margin: 5px 0;
}


.ts-ranking {
.ts-ranking {
     width: 100%;
     width: 100%;
     border-collapse: collapse;
     border-collapse: collapse;
    font-size: .9rem;
}
}


.ts-ranking td {
.ts-ranking td {
     padding: 5px 3px;
     padding: 5px 2px;
     border: none;
     border: none !important;
    background: transparent !important;
    vertical-align: top;
}
}


.ts-ranking-rank {
.ts-ranking-num {
     width: 28px;
     width: 24px;
     color: #72777d;
     color: var(--ts-muted);
     text-align: center;
     text-align: center;
}
}


.ts-ranking-value {
.ts-ranking-value {
    width: 60px;
    color: var(--ts-muted);
     text-align: right;
     text-align: right;
     white-space: nowrap;
     white-space: nowrap;
    color: #54595d;
}
}


.ts-up {
    color: #14866d;
    font-weight: 600;
}
/* ---------------------------------------------------------
  New / recent
  --------------------------------------------------------- */
.ts-dpl {
    font-size: .88rem;
}
.ts-dpl ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ts-dpl li {
    margin: 0;
    padding: 5px 0;
    border-bottom: 1px dotted #d8dfe8;
}
.ts-dpl li:last-child {
    border-bottom: none;
}
/* ---------------------------------------------------------
  Edit box
  --------------------------------------------------------- */
.ts-edit-list {
    margin: 0 !important;
    padding-left: 1.3em !important;
}
.ts-edit-list li {
    margin: .35em 0;
}
.ts-beginner-box {
    margin-top: 13px;
    padding: 11px 12px;


/* ---------- 編集案内 ---------- */
    border-left: 3px solid var(--ts-blue);
    background: var(--ts-blue-soft);


.ts-edit-links {
     font-size: .87rem;
     line-height: 2;
}
}


.ts-beginner {
.ts-beginner-title {
     margin-top: 12px;
     margin-bottom: 4px;
    padding: 12px 14px;
     font-weight: 700;
    background: #f8f9fa;
     border-left: 3px solid #36c;
}
}




/* ---------- 作品概要 ---------- */
/* ---------------------------------------------------------
  About
  --------------------------------------------------------- */


.ts-about {
.ts-about {
     padding: 18px 20px;
     padding: 17px 19px;
 
    border: 1px solid var(--ts-border);
    border-radius: 5px;
     background: #f8f9fa;
     background: #f8f9fa;
    border: 1px solid #eaecf0;
 
     border-radius: 6px;
     font-size: .91rem;
     line-height: 1.75;
     line-height: 1.75;
}
}


.ts-about-title {
    margin-bottom: 5px;
    font-size: 1.05rem;
    font-weight: 700;
}
/* ---------------------------------------------------------
  Small navigation
  --------------------------------------------------------- */


/* ---------- スマホ ---------- */
.ts-subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;


@media screen and (max-width: 850px) {
    margin-top: 20px;
    padding: 11px 5px;
 
    border-top: 1px solid var(--ts-border-light);
    border-bottom: 1px solid var(--ts-border-light);
 
    justify-content: center;
    font-size: .84rem;
}
 
.ts-subnav a {
    padding: 0 11px;
    border-right: 1px solid var(--ts-border);
}
 
.ts-subnav a:last-child {
    border-right: none;
}
 
 
/* ---------------------------------------------------------
  Responsive
  --------------------------------------------------------- */
 
@media screen and (max-width: 1000px) {
 
    .ts-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
 
    .ts-grid-4 .ts-panel {
        border-bottom: 1px solid var(--ts-border-light);
    }
 
    .ts-grid-4 .ts-panel:nth-child(2n) {
        border-right: none;
    }
 
    .ts-grid-4 .ts-panel:nth-last-child(-n+2) {
        border-bottom: none;
    }
}
 
 
@media screen and (max-width: 800px) {


     .ts-portal-grid {
     .ts-portal-grid {
         grid-template-columns: 1fr 1fr;
         grid-template-columns: repeat(2, minmax(0, 1fr));
    }
 
    .ts-portal-card:nth-child(3n) {
        border-right: 1px solid var(--ts-border-light);
     }
     }


     .ts-portal {
     .ts-portal-card:nth-child(2n) {
         border-right: 1px solid #eaecf0;
         border-right: 0;
        border-bottom: 1px solid #eaecf0;
     }
     }


     .ts-portal:nth-child(3n) {
     .ts-portal-card:nth-last-child(-n+3) {
         border-right: 1px solid #eaecf0;
         border-bottom: 1px solid var(--ts-border-light);
     }
     }


     .ts-portal:nth-child(2n) {
     .ts-portal-card:nth-last-child(-n+2) {
        border-bottom: 0;
    }
 
    .ts-grid-2 {
        grid-template-columns: 1fr;
    }
 
    .ts-grid-2 .ts-panel {
         border-right: none;
         border-right: none;
        border-bottom: 1px solid var(--ts-border-light);
     }
     }


     .ts-portal:nth-last-child(-n+3) {
     .ts-grid-2 .ts-panel:last-child {
         border-bottom: 1px solid #eaecf0;
         border-bottom: none;
     }
     }


     .ts-portal:nth-last-child(-n+2) {
     .ts-welcome {
         border-bottom: none;
         display: block;
     }
     }


     .ts-grid-2,
     .ts-welcome-count {
    .ts-grid-3 {
         margin-top: 10px;
         grid-template-columns: 1fr;
     }
     }
}
}


@media screen and (max-width: 520px) {
@media screen and (max-width: 520px) {


     .ts-portal-grid {
     .ts-portal-grid,
    .ts-grid-4 {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr;
     }
     }


     .ts-portal,
     .ts-portal-card,
     .ts-portal:nth-child(2n),
     .ts-portal-card:nth-child(2n),
     .ts-portal:nth-child(3n) {
     .ts-portal-card:nth-child(3n) {
        border-right: none;
        border-bottom: 1px solid var(--ts-border-light);
    }
 
    .ts-portal-card:last-child {
        border-bottom: none;
    }
 
    .ts-grid-4 .ts-panel,
    .ts-grid-4 .ts-panel:nth-child(2n) {
         border-right: none;
         border-right: none;
         border-bottom: 1px solid #eaecf0;
         border-bottom: 1px solid var(--ts-border-light);
     }
     }


     .ts-portal:last-child {
     .ts-grid-4 .ts-panel:last-child {
         border-bottom: none;
         border-bottom: none;
     }
     }


     .ts-main-title {
     .ts-welcome-title {
         font-size: 1.65rem;
         font-size: 1.35rem;
     }
     }
}
}
「https://tensura-wiki.info/wiki/特別:携帯機器差分/3867」から取得