/* Quizify by @chehil (翏央)

Version: 0.1.0
Readme: https://github.com/e-chehil/anki-quizify/blob/main/README.md
Contact Details: 
- Email: chehil@163.com
- WeChat Official Account: Regenhof

/* -------------------------------------------------- 参数 */
:root {
    --card-max-width: 40em;
    --card-text-align: left;
    --font-primary: "Georgia", "Yasong", Arial, serif;
    --font-secondary: "Sassoon Book", "Youkai", Arial, serif;
    --font-blank: "Sassoon Montessori", "Jiashu", Arial, serif;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --img-width: 50%;
    --img-brightness: 1;
    --img-filter: none;
}

html {
    font-size: var(--font-size-lg);
}

/* -------------------------------------------------- 色彩 */
.card {
    background-color: #e4dfd7;
    --card-bg: #fffefa;
    --card-border: transparent;
    --card-shadow: #d4c4b740;
    --text-primary: #475164;
    --text-fg-selected: #fff;
    --text-bg-selected: #5e7987;
    --blank-fg: #126e82;
    --popup-bg: #db8540;
    --comment-bg: #363433;
    --comment-fg: #fffef9;
    --reveal-fg: #2376b7;
    --reveal-fg-hover: #134857;
    --reveal-bg-hover: #f7c173;
    --caption-fg: #826b48;
    --caption-border: #e5d3aa;
    --caption-fg-hover: #4d4030;
    --caption-fg-active: #fffef9;
    --caption-bg-active: #87723e;
    --option-bg: #f7f4ed;
    --option-border: transparent;
    --feedback-fg: var(--card-bg);
    --feedback-bg: #c1b2a3;
    --option-fg-hover: #624941;
    --option-bg-hover: #dad4cb;
    --correct-fg: #1a6840;
    --correct-bg: #f0f5e5;
    --incorrect-fg: #a61b29;
    --incorrect-bg: #fbeee2;
    --incomplete-fg: #5e5314;
    --incomplete-bg: #f9f4dc;
    --bold-fg: #a7535a;
    --italic-fg: #b14b28;
    --bold-italic-fg: #cf4813;
    --underline-fg: #497568;
    --divider: #8a988e;
    --table-fg: var(--caption-fg-hover);
    --table-bg: var(--caption-border);
    --link-fg: #2775b6;
    --link-fg-active: #1177b0;
    --deck-fg: var(--caption-fg);
    --tag-fg: #333333cc;
    --tag-bg: #3333330f;
    --tag-fg-active: #333333;
    --tag-bg-active: #3333331a;
}

.card.nightMode {
    background-color: #22202e;
    --card-bg: #322f3b;
    --card-border: transparent;
    --card-shadow: #13112440;
    --text-primary: #c0c4c3;
    --text-fg-selected: #000;
    --text-bg-selected: #a7a8bd;
    --blank-fg: #66a9c9;
    --popup-bg: #db8540;
    --comment-bg: #373834;
    --comment-fg: #e2e1e4;
    --reveal-fg: #edc3ae;
    --reveal-fg-hover: #f8e0b0;
    --reveal-bg-hover: #525288;
    --caption-fg: #869d9d;
    --caption-border: #b2bbbe;
    --caption-fg-hover: #474b4c;
    --caption-fg-active: #35333c;
    --caption-bg-active: #93b5cf;
    --option-bg: #3e3841;
    --option-border: transparent;
    --feedback-fg: #c4cbcf;
    --feedback-bg: #47484c;
    --option-fg-hover: #fffef8;
    --option-bg-hover: #5d655f;
    --correct-fg: #b2cf87;
    --correct-bg: transparent;
    --incorrect-fg: #e77c8e;
    --incorrect-bg: transparent;
    --incomplete-fg: #e2c17c;
    --incomplete-bg: transparent;
    --bold-fg: #f07c82;
    --italic-fg: #ea8958;
    --bold-italic-fg: #f86b1d;
    --underline-fg: #69a794;
    --divider: #74759b;
    --link-fg: #5cb3cc;
    --link-fg-active: #29b7cb;
    --tag-fg: #ffffffb3;
    --tag-bg: #ffffff14;
    --tag-fg-active: #ffffff;
    --tag-bg-active: #ffffff1f;
}


/* -------------------------------------------------- 背景 */
.card {
    cursor: default;
    padding: 0.5em 0;
}

html:not(.mobile) .card {
    padding: 0.5em;
}

.card::-webkit-scrollbar {
  display: none;
}

/* -------------------------------------------------- 卡片 */
.quizify-flashcard {
    background-color: var(--card-bg);
    border-radius: 0.5em;
    border: 1px solid var(--card-border);
    box-shadow: 0px 4px 6px var(--card-shadow);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 auto;
    max-width: var(--card-max-width);
    text-align: var(--card-text-align);
    word-wrap: break-word;
}

.quizify-flashcard ::selection {
    background-color: var(--text-bg-selected);
    color: var(--text-fg-selected);
}

/* -------------------------------------------------- 字段 */
.quizify-field {
    margin: 2em;
}

.mobile .quizify-field {
    margin: 1em;
}

/* -------------------------------------------------- 填空 */
.blank {
    cursor: pointer;
    color: var(--blank-fg);
    padding: 0 0.4em 0.06em;
    margin: 0 0.2em;
    border-bottom: 2px solid;
    font-family: "Sassoon Montessori", "Jiashu";
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.06em;
}

.key {
    opacity: 0;
    transition: all 0.3s ease-in-out;
}

.entry {
    display: none;
    transition: all 0.3s ease-in-out;
}

/* -------------------------------------------------- 批注 */
.popup {
    display: inline-block;
    cursor: pointer;
    line-height: 100%;
    font-weight: bold;
    text-align: center;
    padding: 0.2em 0.2em;
    margin: 0 0.2em;
    background-color: var(--popup-bg);
    color: var(--card-bg);
    border-radius: 0.7em;
    font-size: 80%;
    user-select: none;
    vertical-align: middle;
}

.comment {
    line-height: normal;
    font-weight: normal;
    opacity: 0;
    visibility: hidden;
    background-color: var(--comment-bg);
    color: var(--comment-fg);
    text-align: justify;
    border-radius: 0.5em;
    padding: 0.5em;
    position: fixed;
    z-index: 1;
    transition: all 0.3s ease-in-out;
    max-width: 75%;
    white-space: nowrap;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.comment::after {
    content: "";
    position: absolute;
    top: var(--comment-after-top, auto);
    bottom: var(--comment-after-bottom, -8px);
    left: 50%;
    transform: translateX(-50%);
    margin-left: var(--comment-after-left, 0px);
    border: 8px solid transparent;
    border-top: var(--comment-after-border-top, 8px solid var(--comment-bg));
    border-bottom: var(--comment-after-border-bottom, none);
}

/* -------------------------------------------------- 选择 */
.option {
    display: flex;
    align-items: baseline;
    font-size: 1em;
    margin: 0.2em 0;
    padding: 0.2em;
    border: 2px solid var(--option-border);
    border-radius: 0.25em;
    background-color: var(--option-bg);
    transition: all 0.3s ease-in-out;
}

.option-header {
    font-size: 1em;
    width: 1.5em;
    position: relative;
    text-align: center;
    margin: 0;
    flex-shrink: 0;
}

.option-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.option-seq {
    display: none;
}

.feedback {
    font-size: 0.8em;
    margin: 0.2em 0;
    padding: 0.2em;
    background-color: var(--feedback-bg);
    color: var(--feedback-fg);
    display: block;
    font-weight: bold;
    cursor: pointer;
    border-radius: 0.25em;
    transition: all 0.3s ease-in-out;
    text-align: center;
    user-select: none;
}

.feedback:hover,
.option:has(input:not(:disabled)):hover {
    cursor: pointer;
    background-color: var(--option-bg-hover);
    color: var(--option-fg-hover);
}

.nightMode .correct,
.nightMode .incorrect,
.nightMode .not-selected {
    border-color: initial;
}

/* -------------------------------------------------- 隐藏 */
.reveal {
    display: inline;
    font-family: var(--font-secondary);
    position: relative;
    color: var(--reveal-fg);
    cursor: pointer;
    border-radius: 0.25em;
    padding: 0 0.1em;
    transition: all 0.3s ease-in-out;
}

.reveal:not(.active) {
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--reveal-fg-hover);
    text-underline-offset: 0.2em;
}

.reveal:not(.active)::after {
    display: inline-block;
    content: "➽";
    text-decoration: none;
}

.reveal:hover {
    color: var(--reveal-fg-hover);
    background-color: var(--reveal-bg-hover);
    text-decoration: none;
}

.secret {
    color: var(--hidden-fg);
    display: none;
}

/* -------------------------------------------------- 折叠 */
.caption::before {
  content: "✦";
  margin-right: 0.2em;
  transition: all 0.3s ease-in-out;
  display: inline-block;
}

.caption {
    border: 2px solid var(--caption-border);
    color: var(--caption-fg);
    font-family: var(--font-secondary);
    padding: 0 0.5em;
    border-radius: 0.5em;
    cursor: pointer;
    margin: 0.2em;
    transition: all 0.3s ease-in-out;
    display: inline-block;
}

.caption:hover {
    color: var(--caption-fg-hover);
    background-color: var(--caption-border);
    
}

.caption.active {
    background-color: var(--caption-bg-active);
    border-color: var(--caption-bg-active);
    color: var(--caption-fg-active);
}

.collapse {
    font-family: var(--font-secondary);
    display: none;
}

/* -------------------------------------------------- 牌组 */
.quizify-deck {
    margin: 2em;
    display: flex;
    color: var(--deck-fg);
    font-size: 0.8rem;
    white-space: nowrap;
}

.mobile .quizify-deck {
    margin: 1em;
}

.quizify-subdeck {
    text-decoration: underline;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* -------------------------------------------------- 标签 */
.quizify-tags {
    margin: 2em;
    display: flex;
    flex-flow: row wrap;
    font-size: 0.8rem;
}

.mobile .quizify-tags {
    margin: 1em;
}

.quizify-tag {
    all: initial;
    background-color: var(--tag-bg);
    border-radius: 0.25em;
    color: var(--tag-fg);
    display: inline;
    font-size: 0.8rem;
    font-family: var(--font-blank);
    margin: 0 0.5em 0.5em 0;
    padding: 0.25em;
    transition: all 0.3s ease-in-out;
    word-break: break-word;
}

.quizify-tag:hover {
    background-color: var(--tag-bg-active);
    color: var(--tag-fg-active);
    cursor: pointer;
}

/* -------------------------------------------------- 分隔 */
.quizify-divider {
    background-color: transparent;
    border: none;
    border-bottom: 1px dashed var(--divider);
    margin: 1em;
    padding: 0;
}

.quizify-divider--answer {
    border-bottom: 1px solid var(--divider);
}

/* -------------------------------------------------- 图片 */
img {
    border-radius: 0.25em;
    display: block;
    margin: 1em auto;
    max-width: var(--img-width) !important;
    transition: max-width 0.25s 0.1s, opacity 0.25s 0.1s, filter 0.1s, transform 0s;
}

.night_mode img {
    filter: var(--img-filter);
    opacity: var(--img-brightness);
}

img:hover {
    cursor: zoom-in;
    filter: none;
    max-width: 100% !important;
    opacity: 1;
}

img + br {
    display: none;
}

html:not(.mobile) img:active {
    border: 1px solid var(--link-fg-active);
    cursor: zoom-out;
    filter: none;
    left: 0;
    max-width: 95% !important;
    opacity: 1;
    position: fixed;
    top: 0;
    transform: translate(calc(50vw - 50%), calc(50vh - 50%));
    z-index: 100;
}

img.icon {
    pointer-events: none;
    user-select: none;
    display: inline-block;
    vertical-align: middle;
    margin: 0 .2em;
    border-radius: 0;
    max-width: none !important;;
    height: 1.5em;
    transition: none;
    filter: none;
}

/* -------------------------------------------------- 表格 */
table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 auto;
    max-width: 100%;
}

table thead {
    background-color: var(--table-bg);
    color: var(--table-fg);
}

table tr:nth-of-type(even) {
    background-color: var(--table-bg);
    color: var(--table-fg);
}

table tr:first-child th:first-child {
    border-top-left-radius: 0.5em;
}

table tr:first-child th:last-child {
    border-top-right-radius: 0.5em;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 0.5em;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 0.5em;
}

table th {
    border-bottom: solid 1px var(--card-border);
    border-left: solid 1px var(--card-border);
    border-top: solid 1px var(--card-border);
    padding: 0.5em;
}

table th:last-child {
    border-right: solid 1px var(--card-border);
}

table td {
    border-bottom: solid 1px var(--card-border);
    border-left: solid 1px var(--card-border);
    padding: 0.5em;
}

table td:last-of-type {
    border-right: solid 1px var(--card-border);
}

/* -------------------------------------------------- 链接 */
a, a:visited {
    text-decoration: none;
    color: var(--link-fg);
}
a:hover, a:active {
    text-decoration: underline;
    color: var(--link-fg-active);
}

/* -------------------------------------------------- 格式 */
b, strong {
    color: var(--bold-fg);
}

i, em {
    color: var(--italic-fg);
}

b i, b em, strong i, strong em {
    color: var(--bold-italic-fg);
}

u {
    color: var(--underline-fg);
    text-underline-offset: 0.2em;
}

mark {
    border: .1em solid var(--popup-bg);
    color: var(--popup-bg);
    background-color: transparent;
    padding: .1rem .5rem;
    margin: 0 .2rem;
    border-radius: 2rem;
    font-size: .95rem;
}

.correct {
    background-color: var(--correct-bg);
    color: var(--correct-fg);
}

.incorrect {
    background-color: var(--incorrect-bg);
    color: var(--incorrect-fg);
}

.incomplete,
.not-selected {
    background-color: var(--incomplete-bg);
    color: var(--incomplete-fg);
}

.pronunciation-gb,
.pronunciation-us {
    cursor: pointer;
    display: inline-block;
    margin-right: 1em;
    vertical-align: middle;
    font-family: "Charis SIL";
}

/* -------------------------------------------------- 字体 */
@font-face {
  font-family: "Jiashu";
  src: url("_HYJiaShu-55U.ttf");
}

@font-face {
  font-family: "Sassoon Montessori";
  src: url("_SassoonMontessoriW01Regular.ttf");
}

@font-face {
  font-family: "Youkai";
  src: url("_HYYouKai-55W.ttf");
}

@font-face {
  font-family: "Sassoon Book";
  src: url("_SassoonBookW01Regular.ttf");
}

@font-face {
    font-family: "Yasong";
    src: url("_FZPingXYSK.TTF");
}

@font-face {
    font-family: "Georgia";
    src: url("_georgia.ttf");
}

@font-face {
    font-family: "Charis SIL";
    src: url("_CharisSIL-Regular.ttf");
}
