55340540b5
* feat: support artalk comment system * chore: change url from testingcf to cdn prefix * refactor(comments): align artalk provider style and keep custom css overrides * fix: update Artalk CDN links to use the correct URL * refactor(comments): simplify Artalk implementation * fix(artalk): update script tag to use ESM for Artalk * fix(artalk): set locale to 'auto' for Artalk comments * refactor: move artalk style and script link to external.toml --------- Co-authored-by: Jimmy Cai <jimmy@cai.im>
81 lines
2.2 KiB
SCSS
81 lines
2.2 KiB
SCSS
@import "../../breakpoints";
|
|
@import "../../mixins";
|
|
|
|
.artalk-container {
|
|
@include card-style;
|
|
padding: 5px;
|
|
|
|
@include respond(md) {
|
|
padding: var(--card-padding);
|
|
}
|
|
}
|
|
|
|
.artalk {
|
|
--at-color-bg: var(--card-background);
|
|
--at-color-font: var(--card-text-color-main);
|
|
--at-color-sub: var(--card-text-color-secondary);
|
|
--at-color-main: var(--accent-color);
|
|
--at-color-border: var(--card-separator-color);
|
|
--at-border-radius: var(--card-border-radius);
|
|
--at-color-link: var(--accent-color);
|
|
}
|
|
|
|
.artalk a {
|
|
color: var(--at-color-link);
|
|
text-decoration: none;
|
|
transition: color 0.3s ease;
|
|
|
|
&:hover {
|
|
color: var(--accent-color-darker);
|
|
}
|
|
}
|
|
|
|
.artalk .atk-content a,
|
|
.artalk .atk-editor-plug-preview a {
|
|
color: var(--accent-color);
|
|
box-shadow: 0px -2px 0px rgba(var(--link-background-color), var(--link-background-opacity)) inset;
|
|
transition: all 0.3s ease;
|
|
|
|
&:hover {
|
|
color: var(--accent-color-darker);
|
|
box-shadow: 0px calc(-1rem * var(--article-line-height)) 0px rgba(var(--link-background-color), var(--link-background-opacity-hover)) inset;
|
|
}
|
|
}
|
|
|
|
[data-scheme="dark"] .artalk {
|
|
--at-color-main: var(--accent-color);
|
|
--at-color-link: var(--accent-color);
|
|
--at-color-bg: var(--card-background);
|
|
--at-color-bg-transl: rgba(66, 66, 66, 0.95);
|
|
--at-color-bg-grey: rgba(255, 255, 255, 0.08);
|
|
--at-color-bg-grey-transl: rgba(255, 255, 255, 0.06);
|
|
--at-color-bg-light: rgba(255, 255, 255, 0.08);
|
|
--at-color-border: var(--card-separator-color);
|
|
--at-color-font: var(--card-text-color-main);
|
|
--at-color-deep: var(--card-text-color-main);
|
|
--at-color-sub: var(--card-text-color-secondary);
|
|
--at-color-meta: var(--card-text-color-secondary);
|
|
--at-color-grey: var(--card-text-color-secondary);
|
|
--at-color-gradient: linear-gradient(
|
|
180deg,
|
|
transparent,
|
|
var(--card-background)
|
|
);
|
|
}
|
|
|
|
.artalk code {
|
|
font-family: var(--code-font-family);
|
|
}
|
|
|
|
.artalk .atk-avatar img {
|
|
border-radius: var(--card-border-radius);
|
|
}
|
|
|
|
[data-scheme="dark"] .artalk .atk-avatar img {
|
|
filter: brightness(0.75);
|
|
}
|
|
|
|
[data-scheme="dark"] .artalk .atk-send-btn {
|
|
color: var(--accent-color-text);
|
|
}
|