Common.css 문서 원본 보기

/* 이 CSS 설정은 모든 스킨에 적용됩니다 */
cite {
  box-shadow: inset 0 -20px 0 #FAFAFA;
}
 
 
accordion {
  display: flex;
  flex-direction: column;
  border-radius: var(--accordion-border-radius);
  background-color: var(--accordion-bg);
  border: var(--accordion-border-width) solid var(--accordion-border-color);
}

/* Accordion item */
accordion-item {
  border-top: var(--accordion-border-width) solid var(--accordion-border-color);
  /* Add a shadow or other styling to separate the items */
}

accordion-item:first-child {
  border-top: none;
}

/* Accordion header (button) */
accordion-header {
  margin: 0;
}

/* Accordion button styling */
accordion-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--accordion-btn-padding-y) var(--accordion-btn-padding-x);
  width: 100%;
  text-align: left;
  background-color: var(--accordion-btn-bg);
  color: var(--accordion-btn-color);
  border: none;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color var(--accordion-transition);
}

accordion-button:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

accordion-button.collapsed {
  background-color: var(--accordion-btn-bg);
}

accordion-button:hover {
  background-color: var(--accordion-btn-active-bg);
}

/* Accordion icon */
accordion-button::after {
  content: '';
  display: inline-block;
  width: var(--accordion-btn-icon-width);
  height: var(--accordion-btn-icon-width);
  background-image: var(--accordion-btn-icon);
  background-size: contain;
  transition: transform var(--accordion-transition);
}

/* Accordion button active state */
accordion-button:not(.collapsed)::after {
  transform: var(--accordion-btn-icon-transform);
}

/* Accordion collapse section */
accordion-collapse {
  padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
  background-color: var(--accordion-bg);
  color: var(--accordion-color);
  display: none;
  transition: max-height var(--accordion-transition);
  border-top: var(--accordion-border-width) solid var(--accordion-border-color);
}

/* Show the collapse section when active */
accordion-collapse.show {
  display: block;
  max-height: 1000px;
}

/* Accordion body */
accordion-body {
  padding: var(--accordion-body-padding-y) var(--accordion-body-padding-x);
  color: var(--accordion-color);
}

/* Active accordion button state */
accordion-button:not(.collapsed) {
  background-color: var(--accordion-btn-active-bg);
  color: var(--accordion-btn-active-color);
}