vyla-entertainment/documentation
2
0
Fork 0
mirror of https://gitlab.com/vyla-entertainment/documentation.git synced 2026-11-14 22:47:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

aded themes

Browse Source
This commit is contained in:
alwaysmesmerizingyou
2026-10-09 20:59:12 -07:00
parent d38fcbe017
commit ad9a41036f
9 changed files with 1038 additions and 544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
assets/styling/components.css
View File

@@ -11,22 +11,18 @@
display: flex;
align-items: center;
gap: 10px;
background: rgba(0, 0, 0, 0.05);
background: var(--search-bg);
width: min(440px, 40vw);
height: 36px;
padding: 0 12px;
border: none;
border-radius: 100px;
color: var(--muted-light);
color: var(--muted);
font: inherit;
font-size: 14px;
cursor: pointer;
}
html.dark #search-trigger {
background: rgba(50, 50, 50, 0.1);
}
#search-trigger kbd {
margin-left: auto;
font: 600 11px var(--font);
@@ -50,16 +46,13 @@ html.dark #search-trigger {
margin: 52px auto 0;
border-radius: 20px;
overflow: hidden;
background: rgb(210, 210, 210, 0.1) !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
background: var(--search-panel-bg) !important;
border: 1px solid var(--border);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
html.dark .search-panel {
background: rgb(10, 10, 10, 0.2) !important;
}
.search-input-row {
display: flex;
align-items: center;
@@ -70,7 +63,7 @@ html.dark .search-panel {
.search-input-row .ico {
width: 18px;
height: 18px;
color: var(--muted-light);
color: var(--muted);
}
#search-input {
@@ -78,7 +71,7 @@ html.dark .search-panel {
border: none;
outline: none;
background: transparent;
color: inherit;
color: var(--text-heading);
font: inherit;
font-size: 18px;
}
@@ -92,11 +85,7 @@ html.dark .search-panel {
.search-label {
padding: 8px 14px;
font-size: 12px;
color: var(--muted-light);
}
html.dark .search-label {
color: var(--muted-dark);
color: var(--muted);
}
.sr {
@@ -109,10 +98,11 @@ html.dark .search-label {
.sr>.ico {
margin-top: 3px;
color: var(--muted);
}
.sr.on {
background: rgba(0, 0, 0, 0.06);
background: var(--hover-bg);
}
.sr-body {
@@ -123,6 +113,7 @@ html.dark .search-label {
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: var(--text-heading);
}
.sr .s {
@@ -130,7 +121,7 @@ html.dark .search-label {
margin-top: 2px;
font-size: 12.5px;
line-height: 1.4;
color: var(--muted-light);
color: var(--muted);
overflow: hidden;
-webkit-line-clamp: 2;
line-clamp: 2;
@@ -141,17 +132,12 @@ html.dark .search-label {
margin-top: 2px;
font-size: 12px;
line-height: 1.35;
color: var(--muted-light);
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
html.dark .sr .s,
html.dark .sr .p {
color: var(--muted-dark);
}
.sr .sep {
margin: 0 6px;
opacity: 0.7;
@@ -159,11 +145,7 @@ html.dark .sr .p {
.sr .hit {
font-weight: 700;
color: var(--text-light);
}
html.dark .sr .hit {
color: var(--text-dark);
color: var(--text-heading);
}
.search-footer {
@@ -171,11 +153,8 @@ html.dark .sr .hit {
gap: 18px;
padding: 12px 20px;
font-size: 12px;
color: var(--muted-light);
}
html.dark .search-footer {
color: var(--muted-dark);
color: var(--muted);
border-top: 1px solid var(--border-subtle);
}
.search-footer .close-hint {
@@ -202,34 +181,22 @@ html.dark .search-footer {
border: none;
border-radius: 8px;
background: none;
color: var(--muted-light);
color: var(--muted);
cursor: pointer;
}
.code-wrap .copy-btn:hover {
background: rgba(0, 0, 0, 0.06);
}
html.dark .code-wrap .copy-btn {
color: var(--muted-dark);
}
html.dark .code-wrap .copy-btn:hover {
background: rgba(255, 255, 255, 0.1);
background: var(--hover-bg);
}
.code-group {
position: relative;
margin: 16px 0;
border-radius: 20px;
background: #f4f4f5;
background: var(--code-group-bg);
padding: 6px 4px 4px;
}
html.dark .code-group {
background: #0d0d0d;
}
.code-group-tabs {
display: flex;
align-items: center;
@@ -247,15 +214,11 @@ html.dark .code-group {
border: none;
background: none;
cursor: pointer;
color: #71717a;
color: var(--muted);
}
.code-group-tab.active {
color: var(--text-light);
}
html.dark .code-group-tab.active {
color: #ffffff;
color: var(--code-tab-active);
}
.code-group-tab.active::after {
@@ -265,25 +228,16 @@ html.dark .code-group-tab.active {
right: 0;
bottom: 0;
height: 2px;
background: var(--text-light);
background: var(--code-tab-active);
border-radius: 2px;
}
html.dark .code-group-tab.active::after {
background: #ffffff;
}
.code-group-panels {
background: #ffffff;
background: var(--code-group-panel-bg);
border-radius: 14px;
overflow: hidden;
}
html.dark .code-group-panels {
background: #000000;
border-color: rgba(255, 255, 255, 0.06);
}
.cg-copy-btn {
position: absolute;
top: 10px;
@@ -295,16 +249,12 @@ html.dark .code-group-panels {
border: none;
border-radius: 6px;
background: none;
color: #71717a;
color: var(--muted);
cursor: pointer;
}
.cg-copy-btn:hover {
color: var(--text-light);
}
html.dark .cg-copy-btn:hover {
color: #ffffff;
color: var(--text-heading);
}
.code-group-panel {
@@ -321,7 +271,7 @@ main.prose .code-group pre {
border: none;
border-radius: 0;
background: transparent;
color: #e6edf3;
color: inherit;
}
main.prose .code-group pre code {
@@ -331,13 +281,8 @@ main.prose .code-group pre code {
main.prose blockquote {
margin: 16px 0;
padding: 4px 0 4px 16px;
border-left: 3px solid var(--border-light);
color: var(--muted-light);
}
html.dark main.prose blockquote {
border-left-color: var(--border-dark);
color: var(--muted-dark);
border-left: 3px solid var(--border);
color: var(--muted);
}
main.prose blockquote p {
@@ -351,18 +296,12 @@ main.prose blockquote p {
.skeleton-line,
.skeleton-media {
background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 25%, rgba(0, 0, 0, 0.12) 37%, rgba(0, 0, 0, 0.05) 63%);
background: linear-gradient(90deg, var(--skeleton-pulse-1) 25%, var(--skeleton-pulse-2) 37%, var(--skeleton-pulse-1) 63%);
background-size: 400% 100%;
animation: skeletonPulse 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
border-radius: 8px;
}
html.dark .skeleton-line,
html.dark .skeleton-media {
background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.12) 37%, rgba(255, 255, 255, 0.05) 63%);
background-size: 400% 100%;
}
@keyframes skeletonPulse {
0% {
background-position: 100% 50%;
@@ -513,10 +452,6 @@ html.dark .skeleton-media {
height: 1.3rem;
}
html.dark #search-trigger {
background: transparent;
}
#search-trigger span,
#search-trigger kbd {
display: none;