vft 0.0.520 → 0.0.521

package/theme-style/src/md-comment.scss

@@ -1,1353 +0,0 @@
-@use 'common/var' as *;
-@use 'mixins/mixins' as *;
-
-$name: md-comment;
-
-@include b($name) {
-  padding: 0 30px 20px;
-
-  @media (width <= 720px) {
-    .wl-avatar {
-      width: 40px;
-      height: 40px;
-    }
-  }
-
-  @media (width <= 580px) {
-    .wl-header {
-      display: block;
-    }
-  }
-
-  @media (width <= 580px) {
-    .wl-header-item:not(:last-child) {
-      border-bottom: 2px dashed getCssVar('border-color');
-    }
-  }
-
-  @media (width <= 580px) {
-    .wl-header-2 .wl-header-item {
-      flex: 0;
-      width: 100%;
-    }
-  }
-
-  @media (width <= 580px) {
-    .wl-header-3 .wl-header-item {
-      width: 100%;
-    }
-  }
-
-  @media (width <= 720px) {
-    .wl-cards .wl-user {
-      --avatar-size: 40px;
-    }
-  }
-
-  @media (width <= 580px) {
-    .wl-reaction-list {
-      gap: 12px;
-    }
-  }
-
-  @media (width <= 580px) {
-    .wl-reaction-img {
-      width: 32px;
-      height: 32px;
-    }
-  }
-
-  #vft-md-comment__waline {
-    min-width: 300px;
-    max-width: getCssVar('md-container-content-max-width');
-
-    a::after {
-      content: '';
-      display: none !important;
-    }
-
-    li {
-      display: block;
-    }
-
-    .wl-power,
-    .wl-like {
-      display: none;
-    }
-  }
-
-  [data-waline] {
-    font-size: getCssVar('font-size-base');
-    text-align: start;
-  }
-
-  [dir='rtl'] [data-waline] {
-    direction: rtl;
-  }
-
-  [data-waline] * {
-    box-sizing: content-box;
-    line-height: 1.75;
-  }
-
-  [data-waline] p {
-    color: getCssVar('text-primary-color');
-  }
-
-  [data-waline] a {
-    display: inline-block;
-    position: relative;
-    color: getCssVar('text-primary-color');
-    text-decoration: none;
-    word-break: break-word;
-    cursor: pointer;
-  }
-
-  [data-waline] a:hover {
-    color: getCssVar('primary-color');
-  }
-
-  [data-waline] img {
-    max-width: 100%;
-    max-height: 400px;
-    border: none;
-  }
-
-  [data-waline] hr {
-    margin: 0.825em 0;
-    border-style: dashed;
-    border-color: getCssVar('border-color-lighter');
-  }
-
-  [data-waline] code,
-  [data-waline] pre {
-    margin: 0;
-    padding: 0.2em 0.4em;
-    border-radius: 3px;
-    background: getCssVar('theme-color');
-    font-size: 85%;
-  }
-
-  [data-waline] pre {
-    padding: 10px;
-    overflow: auto;
-    line-height: 1.45;
-  }
-
-  [data-waline] pre::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  [data-waline] pre::-webkit-scrollbar-track-piece:horizontal {
-    -webkit-border-radius: 6px;
-    border-radius: 6px;
-    background: rgba(0, 0, 0, 0.1);
-  }
-
-  [data-waline] pre::-webkit-scrollbar-thumb:horizontal {
-    width: 6px;
-    -webkit-border-radius: 6px;
-    border-radius: 6px;
-    background: getCssVar('primary-color');
-  }
-
-  [data-waline] pre code {
-    padding: 0;
-    background: rgba(0, 0, 0, 0);
-    color: getCssVar('text-primary-color');
-    word-break: keep-all;
-    white-space: pre-wrap;
-  }
-
-  [data-waline] blockquote {
-    margin: 0.5em 0;
-    padding: 0.5em 0 0.5em 1em;
-    border-inline-start: 8px solid getCssVar('border-color');
-    color: getCssVar('fill-color-darker');
-  }
-
-  [data-waline] blockquote > p {
-    margin: 0;
-  }
-
-  [data-waline] ol,
-  [data-waline] ul {
-    margin-inline-start: 1.25em;
-    padding: 0;
-  }
-
-  [data-waline] input[type='checkbox'],
-  [data-waline] input[type='radio'] {
-    display: inline-block;
-    margin-top: -2px;
-    vertical-align: middle;
-  }
-
-  .wl-btn {
-    display: inline-block;
-    min-width: 2.5em;
-    margin-bottom: 0;
-    padding: 0.5em 1em;
-    transition-duration: 0.4s;
-    border: 1px solid getCssVar('border-color');
-    border-radius: 0.5em;
-    background: rgba(0, 0, 0, 0);
-    color: getCssVar('text-primary-color');
-    font-size: 0.75em;
-    font-weight: 400;
-    line-height: 1.5;
-    text-align: center;
-    vertical-align: middle;
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    touch-action: manipulation;
-  }
-
-  .wl-btn:hover,
-  .wl-btn:active {
-    border-color: getCssVar('primary-color');
-    color: getCssVar('primary-color');
-  }
-
-  .wl-btn:disabled {
-    border-color: getCssVar('border-color');
-    background: getCssVar('disable-bg-color');
-    color: getCssVar('disable-text-color');
-    cursor: not-allowed;
-  }
-
-  .wl-btn.primary {
-    border-color: getCssVar('primary-color');
-    background: getCssVar('primary-color');
-    color: getCssVar('color-white');
-  }
-
-  .wl-btn.primary:hover,
-  .wl-btn.primary:active {
-    border-color: getCssVar('primary-color');
-    background: getCssVar('primary-color');
-    color: getCssVar('color-white');
-  }
-
-  .wl-btn.primary:disabled {
-    border-color: getCssVar('border-color');
-    background: getCssVar('disable-bg-color');
-    color: getCssVar('disable-text-color');
-    cursor: not-allowed;
-  }
-
-  .wl-loading {
-    text-align: center;
-  }
-
-  .wl-loading svg {
-    margin: 0 auto;
-  }
-
-  .wl-comment {
-    display: flex;
-    position: relative;
-    margin-bottom: 0.75em;
-  }
-
-  .wl-close {
-    position: absolute;
-    top: -4px;
-    inset-inline-end: -4px;
-    padding: 0;
-    border: none;
-    background: rgba(0, 0, 0, 0);
-    line-height: 1;
-    cursor: pointer;
-  }
-
-  .wl-login-info {
-    max-width: 80px;
-    margin-top: 0.75em;
-    text-align: center;
-  }
-
-  .wl-logout-btn {
-    position: absolute;
-    top: -10px;
-    inset-inline-end: -10px;
-    padding: 3px;
-    border: none;
-    background: rgba(0, 0, 0, 0);
-    line-height: 0;
-    cursor: pointer;
-  }
-
-  .wl-avatar {
-    position: relative;
-    width: 40px;
-    height: 40px;
-    margin: 0 auto;
-    border: getCssVar('border-color');
-    border-radius: getCssVar('border-radius-base');
-  }
-
-  .wl-avatar img {
-    width: 100%;
-    height: 100%;
-    border-radius: getCssVar('border-radius-base');
-  }
-
-  .wl-login-nick {
-    display: block;
-    color: getCssVar('primary-color');
-    font-size: 0.75em;
-    word-break: break-all;
-  }
-
-  .wl-panel {
-    position: relative;
-    flex-shrink: 1;
-    width: 100%;
-    margin: 0.5em;
-    border: getCssVar('border-color');
-    border-radius: 0.75em;
-    background: getCssVar('bg-color');
-    box-shadow: getCssVar('box-shadow');
-  }
-
-  .wl-header {
-    display: flex;
-    padding: 0 4px;
-    overflow: hidden;
-    border-bottom: 2px dashed getCssVar('border-color');
-    border-top-left-radius: 0.75em;
-    border-top-right-radius: 0.75em;
-  }
-
-  .wl-header label {
-    min-width: 40px;
-    padding: 0.75em 0.5em;
-    color: getCssVar('text-primary-color');
-    font-size: 0.75em;
-    text-align: center;
-  }
-
-  .wl-header input {
-    flex: 1;
-    width: 0;
-    padding: 0.5em;
-    background: rgba(0, 0, 0, 0);
-    font-size: 0.625em;
-    resize: none;
-  }
-
-  .wl-header-item {
-    display: flex;
-    flex: 1;
-  }
-
-  .wl-header-1 .wl-header-item {
-    width: 100%;
-  }
-
-  .wl-header-2 .wl-header-item {
-    width: 50%;
-  }
-
-  .wl-header-3 .wl-header-item {
-    width: 33.33%;
-  }
-
-  .wl-editor {
-    position: relative;
-    width: calc(100% - 1em);
-    min-height: 8.75em;
-    margin: 0.75em 0.5em;
-    border-radius: 0.5em;
-    background: rgba(0, 0, 0, 0);
-    font-size: 0.875em;
-    resize: vertical;
-  }
-
-  .wl-editor,
-  .wl-input {
-    max-width: 100%;
-    transition: all 0.25s ease;
-    border: none;
-    outline: none;
-    color: getCssVar('text-primary-color');
-  }
-
-  .wl-editor:focus,
-  .wl-input:focus {
-    background: getCssVar('fill-color');
-  }
-
-  .wl-preview {
-    padding: 0 0.5em 0.5em;
-  }
-
-  .wl-preview h4 {
-    margin: 0.25em;
-    font-size: 0.9375em;
-    font-weight: bold;
-  }
-
-  .wl-preview .wl-content {
-    min-height: 1.25em;
-    padding: 0.25em;
-    word-break: break-word;
-    hyphens: auto;
-  }
-
-  .wl-preview .wl-content > *:first-child {
-    margin-top: 0;
-  }
-
-  .wl-preview .wl-content > *:last-child {
-    margin-bottom: 0;
-  }
-
-  .wl-footer {
-    display: flex;
-    position: relative;
-    flex-wrap: wrap;
-    margin: 0.5em 0.75em;
-  }
-
-  .wl-actions {
-    display: flex;
-    flex: 2;
-    align-items: center;
-  }
-
-  .wl-action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5em;
-    height: 1.5em;
-    margin: 2px;
-    padding: 0;
-    border: none;
-    background: rgba(0, 0, 0, 0);
-    color: getCssVar('primary-color');
-    font-size: 16px;
-    cursor: pointer;
-  }
-
-  .wl-action:hover {
-    color: getCssVar('primary-color');
-  }
-
-  .wl-action.active {
-    color: getCssVar('primary-color');
-  }
-
-  #wl-image-upload {
-    display: none;
-  }
-
-  #wl-image-upload:focus + label {
-    color: getCssVar('text-primary-color');
-  }
-
-  #wl-image-upload:focus-visible + label {
-    outline: -webkit-focus-ring-color auto 1px;
-  }
-
-  .wl-info {
-    display: flex;
-    flex: 3;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  .wl-info .wl-text-number {
-    color: getCssVar('info-color');
-    font-size: 0.75em;
-  }
-
-  .wl-info .wl-text-number .illegal {
-    color: red;
-  }
-
-  .wl-info button {
-    margin-inline-start: 0.75em;
-  }
-
-  .wl-info button svg {
-    display: block;
-    margin: 0 auto;
-    line-height: 18px;
-  }
-
-  .wl-emoji-popup {
-    visibility: hidden;
-    position: absolute;
-    z-index: 10;
-    top: 100%;
-    max-width: 526px;
-    transform: scale(0.9, 0.9);
-    transform-origin: 0 0;
-    transition:
-      transform 0.2s ease-out,
-      opacity 0.2s ease-out;
-    border: getCssVar('border-color');
-    border-radius: 6px;
-    opacity: 0;
-    background: getCssVar('bg-color');
-    box-shadow: getCssVar('box-shadow');
-    inset-inline-start: 1.25em;
-  }
-
-  .wl-emoji-popup.display {
-    visibility: visible;
-    transform: none;
-    opacity: 1;
-  }
-
-  .wl-emoji-popup button {
-    display: inline-block;
-    width: 2em;
-    margin: 0.125em;
-    padding: 0;
-    border-width: 0;
-    background: rgba(0, 0, 0, 0);
-    font-size: inherit;
-    line-height: 2;
-    text-align: center;
-    vertical-align: middle;
-    cursor: pointer;
-  }
-
-  .wl-emoji-popup button:hover {
-    background: getCssVar('info-color');
-  }
-
-  .wl-emoji-popup .wl-emoji {
-    display: inline-block;
-    max-width: 1.5em;
-    max-height: 1.5em;
-    vertical-align: middle;
-  }
-
-  .wl-emoji-popup .wl-tab-wrapper {
-    max-height: 145px;
-    padding: 0.5em;
-    overflow-y: auto;
-  }
-
-  .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-track-piece:vertical {
-    -webkit-border-radius: 6px;
-    border-radius: 6px;
-    background: rgba(0, 0, 0, 0.1);
-  }
-
-  .wl-emoji-popup .wl-tab-wrapper::-webkit-scrollbar-thumb:vertical {
-    width: 6px;
-    -webkit-border-radius: 6px;
-    border-radius: 6px;
-    background: getCssVar('primary-color');
-  }
-
-  .wl-emoji-popup .wl-tabs {
-    position: relative;
-    padding: 0 6px;
-    overflow-x: auto;
-    white-space: nowrap;
-  }
-
-  .wl-emoji-popup .wl-tabs::before {
-    content: ' ';
-    position: absolute;
-    z-index: 2;
-    top: 0;
-    right: 0;
-    left: 0;
-    height: 1px;
-    background: getCssVar('border-color');
-  }
-
-  .wl-emoji-popup .wl-tabs::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-
-  .wl-emoji-popup .wl-tabs::-webkit-scrollbar-track-piece:horizontal {
-    -webkit-border-radius: 6px;
-    border-radius: 6px;
-    background: rgba(0, 0, 0, 0.1);
-  }
-
-  .wl-emoji-popup .wl-tabs::-webkit-scrollbar-thumb:horizontal {
-    height: 6px;
-    -webkit-border-radius: 6px;
-    border-radius: 6px;
-    background: getCssVar('primary-color');
-  }
-
-  .wl-emoji-popup .wl-tab {
-    position: relative;
-    margin: 0;
-    padding: 0 0.5em;
-  }
-
-  .wl-emoji-popup .wl-tab.active {
-    z-index: 3;
-    border: 1px solid getCssVar('border-color');
-    border-top-width: 0;
-    border-bottom-right-radius: 6px;
-    border-bottom-left-radius: 6px;
-    background: getCssVar('bg-color');
-  }
-
-  .wl-gif-popup {
-    visibility: hidden;
-    position: absolute;
-    z-index: 10;
-    top: 100%;
-    width: calc(100% - 3em);
-    padding: 0.75em 0.75em 0.25em;
-    transform: scale(0.9, 0.9);
-    transform-origin: 0 0;
-    transition:
-      transform 0.2s ease-out,
-      opacity 0.2s ease-out;
-    border: getCssVar('border-color');
-    border-radius: 6px;
-    opacity: 0;
-    box-shadow: getCssVar('box-shadow');
-    inset-inline-start: 1.25em;
-  }
-
-  .wl-gif-popup.display {
-    visibility: visible;
-    transform: none;
-    opacity: 1;
-  }
-
-  .wl-gif-popup input {
-    box-sizing: border-box;
-    width: 100%;
-    margin-bottom: 10px;
-    padding: 3px 5px;
-    border: getCssVar('border-color');
-  }
-
-  .wl-gif-popup img {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    border-width: 2px;
-    border-style: solid;
-    border-color: #fff;
-    cursor: pointer;
-  }
-
-  .wl-gif-popup img:hover {
-    border-radius: 2px;
-    border-color: getCssVar('primary-color');
-  }
-
-  .wl-gallery {
-    display: flex;
-    max-height: 80vh;
-    overflow-y: auto;
-  }
-
-  .wl-gallery-column {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    height: max-content;
-  }
-
-  .wl-cards .wl-user {
-    --avatar-size: 40px;
-
-    position: relative;
-    margin-inline-end: 0.75em;
-  }
-
-  .wl-cards .wl-user img {
-    width: var(--avatar-size);
-    height: var(--avatar-size);
-    border-radius: getCssVar('border-radius-base');
-    box-shadow: getCssVar('box-shadow');
-  }
-
-  .wl-cards .wl-user .verified-icon {
-    position: absolute;
-    top: calc(var(--avatar-size) * 3 / 4);
-    inset-inline-start: calc(var(--avatar-size) * 3 / 4);
-    border-radius: 50%;
-    background: getCssVar('bg-color');
-    box-shadow: getCssVar('box-shadow');
-  }
-
-  .wl-card-item {
-    display: flex;
-    position: relative;
-    padding: 0.5em;
-  }
-
-  .wl-card-item .wl-card-item {
-    padding-inline-end: 0;
-  }
-
-  .wl-card {
-    flex: 1;
-    width: 0;
-    padding-bottom: 0.5em;
-    border-bottom: 1px dashed getCssVar('border-color');
-  }
-
-  .wl-card:first-child {
-    margin-inline-start: 1em;
-  }
-
-  .wl-card-item:last-child > .wl-card {
-    border-bottom: none;
-  }
-
-  .wl-card .wl-nick svg {
-    position: relative;
-    bottom: -0.125em;
-    line-height: 1;
-  }
-
-  .wl-card .wl-head {
-    overflow: hidden;
-    line-height: 1.5;
-  }
-
-  .wl-card .wl-head .wl-nick {
-    display: inline-block;
-    position: relative;
-    margin-inline-end: 0.5em;
-    font-size: 0.875em;
-    font-weight: bold;
-    line-height: 1;
-    text-decoration: none;
-  }
-
-  .wl-card span.wl-nick {
-    color: getCssVar('text-primary-color');
-  }
-
-  .wl-card .wl-badge {
-    display: inline-block;
-    margin-inline-end: 1em;
-    padding: 0 0.3em;
-    border: 1px solid getCssVar('primary-color');
-    border-radius: 4px;
-    color: getCssVar('primary-color');
-    font-size: getCssVar('font-size-base');
-  }
-
-  .wl-card .wl-time {
-    margin-inline-end: 0.875em;
-    color: getCssVar('info-color');
-    font-size: 0.75em;
-  }
-
-  .wl-card .wl-meta {
-    position: relative;
-    line-height: 1;
-  }
-
-  .wl-card .wl-meta > span {
-    display: inline-block;
-    margin-inline-end: 0.25em;
-    padding: 2px 4px;
-    border-radius: 0.2em;
-    background: getCssVar('theme-color');
-    color: getCssVar('primary-color');
-    font-size: getCssVar('font-size-base');
-    line-height: 1.5;
-  }
-
-  .wl-card .wl-meta > span:empty {
-    display: none;
-  }
-
-  .wl-card .wl-comment-actions {
-    float: right;
-    line-height: 1;
-  }
-
-  [dir='rtl'] .wl-card .wl-comment-actions {
-    float: left;
-  }
-
-  .wl-card .wl-delete,
-  .wl-card .wl-like,
-  .wl-card .wl-reply,
-  .wl-card .wl-edit {
-    display: inline-flex;
-    align-items: center;
-    transition: color 0.2s ease;
-    border: none;
-    background: rgba(0, 0, 0, 0);
-    color: getCssVar('text-primary-color');
-    line-height: 1;
-    cursor: pointer;
-  }
-
-  .wl-card .wl-delete:hover,
-  .wl-card .wl-like:hover,
-  .wl-card .wl-reply:hover,
-  .wl-card .wl-edit:hover {
-    color: getCssVar('primary-color');
-  }
-
-  .wl-card .wl-delete.active,
-  .wl-card .wl-like.active,
-  .wl-card .wl-reply.active,
-  .wl-card .wl-edit.active {
-    color: getCssVar('primary-color');
-  }
-
-  .wl-card .wl-content {
-    position: relative;
-    margin-bottom: 0.75em;
-    padding-top: 0.625em;
-    font-size: 0.875em;
-    line-height: 2;
-    word-wrap: break-word;
-  }
-
-  .wl-card .wl-content.expand {
-    max-height: 8em;
-    overflow: hidden;
-    cursor: pointer;
-  }
-
-  .wl-card .wl-content.expand::before {
-    content: '';
-    display: block;
-    position: absolute;
-    z-index: 999;
-    top: 0;
-    bottom: 3.15em;
-    width: 100%;
-    background: linear-gradient(180deg, #000, rgba(255, 255, 255, 0.9));
-    inset-inline-start: 0;
-  }
-
-  .wl-card .wl-content.expand::after {
-    content: attr(data-expand);
-    display: block;
-    position: absolute;
-    z-index: 999;
-    bottom: 0;
-    width: 100%;
-    height: 3.15em;
-    background: rgba(255, 255, 255, 0.9);
-    color: #828586;
-    line-height: 3.15em;
-    text-align: center;
-    inset-inline-start: 0;
-  }
-
-  .wl-card .wl-content > *:first-child {
-    margin-top: 0;
-  }
-
-  .wl-card .wl-content > *:last-child {
-    margin-bottom: 0;
-  }
-
-  .wl-card .wl-admin-actions {
-    margin: 8px 0;
-    font-size: 12px;
-    text-align: right;
-  }
-
-  .wl-card .wl-comment-status {
-    margin: 0 8px;
-  }
-
-  .wl-card .wl-comment-status .wl-btn {
-    border-radius: 0;
-  }
-
-  .wl-card .wl-comment-status .wl-btn:first-child {
-    border-inline-end: 0;
-    border-radius: 0.5em 0 0 0.5em;
-  }
-
-  .wl-card .wl-comment-status .wl-btn:last-child {
-    border-inline-start: 0;
-    border-radius: 0 0.5em 0.5em 0;
-  }
-
-  .wl-card .wl-quote {
-    border-inline-start: 1px dashed rgba(237, 237, 237, 0.5);
-  }
-
-  .wl-card .wl-quote .wl-user {
-    --avatar-size: 40px;
-  }
-
-  .wl-close-icon {
-    color: getCssVar('border-color');
-  }
-
-  .wl-content .vemoji,
-  .wl-content .wl-emoji {
-    display: inline-block;
-    height: 1.25em;
-    margin: -0.125em 0.25em;
-    vertical-align: baseline;
-  }
-
-  .wl-content .wl-tex {
-    background: getCssVar('fill-color');
-    color: getCssVar('info-color');
-  }
-
-  .wl-content span.wl-tex {
-    display: inline-block;
-    margin-inline-end: 0.25em;
-    padding: 2px 4px;
-    border-radius: 0.2em;
-    font-size: getCssVar('font-size-base');
-    line-height: 1.5;
-  }
-
-  .wl-content p.wl-tex {
-    text-align: center;
-  }
-
-  .wl-content .katex-display {
-    padding-top: 0.2em;
-    padding-bottom: 0.2em;
-    overflow: auto hidden;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .wl-content .katex-display::-webkit-scrollbar {
-    height: 3px;
-  }
-
-  .wl-content .katex-error {
-    color: red;
-  }
-
-  .wl-count {
-    flex: 1;
-    font-size: 1.25em;
-    font-weight: bold;
-  }
-
-  .wl-empty {
-    padding: 1.25em;
-    overflow: auto;
-    color: getCssVar('text-primary-color');
-    text-align: center;
-  }
-
-  .wl-operation {
-    text-align: center;
-  }
-
-  .wl-operation button {
-    margin: 1em 0;
-  }
-
-  .wl-power {
-    padding: 0.5em 0;
-    color: getCssVar('info-color');
-    font-size: getCssVar(font-size-base);
-    text-align: end;
-  }
-
-  .wl-meta-head {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    padding: 0.375em;
-  }
-
-  .wl-sort {
-    margin: 0;
-    list-style-type: none;
-  }
-
-  .wl-sort li {
-    display: inline-block;
-    color: getCssVar('info-color');
-    font-size: 0.75em;
-    cursor: pointer;
-  }
-
-  .wl-sort li.active {
-    color: getCssVar('primary-color');
-  }
-
-  .wl-sort li + li {
-    margin-inline-start: 1em;
-  }
-
-  .wl-reaction {
-    margin-bottom: 1.75em;
-    overflow: auto hidden;
-    text-align: center;
-  }
-
-  .wl-reaction img {
-    width: 100%;
-    height: 100%;
-    transition: all 250ms ease-in-out;
-  }
-
-  .wl-reaction-title {
-    margin: 16px auto;
-    font-size: 18px;
-    font-weight: bold;
-  }
-
-  .wl-reaction-list {
-    display: flex;
-    flex-direction: row;
-    gap: 16px;
-    justify-content: center;
-    margin: 0;
-    padding: 8px;
-    list-style-type: none;
-  }
-
-  [data-waline] .wl-reaction-list {
-    margin-inline-start: 0;
-  }
-
-  .wl-reaction-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  .wl-reaction-item:hover img,
-  .wl-reaction-item.active img {
-    transform: scale(1.15);
-  }
-
-  .wl-reaction-img {
-    position: relative;
-    width: 42px;
-    height: 42px;
-  }
-
-  .wl-reaction-loading {
-    position: absolute;
-    top: -4px;
-    inset-inline-end: -5px;
-    width: 18px;
-    height: 18px;
-    color: getCssVar('primary-color');
-  }
-
-  .wl-reaction-votes {
-    position: absolute;
-    top: -9px;
-    min-width: 1em;
-    padding: 2px;
-    border: 1px solid getCssVar('primary-color');
-    border-radius: 1em;
-    background: getCssVar('bg-color');
-    color: getCssVar('primary-color');
-    font-size: 0.75em;
-    font-weight: 700;
-    line-height: 1;
-    inset-inline-end: -9px;
-  }
-
-  .wl-reaction-item.active .wl-reaction-votes {
-    background: getCssVar('primary-color');
-    color: getCssVar('bg-color');
-  }
-
-  .wl-reaction-text {
-    font-size: 0.875em;
-  }
-
-  .wl-reaction-item.active .wl-reaction-text {
-    color: getCssVar('primary-color');
-  }
-
-  .wl-content pre,
-  .wl-content pre[class*='language-'] {
-    margin: 0.75rem 0;
-    padding: 1rem 1.25rem;
-    overflow: auto;
-    border-radius: 6px;
-    background: getCssVar('reverse-color');
-    line-height: 1.4;
-  }
-
-  .wl-content pre code,
-  .wl-content pre[class*='language-'] code {
-    padding: 0;
-    border-radius: 0;
-    background: rgba(0, 0, 0, 0) !important;
-    color: #bbb;
-    direction: ltr;
-  }
-
-  .wl-content code[class*='language-'],
-  .wl-content pre[class*='language-'] {
-    background: none;
-    color: #ccc;
-    font-size: 1em;
-    text-align: left;
-    word-wrap: normal;
-    word-break: normal;
-    white-space: pre;
-    word-spacing: normal;
-    hyphens: none;
-    tab-size: 4;
-  }
-
-  .wl-content pre[class*='language-'] {
-    overflow: auto;
-  }
-
-  .wl-content :not(pre) > code[class*='language-'],
-  .wl-content pre[class*='language-'] {
-    background: #2d2d2d;
-  }
-
-  .wl-content :not(pre) > code[class*='language-'] {
-    padding: 0.1em;
-    border-radius: 0.3em;
-    white-space: normal;
-  }
-
-  .wl-content .token.comment,
-  .wl-content .token.block-comment,
-  .wl-content .token.prolog,
-  .wl-content .token.doctype,
-  .wl-content .token.cdata {
-    color: #999;
-  }
-
-  .wl-content .token.punctuation {
-    color: #ccc;
-  }
-
-  .wl-content .token.tag,
-  .wl-content .token.attr-name,
-  .wl-content .token.namespace,
-  .wl-content .token.deleted {
-    color: #e2777a;
-  }
-
-  .wl-content .token.function-name {
-    color: #6196cc;
-  }
-
-  .wl-content .token.boolean,
-  .wl-content .token.number,
-  .wl-content .token.function {
-    color: #f08d49;
-  }
-
-  .wl-content .token.property,
-  .wl-content .token.class-name,
-  .wl-content .token.constant,
-  .wl-content .token.symbol {
-    color: #f8c555;
-  }
-
-  .wl-content .token.selector,
-  .wl-content .token.important,
-  .wl-content .token.atrule,
-  .wl-content .token.keyword,
-  .wl-content .token.builtin {
-    color: #cc99cd;
-  }
-
-  .wl-content .token.string,
-  .wl-content .token.char,
-  .wl-content .token.attr-value,
-  .wl-content .token.regex,
-  .wl-content .token.variable {
-    color: #7ec699;
-  }
-
-  .wl-content .token.operator,
-  .wl-content .token.entity,
-  .wl-content .token.url {
-    color: #67cdcc;
-  }
-
-  .wl-content .token.important,
-  .wl-content .token.bold {
-    font-weight: bold;
-  }
-
-  .wl-content .token.italic {
-    font-style: italic;
-  }
-
-  .wl-content .token.entity {
-    cursor: help;
-  }
-
-  .wl-content .token.inserted {
-    color: green;
-  }
-
-  .wl-recent-item p {
-    display: inline;
-  }
-
-  .wl-user-list {
-    padding: 0;
-    list-style: none;
-  }
-
-  .wl-user-list a,
-  .wl-user-list a:hover,
-  .wl-user-list a:visited {
-    color: getCssVar('text-primary-color');
-    text-decoration: none;
-  }
-
-  .wl-user-list .wl-user-avatar {
-    display: inline-block;
-    position: relative;
-    margin-inline-end: 10px;
-    overflow: hidden;
-    border-radius: 4px;
-    line-height: 0;
-  }
-
-  .wl-user-list .wl-user-avatar > img {
-    width: 48px;
-    height: 48px;
-  }
-
-  .wl-user-list .wl-user-badge {
-    position: absolute;
-    bottom: 0;
-    min-width: 0.7em;
-    height: 1.5em;
-    padding: 0 0.4em;
-    border-radius: 4px;
-    background: getCssVar('info-color');
-    color: getCssVar('info-color');
-    font-size: 10px;
-    font-weight: bold;
-    line-height: 1.5em;
-    text-align: center;
-    inset-inline-end: 0;
-  }
-
-  .wl-user-list .wl-user-item {
-    margin: 10px 0;
-  }
-
-  .wl-user-list .wl-user-item:nth-child(1) .wl-user-badge {
-    background: #fa3939;
-    color: getCssVar('color-white');
-    font-weight: bold;
-  }
-
-  .wl-user-list .wl-user-item:nth-child(2) .wl-user-badge {
-    background: #fb811c;
-    color: getCssVar('color-white');
-    font-weight: bold;
-  }
-
-  .wl-user-list .wl-user-item:nth-child(3) .wl-user-badge {
-    background: #feb207;
-    color: getCssVar('color-white');
-  }
-
-  .wl-user-list .wl-user-meta {
-    display: inline-block;
-    vertical-align: top;
-  }
-
-  .wl-user-list .wl-badge {
-    display: inline-block;
-    margin-inline-start: 0.5em;
-    padding: 0 0.3em;
-    border: 1px solid getCssVar('primary-color');
-    border-radius: 4px;
-    color: getCssVar('primary-color');
-    font-size: getCssVar(font-size-base);
-    vertical-align: text-top;
-  }
-
-  .wl-user-wall {
-    padding: 0;
-    list-style: none;
-  }
-
-  .wl-user-wall .wl-user-badge,
-  .wl-user-wall .wl-user-meta {
-    display: none;
-  }
-
-  .wl-user-wall .wl-user-item {
-    display: inline-block;
-    position: relative;
-    transition: transform ease-in-out 0.2s;
-  }
-
-  .wl-user-wall .wl-user-item::before,
-  .wl-user-wall .wl-user-item::after {
-    position: absolute;
-    z-index: 10;
-    bottom: 100%;
-    left: 50%;
-    transform: translate(-50%, 4px);
-    transform-origin: top;
-    transition: all 0.18s ease-out 0.18s;
-    opacity: 0;
-    pointer-events: none;
-  }
-
-  .wl-user-wall .wl-user-item::before {
-    content: '';
-    width: 0;
-    height: 0;
-    border: 5px solid rgba(0, 0, 0, 0);
-    border-top-color: rgba(16, 16, 16, 0.95);
-  }
-
-  .wl-user-wall .wl-user-item::after {
-    content: attr(aria-label);
-    margin-bottom: 10px;
-    padding: 0.5em 1em;
-    border-radius: 2px;
-    background: rgba(16, 16, 16, 0.95);
-    color: #fff;
-    font-size: 12px;
-    white-space: nowrap;
-  }
-
-  .wl-user-wall .wl-user-item:hover {
-    transform: scale(1.1);
-  }
-
-  .wl-user-wall .wl-user-item:hover::before,
-  .wl-user-wall .wl-user-item:hover::after {
-    transform: translate(-50%, 0);
-    opacity: 1;
-    pointer-events: none;
-  }
-
-  .wl-user-wall .wl-user-item img {
-    width: 48px;
-    height: 48px;
-  }
-}