Common.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

• 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
• 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
• 인터넷 익스플로러: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
• 오페라: 메뉴 → 설정(맥의 경우 오페라 → 환경 설정)으로 이동한 다음 개인 정보 보호 및 보안 → 검색 데이터 지우기 → 캐시한 영상 및 파일을 누름.

/* 이 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);
}