/*
https://stackoverflow.com/questions/75178723/why-is-details-element-expanding-upwards-when-receiving-the-order-attribute
https://www.w3schools.com/cssref/css_default_values.php
https://www.sitepoint.com/style-html-details-element/ 기장 기본적 이면서 탄탄한 설명
//codingeverybody.kr/css-details-태그-스타일-꾸미기/ 기장 기본적 이면서 탄탄한 설명
https://unused-css.com/blog/drawing-triangles-with-css/
https://adamwathan.me/composing-the-uncomposable-with-css-variables/
The order of the class attributes in the HTML tag's element class doesn't matter,
browser still looks at the declaration order and not the order of their use.
class="class1 class2" e.g.
*/
/*
Click me
페이지로
list-style - none;
summary-webkit-details-marker
display-none;
Click me
list-style - none;
summary-webkit-details-marker
display-none;
*/
details {
position: relative;
/* width: 100% ; */
/* max-width: calc(100% - 2px); */
margin: 3px ;
padding: 3px ;
border: 1px solid #78909C;
border-radius: 3px;
background-color: #ECEFF1;
color: #263238;
transition: background-color 0.15s;
}
details.month {
padding:3px;
}
details.month[open] {
background-color: #eee ;
}
details.right {
position: relative;
left: 30px;
background-color: #FF99FF ;
}
/* 브라우저 호환을 위해서는 두 사용자 정의 스타일을 모두 지정해야 함 */
summary::-webkit-details-marker { /* Safari 브라우저용 사용자 정의 스타일 */
display: none;
}
summary {
display: flex ; /* 그 외의 브라우저용 사용자 정의 스타일 */
}
summary {
padding: 0.1rem ;
position: relative;
font-size: 1rem;
font-weight: 600 ;
cursor: pointer;
}
summary.menu {
display: inline-flex;
}
details.month > summary {
padding : 0.2rem 0.1rem 0.9rem 0.1rem ;
position : relative ;
font-size : 1.2rem ;
font-weight: 600 ; /* normal= 400, bold= 700 */
cursor: pointer;
}
/*
summary.mark::before {
content: "";
position: absolute;
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
border-left: 0.75em solid black ;
top: 0.2em;
left: 0;
transition: .25s transform;
}
details[open] summary.mark:before {
transform: rotateZ(90deg);
}
*/
/* --- chronical --- */
/*
.chronical{
padding: 2px;
background-color: #CFD8DC;
}
details {
margin: 0.8rem auto;
padding: 0 1rem;
width: 35em;
max-width: calc(100% - 2rem);
position: relative;
border: 1px solid #78909C;
border-radius: 6px;
background-color: #ECEFF1;
color: #263238;
transition: background-color 0.15s;
}
details > :last-child {
margin-bottom: 1rem;
}
details::before {
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left: 0;
border-radius: inherit;
opacity: 0.15;
box-shadow: 0 0.25em 0.5em #263238;
pointer-events: none;
transition: opacity 0.2s;
z-index: -1;
}
details[open]::before {
opacity: 0.6;
}
details.foreign {
position: relative;
left: 45px;
background-color: #FF99FF ;
}
*/
/*
.chronical summary::before, summary::after {
width: 0.75em;
height: 2px;
position: absolute;
top: 50%;
right: 0;
content: "";
background-color: currentColor;
text-align: right;
transform: translateY(-50%);
transition: transform 0.2s ease-in-out;
}
.chronical summary::after {
transform: translateY(-50%) rotate(90deg);
}
.chronical [open] summary::after {
transform: translateY(-50%) rotate(180deg);
}
*/
.chronical p {
margin: 0 0 1em;
line-height: 1.5;
}
.chronical ul {
margin: 0 0 1em;
padding: 0 0 0 1em;
}
.chronical li:not(:last-child) {
margin-bottom: 0.5em;
}
.chronical code, .chronical article {
padding: 0.2em;
border-radius: 3px;
background-color: #E0E0E0;
}
.chronical pre > code, {
display: block;
padding: 1em;
margin: 0;
}
/*
details {
width: 99%;
margin: 0 auto ;
background: #282828;
margin-bottom: .5rem;
box-shadow: 0 .1rem 1rem -.5rem rgba(0,0,0,.4);
border-radius: 5px;
overflow: hidden;
}
summary {
padding: 0.4rem;
display: block;
background: #333;
padding-left: .2rem;
position: relative;
cursor: pointer;
}
summary:before {
content: '';
border-width: .4rem;
border-style: solid;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 1rem;
left: 1rem;
transform: rotate(0);
transform-origin: .2rem 50%;
transition: .25s transform ease;
}
details[open] > summary:before { transform: rotate(90deg); }
details summary::-webkit-details-marker { display:none; }
details > ul {
padding-bottom: 1rem;
margin-bottom: 0;
*/