hexo-theme-gnix 8.0.0 → 10.0.0

package/source/css/twikoo.css

@@ -9,127 +9,7 @@
   }
 }
 
-.tk-avatar {
-  flex-shrink: 0;
-  height: 2.5rem;
-  width: 2.5rem;
-  overflow: hidden;
-  text-align: center;
-  border-radius: 5px;
-  margin-right: 1rem;
-}
-
-.tk-comment .tk-submit .tk-avatar,
-.tk-replies .tk-avatar {
-  height: 2rem;
-  width: 2rem;
-}
-
-.tk-avatar .tk-avatar-img {
-  height: 2.5rem;
-  color: var(--subtext0);
-}
-
-.tk-comment .tk-submit .tk-avatar .tk-avatar-img,
-.tk-replies .tk-avatar .tk-avatar-img {
-  height: 2rem;
-}
-
-.tk-avatar.tk-clickable {
-  cursor: pointer;
-  transition: opacity 0.2s ease-out;
-  &:hover {
-    opacity: 0.8;
-  }
-}
-
-.tk-meta-input {
-  display: flex;
-  margin-bottom: 0.5rem;
-}
-
-.tk-meta-input .el-input {
-  width: calc((100% - 1rem) / 3);
-  flex: 1;
-}
-
-.tk-meta-input .el-input + .el-input {
-  margin-left: 0.5rem;
-}
-
-.tk-meta-input .el-input .el-input-group__prepend {
-  padding: 0 1rem;
-}
-
-.tk-meta-input .el-input input:invalid {
-  border: 1px solid var(--red);
-  box-shadow: none;
-}
-
-@media screen and (max-width: 767px) {
-  .tk-meta-input {
-    flex-direction: column;
-  }
-
-  .tk-meta-input .el-input {
-    width: auto;
-  }
-
-  .tk-meta-input .el-input + .el-input {
-    margin-left: 0;
-    margin-top: 0.5rem;
-  }
-}
-
-.tk-submit {
-  display: flex;
-  flex-direction: column;
-  margin-top: 1rem;
-}
-
-.tk-col {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.tk-row.actions {
-  position: relative;
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-  margin-left: 3.5rem;
-  align-items: center;
-  justify-content: flex-end;
-}
-
-.tk-row-actions-start {
-  flex: 1;
-  display: flex;
-  align-items: center;
-}
-
-.tk-submit-action-icon {
-  align-self: center;
-  display: inline-block;
-  width: 1.25em;
-  line-height: 0;
-  margin-right: 10px;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: opacity 0.15s ease-out;
-}
-
-.tk-submit-action-icon.__markdown {
-  color: var(--surface0);
-}
-
-.tk-error-message {
-  word-break: break-all;
-  color: var(--red);
-  font-size: 0.75em;
-  flex-shrink: 1;
-}
-
+/* Element UI primitives used by Twikoo. Keep these before component overrides. */
 .el-textarea__inner {
   display: block;
   resize: vertical;
@@ -157,1331 +37,1425 @@
   }
 }
 
-.tk-input-image {
-  display: none;
+.el-button {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  background: var(--base);
+  border: 1px solid var(--surface0);
+  color: var(--subtext1);
+  text-align: center;
+  box-sizing: border-box;
+  outline: 0;
+  margin: 0;
+  transition:
+    color 0.15s ease-out,
+    background-color 0.15s ease-out,
+    border-color 0.15s ease-out;
+  font-weight: 500;
+  user-select: none;
+  padding: 12px 20px;
+  font-size: 14px;
+  border-radius: 4px;
+  &:focus-visible {
+    border-color: var(--blue);
+    box-shadow: 0 0 0 2px hsl(from var(--blue) h s l / 0.25);
+  }
 }
 
-.tk-input {
-  flex: 1;
+.el-button + .el-button {
+  margin-left: 10px;
 }
 
-.tk-input .el-textarea__inner {
-  background-position: right bottom;
-  background-repeat: no-repeat;
+.el-button.is-disabled,
+.el-button.is-disabled:focus,
+.el-button.is-disabled:hover {
+  color: var(--subtext1);
+  cursor: not-allowed;
+  background-image: none;
+  background-color: var(--mantle);
+  border-color: var(--surface0);
 }
 
-.tk-turnstile-container {
-  position: absolute;
-  right: 0;
-  bottom: -75px;
-  z-index: 1;
+.el-button--primary {
+  color: var(--base);
+  background-color: var(--blue);
+  border-color: var(--blue);
 }
 
-.tk-turnstile {
-  display: flex;
-  flex-direction: column;
+.el-button--mini,
+.el-button--small {
+  font-size: 12px;
+  border-radius: 3px;
 }
 
-.tk-preview-container {
-  margin-left: 3rem;
-  margin-bottom: 1rem;
-  padding: 5px 15px;
-  border: 1px solid var(--surface0);
-  border-radius: 4px;
-  word-break: break-word;
+.el-button--small,
+.el-button--small.is-round {
+  padding: 9px 15px;
 }
 
-.tk-fade-in {
-  animation: tkFadeIn 0.3s;
+.el-input__inner,
+.el-textarea__inner {
+  background-image: none;
 }
 
-@keyframes tkFadeIn {
-  0% {
-    opacity: 0;
-  }
+.el-textarea {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+  font-size: 14px;
+}
 
-  to {
-    opacity: 1;
+.el-textarea .el-input__count {
+  color: var(--subtext0);
+  background: var(--base);
+  position: absolute;
+  font-size: 12px;
+  bottom: 5px;
+  right: 10px;
+}
+
+.el-textarea.is-disabled .el-textarea__inner {
+  background-color: var(--mantle);
+  border-color: var(--surface0);
+  color: var(--subtext0);
+  cursor: not-allowed;
+  &::placeholder {
+    color: var(--subtext0);
   }
 }
 
-.tk-action {
-  display: flex;
-  align-items: center;
+.el-textarea.is-exceed .el-textarea__inner {
+  border-color: var(--red);
 }
 
-.tk-action-link {
-  margin-left: 0.5rem;
-  color: var(--blue);
-  text-decoration: none;
-  display: flex;
-  align-items: center;
+.el-textarea.is-exceed .el-input__count {
+  color: var(--red);
 }
 
-.tk-action-icon {
+.el-input {
+  position: relative;
+  font-size: 14px;
   display: inline-block;
-  height: 1em;
-  width: 1em;
-  line-height: 0;
-  color: var(--blue);
+  width: 100%;
 }
 
-.tk-action-link .tk-action-icon-solid,
-.tk-action-link.tk-liked .tk-action-icon,
-.tk-action-link:hover .tk-action-icon {
-  display: none;
+.el-input::-webkit-scrollbar {
+  z-index: 11;
+  width: 6px;
 }
 
-.tk-action-link.tk-liked .tk-action-icon-solid,
-.tk-action-link:hover .tk-action-icon-solid {
-  display: block;
-}
-
-.tk-action-count {
-  margin-left: 0.25rem;
-  font-size: 0.75rem;
-  height: 1.5rem;
-  line-height: 1.5rem;
-}
-
-.tk-main {
-  flex: 1;
-  width: 0;
-}
-
-.tk-meta {
-  display: flex;
-  align-items: baseline;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-
-.tk-row {
-  flex: 1;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
+.el-input::-webkit-scrollbar:horizontal {
+  height: 6px;
 }
 
-.tk-nick-link {
-  color: inherit;
-  text-decoration: none;
-  transition: color 0.15s ease-out;
+.el-input::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  width: 6px;
+  background: var(--overlay0);
 }
 
-.tk-replies .tk-nick-link {
-  font-size: 0.9em;
+.el-input::-webkit-scrollbar-corner {
+  background: var(--base);
 }
 
-.tk-nick-link:hover {
-  color: var(--blue);
+.el-input::-webkit-scrollbar-track {
+  background: var(--base);
 }
 
-.tk-actions {
-  display: none;
-  margin-left: 1em;
+.el-input::-webkit-scrollbar-track-piece {
+  background: var(--base);
+  width: 6px;
 }
 
-.tk-comment:hover .tk-actions {
-  display: inline;
+.el-input .el-input__clear {
+  color: var(--subtext0);
+  font-size: 14px;
+  cursor: pointer;
+  transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
-.tk-extras {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  align-items: center;
-  margin: 4px 0;
+.el-input .el-input__clear:hover {
+  color: var(--text);
 }
 
-.tk-extra {
-  display: flex;
+.el-input .el-input__count {
+  height: 100%;
+  display: inline-flex;
   align-items: center;
-  gap: 6px;
-  padding: 4px;
-  color: var(--subtext1);
-  font-size: 0.75rem;
-  border-radius: 3px;
-  transition: background-color 0.15s ease-out;
+  color: var(--subtext0);
+  font-size: 12px;
 }
 
-.tk-extra:hover {
-  background: hsl(from var(--text) h s l / 0.06);
+.el-input-group__append .el-button,
+.el-input-group__append .el-input,
+.el-input-group__prepend .el-button,
+.el-input-group__prepend .el-input,
+.el-input__inner {
+  font-size: inherit;
 }
 
-.tk-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 0.8rem;
-  height: 0.8rem;
-  flex-shrink: 0;
+.el-input .el-input__count .el-input__count-inner {
+  background: var(--base);
+  line-height: initial;
+  display: inline-block;
+  padding: 0 5px;
 }
 
-.tk-tag {
+.el-input__inner {
+  background-color: var(--base);
+  border-radius: 4px;
+  border: 1px solid hsl(from var(--surface1) h s l / 0.31);
+  box-sizing: border-box;
+  color: var(--text);
   display: inline-block;
-  padding: 0 0.5em;
-  font-size: 0.75em;
-  background-color: hsl(from var(--blue) h s l / 0.1);
-  border-radius: 3px;
+  height: 40px;
+  line-height: 40px;
+  outline: 0;
+  padding: 0 15px;
+  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+  width: 100%;
 }
 
-.tk-tag-green {
-  background-color: hsl(from var(--green) h s l / 0.1);
-  border: 1px solid hsl(from var(--green) h s l / 0.8);
-  border-radius: 3px;
-  color: var(--green);
+.el-input__prefix,
+.el-input__suffix {
+  position: absolute;
+  top: 0;
+  transition: all 0.3s;
+  text-align: center;
+  height: 100%;
+  color: var(--subtext0);
 }
 
-.tk-time {
+.el-input__inner::placeholder {
   color: var(--subtext0);
 }
 
-.tk-comment {
-  margin-top: 1rem;
-  padding-bottom: 1rem;
-  display: flex;
-  flex-direction: row;
-  word-break: break-word;
+.el-input.is-active .el-input__inner {
+  border-color: var(--blue);
+  outline: 0;
 }
 
-.tk-comment:last-child {
-  padding-bottom: 0;
+.el-input__suffix {
+  right: 5px;
+  transition: all 0.3s;
+  pointer-events: none;
 }
 
-.tk-content {
-  margin-top: 0.5rem;
-  overflow: hidden;
-  max-height: 500px;
-  position: relative;
-  line-height: 1.75;
+.el-input__suffix-inner {
+  pointer-events: all;
 }
 
-.tk-content-expand {
-  max-height: none;
+.el-input__prefix {
+  left: 5px;
+  transition: all 0.3s;
 }
 
-.tk-replies .tk-content {
-  font-size: 0.9em;
+.el-input__icon {
+  height: 100%;
+  width: 25px;
+  text-align: center;
+  transition: all 0.3s;
+  line-height: 40px;
 }
 
-.tk-comment .vemoji {
-  max-height: 2em;
+.el-input__icon:after {
+  content: "";
+  height: 100%;
+  width: 0;
+  display: inline-block;
   vertical-align: middle;
 }
 
-.tk-replies {
-  max-height: 200px;
-  overflow: hidden;
-  position: relative;
-  margin-top: 0.75rem;
-  padding-left: 1rem;
-  border-left: 2px solid var(--surface0);
+.el-input__validateIcon {
+  pointer-events: none;
 }
 
-.tk-replies .tk-comment {
-  margin-top: 0.75rem;
-  padding-bottom: 0;
+.el-input.is-disabled .el-input__inner {
+  background-color: var(--mantle);
+  border-color: var(--surface0);
+  color: var(--subtext0);
+  cursor: not-allowed;
 }
 
-.tk-replies .tk-comment:first-child {
-  margin-top: 0;
+.el-input.is-disabled .el-input__inner::placeholder {
+  color: var(--subtext1);
 }
 
-.tk-replies-expand {
-  max-height: none;
-  overflow: unset;
+.el-input.is-disabled .el-input__icon {
+  cursor: not-allowed;
 }
 
-.tk-ruser {
-  color: var(--blue);
-  text-decoration: none;
-  transition: opacity 0.15s ease-out;
+.el-input.is-exceed .el-input__inner,
+.el-input.is-exceed .el-input__suffix .el-input__count {
+  color: var(--red);
 }
 
-.tk-lightbox {
-  display: block;
-  position: fixed;
-  background-color: hsl(from var(--crust) h s l / 0.5);
-  inset: 0;
-  z-index: 999;
-  cursor: zoom-out;
+.el-input--suffix .el-input__inner {
+  padding-right: 30px;
 }
 
-.tk-lightbox-image {
-  min-width: 100px;
-  min-height: 30px;
-  width: auto;
-  height: auto;
-  max-width: 95%;
-  max-height: 95%;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: linear-gradient(90deg, var(--surface0) 50%, var(--surface1) 0);
-  background-size: 40px 100%;
+.el-input--prefix .el-input__inner {
+  padding-left: 30px;
 }
 
-.tk-comments-title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  margin-bottom: 1rem;
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
+.el-input--medium {
+  font-size: 14px;
 }
 
-.tk-comments-count.__hidden {
-  visibility: hidden;
+.el-input--medium .el-input__inner {
+  height: 36px;
+  line-height: 36px;
 }
 
-.tk-comments-container {
-  min-height: 10rem;
-  display: flex;
-  flex-direction: column;
+.el-input--medium .el-input__icon {
+  line-height: 36px;
 }
 
-.tk-comments-no {
-  flex: 1;
-  text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.el-input--small {
+  font-size: 13px;
 }
 
-.tk-comments-error {
-  font-size: 0.75em;
-  color: var(--red);
+.el-input--small .el-input__inner {
+  height: 32px;
+  line-height: 32px;
 }
 
-.tk-icon.__comments {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: sub;
-  margin-left: 0.5em;
-  height: 0.75em;
-  width: 0.75em;
-  line-height: 0;
-  cursor: pointer;
-  color: var(--blue);
-  transition: opacity 0.15s ease-out;
+.el-input--small .el-input__icon {
+  line-height: 32px;
 }
 
-.twikoo div.code-toolbar {
-  position: relative;
-  border-radius: 0.3em;
-  > .toolbar {
-    position: absolute;
-    right: 4px;
-    top: 4px;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    display: flex;
-    > .toolbar-item {
-      margin-left: 0.3em;
-      > a,
-      > button,
-      > span {
-        padding: 2px 4px;
-        border-radius: 0.3em;
-      }
-
-      > button {
-        border: 1px solid hsl(from var(--surface1) h s l / 0.31);
-        &:hover {
-          cursor: pointer;
-        }
-      }
-    }
-  }
+.el-input--mini {
+  font-size: 12px;
 }
 
-.tk-footer {
-  width: 100%;
-  text-align: end;
-  font-size: 0.75em;
-  color: var(--subtext0);
-  margin-top: 1em;
+.el-input--mini .el-input__inner {
+  height: 28px;
+  line-height: 28px;
 }
 
-.tk-pagination,
-.tk-pagination-pagers {
-  display: flex;
+.el-input--mini .el-input__icon {
+  line-height: 28px;
 }
 
-.tk-pagination {
+.el-input-group {
+  line-height: normal;
+  display: inline-table;
   width: 100%;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
+  border-collapse: separate;
+  border-spacing: 0;
 }
 
-.tk-pagination-options {
-  display: flex;
-  align-items: center;
+.el-input-group > .el-input__inner {
+  vertical-align: middle;
+  display: table-cell;
 }
 
-.tk-pagination-pager {
-  width: 2em;
-  height: 2em;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
+.el-input-group__append,
+.el-input-group__prepend {
+  display: table-cell;
+  position: relative;
   border-radius: 4px;
-  transition: background-color 0.15s ease-out;
+  padding: 0 20px;
+  width: 1px;
+  white-space: nowrap;
+  color: var(--subtext1);
+  background-clip: padding-box;
+  background-color: hsl(from var(--surface1) h s l / 0.4);
+  border: 1px solid hsl(from var(--surface1) h s l / 0.6);
 }
 
-.tk-pagination-pager.__current {
-  background-color: var(--blue);
-  color: var(--base);
-  pointer-events: none;
+.el-input-group--prepend .el-input__inner,
+.el-input-group__append {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
-.tk-pagination .el-input {
-  width: 50px;
+.el-input-group--append .el-input__inner,
+.el-input-group__prepend {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
-.tk-pagination .el-input .el-input__inner {
-  padding: 0;
-  height: 28px;
-  text-align: center;
-  appearance: textfield;
+.el-input-group__append:focus,
+.el-input-group__prepend:focus {
+  outline: 0;
 }
 
-.tk-pagination .el-input .el-input__inner::-webkit-inner-spin-button,
-.tk-pagination .el-input .el-input__inner::-webkit-outer-spin-button {
-  appearance: none;
-  margin: 0;
+.el-input-group__append .el-button,
+.el-input-group__append .el-select,
+.el-input-group__prepend .el-button,
+.el-input-group__prepend .el-select {
+  display: inline-block;
+  margin: -10px -20px;
 }
 
-.tk-admin-comment {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+.el-input-group__append button.el-button,
+.el-input-group__append div.el-select .el-input__inner,
+.el-input-group__append div.el-select:hover .el-input__inner,
+.el-input-group__prepend button.el-button,
+.el-input-group__prepend div.el-select .el-input__inner,
+.el-input-group__prepend div.el-select:hover .el-input__inner {
+  border-color: transparent;
+  background-color: transparent;
+  color: inherit;
+  border-top: 0;
+  border-bottom: 0;
 }
 
-.tk-admin-comment a {
-  color: currentColor;
-  text-decoration: underline;
+.el-input-group__prepend {
+  border-right: 0;
 }
 
-.tk-admin-warn {
-  margin-bottom: 1em;
+.el-input-group__append {
+  border-left: 0;
 }
 
-.tk-admin-comment-filter {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
+.el-input-group--append .el-select .el-input.is-focus .el-input__inner,
+.el-input-group--prepend .el-select .el-input.is-focus .el-input__inner {
+  border-color: transparent;
 }
 
-.tk-admin-comment-filter-keyword {
-  flex: 1;
+.el-loading-parent--relative {
+  position: relative !important;
 }
 
-.tk-admin-comment-filter-type {
-  height: 32px;
-  width: 50px;
-  margin: 0 0.5em;
-  padding-left: 0.5em;
-  font-size: 1em;
-  color: var(--text);
-  background: var(--surface0);
-  border-radius: 4px;
-  position: relative;
-  appearance: none;
+.el-loading-parent--hidden {
+  overflow: hidden !important;
 }
 
-.tk-admin-comment-list {
-  margin-top: 1em;
+.el-loading-mask {
+  position: absolute;
+  z-index: 2000;
+  background-color: hsl(from var(--base) h s l / 0.9);
+  margin: 0;
+  inset: 0;
+  transition: opacity 0.3s;
 }
 
-.tk-admin-comment-list,
-.tk-admin-comment-item {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: stretch;
+.el-loading-mask.is-fullscreen {
+  position: fixed;
 }
 
-.tk-admin-comment-meta {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  margin-bottom: 0.5em;
-}
+.el-loading-spinner {
+  top: 50%;
+  margin-top: -21px;
+  width: 100%;
+  text-align: center;
+  position: absolute;
+  .el-loading-text {
+    color: var(--blue);
+    margin: 3px 0;
+    font-size: 14px;
+  }
 
-.tk-admin-comment .tk-avatar {
-  margin-right: 0.5em;
-}
+  .circular {
+    height: 42px;
+    width: 42px;
+    animation: loading-rotate 2s linear infinite;
+  }
 
-.tk-admin-comment .tk-content {
-  max-height: none;
-}
+  .path {
+    animation: loading-dash 1.5s ease-in-out infinite;
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: 0;
+    stroke-width: 2;
+    stroke: var(--blue);
+    stroke-linecap: round;
+  }
 
-.tk-admin-actions {
-  display: flex;
-  margin-bottom: 1em;
-  border-bottom: 1px solid hsl(from var(--surface0) h s l / 0.5);
-  button {
-    font-size: 1em;
-    padding: 0.25em 1em;
-    margin: 0.5em 0;
+  i {
+    color: var(--blue);
   }
 }
 
-.tk-admin-config-groups {
-  overflow-y: auto;
-  padding-right: 0.5em;
+.el-loading-mask.is-fullscreen .el-loading-spinner {
+  margin-top: -25px;
 }
 
-.tk-admin-config-group-title {
-  margin-top: 1em;
-  font-size: 1.25rem;
-  font-weight: 700;
+.el-loading-mask.is-fullscreen .el-loading-spinner .circular {
+  height: 50px;
+  width: 50px;
 }
 
-.tk-admin-config-groups .tk-admin-config-group,
-.tk-admin-config-groups .tk-admin-config-group-title {
-  background: transparent;
-}
-
-.tk-admin-config-item {
-  display: grid;
-  align-items: center;
-  grid-template-columns: 30% 70%;
-  margin-top: 1em;
+.el-loading-fade-enter,
+.el-loading-fade-leave-active {
+  opacity: 0;
 }
 
-.tk-admin-config-title {
-  text-align: right;
-  margin-right: 1em;
+/* Twikoo comment form, thread, pagination, and admin views. */
+.tk-avatar {
+  flex-shrink: 0;
+  height: 2.5rem;
+  width: 2.5rem;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  text-align: center;
+  border-radius: 5px;
+  margin-right: 1rem;
 }
 
-.tk-admin-config-desc {
-  margin-top: 0.5em;
-  font-size: 0.75em;
-  overflow-wrap: break-word;
+.tk-comment .tk-submit .tk-avatar,
+.tk-replies .tk-avatar {
+  height: 2rem;
+  width: 2rem;
 }
 
-.tk-admin-config-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-top: 1em;
+.tk-avatar .tk-avatar-img {
+  height: 2.5rem;
+  color: var(--subtext0);
 }
 
-.tk-admin-config-message {
-  margin-top: 0.5em;
-  text-align: center;
+.tk-comment .tk-submit .tk-avatar .tk-avatar-img,
+.tk-replies .tk-avatar .tk-avatar-img {
+  height: 2rem;
 }
 
-.tk-admin-config-email-test-desc {
-  margin: 1em 0;
+.tk-avatar.tk-clickable {
+  cursor: pointer;
+  transition: opacity 0.2s ease-out;
+  &:hover {
+    opacity: 0.8;
+  }
 }
 
-.tk-admin-import {
+.tk-meta-input {
   display: flex;
-  flex-direction: column;
+  margin-bottom: 0.5rem;
 }
 
-.tk-admin-import-label {
-  margin-top: 1em;
-  font-size: 1.25rem;
-  font-weight: 700;
+.tk-meta-input .el-input {
+  width: calc((100% - 1rem) / 3);
+  flex: 1;
 }
 
-.tk-admin-import select,
-.tk-admin-import input,
-.tk-admin-import .el-button,
-.tk-admin-import .el-textarea {
-  margin-top: 1em;
+.tk-meta-input .el-input + .el-input {
+  margin-left: 0.5rem;
 }
 
-.tk-admin-container {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  pointer-events: none;
+.tk-meta-input .el-input .el-input-group__prepend {
+  padding: 0 1rem;
 }
 
-.tk-admin {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  pointer-events: all;
-  background-color: var(--mantle);
-  visibility: hidden;
+.tk-meta-input .el-input input:invalid {
+  border: 1px solid var(--red);
+  box-shadow: none;
 }
 
-.tk-admin::-webkit-scrollbar {
-  width: 5px;
-  background-color: transparent;
-}
+@media screen and (max-width: 767px) {
+  .tk-meta-input {
+    flex-direction: column;
+  }
 
-.tk-admin::-webkit-scrollbar-track {
-  background-color: transparent;
+  .tk-meta-input .el-input {
+    width: auto;
+  }
+
+  .tk-meta-input .el-input + .el-input {
+    margin-left: 0;
+    margin-top: 0.5rem;
+  }
 }
 
-.tk-admin::-webkit-scrollbar-thumb {
-  background-color: var(--overlay0);
+.tk-submit {
+  display: flex;
+  flex-direction: column;
+  margin-top: 1rem;
 }
 
-.tk-admin.__show {
-  left: 0;
-  visibility: visible;
+.tk-col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-.tk-admin-close {
-  position: sticky;
-  float: right;
-  display: block;
-  top: 0;
-  right: 0;
-  width: 1rem;
-  height: 1rem;
-  padding: 1rem;
-  box-sizing: content-box;
-  color: var(--base);
-  cursor: pointer;
-  transition: opacity 0.15s ease-out;
+.tk-row.actions {
+  position: relative;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  margin-left: 3.5rem;
+  align-items: center;
+  justify-content: flex-end;
 }
 
-.tk-login,
-.tk-regist {
+.tk-row-actions-start {
+  flex: 1;
   display: flex;
-  flex-direction: column;
   align-items: center;
-  width: 100%;
-  padding: 0 2rem;
 }
 
-.tk-login-title {
-  font-size: 1.25rem;
-  text-align: center;
-  margin-top: 10rem;
+.tk-submit-action-icon {
+  align-self: center;
+  display: inline-block;
+  width: 1.25em;
+  line-height: 0;
+  margin-right: 10px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: opacity 0.15s ease-out;
 }
 
-.tk-password,
-.tk-login-msg {
-  width: 80%;
-  text-align: center;
-  margin-top: 1rem;
+.tk-submit-action-icon.__markdown {
+  color: var(--surface0);
 }
 
-.tk-password .el-input__inner {
-  min-width: 100px;
+.tk-error-message {
+  word-break: break-all;
+  color: var(--red);
+  font-size: 0.75em;
+  flex-shrink: 1;
 }
 
-.tk-login-msg a {
-  color: var(--base);
-  margin-left: 1em;
-  text-decoration: underline;
+.tk-input-image {
+  display: none;
 }
 
-.tk-regist-button {
-  margin-top: 1rem;
+.tk-input {
+  flex: 1;
 }
 
-.tk-panel {
-  padding: 2rem;
+.tk-input .el-textarea__inner {
+  background-position: right bottom;
+  background-repeat: no-repeat;
 }
 
-.tk-panel-title {
-  font-size: 1.5rem;
+.tk-turnstile-container {
+  position: absolute;
+  right: 0;
+  bottom: -75px;
+  z-index: 1;
+}
+
+.tk-turnstile {
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
+  flex-direction: column;
 }
 
-.tk-panel-logout {
-  color: var(--red);
-  font-size: 1rem;
-  text-decoration: underline;
+.tk-preview-container {
+  margin-left: 3rem;
+  margin-bottom: 1rem;
+  padding: 5px 15px;
+  border: 1px solid var(--surface0);
+  border-radius: 4px;
+  word-break: break-word;
 }
 
-.tk-panel .tk-tabs {
-  display: flex;
-  margin-bottom: 1em;
-  border-bottom: 1px solid var(--surface0);
+.tk-fade-in {
+  animation: tkFadeIn 0.3s;
 }
 
-.tk-panel .tk-tab {
-  color: var(--subtext0);
-  cursor: pointer;
-  line-height: 2em;
-  margin-right: 2em;
-  margin-bottom: -2px;
-  transition: color 0.15s ease-out;
-  &:hover {
-    color: var(--text);
+@keyframes tkFadeIn {
+  0% {
+    opacity: 0;
   }
-}
 
-.tk-panel .tk-tab.__active {
-  color: var(--blue);
+  to {
+    opacity: 1;
+  }
 }
 
-.twikoo {
-  position: relative;
+.tk-action {
+  display: flex;
+  align-items: center;
 }
 
-.twikoo svg {
-  fill: var(--subtext1);
+.tk-action-link {
+  margin-left: 0.5rem;
+  color: var(--blue);
+  text-decoration: none;
+  display: flex;
+  align-items: center;
 }
 
-.tk-expand {
-  cursor: pointer;
-  padding: 0.75em;
-  text-align: center;
-  &:hover,
-  &:active {
-    background-color: var(--surfacevar(--surface0) 0);
-  }
+.tk-action-icon {
+  display: inline-block;
+  height: 1em;
+  width: 1em;
+  line-height: 0;
+  color: var(--blue);
 }
 
-.tk-content img {
-  max-width: 300px;
-  max-height: 300px;
-  vertical-align: middle;
-  cursor: zoom-in;
+.tk-action-link .tk-action-icon-solid,
+.tk-action-link.tk-liked .tk-action-icon,
+.tk-action-link:hover .tk-action-icon {
+  display: none;
 }
 
-.tk-owo-emotion,
-.twikoo .OwO-item img {
-  width: 3em;
-  height: auto;
+.tk-action-link.tk-liked .tk-action-icon-solid,
+.tk-action-link:hover .tk-action-icon-solid {
+  display: block;
 }
 
-.twikoo .el-input__inner,
-.twikoo .el-textarea__inner {
-  color: currentColor;
-  background-color: transparent;
-  border-color: hsl(from var(--surface1) h s l / 0.31);
+.tk-action-count {
+  margin-left: 0.25rem;
+  font-size: 0.75rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+}
 
-  &:focus {
-    border-color: var(--blue);
-  }
+.tk-main {
+  flex: 1;
+  width: 0;
+}
 
-  &:focus-visible {
-    box-shadow: 0 0 0 2px hsl(from var(--blue) h s l / 0.25);
-  }
+.tk-meta {
+  display: flex;
+  align-items: baseline;
+  gap: 0.5rem;
+  flex-wrap: wrap;
 }
 
-.twikoo .el-button:not(.el-button--primary):not(.el-button--text) {
-  color: currentColor;
-  background-color: hsl(from var(--surface1) h s l / 0.063);
-  border-color: hsl(from var(--surface1) h s l / 0.31);
+.tk-row {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
-.el-button:not(.el-button--primary):not(.el-button--text):active,
-.el-button:not(.el-button--primary):not(.el-button--text):focus,
-.el-button:not(.el-button--primary):not(.el-button--text):hover {
+.tk-nick-link {
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.15s ease-out;
+}
+
+.tk-replies .tk-nick-link {
+  font-size: 0.9em;
+}
+
+.tk-nick-link:hover {
   color: var(--blue);
-  background-color: hsl(from var(--blue) h s l / 0.063);
-  border-color: hsl(from var(--blue) h s l / 0.5);
 }
 
-.el-button--primary.is-disabled,
-.el-button--primary.is-disabled:active,
-.el-button--primary.is-disabled:focus,
-.el-button--primary.is-disabled:hover {
-  color: hsl(from var(--base) h s l / 0.63);
-  background-color: hsl(from var(--blue) h s l / 0.5);
-  border: 1px solid var(--surface0);
+.tk-actions {
+  display: none;
+  margin-left: 1em;
 }
 
-.twikoo .el-loading-mask {
-  background-color: transparent;
-  backdrop-filter: opacity(20%);
+.tk-comment:hover .tk-actions {
+  display: inline;
 }
 
-.twikoo .el-textarea .el-input__count {
-  color: currentColor;
-  background: transparent;
+.tk-extras {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+  margin: 4px 0;
 }
 
-.tk-admin-warn {
-  padding: 1rem 1.5rem;
-  background-color: var(--base);
-  border-left: 0.5rem solid var(--peach);
-  color: var(--yellow);
-  align-self: stretch;
+.tk-extra {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px;
+  color: var(--subtext1);
+  font-size: 0.75rem;
+  border-radius: 3px;
+  transition: background-color 0.15s ease-out;
 }
 
-/*!
- * OwO v1.0.2
- * Source: https://github.com/DIYgod/OwO/blob/master/dist/OwO.min.css
- * Author: DIYgod
- * Modified by: iMaeGoo
- * Released under the MIT License.
- */
-.OwO {
-  user-select: none;
-  .OwO-logo {
-    width: 1.125em;
-    display: flex;
-  }
+.tk-extra:hover {
+  background: hsl(from var(--text) h s l / 0.06);
+}
 
-  &.OwO-open .OwO-body {
-    display: block;
-  }
+.tk-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 0.8rem;
+  height: 0.8rem;
+  flex-shrink: 0;
 }
 
-.OwO-body {
-  display: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  max-width: 500px;
-  color: var(--text);
-  background-color: var(--base);
-  border: 1px solid var(--surface0);
-  top: 2em;
-  border-radius: var(--radius);
-  z-index: 200;
+.tk-tag {
+  display: inline-block;
+  padding: 0 0.5em;
+  font-size: 0.75em;
+  background-color: hsl(from var(--blue) h s l / 0.1);
+  border-radius: 3px;
+}
 
-  .OwO-items {
-    padding: 10px 0 10px 10px;
-    margin: 0;
-    overflow: auto;
-    font-size: 0;
-  }
+.tk-tag-green {
+  background-color: hsl(from var(--green) h s l / 0.1);
+  border: 1px solid hsl(from var(--green) h s l / 0.8);
+  border-radius: 3px;
+  color: var(--green);
+}
 
-  .OwO-item {
-    list-style-type: none;
-    padding: 5px 10px;
-    display: inline-block;
-    font-size: 16px;
-    cursor: pointer;
-    text-align: center;
-    &:hover {
-      background-color: var(--surface0);
-    }
+.tk-time {
+  color: var(--subtext0);
+}
 
-    &:focus-visible {
-      background-color: var(--surface0);
-      outline: none;
-    }
-  }
+.tk-comment {
+  margin-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  flex-direction: row;
+  word-break: break-word;
+}
 
-  .OwO-items-image {
-    .OwO-item {
-      img {
-        max-width: 100%;
-      }
-    }
-  }
+.tk-comment:last-child {
+  padding-bottom: 0;
+}
 
-  .OwO-bar {
-    width: 100%;
-    border-top: 1px solid var(--surface0);
-    .OwO-packages {
-      margin: 0;
-      padding: 0;
-      font-size: 0;
-      li {
-        list-style-type: none;
-        display: inline-block;
-        line-height: 30px;
-        font-size: 14px;
-        padding: 0 10px;
-        cursor: pointer;
-        margin-right: 3px;
-        &:nth-child(1) {
-          border-radius: 0 0 0 3px;
-        }
-      }
+.tk-content {
+  margin-top: 0.5rem;
+  overflow: hidden;
+  max-height: 500px;
+  position: relative;
+  line-height: 1.75;
+}
 
-      .OwO-package-active,
-      .OwO-packages:hover {
-        color: var(--lavender);
-      }
-    }
-  }
+.tk-content-expand {
+  max-height: none;
+}
+
+.tk-replies .tk-content {
+  font-size: 0.9em;
+}
+
+.tk-comment .vemoji {
+  max-height: 2em;
+  vertical-align: middle;
+}
+
+.tk-replies {
+  max-height: 200px;
+  overflow: hidden;
+  position: relative;
+  margin-top: 0.65rem;
+  padding-left: 1rem;
+  border-left: 1px dashed var(--surface0);
+}
+
+.tk-replies .tk-comment {
+  margin-top: 0.75rem;
+  padding-bottom: 0;
+}
+
+.tk-replies .tk-comment:first-child {
+  margin-top: 0;
+}
+
+.tk-replies-expand {
+  max-height: none;
+  overflow: unset;
+}
+
+.tk-ruser {
+  color: var(--blue);
+  text-decoration: none;
+  transition: opacity 0.15s ease-out;
+}
+
+.tk-lightbox {
+  display: block;
+  position: fixed;
+  background-color: hsl(from var(--crust) h s l / 0.5);
+  inset: 0;
+  z-index: 999;
+  cursor: zoom-out;
+}
+
+.tk-lightbox-image {
+  min-width: 100px;
+  min-height: 30px;
+  width: auto;
+  height: auto;
+  max-width: 95%;
+  max-height: 95%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: linear-gradient(90deg, var(--surface0) 50%, var(--surface1) 0);
+  background-size: 40px 100%;
 }
 
-@media screen and (max-width: 600px) {
-  #twikoo .OwO-items > .OwO-item {
-    width: 16%;
-  }
+.tk-comments-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
 }
 
-@media screen and (max-width: 460px) {
-  #twikoo .OwO-items > .OwO-item {
-    width: 20%;
-  }
+.tk-comments-count.__hidden {
+  visibility: hidden;
 }
 
-@media screen and (max-width: 400px) {
-  #twikoo .OwO-items > .OwO-item {
-    width: 25%;
-  }
+.tk-comments-container {
+  min-height: 10rem;
+  display: flex;
+  flex-direction: column;
 }
 
-@media screen and (max-width: 330px) {
-  #twikoo .OwO-items > .OwO-item {
-    width: 33%;
-  }
+.tk-comments-no {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.el-button {
-  display: inline-block;
-  line-height: 1;
-  white-space: nowrap;
+.tk-comments-error {
+  font-size: 0.75em;
+  color: var(--red);
+}
+
+.tk-icon.__comments {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: sub;
+  margin-left: 0.5em;
+  height: 0.75em;
+  width: 0.75em;
+  line-height: 0;
   cursor: pointer;
-  background: var(--base);
-  border: 1px solid var(--surface0);
-  color: var(--subtext1);
-  text-align: center;
-  box-sizing: border-box;
-  outline: 0;
-  margin: 0;
-  transition:
-    color 0.15s ease-out,
-    background-color 0.15s ease-out,
-    border-color 0.15s ease-out;
-  font-weight: 500;
-  user-select: none;
-  padding: 12px 20px;
-  font-size: 14px;
-  border-radius: 4px;
-  &:focus-visible {
-    border-color: var(--blue);
-    box-shadow: 0 0 0 2px hsl(from var(--blue) h s l / 0.25);
-  }
+  color: var(--blue);
+  transition: opacity 0.15s ease-out;
 }
 
-.el-button + .el-button {
-  margin-left: 10px;
+.tk-footer {
+  width: 100%;
+  text-align: end;
+  font-size: 0.75em;
+  color: var(--subtext0);
+  margin-top: 1em;
 }
 
-.el-button.is-disabled,
-.el-button.is-disabled:focus,
-.el-button.is-disabled:hover {
-  color: var(--subtext1);
-  cursor: not-allowed;
-  background-image: none;
-  background-color: var(--mantle);
-  border-color: var(--surface0);
+.tk-pagination,
+.tk-pagination-pagers {
+  display: flex;
 }
 
-.el-button--primary {
-  color: var(--base);
-  background-color: var(--blue);
-  border-color: var(--blue);
+.tk-pagination {
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
-.el-button--mini,
-.el-button--small {
-  font-size: 12px;
-  border-radius: 3px;
+.tk-pagination-options {
+  display: flex;
+  align-items: center;
 }
 
-.el-button--small,
-.el-button--small.is-round {
-  padding: 9px 15px;
+.tk-pagination-pager {
+  width: 2em;
+  height: 2em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background-color 0.15s ease-out;
 }
 
-.el-input__inner,
-.el-textarea__inner {
-  background-image: none;
+.tk-pagination-pager.__current {
+  background-color: var(--blue);
+  color: var(--base);
+  pointer-events: none;
 }
 
-.el-textarea {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  vertical-align: bottom;
-  font-size: 14px;
+.tk-pagination .el-input {
+  width: 50px;
 }
 
-.el-textarea .el-input__count {
-  color: var(--subtext0);
-  background: var(--base);
-  position: absolute;
-  font-size: 12px;
-  bottom: 5px;
-  right: 10px;
+.tk-pagination .el-input .el-input__inner {
+  padding: 0;
+  height: 28px;
+  text-align: center;
+  appearance: textfield;
 }
 
-.el-textarea.is-disabled .el-textarea__inner {
-  background-color: var(--mantle);
-  border-color: var(--surface0);
-  color: var(--subtext0);
-  cursor: not-allowed;
-  &::placeholder {
-    color: var(--subtext0);
-  }
+.tk-pagination .el-input .el-input__inner::-webkit-inner-spin-button,
+.tk-pagination .el-input .el-input__inner::-webkit-outer-spin-button {
+  appearance: none;
+  margin: 0;
 }
 
-.el-textarea.is-exceed .el-textarea__inner {
-  border-color: var(--red);
+.tk-admin-comment {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.el-textarea.is-exceed .el-input__count {
-  color: var(--red);
+.tk-admin-comment a {
+  color: currentColor;
+  text-decoration: underline;
 }
 
-.el-input {
-  position: relative;
-  font-size: 14px;
-  display: inline-block;
+.tk-admin-warn {
+  margin-bottom: 1em;
+}
+
+.tk-admin-comment-filter {
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
 }
 
-.el-input::-webkit-scrollbar {
-  z-index: 11;
-  width: 6px;
+.tk-admin-comment-filter-keyword {
+  flex: 1;
 }
 
-.el-input::-webkit-scrollbar:horizontal {
-  height: 6px;
+.tk-admin-comment-filter-type {
+  height: 32px;
+  width: 50px;
+  margin: 0 0.5em;
+  padding-left: 0.5em;
+  font-size: 1em;
+  color: var(--text);
+  background: var(--surface0);
+  border-radius: 4px;
+  position: relative;
+  appearance: none;
 }
 
-.el-input::-webkit-scrollbar-thumb {
-  border-radius: 5px;
-  width: 6px;
-  background: var(--overlay0);
+.tk-admin-comment-list {
+  margin-top: 1em;
 }
 
-.el-input::-webkit-scrollbar-corner {
-  background: var(--base);
+.tk-admin-comment-list,
+.tk-admin-comment-item {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
 }
 
-.el-input::-webkit-scrollbar-track {
-  background: var(--base);
+.tk-admin-comment-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 0.5em;
 }
 
-.el-input::-webkit-scrollbar-track-piece {
-  background: var(--base);
-  width: 6px;
+.tk-admin-comment .tk-avatar {
+  margin-right: 0.5em;
 }
 
-.el-input .el-input__clear {
-  color: var(--subtext0);
-  font-size: 14px;
-  cursor: pointer;
-  transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+.tk-admin-comment .tk-content {
+  max-height: none;
 }
 
-.el-input .el-input__clear:hover {
-  color: var(--text);
+.tk-admin-actions {
+  display: flex;
+  margin-bottom: 1em;
+  border-bottom: 1px solid hsl(from var(--surface0) h s l / 0.5);
+  button {
+    font-size: 1em;
+    padding: 0.25em 1em;
+    margin: 0.5em 0;
+  }
 }
 
-.el-input .el-input__count {
-  height: 100%;
-  display: inline-flex;
-  align-items: center;
-  color: var(--subtext0);
-  font-size: 12px;
+.tk-admin-config-groups {
+  overflow-y: auto;
+  padding-right: 0.5em;
 }
 
-.el-input-group__append .el-button,
-.el-input-group__append .el-input,
-.el-input-group__prepend .el-button,
-.el-input-group__prepend .el-input,
-.el-input__inner {
-  font-size: inherit;
+.tk-admin-config-group-title {
+  margin-top: 1em;
+  font-size: 1.25rem;
+  font-weight: 700;
 }
 
-.el-input .el-input__count .el-input__count-inner {
-  background: var(--base);
-  line-height: initial;
-  display: inline-block;
-  padding: 0 5px;
+.tk-admin-config-groups .tk-admin-config-group,
+.tk-admin-config-groups .tk-admin-config-group-title {
+  background: transparent;
 }
 
-.el-input__inner {
-  background-color: var(--base);
-  border-radius: 4px;
-  border: 1px solid hsl(from var(--surface1) h s l / 0.31);
-  box-sizing: border-box;
-  color: var(--text);
-  display: inline-block;
-  height: 40px;
-  line-height: 40px;
-  outline: 0;
-  padding: 0 15px;
-  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-  width: 100%;
+.tk-admin-config-item {
+  display: grid;
+  align-items: center;
+  grid-template-columns: 30% 70%;
+  margin-top: 1em;
 }
 
-.el-input__prefix,
-.el-input__suffix {
-  position: absolute;
-  top: 0;
-  transition: all 0.3s;
-  text-align: center;
-  height: 100%;
-  color: var(--subtext0);
+.tk-admin-config-title {
+  text-align: right;
+  margin-right: 1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.el-input__inner::placeholder {
-  color: var(--subtext0);
+.tk-admin-config-desc {
+  margin-top: 0.5em;
+  font-size: 0.75em;
+  overflow-wrap: break-word;
 }
 
-.el-input.is-active .el-input__inner {
-  border-color: var(--blue);
-  outline: 0;
+.tk-admin-config-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1em;
 }
 
-.el-input__suffix {
-  right: 5px;
-  transition: all 0.3s;
-  pointer-events: none;
+.tk-admin-config-message {
+  margin-top: 0.5em;
+  text-align: center;
 }
 
-.el-input__suffix-inner {
-  pointer-events: all;
+.tk-admin-config-email-test-desc {
+  margin: 1em 0;
 }
 
-.el-input__prefix {
-  left: 5px;
-  transition: all 0.3s;
+.tk-admin-import {
+  display: flex;
+  flex-direction: column;
 }
 
-.el-input__icon {
-  height: 100%;
-  width: 25px;
-  text-align: center;
-  transition: all 0.3s;
-  line-height: 40px;
+.tk-admin-import-label {
+  margin-top: 1em;
+  font-size: 1.25rem;
+  font-weight: 700;
 }
 
-.el-input__icon:after {
-  content: "";
-  height: 100%;
-  width: 0;
-  display: inline-block;
-  vertical-align: middle;
+.tk-admin-import select,
+.tk-admin-import input,
+.tk-admin-import .el-button,
+.tk-admin-import .el-textarea {
+  margin-top: 1em;
 }
 
-.el-input__validateIcon {
+.tk-admin-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
   pointer-events: none;
 }
 
-.el-input.is-disabled .el-input__inner {
+.tk-admin {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  pointer-events: all;
   background-color: var(--mantle);
-  border-color: var(--surface0);
-  color: var(--subtext0);
-  cursor: not-allowed;
+  visibility: hidden;
 }
 
-.el-input.is-disabled .el-input__inner::placeholder {
-  color: var(--subtext1);
+.tk-admin::-webkit-scrollbar {
+  width: 5px;
+  background-color: transparent;
 }
 
-.el-input.is-disabled .el-input__icon {
-  cursor: not-allowed;
+.tk-admin::-webkit-scrollbar-track {
+  background-color: transparent;
 }
 
-.el-input.is-exceed .el-input__inner,
-.el-input.is-exceed .el-input__suffix .el-input__count {
-  color: var(--red);
+.tk-admin::-webkit-scrollbar-thumb {
+  background-color: var(--overlay0);
 }
 
-.el-input--suffix .el-input__inner {
-  padding-right: 30px;
+.tk-admin.__show {
+  left: 0;
+  visibility: visible;
 }
 
-.el-input--prefix .el-input__inner {
-  padding-left: 30px;
+.tk-admin-close {
+  position: sticky;
+  float: right;
+  display: block;
+  top: 0;
+  right: 0;
+  width: 1rem;
+  height: 1rem;
+  padding: 1rem;
+  box-sizing: content-box;
+  color: var(--base);
+  cursor: pointer;
+  transition: opacity 0.15s ease-out;
 }
 
-.el-input--medium {
-  font-size: 14px;
+.tk-login,
+.tk-regist {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding: 0 2rem;
 }
 
-.el-input--medium .el-input__inner {
-  height: 36px;
-  line-height: 36px;
+.tk-login-title {
+  font-size: 1.25rem;
+  text-align: center;
+  margin-top: 10rem;
 }
 
-.el-input--medium .el-input__icon {
-  line-height: 36px;
+.tk-password,
+.tk-login-msg {
+  width: 80%;
+  text-align: center;
+  margin-top: 1rem;
 }
 
-.el-input--small {
-  font-size: 13px;
+.tk-password .el-input__inner {
+  min-width: 100px;
 }
 
-.el-input--small .el-input__inner {
-  height: 32px;
-  line-height: 32px;
+.tk-login-msg a {
+  color: var(--base);
+  margin-left: 1em;
+  text-decoration: underline;
 }
 
-.el-input--small .el-input__icon {
-  line-height: 32px;
+.tk-regist-button {
+  margin-top: 1rem;
 }
 
-.el-input--mini {
-  font-size: 12px;
+.tk-panel {
+  padding: 2rem;
 }
 
-.el-input--mini .el-input__inner {
-  height: 28px;
-  line-height: 28px;
+.tk-panel-title {
+  font-size: 1.5rem;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
 }
 
-.el-input--mini .el-input__icon {
-  line-height: 28px;
+.tk-panel-logout {
+  color: var(--red);
+  font-size: 1rem;
+  text-decoration: underline;
 }
 
-.el-input-group {
-  line-height: normal;
-  display: inline-table;
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
+.tk-panel .tk-tabs {
+  display: flex;
+  margin-bottom: 1em;
+  border-bottom: 1px solid var(--surface0);
 }
 
-.el-input-group > .el-input__inner {
-  vertical-align: middle;
-  display: table-cell;
+.tk-panel .tk-tab {
+  color: var(--subtext0);
+  cursor: pointer;
+  line-height: 2em;
+  margin-right: 2em;
+  margin-bottom: -2px;
+  transition: color 0.15s ease-out;
+  &:hover {
+    color: var(--text);
+  }
 }
 
-.el-input-group__append,
-.el-input-group__prepend {
-  display: table-cell;
+.tk-panel .tk-tab.__active {
+  color: var(--blue);
+}
+
+.twikoo {
   position: relative;
-  border-radius: 4px;
-  padding: 0 20px;
-  width: 1px;
-  white-space: nowrap;
-  color: var(--subtext1);
-  background-clip: padding-box;
-  background-color: hsl(from var(--surface1) h s l / 0.4);
-  border: 1px solid hsl(from var(--surface1) h s l / 0.6);
 }
 
-.el-input-group--prepend .el-input__inner,
-.el-input-group__append {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+.twikoo svg {
+  fill: var(--subtext1);
 }
 
-.el-input-group--append .el-input__inner,
-.el-input-group__prepend {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+.tk-expand {
+  cursor: pointer;
+  padding: 0.75em;
+  text-align: center;
+  &:hover,
+  &:active {
+    background-color: var(--surface0);
+  }
 }
 
-.el-input-group__append:focus,
-.el-input-group__prepend:focus {
-  outline: 0;
+.tk-content img {
+  max-width: 300px;
+  max-height: 300px;
+  vertical-align: middle;
+  cursor: zoom-in;
 }
 
-.el-input-group__append .el-button,
-.el-input-group__append .el-select,
-.el-input-group__prepend .el-button,
-.el-input-group__prepend .el-select {
-  display: inline-block;
-  margin: -10px -20px;
+.tk-owo-emotion,
+.twikoo .OwO-item img {
+  width: 3em;
+  height: auto;
 }
 
-.el-input-group__append button.el-button,
-.el-input-group__append div.el-select .el-input__inner,
-.el-input-group__append div.el-select:hover .el-input__inner,
-.el-input-group__prepend button.el-button,
-.el-input-group__prepend div.el-select .el-input__inner,
-.el-input-group__prepend div.el-select:hover .el-input__inner {
-  border-color: transparent;
+/* Theme overrides that intentionally sit above the base Element UI styles. */
+.twikoo .el-input__inner,
+.twikoo .el-textarea__inner {
+  color: currentColor;
   background-color: transparent;
-  color: inherit;
-  border-top: 0;
-  border-bottom: 0;
+  border-color: hsl(from var(--surface1) h s l / 0.31);
+
+  &:focus {
+    border-color: var(--blue);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px hsl(from var(--blue) h s l / 0.25);
+  }
 }
 
-.el-input-group__prepend {
-  border-right: 0;
+.twikoo .el-button:not(.el-button--primary):not(.el-button--text) {
+  color: currentColor;
+  background-color: hsl(from var(--surface1) h s l / 0.063);
+  border-color: hsl(from var(--surface1) h s l / 0.31);
 }
 
-.el-input-group__append {
-  border-left: 0;
+.el-button:not(.el-button--primary):not(.el-button--text):active,
+.el-button:not(.el-button--primary):not(.el-button--text):focus,
+.el-button:not(.el-button--primary):not(.el-button--text):hover {
+  color: var(--blue);
+  background-color: hsl(from var(--blue) h s l / 0.063);
+  border-color: hsl(from var(--blue) h s l / 0.5);
 }
 
-.el-input-group--append .el-select .el-input.is-focus .el-input__inner,
-.el-input-group--prepend .el-select .el-input.is-focus .el-input__inner {
-  border-color: transparent;
+.el-button--primary.is-disabled,
+.el-button--primary.is-disabled:active,
+.el-button--primary.is-disabled:focus,
+.el-button--primary.is-disabled:hover {
+  color: hsl(from var(--base) h s l / 0.63);
+  background-color: hsl(from var(--blue) h s l / 0.5);
+  border: 1px solid var(--surface0);
 }
 
-.el-loading-parent--relative {
-  position: relative !important;
+.twikoo .el-loading-mask {
+  background-color: transparent;
+  backdrop-filter: opacity(20%);
 }
 
-.el-loading-parent--hidden {
-  overflow: hidden !important;
+.twikoo .el-textarea .el-input__count {
+  color: currentColor;
+  background: transparent;
 }
 
-.el-loading-mask {
-  position: absolute;
-  z-index: 2000;
-  background-color: hsl(from var(--base) h s l / 0.9);
-  margin: 0;
-  inset: 0;
-  transition: opacity 0.3s;
+.tk-admin-warn {
+  padding: 1rem 1.5rem;
+  background-color: var(--base);
+  border-left: 0.5rem solid var(--peach);
+  color: var(--yellow);
+  align-self: stretch;
 }
 
-.el-loading-mask.is-fullscreen {
-  position: fixed;
+/*!
+ * OwO v1.0.2
+ * Source: https://github.com/DIYgod/OwO/blob/master/dist/OwO.min.css
+ * Author: DIYgod
+ * Modified by: iMaeGoo
+ * Released under the MIT License.
+ */
+.OwO {
+  user-select: none;
+  .OwO-logo {
+    width: 1.125em;
+    display: flex;
+  }
 }
 
-.el-loading-spinner {
-  top: 50%;
-  margin-top: -21px;
-  width: 100%;
-  text-align: center;
+.OwO-body {
+  display: none;
   position: absolute;
-  .el-loading-text {
-    color: var(--blue);
-    margin: 3px 0;
-    font-size: 14px;
+  left: 0;
+  right: 0;
+  max-width: 500px;
+  color: var(--text);
+  background-color: var(--base);
+  border: 1px solid var(--surface0);
+  top: 2em;
+  border-radius: var(--radius);
+  z-index: 200;
+
+  .OwO-items {
+    padding: 10px 0 10px 10px;
+    margin: 0;
+    overflow: auto;
+    font-size: 0;
   }
 
-  .circular {
-    height: 42px;
-    width: 42px;
-    animation: loading-rotate 2s linear infinite;
+  .OwO-item {
+    list-style-type: none;
+    padding: 5px 10px;
+    display: inline-block;
+    font-size: 16px;
+    cursor: pointer;
+    text-align: center;
+    &:hover {
+      background-color: var(--surface0);
+    }
+
+    &:focus-visible {
+      background-color: var(--surface0);
+      outline: none;
+    }
   }
 
-  .path {
-    animation: loading-dash 1.5s ease-in-out infinite;
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: 0;
-    stroke-width: 2;
-    stroke: var(--blue);
-    stroke-linecap: round;
+  .OwO-items-image {
+    .OwO-item {
+      img {
+        max-width: 100%;
+      }
+    }
   }
 
-  i {
-    color: var(--blue);
+  .OwO-bar {
+    width: 100%;
+    border-top: 1px solid var(--surface0);
+    .OwO-packages {
+      margin: 0;
+      padding: 0;
+      font-size: 0;
+      li {
+        list-style-type: none;
+        display: inline-block;
+        line-height: 30px;
+        font-size: 14px;
+        padding: 0 10px;
+        cursor: pointer;
+        margin-right: 3px;
+        &:nth-child(1) {
+          border-radius: 0 0 0 3px;
+        }
+      }
+
+      .OwO-package-active,
+      .OwO-packages:hover {
+        color: var(--lavender);
+      }
+    }
   }
 }
 
-.el-loading-mask.is-fullscreen .el-loading-spinner {
-  margin-top: -25px;
+.OwO.OwO-open .OwO-body {
+  display: block;
 }
 
-.el-loading-mask.is-fullscreen .el-loading-spinner .circular {
-  height: 50px;
-  width: 50px;
+@media screen and (max-width: 600px) {
+  #twikoo .OwO-items > .OwO-item {
+    width: 16%;
+  }
 }
 
-.el-loading-fade-enter,
-.el-loading-fade-leave-active {
-  opacity: 0;
+@media screen and (max-width: 460px) {
+  #twikoo .OwO-items > .OwO-item {
+    width: 20%;
+  }
+}
+
+@media screen and (max-width: 400px) {
+  #twikoo .OwO-items > .OwO-item {
+    width: 25%;
+  }
+}
+
+@media screen and (max-width: 330px) {
+  #twikoo .OwO-items > .OwO-item {
+    width: 33%;
+  }
 }
 
 @keyframes loading-rotate {
@@ -1507,6 +1481,36 @@
   }
 }
 
+/* Prism toolbar styles need to come after generic anchor and button rules. */
+.twikoo div.code-toolbar {
+  position: relative;
+  border-radius: 0.3em;
+  > .toolbar {
+    position: absolute;
+    right: 4px;
+    top: 4px;
+    font-size: 0.8125rem;
+    font-weight: 500;
+    display: flex;
+    > .toolbar-item {
+      margin-left: 0.3em;
+      > a,
+      > button,
+      > span {
+        padding: 2px 4px;
+        border-radius: 0.3em;
+      }
+
+      > button {
+        border: 1px solid hsl(from var(--surface1) h s l / 0.31);
+        &:hover {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .tk-fade-in,
   .tk-expand,