MediaWiki:Discography.css

/****************************************************************** project - discography-nav .p-discography-nav { background-color: #fe4e5f; position: relative; z-index: +5; }

.p-discography-nav::before { height: 20px; content: ""; position: absolute; left: 0; width: 100%; }

.p-discography-nav::before { top: -20px; background: linear-gradient(45deg, #fe4e5f 10px, transparent 0), linear-gradient(315deg, #fe4e5f 10px, transparent 0); background-size: 20px 20px; }

.p-discography-nav__inner { max-width: 1100px; margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; padding-top: 1.5rem; padding-bottom: 1.5rem; }

@media screen and (max-width: 736px) { .p-discography-nav__inner { padding: 12px; } }

/****************************************************************** project - discography-top @media screen and (max-width: 736px) { .p-discography-top { font-size: 90%; } }

.p-discography-top a { text-decoration: none; }

@media print, screen and (min-width: 737px) { .p-discography-top__item { display: flex; margin-top: 10px; } .p-discography-top__menbers { display: flex; } .p-discography-top__menber { margin-right: 10px; } }

@media screen and (max-width: 736px) { .p-discography-top__item { display: block; margin-top: 6px; } .p-discography-top__menbers { display: flex; flex-wrap: wrap; } .p-discography-top__menber { margin-right: 5px; } }

.p-discography-top__menber { display: block; }

.p-discography-top__menber span { box-sizing: border-box; display: inline-block; background-color: #fe4e5f; border-radius: 6px; color: #fff; min-width: 5.5em; text-align: center; font-weight: bold; }

.p-discography-top__menber--satomi span { background-color: #ef48b1; }

.p-discography-top__menber--rinu span { background-color: #ef270d; }

.p-discography-top__menber--nanamori span { background-color: #a931c0; }

.p-discography-top__menber--jel span { background-color: #ff4d00; }

.p-discography-top__menber--root span { background-color: #f0b400; }

.p-discography-top__menber--coron span { background-color: #00bde1; }

.p-discography-top__name { display: block; font-weight: bold; }

.p-discography-top__anker { display: block; }

.p-discography-top__anker { font-size:150%; }

@media print, screen and (min-width: 737px) { .p-discography-top__anker { margin-top: 10px; position: relative; padding-left: 7.5px; padding-left: 14px; font-size: 90%; } .p-discography-top__anker::after { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; top: 0; left: 0; transform: translate(7.5px, 0.8em) rotate(135deg); transform-origin: top left; border-top: 2px solid #fe4e5f; border-left: 2px solid #fe4e5f; width: 8px; height: 8px; transition-property: top, right, bottom, left; transition-duration: 0.3s; } }

@media screen and (max-width: 736px) { .p-discography-top__anker { margin-top: 4px; position: relative; padding-left: 6px; padding-left: 10px; font-size: 80%; } .p-discography-top__anker::after { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; top: 0; left: 0; transform: translate(6px, 0.8em) rotate(135deg); transform-origin: top left; border-top: 2px solid #fe4e5f; border-left: 2px solid #fe4e5f; width: 6px; height: 6px; transition-property: top, right, bottom, left; transition-duration: 0.3s; } }

/****************************************************************** project - discography-head .p-discography-head { text-align: center; }

@media print, screen and (min-width: 737px) { .p-discography-head h1 { display: flex; justify-content: center; align-items: center; } .p-discography-head__menber { margin-right: 10px; } }

.p-discography-head__menber { display: block; font-size: 1.2rem; }

.p-discography-head__menber span { box-sizing: border-box; display: inline-block; background-color: #fe4e5f; border-radius: 6px; color: #fff; min-width: 5.5em; text-align: center; font-weight: bold; }

.p-discography-head__menber--satomi span { background-color: #ef48b1; }

.p-discography-head__menber--rinu span { background-color: #ef270d; }

.p-discography-head__menber--nanamori span { background-color: #a931c0; }

.p-discography-head__menber--jel span { background-color: #ff4d00; }

.p-discography-head__menber--root span { background-color: #f0b400; }

.p-discography-head__menber--coron span { background-color: #00bde1; }

.p-discography-head p { font-weight: bold; }

/****************************************************************** project - discography-buy .p-discography-buy { background-color: #ffe3e4; border: 2px dotted #fe4e5f; border-radius: 1rem; padding: 1.5rem 1.9rem; }

@media screen and (max-width: 736px) { .p-discography-buy { border-radius: 0.75rem; padding: 1.125rem; } }

.p-discography-buy__head { color: #fe4e5f; }

@media print, screen and (min-width: 737px) { .p-discography-buy__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } }

@media screen and (max-width: 736px) { .p-discography-buy__head { margin-bottom: 0.75rem; } }

.p-discography-buy__head h2 { font-size: 1.1rem; }

@media screen and (max-width: 736px) { .p-discography-buy__head h2 { font-size: 0.99rem; } }

.p-discography-buy__head p { font-size: 1rem; }

@media screen and (max-width: 736px) { .p-discography-buy__head p { font-size: 0.9rem; } }

.p-discography-buy__item { text-align: center; }

.p-discography-buy__item img { border-radius: 6px; }

/****************************************************************** project - discography-detail .p-discography-detail__title { color: #fe4e5f; border-bottom: 4px solid #fe4e5f; }

/****************************************************************** project - sort-check2 .p-sort-check2__menu { display: flex; flex-wrap: wrap; justify-content: center; margin-top: -1rem; }

@media screen and (max-width: 736px) { .p-sort-check2__menu { display: none; } }

.p-sort-check2__menu-item { margin-right: 0.5rem; margin-top: 0.5rem; }

.p-sort-check2__button { color: inherit; text-decoration: none; display: inline-block; text-align: center; cursor: pointer; vertical-align: middle; box-sizing: border-box; border: 1px solid transparent; line-height: 1.5; transition-property: all; transition-duration: 0.3s; padding: 0.2em 0.6em; color: #ffffff !important; font-weight: bold; font-size: 110%; }

.p-sort-check2__button:hover:not(:disabled):not(.disabled) { color: inherit; text-decoration: none; }

@media print, screen and (max-width: 900px) { .p-sort-check2__button { font-size: 100%; } }

.p-sort-check2__button:not(.is-active).is-hover { background-color: #bf3b48; }

.p-sort-check2__button.is-active { background-color: #982f39; }

.p-sort-check2__select { display: block; width: 100%; position: relative; box-sizing: border-box; color: #fff; }

@media print, screen and (min-width: 737px) { .p-sort-check2__select { display: none; } }

.p-sort-check2__head { position: relative; display: block; padding: 0.5em 1.9em 0.5em 0.5em; color: inherit; text-decoration: none; transition-property: background; transition-duration: 0.3s; background-color: #fe4e5f; border-bottom: 1px solid #fe818d; }

.p-sort-check2__head:hover:not(:disabled):not(.disabled) { color: inherit; text-decoration: none; }

.p-sort-check2__head::before { content: ""; position: absolute; margin: auto; top: 0; bottom: 0.3em; right: 0.9em; width: 5px; height: 5px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(135deg); }

.p-sort-check2__body { position: absolute; box-sizing: border-box; width: 100%; z-index: +1; background-color: #ffeaba; color: #805900; }

.p-sort-check2__option { position: relative; display: block; cursor: pointer; padding: 0.5em 1em 0.5em 1.5em; color: inherit; text-decoration: none; transition-property: background; transition-duration: 0.3s; }

.p-sort-check2__option:hover:not(:disabled):not(.disabled) { color: inherit; text-decoration: none; }

.p-sort-check2__option:hover:not(:disabled):not(.disabled) { background-color: #f1f1f1; }

.p-sort-check2__option.is-active::before { position: absolute; content: ""; margin: auto; box-sizing: border-box; vertical-align: middle; top: 0; bottom: 3px; left: 9px; width: 6px; height: 9px; border-bottom: 2px solid #805900; border-right: 2px solid #805900; transform: rotate(40deg); }

.p-sort-check2__item.is-hidden { transition-property: opacity; transition-duration: 0.3s; opacity: 0; }

.p-sort-check2__item.is-active { animation: p-sort-check2-ani 0.2s ease-out 0s 1 forwards; }

/****************************************************************** component - grid2 .c-grid2 { display: flex; flex-wrap: wrap; margin-right: -1rem; margin-top: -1rem; }

.c-grid2--center { justify-content: center; }

.c-grid2--right { justify-content: flex-end; }

.c-grid2 > [class*="c-grid2__item"], .c-grid2 > .c-grid2__item5col { position: relative; box-sizing: border-box; margin-right: 1rem; margin-top: 1rem; }

.c-grid2 > .c-grid2__item1 { width: calc( 8.33333% - 1rem); }

.c-grid2 > .c-grid2__item2 { width: calc( 16.66667% - 1rem); }

.c-grid2 > .c-grid2__item3 { width: calc( 25% - 1rem); }

.c-grid2 > .c-grid2__item4 { width: calc( 33.33333% - 1rem); }

.c-grid2 > .c-grid2__item5 { width: calc( 41.66667% - 1rem); }

.c-grid2 > .c-grid2__item6 { width: calc( 50% - 1rem); }

.c-grid2 > .c-grid2__item7 { width: calc( 58.33333% - 1rem); }

.c-grid2 > .c-grid2__item8 { width: calc( 66.66667% - 1rem); }

.c-grid2 > .c-grid2__item9 { width: calc( 75% - 1rem); }

.c-grid2 > .c-grid2__item10 { width: calc( 83.33333% - 1rem); }

.c-grid2 > .c-grid2__item11 { width: calc( 91.66667% - 1rem); }

.c-grid2 > .c-grid2__item12 { width: calc( 100% - 1rem); }

.c-grid2 > .c-grid2__item5col { width: calc( 20% - 1rem); }

.c-grid2--vertical > [class*="c-grid2__item"], .c-grid2--vertical > .c-grid2__item5col { display: flex; align-items: center; }