コンテンツにスキップ

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

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

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

1,290 バイト追加 、 2026年8月25日 (火)
編集の要約なし
編集の要約なし
編集の要約なし
705行目: 705行目:


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


.ts-main {
.ts-main {
     --ts-blue: #3366cc;
     --ts-blue: #36c;
     --ts-blue-dark: #2a4b8d;
     --ts-blue-dark: #2a4b8d;
     --ts-blue-soft: #f4f7fb;
     --ts-blue-light: #f4f7fc;
     --ts-border: #c8ccd1;
     --ts-border: #c8ccd1;
     --ts-border-light: #eaecf0;
     --ts-border-light: #eaecf0;
718行目: 718行目:
     --ts-muted: #72777d;
     --ts-muted: #72777d;


    width: 100%;
     max-width: 1220px;
     max-width: 1220px;
     margin: 0 auto;
     margin: 0 auto;
     color: var(--ts-text);
     color: var(--ts-text);
    box-sizing: border-box;
}
/*
MediaWikiが空行から生成するp/brが
Gridのセルとして扱われるのを防ぐ
*/
.ts-main > p,
.ts-main-section > p,
.ts-portal-grid > p,
.ts-grid-4 > p,
.ts-grid-2 > p,
.ts-main > br,
.ts-main-section > br,
.ts-portal-grid > br,
.ts-grid-4 > br,
.ts-grid-2 > br {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
}




/* ---------------------------------------------------------
/* =========================================================
   Intro
   Welcome
   --------------------------------------------------------- */
   ========================================================= */


.ts-welcome {
.ts-welcome {
     display: flex;
     display: flex;
     align-items: flex-end;
     align-items: center;
     justify-content: space-between;
     justify-content: space-between;
     gap: 20px;
     gap: 25px;


     margin: 0 0 24px;
     margin: 0 0 20px;
     padding: 4px 0 18px;
     padding: 15px 18px;
     border-bottom: 1px solid var(--ts-border);
 
     border: 1px solid var(--ts-border);
    border-radius: 5px;
    background: #fff;
}
}


.ts-welcome-title {
.ts-welcome-title {
     margin: 0 0 5px;
     margin: 0 0 5px;
     font-size: 1.55rem;
    color: #202122;
     font-size: 1.45rem;
     font-weight: 700;
     font-weight: 700;
     line-height: 1.35;
     line-height: 1.35;
748行目: 775行目:
.ts-welcome-desc {
.ts-welcome-desc {
     color: var(--ts-subtext);
     color: var(--ts-subtext);
    font-size: .92rem;
     line-height: 1.65;
     line-height: 1.65;
}
}
753行目: 781行目:
.ts-welcome-count {
.ts-welcome-count {
     flex-shrink: 0;
     flex-shrink: 0;
    padding-left: 20px;
    border-left: 1px solid var(--ts-border-light);
     color: var(--ts-muted);
     color: var(--ts-muted);
     font-size: .9rem;
     font-size: .87rem;
    white-space: nowrap;
}
}


763行目: 794行目:




/* ---------------------------------------------------------
/* =========================================================
   Section heading
   Section
   --------------------------------------------------------- */
   ========================================================= */


.ts-main-section {
.ts-main-section {
     margin: 26px 0;
     margin: 18px 0 !important;
    padding: 0 !important;
}
}


.ts-main-heading {
.ts-main-heading {
     margin: 0 0 12px !important;
     margin: 0 0 10px !important;
     padding: 0 0 7px 10px !important;
     padding: 4px 0 7px 10px !important;


     border-left: 4px solid var(--ts-blue);
    border: 0 !important;
     border-bottom: 1px solid var(--ts-border-light);
     border-left: 4px solid var(--ts-blue) !important;
     border-bottom: 1px solid var(--ts-border-light) !important;


     font-size: 1.22rem !important;
     font-size: 1.2rem !important;
     font-weight: 700;
     font-weight: 700 !important;
     line-height: 1.4;
     line-height: 1.4 !important;
}
}


.ts-main-heading::after {
.ts-main-heading::after {
     display: none;
     display: none !important;
}
}




/* ---------------------------------------------------------
/* =========================================================
   Portal
   6 portal links
   --------------------------------------------------------- */
   ========================================================= */


.ts-portal-grid {
.ts-portal-grid {
     display: grid;
     display: grid !important;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;


    width: 100%;
     overflow: hidden;
     overflow: hidden;
     border: 1px solid var(--ts-border);
     border: 1px solid var(--ts-border);
     border-radius: 5px;
     border-radius: 5px;
803行目: 839行目:


.ts-portal-card {
.ts-portal-card {
     display: grid;
     display: grid !important;
     grid-template-columns: 48px minmax(0, 1fr);
     grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
     gap: 13px;
     gap: 13px;


     min-height: 108px;
    min-width: 0;
     padding: 17px 18px;
     min-height: 118px;
 
    margin: 0 !important;
     padding: 17px 18px !important;


     border-right: 1px solid var(--ts-border-light);
     border-right: 1px solid var(--ts-border-light);
     border-bottom: 1px solid var(--ts-border-light);
     border-bottom: 1px solid var(--ts-border-light);


    background: #fff;
     box-sizing: border-box;
     box-sizing: border-box;
    transition: background-color .15s ease;
}
}


.ts-portal-card:hover {
.ts-portal-card:nth-of-type(3n) {
     background: var(--ts-blue-soft);
     border-right: 0;
}
}


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


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


834行目: 874行目:
     justify-content: center;
     justify-content: center;


     width: 44px;
     width: 42px;
     height: 44px;
     height: 42px;


     border: 1px solid #a7b9d8;
     border: 1px solid #a7b9d8;
842行目: 882行目:


     color: var(--ts-blue-dark);
     color: var(--ts-blue-dark);
     font-size: 1.05rem;
     font-size: 1rem;
     font-weight: 700;
     font-weight: 700;
}
}


.ts-portal-title {
.ts-portal-title {
     margin: 0 0 4px;
     margin: 1px 0 4px;
     font-size: 1.02rem;
     font-size: 1.02rem;
     font-weight: 700;
     font-weight: 700;
857行目: 897行目:


.ts-portal-description {
.ts-portal-description {
     margin-bottom: 7px;
     margin: 0 0 7px;
     color: var(--ts-subtext);
     color: var(--ts-subtext);
     font-size: .87rem;
     font-size: .86rem;
     line-height: 1.55;
     line-height: 1.55;
}
}


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




/* ---------------------------------------------------------
/* =========================================================
   Panels
   General panels
   --------------------------------------------------------- */
   ========================================================= */


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


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


.ts-panel {
.ts-panel {
     min-width: 0;
     min-width: 0;
     padding: 16px 17px 17px;
 
    margin: 0 !important;
     padding: 15px 17px !important;
 
     border-right: 1px solid var(--ts-border-light);
     border-right: 1px solid var(--ts-border-light);
    background: #fff;
    box-sizing: border-box;
}
}


.ts-grid-4 .ts-panel:last-child,
.ts-grid-4 > .ts-panel:last-of-type,
.ts-grid-2 .ts-panel:last-child {
.ts-grid-2 > .ts-panel:last-of-type {
     border-right: none;
     border-right: none;
}
}
904行目: 953行目:
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 7px;
     gap: 6px;


     margin: 0 0 12px;
     margin: 0 0 10px !important;
     padding-bottom: 7px;
     padding: 0 0 7px !important;


     border-bottom: 1px solid var(--ts-border-light);
     border-bottom: 1px solid var(--ts-border-light);
918行目: 967行目:
.ts-panel-symbol {
.ts-panel-symbol {
     color: var(--ts-blue);
     color: var(--ts-blue);
     font-size: .95rem;
     font-weight: 700;
}
}


.ts-panel-content {
.ts-panel-content {
     font-size: .9rem;
    margin: 0 !important;
     line-height: 1.7;
    padding: 0 !important;
 
     font-size: .88rem;
     line-height: 1.65;
}
 
.ts-panel-content > p:first-child {
    margin-top: 0;
}
}


.ts-panel-content ul {
.ts-panel-content ul {
     margin: .2em 0 .2em 1.4em;
     margin: 0 0 0 1.3em !important;
    padding: 0 !important;
}
}


.ts-panel-content li {
.ts-panel-content li {
     margin: .28em 0;
     margin: 4px 0;
}
}




/* ---------------------------------------------------------
/* =========================================================
   Pickup
   Pickup
   --------------------------------------------------------- */
   ========================================================= */


.ts-pickup-label {
.ts-pickup-label {
     display: inline-block;
     display: inline-block;


     margin-bottom: 7px;
     margin: 0 0 7px;
     padding: 2px 7px;
     padding: 2px 7px;


954行目: 1,011行目:


.ts-pickup-title {
.ts-pickup-title {
     margin-bottom: 7px;
     margin: 0 0 6px;
     font-size: 1.1rem;
     font-size: 1.08rem;
     font-weight: 700;
     font-weight: 700;
}
}


.ts-pickup-text {
.ts-pickup-text {
    margin: 0;
     color: var(--ts-subtext);
     color: var(--ts-subtext);
     line-height: 1.65;
     line-height: 1.6;
}
}


.ts-panel-footer {
.ts-panel-footer {
     margin-top: 11px;
     margin-top: 10px;
     text-align: right;
     text-align: right;
     font-size: .85rem;
     font-size: .83rem;
}
}




/* ---------------------------------------------------------
/* =========================================================
   Mini list / ranking
   Ranking
   --------------------------------------------------------- */
   ========================================================= */


.ts-ranking {
.ts-ranking {
     width: 100%;
     width: 100%;
    margin: 0 !important;
    border: 0 !important;
     border-collapse: collapse;
     border-collapse: collapse;
     font-size: .9rem;
    background: transparent !important;
 
     font-size: .88rem;
}
}


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


.ts-ranking-num {
.ts-ranking-num {
     width: 24px;
     width: 26px;
     color: var(--ts-muted);
     color: var(--ts-muted);
     text-align: center;
     text-align: center;
995行目: 1,061行目:


.ts-ranking-value {
.ts-ranking-value {
     width: 60px;
     width: 70px;
     color: var(--ts-muted);
     color: var(--ts-muted);
     text-align: right;
     text-align: right;
1,003行目: 1,069行目:
.ts-up {
.ts-up {
     color: #14866d;
     color: #14866d;
     font-weight: 600;
     font-weight: 700;
}
}




/* ---------------------------------------------------------
/* =========================================================
   New / recent
   DPL
   --------------------------------------------------------- */
   ========================================================= */
 
.ts-dpl {
    font-size: .88rem;
}


.ts-dpl ul {
.ts-dpl ul {
     margin: 0;
     margin: 0 !important;
     padding: 0;
     padding: 0 !important;
     list-style: none;
     list-style: none !important;
}
}


.ts-dpl li {
.ts-dpl li {
     margin: 0;
     margin: 0 !important;
     padding: 5px 0;
     padding: 5px 0 !important;
 
     border-bottom: 1px dotted #d8dfe8;
     border-bottom: 1px dotted #d8dfe8;
}
}
1,033行目: 1,094行目:




/* ---------------------------------------------------------
/* =========================================================
   Edit box
   Edit
   --------------------------------------------------------- */
   ========================================================= */


.ts-edit-list {
.ts-edit-list {
     margin: 0 !important;
     margin: 0 !important;
     padding-left: 1.3em !important;
     padding-left: 1.25em !important;
}
}


.ts-edit-list li {
.ts-edit-list li {
     margin: .35em 0;
     margin: 4px 0;
}
}


.ts-beginner-box {
.ts-beginner-box {
     margin-top: 13px;
     margin-top: 12px;
     padding: 11px 12px;
     padding: 11px 12px;


     border-left: 3px solid var(--ts-blue);
     border-left: 3px solid var(--ts-blue);
     background: var(--ts-blue-soft);
     background: #f4f7fc;


     font-size: .87rem;
     font-size: .86rem;
}
}


.ts-beginner-title {
.ts-beginner-title {
     margin-bottom: 4px;
     margin-bottom: 3px;
     font-weight: 700;
     font-weight: 700;
}
}




/* ---------------------------------------------------------
/* =========================================================
   About
   About
   --------------------------------------------------------- */
   ========================================================= */


.ts-about {
.ts-about {
     padding: 17px 19px;
    margin: 0;
     padding: 16px 18px;


     border: 1px solid var(--ts-border);
     border: 1px solid var(--ts-border);
1,073行目: 1,135行目:
     background: #f8f9fa;
     background: #f8f9fa;


     font-size: .91rem;
     font-size: .9rem;
     line-height: 1.75;
     line-height: 1.7;
}
}


.ts-about-title {
.ts-about-title {
     margin-bottom: 5px;
     margin-bottom: 5px;
     font-size: 1.05rem;
    color: #202122;
     font-size: 1.03rem;
     font-weight: 700;
     font-weight: 700;
}
}




/* ---------------------------------------------------------
/* =========================================================
   Small navigation
   Bottom nav
   --------------------------------------------------------- */
   ========================================================= */


.ts-subnav {
.ts-subnav {
     display: flex;
     display: flex;
     flex-wrap: wrap;
     flex-wrap: wrap;
     gap: 0;
     justify-content: center;


     margin-top: 20px;
     margin: 18px 0 0;
     padding: 11px 5px;
     padding: 10px 0;


     border-top: 1px solid var(--ts-border-light);
     border-top: 1px solid var(--ts-border-light);
     border-bottom: 1px solid var(--ts-border-light);
     border-bottom: 1px solid var(--ts-border-light);


    justify-content: center;
     font-size: .82rem;
     font-size: .84rem;
}
}


.ts-subnav a {
.ts-subnav a {
    margin: 2px 0;
     padding: 0 11px;
     padding: 0 11px;
     border-right: 1px solid var(--ts-border);
     border-right: 1px solid var(--ts-border);
1,113行目: 1,176行目:




/* ---------------------------------------------------------
/* =========================================================
   Responsive
   Mobile / tablet
   --------------------------------------------------------- */
   ========================================================= */


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


     .ts-grid-4 {
     .ts-grid-4 {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     }
     }


     .ts-grid-4 .ts-panel {
     .ts-grid-4 .ts-panel:nth-of-type(2n) {
         border-bottom: 1px solid var(--ts-border-light);
         border-right: 0;
     }
     }


     .ts-grid-4 .ts-panel:nth-child(2n) {
     .ts-grid-4 .ts-panel:nth-of-type(-n+2) {
         border-right: none;
         border-bottom: 1px solid var(--ts-border-light);
    }
 
    .ts-grid-4 .ts-panel:nth-last-child(-n+2) {
        border-bottom: none;
     }
     }
}
}
1,140行目: 1,199行目:


     .ts-portal-grid {
     .ts-portal-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
         grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
     }
     }


     .ts-portal-card:nth-child(3n) {
     .ts-portal-card:nth-of-type(3n) {
         border-right: 1px solid var(--ts-border-light);
         border-right: 1px solid var(--ts-border-light);
     }
     }


     .ts-portal-card:nth-child(2n) {
     .ts-portal-card:nth-of-type(2n) {
         border-right: 0;
         border-right: 0;
     }
     }


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


     .ts-portal-card:nth-last-child(-n+2) {
     .ts-portal-card:nth-last-of-type(-n+2) {
         border-bottom: 0;
         border-bottom: 0;
     }
     }


     .ts-grid-2 {
     .ts-grid-2 {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr !important;
     }
     }


     .ts-grid-2 .ts-panel {
     .ts-grid-2 .ts-panel {
         border-right: none;
         border-right: 0;
         border-bottom: 1px solid var(--ts-border-light);
         border-bottom: 1px solid var(--ts-border-light);
     }
     }


     .ts-grid-2 .ts-panel:last-child {
     .ts-grid-2 .ts-panel:last-of-type {
         border-bottom: none;
         border-bottom: 0;
     }
     }


1,178行目: 1,237行目:
     .ts-welcome-count {
     .ts-welcome-count {
         margin-top: 10px;
         margin-top: 10px;
        padding: 8px 0 0;
        border-top: 1px solid var(--ts-border-light);
        border-left: 0;
     }
     }
}
}
1,186行目: 1,248行目:
     .ts-portal-grid,
     .ts-portal-grid,
     .ts-grid-4 {
     .ts-grid-4 {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr !important;
     }
     }


     .ts-portal-card,
     .ts-portal-card,
     .ts-portal-card:nth-child(2n),
     .ts-portal-card:nth-of-type(2n),
     .ts-portal-card:nth-child(3n) {
     .ts-portal-card:nth-of-type(3n) {
         border-right: none;
         border-right: 0;
         border-bottom: 1px solid var(--ts-border-light);
         border-bottom: 1px solid var(--ts-border-light);
     }
     }


     .ts-portal-card:last-child {
     .ts-portal-card:last-of-type {
         border-bottom: none;
         border-bottom: 0;
     }
     }


     .ts-grid-4 .ts-panel,
     .ts-grid-4 .ts-panel,
     .ts-grid-4 .ts-panel:nth-child(2n) {
     .ts-grid-4 .ts-panel:nth-of-type(2n) {
         border-right: none;
         border-right: 0;
         border-bottom: 1px solid var(--ts-border-light);
         border-bottom: 1px solid var(--ts-border-light);
     }
     }


     .ts-grid-4 .ts-panel:last-child {
     .ts-grid-4 .ts-panel:last-of-type {
         border-bottom: none;
         border-bottom: 0;
    }
 
    .ts-welcome-title {
        font-size: 1.35rem;
     }
     }
}
}
「https://tensura-wiki.info/wiki/特別:携帯機器差分/3869」から取得