|
|
| 1,279行目: |
1,279行目: |
| color: var(--ts-muted); | | color: var(--ts-muted); |
| font-size: .82rem; | | font-size: .82rem; |
| }
| |
|
| |
| /* =========================================================
| |
| 転スラWiki 年表
| |
| ========================================================= */
| |
|
| |
| .ts-chronology {
| |
| --chron-blue: #36c;
| |
| --chron-blue-dark: #2a4b8d;
| |
| --chron-border: #c8ccd1;
| |
| --chron-border-light: #eaecf0;
| |
| --chron-text: #202122;
| |
| --chron-subtext: #54595d;
| |
| --chron-muted: #72777d;
| |
| --chron-bg: #f8f9fa;
| |
| --chron-bg-blue: #f4f7fc;
| |
|
| |
| width: 100%;
| |
| color: var(--chron-text);
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 時代セクション
| |
| ========================================================= */
| |
|
| |
| .ts-chron-section {
| |
| margin: 25px 0 32px;
| |
| }
| |
|
| |
| .ts-chron-section-title {
| |
| margin: 0 0 14px !important;
| |
| padding: 4px 0 7px 10px !important;
| |
| border: 0 !important;
| |
| border-left: 4px solid var(--chron-blue) !important;
| |
| border-bottom: 1px solid var(--chron-border) !important;
| |
| color: var(--chron-text);
| |
| font-size: 1.2rem !important;
| |
| font-weight: 700 !important;
| |
| line-height: 1.4 !important;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 年表本体
| |
| ========================================================= */
| |
|
| |
| .ts-chron-list {
| |
| position: relative;
| |
| margin: 0;
| |
| padding: 2px 0;
| |
| }
| |
|
| |
| /*
| |
| * 年代と出来事の間を通る縦線
| |
| */
| |
| .ts-chron-list::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 8px;
| |
| bottom: 8px;
| |
| left: 130px;
| |
| width: 1px;
| |
| background: #a7b9d8;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 1件の出来事
| |
| ========================================================= */
| |
|
| |
| .ts-chron-entry {
| |
| position: relative;
| |
| display: grid;
| |
| grid-template-columns: 112px minmax(0, 1fr);
| |
| column-gap: 40px;
| |
| min-width: 0;
| |
| padding: 11px 0 14px;
| |
| }
| |
|
| |
| /*
| |
| * タイムライン上の丸
| |
| */
| |
| .ts-chron-entry::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 17px;
| |
| left: 126px;
| |
| width: 7px;
| |
| height: 7px;
| |
| border: 2px solid #fff;
| |
| border-radius: 50%;
| |
| background: var(--chron-blue);
| |
| box-shadow: 0 0 0 1px var(--chron-blue);
| |
| z-index: 1;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 年代
| |
| ========================================================= */
| |
|
| |
| .ts-chron-date {
| |
| padding-top: 1px;
| |
| color: var(--chron-blue-dark);
| |
| font-size: .84rem;
| |
| font-weight: 600;
| |
| line-height: 1.5;
| |
| text-align: right;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 出来事本文
| |
| ========================================================= */
| |
|
| |
| .ts-chron-body {
| |
| min-width: 0;
| |
| padding: 0 0 13px;
| |
| border-bottom: 1px solid var(--chron-border-light);
| |
| }
| |
|
| |
| .ts-chron-entry:last-child .ts-chron-body {
| |
| border-bottom: 0;
| |
| }
| |
|
| |
| .ts-chron-event {
| |
| margin: 0 0 4px;
| |
| color: var(--chron-text);
| |
| font-size: .98rem;
| |
| font-weight: 700;
| |
| line-height: 1.5;
| |
| }
| |
|
| |
| .ts-chron-event a {
| |
| color: var(--chron-blue-dark);
| |
| }
| |
|
| |
| .ts-chron-summary {
| |
| color: var(--chron-subtext);
| |
| font-size: .88rem;
| |
| line-height: 1.7;
| |
| }
| |
|
| |
| .ts-chron-summary p {
| |
| margin: 0;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 「詳細を見る」
| |
| ========================================================= */
| |
|
| |
| .ts-chron-detail {
| |
| margin-top: 6px;
| |
| font-size: .8rem;
| |
| }
| |
|
| |
| .ts-chron-detail a {
| |
| color: var(--chron-blue);
| |
| }
| |
|
| |
| /* =========================================================
| |
| 転スラ年表 - ページ上部
| |
| ========================================================= */
| |
|
| |
| .ts-chron-header {
| |
| margin: 0 0 18px;
| |
| }
| |
|
| |
| .ts-chron-lead {
| |
| margin: 0 0 13px;
| |
| color: var(--chron-text);
| |
| font-size: .95rem;
| |
| line-height: 1.8;
| |
| }
| |
|
| |
| .ts-chron-notice {
| |
| padding: 11px 14px;
| |
| border: 1px solid var(--chron-border);
| |
| border-left: 3px solid var(--chron-blue);
| |
| background: #f8f9fa;
| |
| color: var(--chron-subtext);
| |
| font-size: .86rem;
| |
| line-height: 1.7;
| |
| }
| |
|
| |
|
| |
| /* 年表内ナビ */
| |
|
| |
| .ts-chron-nav {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| align-items: center;
| |
| margin: 0 0 25px;
| |
| border-top: 1px solid var(--chron-border);
| |
| border-bottom: 1px solid var(--chron-border);
| |
| background: #fff;
| |
| }
| |
|
| |
| .ts-chron-nav > span {
| |
| padding: 7px 12px;
| |
| color: var(--chron-subtext);
| |
| font-size: .82rem;
| |
| }
| |
|
| |
| .ts-chron-nav > a {
| |
| padding: 7px 12px;
| |
| border-left: 1px solid var(--chron-border-light);
| |
| color: var(--chron-blue-dark);
| |
| font-size: .84rem;
| |
| }
| |
|
| |
| .ts-chron-nav > a:hover {
| |
| background: #f4f7fc;
| |
| text-decoration: none;
| |
| }
| |
|
| |
|
| |
| /* 全史への誘導 */
| |
|
| |
| .ts-chron-more {
| |
| margin: 30px 0 10px;
| |
| padding: 14px 16px;
| |
| border: 1px solid var(--chron-border);
| |
| background: #f8f9fa;
| |
| color: var(--chron-subtext);
| |
| font-size: .88rem;
| |
| line-height: 1.7;
| |
| }
| |
|
| |
| .ts-chron-more-title {
| |
| margin-bottom: 4px;
| |
| color: var(--chron-text);
| |
| font-size: .96rem;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| .ts-chron-more-link {
| |
| margin-top: 6px;
| |
| }
| |
|
| |
| /* =========================================================
| |
| 人物・国家・組織ページ内の年表
| |
| ========================================================= */
| |
|
| |
| .ts-entitychronology {
| |
| --chron-blue: #36c;
| |
| --chron-blue-dark: #2a4b8d;
| |
| --chron-border: #c8ccd1;
| |
| --chron-border-light: #eaecf0;
| |
| --chron-text: #202122;
| |
| --chron-subtext: #54595d;
| |
| --chron-muted: #72777d;
| |
|
| |
| margin: 10px 0 18px;
| |
| }
| |
|
| |
|
| |
| /* 年表 */
| |
|
| |
| .ts-entitychron-list {
| |
| position: relative;
| |
| margin: 0;
| |
| padding: 2px 0;
| |
| }
| |
|
| |
| .ts-entitychron-list::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 8px;
| |
| bottom: 8px;
| |
| left: 115px;
| |
| width: 1px;
| |
| background: #b7c5dc;
| |
| }
| |
|
| |
|
| |
| /* 1件 */
| |
|
| |
| .ts-entitychron-entry {
| |
| position: relative;
| |
| display: grid;
| |
| grid-template-columns: 98px minmax(0, 1fr);
| |
| column-gap: 35px;
| |
| padding: 9px 0 12px;
| |
| }
| |
|
| |
| .ts-entitychron-entry::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 15px;
| |
| left: 111px;
| |
| width: 7px;
| |
| height: 7px;
| |
| border: 2px solid #fff;
| |
| border-radius: 50%;
| |
| background: var(--chron-blue);
| |
| box-shadow: 0 0 0 1px var(--chron-blue);
| |
| }
| |
|
| |
|
| |
| /* 年代 */
| |
|
| |
| .ts-entitychron-date {
| |
| padding-top: 1px;
| |
| color: var(--chron-blue-dark);
| |
| font-size: .8rem;
| |
| font-weight: 600;
| |
| line-height: 1.5;
| |
| text-align: right;
| |
| }
| |
|
| |
|
| |
| /* 本文 */
| |
|
| |
| .ts-entitychron-body {
| |
| min-width: 0;
| |
| padding-bottom: 11px;
| |
| border-bottom: 1px solid var(--chron-border-light);
| |
| }
| |
|
| |
| .ts-entitychron-entry:last-child .ts-entitychron-body {
| |
| border-bottom: 0;
| |
| }
| |
|
| |
| .ts-entitychron-event {
| |
| margin-bottom: 3px;
| |
| font-size: .93rem;
| |
| font-weight: 700;
| |
| line-height: 1.5;
| |
| }
| |
|
| |
| .ts-entitychron-summary {
| |
| color: var(--chron-subtext);
| |
| font-size: .84rem;
| |
| line-height: 1.65;
| |
| }
| |
|
| |
| .ts-entitychron-detail {
| |
| margin-top: 5px;
| |
| font-size: .77rem;
| |
| }
| |
|
| |
|
| |
| /* 全史へのリンク */
| |
|
| |
| .ts-entitychron-more {
| |
| margin-top: 5px;
| |
| padding-top: 8px;
| |
| border-top: 1px solid var(--chron-border-light);
| |
| text-align: right;
| |
| font-size: .79rem;
| |
| }
| |
|
| |
| /* =========================================================
| |
| 国家年表
| |
| ========================================================= */
| |
|
| |
| .ts-entitychron-type {
| |
| display: inline-block;
| |
| margin: 0 0 4px;
| |
| padding: 1px 6px;
| |
| border: 1px solid #c8ccd1;
| |
| background: #f8f9fa;
| |
| color: #54595d;
| |
| font-size: .7rem;
| |
| font-weight: 600;
| |
| line-height: 1.5;
| |
| }
| |
|
| |
| /* =========================================================
| |
| 年表 - 不確実性表示
| |
| ========================================================= */
| |
|
| |
| .ts-order-note {
| |
| margin-top: 5px;
| |
| color: #72777d;
| |
| font-size: .76rem;
| |
| line-height: 1.55;
| |
| }
| |
|
| |
| /* =========================================================
| |
| 年表：縦方向をコンパクト化
| |
| ========================================================= */
| |
|
| |
| .ts-chron-entry {
| |
| min-height: 0 !important;
| |
| padding-top: 12px !important;
| |
| padding-bottom: 14px !important;
| |
| margin-top: 0 !important;
| |
| margin-bottom: 0 !important;
| |
| }
| |
|
| |
| .ts-chron-event {
| |
| margin-top: 0;
| |
| margin-bottom: 4px;
| |
| }
| |
|
| |
| .ts-chron-summary {
| |
| margin-top: 3px;
| |
| margin-bottom: 0;
| |
| line-height: 1.7;
| |
| }
| |
|
| |
| .ts-chron-detail {
| |
| margin-top: 6px;
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| /* 項目間の罫線も詰める */
| |
| .ts-chron-entry + .ts-chron-entry {
| |
| margin-top: 0 !important;
| |
| }
| |
|
| |
| /* =========================================================
| |
| 転スラ全史：縦方向をコンパクト化
| |
| ========================================================= */
| |
|
| |
| .ts-fullchron-entry {
| |
| min-height: 0 !important;
| |
| padding-top: 12px !important;
| |
| padding-bottom: 14px !important;
| |
| margin-top: 0 !important;
| |
| margin-bottom: 0 !important;
| |
| }
| |
|
| |
| .ts-fullchron-event {
| |
| margin-top: 0;
| |
| margin-bottom: 4px;
| |
| }
| |
|
| |
| .ts-fullchron-summary {
| |
| margin-top: 3px;
| |
| margin-bottom: 7px;
| |
| line-height: 1.7;
| |
| }
| |
|
| |
| .ts-fullchron-detail {
| |
| margin-top: 7px;
| |
| margin-bottom: 0;
| |
| }
| |
|
| |
| /* =========================================================
| |
| 転スラ全史：メタ情報レイアウト修正
| |
| ========================================================= */
| |
|
| |
| .ts-fullchron-main {
| |
| width: auto !important;
| |
| min-width: 0 !important;
| |
| }
| |
|
| |
| .ts-fullchron-meta {
| |
| display: block !important;
| |
| width: 100% !important;
| |
| max-width: none !important;
| |
| margin-top: 8px;
| |
| }
| |
|
| |
| .ts-fullchron-meta-row {
| |
| display: grid !important;
| |
| grid-template-columns: 4.5em minmax(0, 1fr) !important;
| |
| column-gap: 10px;
| |
| width: 100% !important;
| |
| max-width: none !important;
| |
| margin: 3px 0;
| |
| align-items: start;
| |
| }
| |
|
| |
| .ts-fullchron-meta-label {
| |
| display: block;
| |
| width: auto !important;
| |
| min-width: 0 !important;
| |
| font-weight: 600;
| |
| color: #54595d;
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .ts-fullchron-meta-row > span:last-child {
| |
| display: block;
| |
| min-width: 0 !important;
| |
| width: auto !important;
| |
| max-width: none !important;
| |
| word-break: normal;
| |
| overflow-wrap: break-word;
| |
| }
| |
|
| |
| /* =========================================================
| |
| 転スラ全史
| |
| ========================================================= */
| |
|
| |
| .ts-fullchronology {
| |
| width: 100%;
| |
| }
| |
|
| |
|
| |
| /* ---------- 時代セクション ---------- */
| |
|
| |
| .ts-fullchron-section {
| |
| margin: 28px 0 36px;
| |
| }
| |
|
| |
| .ts-fullchron-section-title {
| |
| margin: 0 0 14px;
| |
| padding: 7px 12px;
| |
| border-left: 4px solid #36c;
| |
| border-bottom: 1px solid #c8ccd1;
| |
| font-size: 1.35rem;
| |
| font-weight: 600;
| |
| }
| |
|
| |
|
| |
| /* ---------- 年表本体 ---------- */
| |
|
| |
| .ts-fullchron-list {
| |
| position: relative;
| |
| width: 100%;
| |
| }
| |
|
| |
| /* 縦線 */
| |
| .ts-fullchron-list::before {
| |
| content: "";
| |
| position: absolute;
| |
| left: 145px;
| |
| top: 0;
| |
| bottom: 0;
| |
| width: 1px;
| |
| background: #a7c1ee;
| |
| }
| |
|
| |
|
| |
| /* ---------- 1件 ---------- */
| |
|
| |
| .ts-fullchron-entry {
| |
| position: relative;
| |
|
| |
| display: grid !important;
| |
| grid-template-columns: 130px minmax(0, 1fr) !important;
| |
| column-gap: 30px !important;
| |
|
| |
| width: 100% !important;
| |
| height: auto !important;
| |
| min-height: 0 !important;
| |
|
| |
| box-sizing: border-box;
| |
|
| |
| margin: 0 !important;
| |
| padding: 14px 0 16px !important;
| |
|
| |
| border-bottom: 1px solid #eaecf0;
| |
| }
| |
|
| |
| /* 丸 */
| |
| .ts-fullchron-entry::before {
| |
| content: "";
| |
| position: absolute;
| |
|
| |
| left: 140px;
| |
| top: 19px;
| |
|
| |
| width: 11px;
| |
| height: 11px;
| |
|
| |
| box-sizing: border-box;
| |
|
| |
| background: #fff;
| |
| border: 2px solid #36c;
| |
| border-radius: 50%;
| |
| }
| |
|
| |
|
| |
| /* ---------- 年代 ---------- */
| |
|
| |
| .ts-fullchron-date {
| |
| width: auto !important;
| |
| min-width: 0 !important;
| |
|
| |
| padding-top: 0;
| |
|
| |
| text-align: right;
| |
| white-space: nowrap;
| |
|
| |
| color: #2457a6;
| |
| font-weight: 600;
| |
| line-height: 1.5;
| |
| }
| |
|
| |
|
| |
| /* ---------- 右側本文 ---------- */
| |
|
| |
| .ts-fullchron-main {
| |
| display: block !important;
| |
|
| |
| width: 100% !important;
| |
| min-width: 0 !important;
| |
| max-width: none !important;
| |
|
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
|
| |
| /* 出来事名 */
| |
| .ts-fullchron-event {
| |
| margin: 0 0 5px !important;
| |
|
| |
| font-size: 1rem;
| |
| font-weight: 700;
| |
| line-height: 1.55;
| |
| }
| |
|
| |
|
| |
| /* 概要 */
| |
| .ts-fullchron-summary {
| |
| width: 100% !important;
| |
| max-width: none !important;
| |
|
| |
| margin: 0 0 8px !important;
| |
|
| |
| line-height: 1.7;
| |
| }
| |
|
| |
|
| |
| /* ---------- 人物・国家・組織・出典 ---------- */
| |
|
| |
| .ts-fullchron-meta {
| |
| display: block !important;
| |
|
| |
| width: 100% !important;
| |
| min-width: 0 !important;
| |
| max-width: none !important;
| |
|
| |
| margin: 8px 0 0 !important;
| |
| padding: 0 !important;
| |
| }
| |
|
| |
|
| |
| /* 1行 */
| |
| .ts-fullchron-meta-row {
| |
| display: flex !important;
| |
| flex-direction: row !important;
| |
| align-items: flex-start !important;
| |
|
| |
| width: 100% !important;
| |
| min-width: 0 !important;
| |
| max-width: none !important;
| |
|
| |
| margin: 2px 0 !important;
| |
| padding: 0 !important;
| |
|
| |
| gap: 10px;
| |
| }
| |
|
| |
|
| |
| /* 「人物」「国家」「出典」 */
| |
| .ts-fullchron-meta-label {
| |
| display: block !important;
| |
|
| |
| flex: 0 0 4em !important;
| |
|
| |
| width: 4em !important;
| |
| min-width: 4em !important;
| |
| max-width: 4em !important;
| |
|
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
|
| |
| color: #54595d;
| |
| font-weight: 600;
| |
|
| |
| white-space: nowrap !important;
| |
| }
| |
|
| |
|
| |
| /* 値 */
| |
| .ts-fullchron-meta-value {
| |
| display: block !important;
| |
|
| |
| flex: 1 1 auto !important;
| |
|
| |
| width: auto !important;
| |
| min-width: 0 !important;
| |
| max-width: none !important;
| |
|
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
|
| |
| white-space: normal !important;
| |
| word-break: normal !important;
| |
| overflow-wrap: break-word !important;
| |
| }
| |
|
| |
|
| |
| /* ---------- 不確実性 ---------- */
| |
|
| |
| .ts-fullchron-main .ts-order-note {
| |
| margin: 6px 0 0 !important;
| |
|
| |
| color: #72777d;
| |
| font-size: .78rem;
| |
| line-height: 1.55;
| |
| }
| |
|
| |
|
| |
| /* ---------- 詳細記事 ---------- */
| |
|
| |
| .ts-fullchron-detail {
| |
| margin: 7px 0 0 !important;
| |
| padding: 0 !important;
| |
| } | | } |