mirror of
https://github.com/reonokiy/blog.nokiy.net.git
synced 2025-06-14 18:56:46 +02:00
style: optimize giscus styling
This commit is contained in:
radishzzz
parent
035a4c755e
commit
056c8bad96
4 changed files with 173 additions and 16 deletions
91
public/vendors/giscus/theme-dark.css
vendored
91
public/vendors/giscus/theme-dark.css
vendored
|
|
@ -4,6 +4,20 @@
|
|||
*/
|
||||
|
||||
main {
|
||||
/* Custom Theme Colors */
|
||||
--secondary-color: oklch(77% 0.005 298);
|
||||
--secondary-color-25: oklch(77% 0.005 298 / 25%);
|
||||
--background-color: oklch(22% 0.005 298);
|
||||
|
||||
--color-fg-default: var(--secondary-color);
|
||||
--color-canvas-default: var(--background-color);
|
||||
--color-canvas-overlay: var(--background-color);
|
||||
--color-canvas-inset: var(--background-color);
|
||||
--color-canvas-subtle: var(--background-color);
|
||||
--color-accent-fg: oklch(70.7% 0.165 254.624);
|
||||
--color-accent-emphasis: oklch(70.7% 0.165 254.624);
|
||||
|
||||
/* Offical Theme Colors */
|
||||
--color-prettylights-syntax-comment: #8b949e;
|
||||
--color-prettylights-syntax-constant: #79c0ff;
|
||||
--color-prettylights-syntax-entity: #d2a8ff;
|
||||
|
|
@ -60,18 +74,18 @@
|
|||
--color-segmented-control-bg: rgb(110 118 129 / 10%);
|
||||
--color-segmented-control-button-bg: #0d1117;
|
||||
--color-segmented-control-button-selected-border: #6e7681;
|
||||
--color-fg-default: #e6edf3;
|
||||
/* --color-fg-default: var(--secondary-color); */
|
||||
--color-fg-muted: #7d8590;
|
||||
--color-fg-subtle: #6e7681;
|
||||
--color-canvas-default: #0d1117;
|
||||
--color-canvas-overlay: #161b22;
|
||||
--color-canvas-inset: #010409;
|
||||
--color-canvas-subtle: #161b22;
|
||||
/* --color-canvas-default: var(--background-color);
|
||||
--color-canvas-overlay: var(--background-color);
|
||||
--color-canvas-inset: var(--background-color);
|
||||
--color-canvas-subtle: var(--background-color); */
|
||||
--color-border-default: #30363d;
|
||||
--color-border-muted: #21262d;
|
||||
--color-neutral-muted: rgb(110 118 129 / 40%);
|
||||
--color-accent-fg: #2f81f7;
|
||||
--color-accent-emphasis: #1f6feb;
|
||||
/* --color-accent-fg: oklch(70.7% 0.165 254.624);
|
||||
--color-accent-emphasis: oklch(70.7% 0.165 254.624); */
|
||||
--color-accent-muted: rgb(56 139 253 / 40%);
|
||||
--color-accent-subtle: rgb(56 139 253 / 10%);
|
||||
--color-success-fg: #3fb950;
|
||||
|
|
@ -96,4 +110,67 @@ main .pagination-loader-container {
|
|||
|
||||
main .gsc-loading-image {
|
||||
background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
|
||||
}
|
||||
|
||||
/* Smooth Font */
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* All Border Color */
|
||||
*:not(.BtnGroup-item) {
|
||||
border-color: var(--secondary-color-25)!important;
|
||||
}
|
||||
|
||||
/* No Giscus Copyright and Avatar Line */
|
||||
.gsc-tl-line,
|
||||
.gsc-left-header em {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Comments Count Font No Underline and Small Size */
|
||||
h4.gsc-comments-count-separator,
|
||||
h4.gsc-replies-count {
|
||||
color: var(--secondary-color);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Oldest and Newest Buttons Style */
|
||||
.BtnGroup-item,
|
||||
.BtnGroup-item.BtnGroup-item--selected {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.BtnGroup-item.BtnGroup-item--selected {
|
||||
border-color: var(--secondary-color-25)!important;
|
||||
}
|
||||
.BtnGroup-item:not(.BtnGroup-item--selected):hover {
|
||||
border-color: var(--secondary-color-25)!important;
|
||||
}
|
||||
.BtnGroup-item button.btn:hover {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
/* Reply Time No Underline */
|
||||
.gsc-comment-author a:has(time),
|
||||
.gsc-reply-author a:has(time) {
|
||||
text-decoration: none;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Comments Count No Underline */
|
||||
.gsc-comments-count a {
|
||||
text-decoration: none!important;
|
||||
}
|
||||
|
||||
/* Social Reactions Icons */
|
||||
.gsc-social-reaction-summary-item.has-reacted {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.gsc-social-reaction-summary-item.has-reacted:hover {
|
||||
background-color: var(--background-color)!important;
|
||||
border-color: var(--color-accent-fg)!important;
|
||||
}
|
||||
.color-bg-info {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
93
public/vendors/giscus/theme-light.css
vendored
93
public/vendors/giscus/theme-light.css
vendored
|
|
@ -4,6 +4,20 @@
|
|||
*/
|
||||
|
||||
main {
|
||||
/* Custom Theme Colors */
|
||||
--secondary-color: oklch(40% 0.005 298);
|
||||
--secondary-color-25: oklch(40% 0.005 298 / 25%);
|
||||
--background-color: oklch(96% 0.005 298);
|
||||
|
||||
--color-fg-default: var(--secondary-color);
|
||||
--color-canvas-default: var(--background-color);
|
||||
--color-canvas-overlay: var(--background-color);
|
||||
--color-canvas-inset: var(--background-color);
|
||||
--color-canvas-subtle: var(--background-color);
|
||||
--color-accent-fg: oklch(48.8% 0.243 264.376);
|
||||
--color-accent-emphasis: oklch(48.8% 0.243 264.376);
|
||||
|
||||
/* Offical Theme Colors */
|
||||
--color-prettylights-syntax-comment: #6e7781;
|
||||
--color-prettylights-syntax-constant: #0550ae;
|
||||
--color-prettylights-syntax-entity: #8250df;
|
||||
|
|
@ -60,18 +74,18 @@
|
|||
--color-segmented-control-bg: #eaeef2;
|
||||
--color-segmented-control-button-bg: #fff;
|
||||
--color-segmented-control-button-selected-border: #8c959f;
|
||||
--color-fg-default: #1F2328;
|
||||
/* --color-fg-default: var(--secondary-color); */
|
||||
--color-fg-muted: #656d76;
|
||||
--color-fg-subtle: #6e7781;
|
||||
--color-canvas-default: #fff;
|
||||
--color-canvas-overlay: #fff;
|
||||
--color-canvas-inset: #f6f8fa;
|
||||
--color-canvas-subtle: #f6f8fa;
|
||||
/* --color-canvas-default: var(--background-color);
|
||||
--color-canvas-overlay: var(--background-color);
|
||||
--color-canvas-inset: var(--background-color);
|
||||
--color-canvas-subtle: var(--background-color); */
|
||||
--color-border-default: #d0d7de;
|
||||
--color-border-muted: hsl(210deg 18% 87% / 100%);
|
||||
--color-neutral-muted: rgb(175 184 193 / 20%);
|
||||
--color-accent-fg: #0969da;
|
||||
--color-accent-emphasis: #0969da;
|
||||
/* --color-accent-fg: oklch(48.8% 0.243 264.376);
|
||||
--color-accent-emphasis: oklch(48.8% 0.243 264.376); */
|
||||
--color-accent-muted: rgb(84 174 255 / 40%);
|
||||
--color-accent-subtle: #ddf4ff;
|
||||
--color-success-fg: #1a7f37;
|
||||
|
|
@ -96,4 +110,67 @@ main .pagination-loader-container {
|
|||
|
||||
main .gsc-loading-image {
|
||||
background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth Font */
|
||||
body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* All Border Color */
|
||||
*:not(.BtnGroup-item) {
|
||||
border-color: var(--secondary-color-25)!important;
|
||||
}
|
||||
|
||||
/* No Giscus Copyright and Avatar Line */
|
||||
.gsc-tl-line,
|
||||
.gsc-left-header em {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Comments Count Font No Underline and Small Size */
|
||||
h4.gsc-comments-count-separator,
|
||||
h4.gsc-replies-count {
|
||||
color: var(--secondary-color);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Oldest and Newest Buttons Style */
|
||||
.BtnGroup-item,
|
||||
.BtnGroup-item.BtnGroup-item--selected {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.BtnGroup-item.BtnGroup-item--selected {
|
||||
border-color: var(--secondary-color-25)!important;
|
||||
}
|
||||
.BtnGroup-item:not(.BtnGroup-item--selected):hover {
|
||||
border-color: var(--secondary-color-25)!important;
|
||||
}
|
||||
.BtnGroup-item button.btn:hover {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
/* Reply Time No Underline */
|
||||
.gsc-comment-author a:has(time),
|
||||
.gsc-reply-author a:has(time) {
|
||||
text-decoration: none;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Comments Count No Underline */
|
||||
.gsc-comments-count a {
|
||||
text-decoration: none!important;
|
||||
}
|
||||
|
||||
/* Social Reactions Icons */
|
||||
.gsc-social-reaction-summary-item.has-reacted {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
.gsc-social-reaction-summary-item.has-reacted:hover {
|
||||
background-color: var(--background-color)!important;
|
||||
border-color: var(--color-accent-fg)!important;
|
||||
}
|
||||
.color-bg-info {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,6 +46,9 @@ const shouldRender = Boolean(repo && repoID && categoryID)
|
|||
return isDark
|
||||
? `${siteUrl}/vendors/giscus/theme-dark.css`
|
||||
: `${siteUrl}/vendors/giscus/theme-light.css`
|
||||
// For local development
|
||||
// ? `http://localhost:4321/vendors/giscus/theme-dark.css`
|
||||
// : `http://localhost:4321/vendors/giscus/theme-light.css`
|
||||
}
|
||||
|
||||
function setupGiscus() {
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export const themeConfig: ThemeConfig = {
|
|||
categoryID: 'DIC_kwDOOy1K084CqwuZ',
|
||||
mapping: 'pathname',
|
||||
strict: '0',
|
||||
reactionsEnabled: '0',
|
||||
reactionsEnabled: '1',
|
||||
emitMetadata: '0',
|
||||
inputPosition: 'bottom',
|
||||
},
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue