|
|
| 642行目: |
642行目: |
| font-size: .71rem !important; | | font-size: .71rem !important; |
| } | | } |
| }
| |
|
| |
| /* =========================================================
| |
| 転スラWiki 年表 - Mobile
| |
| ========================================================= */
| |
|
| |
| .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;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| セクション
| |
| ========================================================= */
| |
|
| |
| .ts-chron-section {
| |
| margin: 20px 0 26px;
| |
| }
| |
|
| |
| .ts-chron-section-title {
| |
| margin: 0 0 12px !important;
| |
| padding: 3px 0 6px 8px !important;
| |
| border: 0 !important;
| |
| border-left: 3px solid var(--chron-blue) !important;
| |
| border-bottom: 1px solid var(--chron-border) !important;
| |
| font-size: 1.08rem !important;
| |
| font-weight: 700 !important;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 年表本体
| |
| ========================================================= */
| |
|
| |
| .ts-chron-list {
| |
| position: relative;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
|
| |
| /*
| |
| * スマホ版の縦線
| |
| */
| |
| .ts-chron-list::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 7px;
| |
| bottom: 7px;
| |
| left: 8px;
| |
| width: 1px;
| |
| background: #a7b9d8;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 1件の出来事
| |
| ========================================================= */
| |
|
| |
| .ts-chron-entry {
| |
| position: relative;
| |
| display: block;
| |
| margin: 0;
| |
| padding: 0 0 19px 27px;
| |
| }
| |
|
| |
|
| |
| /*
| |
| * 年表上の丸
| |
| */
| |
| .ts-chron-entry::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 7px;
| |
| left: 4px;
| |
| 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 {
| |
| margin: 0 0 4px;
| |
| padding: 0;
| |
| color: var(--chron-blue-dark);
| |
| font-size: .76rem;
| |
| font-weight: 600;
| |
| line-height: 1.5;
| |
| text-align: left;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 出来事本文
| |
| ========================================================= */
| |
|
| |
| .ts-chron-body {
| |
| min-width: 0;
| |
| padding: 0 0 13px;
| |
| border-bottom: 1px solid var(--chron-border-light);
| |
| }
| |
|
| |
| .ts-chron-entry:last-child {
| |
| padding-bottom: 0;
| |
| }
| |
|
| |
| .ts-chron-entry:last-child .ts-chron-body {
| |
| border-bottom: 0;
| |
| }
| |
|
| |
| .ts-chron-event {
| |
| margin: 0 0 4px;
| |
| color: var(--chron-text);
| |
| font-size: .93rem;
| |
| font-weight: 700;
| |
| line-height: 1.45;
| |
| }
| |
|
| |
| .ts-chron-event a {
| |
| color: var(--chron-blue-dark);
| |
| }
| |
|
| |
| .ts-chron-summary {
| |
| color: var(--chron-subtext);
| |
| font-size: .82rem;
| |
| line-height: 1.65;
| |
| }
| |
|
| |
| .ts-chron-summary p {
| |
| margin: 0;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 詳細リンク
| |
| ========================================================= */
| |
|
| |
| .ts-chron-detail {
| |
| margin-top: 6px;
| |
| font-size: .77rem;
| |
| }
| |
|
| |
| .ts-chron-detail a {
| |
| color: var(--chron-blue);
| |
| }
| |
|
| |
| @media screen and (max-width: 360px) {
| |
|
| |
| .ts-chron-entry {
| |
| padding-left: 24px;
| |
| }
| |
|
| |
| .ts-chron-event {
| |
| font-size: .89rem;
| |
| }
| |
|
| |
| .ts-chron-summary {
| |
| font-size: .79rem;
| |
| }
| |
|
| |
| .ts-chron-date {
| |
| font-size: .73rem;
| |
| }
| |
|
| |
| .ts-chron-list::before {
| |
| left: 7px;
| |
| }
| |
|
| |
| .ts-chron-entry::before {
| |
| left: 3px;
| |
| }
| |
| }
| |
|
| |
| /* =========================================================
| |
| 転スラ年表 - ページ上部 Mobile
| |
| ========================================================= */
| |
|
| |
| .ts-chron-header {
| |
| margin-bottom: 15px;
| |
| }
| |
|
| |
| .ts-chron-lead {
| |
| margin-bottom: 11px;
| |
| font-size: .86rem;
| |
| line-height: 1.7;
| |
| }
| |
|
| |
| .ts-chron-notice {
| |
| padding: 10px 11px;
| |
| border: 1px solid var(--chron-border);
| |
| border-left: 3px solid var(--chron-blue);
| |
| background: #f8f9fa;
| |
| color: var(--chron-subtext);
| |
| font-size: .79rem;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
|
| |
| /* 横スクロール式の簡潔なナビ */
| |
|
| |
| .ts-chron-nav {
| |
| display: flex;
| |
| flex-wrap: nowrap;
| |
| overflow-x: auto;
| |
| margin: 0 0 20px;
| |
| border-top: 1px solid var(--chron-border);
| |
| border-bottom: 1px solid var(--chron-border);
| |
| white-space: nowrap;
| |
| -webkit-overflow-scrolling: touch;
| |
| }
| |
|
| |
| .ts-chron-nav > span,
| |
| .ts-chron-nav > a {
| |
| flex-shrink: 0;
| |
| padding: 7px 9px;
| |
| font-size: .76rem;
| |
| }
| |
|
| |
| .ts-chron-nav > a {
| |
| border-left: 1px solid var(--chron-border-light);
| |
| }
| |
|
| |
|
| |
| /* 全史への誘導 */
| |
|
| |
| .ts-chron-more {
| |
| margin: 23px 0 8px;
| |
| padding: 11px 12px;
| |
| border: 1px solid var(--chron-border);
| |
| background: #f8f9fa;
| |
| color: var(--chron-subtext);
| |
| font-size: .8rem;
| |
| line-height: 1.65;
| |
| }
| |
|
| |
| .ts-chron-more-title {
| |
| margin-bottom: 4px;
| |
| color: var(--chron-text);
| |
| font-size: .9rem;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| .ts-chron-more-link {
| |
| margin-top: 6px;
| |
| }
| |
|
| |
|
| |
| /* =========================================================
| |
| 転スラ全史 Mobile
| |
| ========================================================= */
| |
|
| |
| .ts-fullchron-lead {
| |
| font-size: .85rem;
| |
| line-height: 1.7;
| |
| }
| |
|
| |
| .ts-fullchron-notice {
| |
| padding: 9px 10px;
| |
| font-size: .78rem;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| .ts-fullchron-nav {
| |
| display: flex;
| |
| flex-wrap: nowrap;
| |
| overflow-x: auto;
| |
| margin: 16px 0 20px;
| |
| border-top: 1px solid var(--chron-border);
| |
| border-bottom: 1px solid var(--chron-border);
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .ts-fullchron-nav > span,
| |
| .ts-fullchron-nav > a {
| |
| flex-shrink: 0;
| |
| padding: 7px 9px;
| |
| font-size: .75rem;
| |
| }
| |
|
| |
| .ts-fullchron-section {
| |
| margin: 20px 0 26px;
| |
| }
| |
|
| |
| .ts-fullchron-section-title {
| |
| margin: 0 0 11px !important;
| |
| padding: 3px 0 6px 8px !important;
| |
| border-left: 3px solid var(--chron-blue) !important;
| |
| border-bottom: 1px solid var(--chron-border) !important;
| |
| font-size: 1.06rem !important;
| |
| }
| |
|
| |
|
| |
| /* モバイルでは年代→本文の縦型 */
| |
|
| |
| .ts-fullchron-list::before {
| |
| left: 8px;
| |
| }
| |
|
| |
| .ts-fullchron-entry {
| |
| display: block;
| |
| padding: 0 0 19px 27px;
| |
| }
| |
|
| |
| .ts-fullchron-entry::before {
| |
| top: 7px;
| |
| left: 4px;
| |
| }
| |
|
| |
| .ts-fullchron-date {
| |
| margin-bottom: 4px;
| |
| padding: 0;
| |
| text-align: left;
| |
| font-size: .75rem;
| |
| }
| |
|
| |
| .ts-fullchron-main {
| |
| padding-bottom: 13px;
| |
| }
| |
|
| |
| .ts-fullchron-event {
| |
| font-size: .9rem;
| |
| }
| |
|
| |
| .ts-fullchron-summary {
| |
| font-size: .81rem;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| .ts-fullchron-meta {
| |
| margin-top: 6px;
| |
| font-size: .74rem;
| |
| }
| |
|
| |
| .ts-fullchron-meta-row {
| |
| grid-template-columns: 38px minmax(0, 1fr);
| |
| gap: 6px;
| |
| }
| |
|
| |
| .ts-fullchron-detail {
| |
| font-size: .74rem;
| |
| }
| |
|
| |
| .ts-fullchron-footer {
| |
| margin-top: 22px;
| |
| padding: 10px 11px;
| |
| font-size: .79rem;
| |
| }
| |
|
| |
| /* =========================================================
| |
| 個別記事内の年表 Mobile
| |
| ========================================================= */
| |
|
| |
| .ts-entitychronology {
| |
| margin: 8px 0 16px;
| |
| }
| |
|
| |
| .ts-entitychron-list {
| |
| position: relative;
| |
| }
| |
|
| |
| .ts-entitychron-list::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 7px;
| |
| bottom: 7px;
| |
| left: 7px;
| |
| width: 1px;
| |
| background: #b7c5dc;
| |
| }
| |
|
| |
| .ts-entitychron-entry {
| |
| position: relative;
| |
| display: block;
| |
| padding: 0 0 17px 25px;
| |
| }
| |
|
| |
| .ts-entitychron-entry::before {
| |
| content: "";
| |
| position: absolute;
| |
| top: 7px;
| |
| left: 3px;
| |
| width: 7px;
| |
| height: 7px;
| |
| border: 2px solid #fff;
| |
| border-radius: 50%;
| |
| background: #36c;
| |
| box-shadow: 0 0 0 1px #36c;
| |
| }
| |
|
| |
| .ts-entitychron-date {
| |
| margin-bottom: 3px;
| |
| padding: 0;
| |
| color: #2a4b8d;
| |
| font-size: .73rem;
| |
| font-weight: 600;
| |
| text-align: left;
| |
| }
| |
|
| |
| .ts-entitychron-body {
| |
| padding-bottom: 11px;
| |
| border-bottom: 1px solid #eaecf0;
| |
| }
| |
|
| |
| .ts-entitychron-entry:last-child .ts-entitychron-body {
| |
| border-bottom: 0;
| |
| }
| |
|
| |
| .ts-entitychron-event {
| |
| margin-bottom: 3px;
| |
| font-size: .89rem;
| |
| font-weight: 700;
| |
| }
| |
|
| |
| .ts-entitychron-summary {
| |
| color: #54595d;
| |
| font-size: .8rem;
| |
| line-height: 1.6;
| |
| }
| |
|
| |
| .ts-entitychron-detail {
| |
| margin-top: 5px;
| |
| font-size: .74rem;
| |
| }
| |
|
| |
| .ts-entitychron-more {
| |
| margin-top: 3px;
| |
| padding-top: 7px;
| |
| border-top: 1px solid #eaecf0;
| |
| text-align: right;
| |
| font-size: .75rem;
| |
| }
| |
|
| |
| /* 国家年表の種別ラベル Mobile */
| |
|
| |
| .ts-entitychron-type {
| |
| display: inline-block;
| |
| margin: 0 0 3px;
| |
| padding: 1px 5px;
| |
| border: 1px solid #c8ccd1;
| |
| background: #f8f9fa;
| |
| color: #54595d;
| |
| font-size: .66rem;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .ts-order-note {
| |
| margin-top: 4px;
| |
| color: #72777d;
| |
| font-size: .72rem;
| |
| line-height: 1.5;
| |
| }
| |
|
| |
| /* =========================================================
| |
| 年表：モバイル用コンパクト表示
| |
| ========================================================= */
| |
|
| |
| .ts-chron-entry,
| |
| .ts-fullchron-entry {
| |
| min-height: 0 !important;
| |
| padding-top: 10px !important;
| |
| padding-bottom: 12px !important;
| |
| margin-top: 0 !important;
| |
| margin-bottom: 0 !important;
| |
| }
| |
|
| |
| .ts-chron-summary,
| |
| .ts-fullchron-summary {
| |
| margin-top: 3px;
| |
| line-height: 1.65;
| |
| }
| |
|
| |
| .ts-chron-detail,
| |
| .ts-fullchron-detail {
| |
| margin-top: 5px;
| |
| }
| |
|
| |
| .ts-fullchron-meta {
| |
| display: block !important;
| |
| width: 100% !important;
| |
| }
| |
|
| |
| .ts-fullchron-meta-row {
| |
| display: grid !important;
| |
| grid-template-columns: 3.5em minmax(0, 1fr) !important;
| |
| gap: 6px;
| |
| width: 100% !important;
| |
| margin: 2px 0;
| |
| }
| |
|
| |
| .ts-fullchron-meta-label {
| |
| white-space: nowrap;
| |
| }
| |
|
| |
| .ts-fullchron-meta-value {
| |
| min-width: 0 !important;
| |
| width: auto !important;
| |
| word-break: normal;
| |
| overflow-wrap: break-word;
| |
| } | | } |