refactor: docubook@latest template nextjs-docker
This commit is contained in:
gitfromwildan
@@ -9,13 +9,14 @@
|
||||
--docsearch-logo-color: hsl(var(--primary-foreground));
|
||||
|
||||
/* Modal */
|
||||
--docsearch-modal-width: 560px;
|
||||
--docsearch-modal-width: 800px;
|
||||
--docsearch-modal-height: 600px;
|
||||
--docsearch-modal-background: hsl(var(--background));
|
||||
--docsearch-modal-shadow: 0 0 0 1px hsl(var(--border)), 0 8px 20px rgba(0, 0, 0, 0.2);
|
||||
|
||||
/* SearchBox */
|
||||
--docsearch-searchbox-height: 56px;
|
||||
--docsearch-searchbox-width: 230px;
|
||||
--docsearch-searchbox-height: 35px;
|
||||
--docsearch-searchbox-background: hsl(var(--input));
|
||||
--docsearch-searchbox-focus-background: hsl(var(--card));
|
||||
--docsearch-searchbox-shadow: none;
|
||||
@@ -42,8 +43,8 @@
|
||||
background-color: hsl(var(--secondary));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 9999px;
|
||||
width: 250px;
|
||||
height: 35px;
|
||||
width: var(--docsearch-searchbox-width);
|
||||
height: var(--docsearch-searchbox-height);
|
||||
color: hsl(var(--muted-foreground));
|
||||
transition: width 0.3s ease;
|
||||
margin: 0;
|
||||
@@ -98,6 +99,27 @@
|
||||
border-top: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.dark .DocSearch-Footer .DocSearch-Label {
|
||||
color: var(--docsearch-muted-color);
|
||||
}
|
||||
|
||||
.dark button.DocSearch-Action.DocSearch-Close {
|
||||
color: var(--docsearch-muted-color);
|
||||
}
|
||||
|
||||
.dark .DocSearch-Hit-Container .DocSearch-Hit-icon {
|
||||
color: var(--docsearch-muted-color);
|
||||
}
|
||||
|
||||
.dark .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-Container .DocSearch-Hit-icon,
|
||||
.dark .DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-action {
|
||||
color: var(--docsearch-highlight-color);
|
||||
}
|
||||
|
||||
.dark .DocSearch-Hit-Container .DocSearch-Hit-path {
|
||||
color: var(--docsearch-muted-color);
|
||||
}
|
||||
|
||||
.DocSearch-Footer--commands kbd {
|
||||
background-color: hsl(var(--secondary));
|
||||
border: 1px solid hsl(var(--border));
|
||||
@@ -115,7 +137,7 @@
|
||||
color: hsl(var(--muted-foreground));
|
||||
border: 1px solid hsl(var(--border));
|
||||
box-shadow: none;
|
||||
padding: 2px 4px;
|
||||
padding: 4px 8px;
|
||||
margin-right: 0.4em;
|
||||
height: 20px;
|
||||
width: 32px;
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
@import 'tailwindcss';
|
||||
@import "tailwindcss";
|
||||
@plugin '@tailwindcss/typography';
|
||||
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@utility container {
|
||||
@@ -85,8 +84,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shiny-text {
|
||||
@keyframes collapsible-down {
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
height: var(--radix-collapsible-content-height);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes collapsible-up {
|
||||
from {
|
||||
height: var(--radix-collapsible-content-height);
|
||||
}
|
||||
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shiny-text {
|
||||
0%,
|
||||
90%,
|
||||
100% {
|
||||
@@ -109,7 +127,6 @@
|
||||
color utility to any element that depends on these defaults.
|
||||
*/
|
||||
@layer base {
|
||||
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
@@ -119,6 +136,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
@utility animate-collapsible-down {
|
||||
animation: collapsible-down 0.2s ease-out;
|
||||
}
|
||||
|
||||
@utility animate-collapsible-up {
|
||||
animation: collapsible-up 0.2s ease-out;
|
||||
}
|
||||
|
||||
@utility animate-shine {
|
||||
--animate-shine: shine var(--duration) infinite linear;
|
||||
animation: var(--animate-shine);
|
||||
@@ -206,7 +231,7 @@
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
pre>code {
|
||||
pre > code {
|
||||
display: grid;
|
||||
max-width: inherit !important;
|
||||
padding: 14px 0 !important;
|
||||
@@ -230,20 +255,19 @@
|
||||
}
|
||||
|
||||
.highlight-line {
|
||||
@apply bg-primary/5 border-l-2 border-primary/30;
|
||||
@apply bg-primary/5 border-primary/30 border-l-2;
|
||||
}
|
||||
|
||||
.rehype-code-title {
|
||||
@apply px-2 -mb-8 w-full text-sm pb-5 font-medium mt-5 font-code;
|
||||
@apply font-code mt-5 -mb-8 w-full px-2 pb-5 text-sm font-medium;
|
||||
}
|
||||
|
||||
.highlight-comp>code {
|
||||
.highlight-comp > code {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
background-position: 0% 0%;
|
||||
@@ -257,4 +281,4 @@
|
||||
background-position: 0% 0%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -87,121 +87,8 @@
|
||||
}
|
||||
|
||||
.dark .punctuation {
|
||||
color: hsl(85 20% 70%);
|
||||
/* Light gray-green */
|
||||
}
|
||||
|
||||
/* Custom styling for code blocks */
|
||||
|
||||
.code-block-container {
|
||||
position: relative;
|
||||
margin: 1.5rem 0;
|
||||
border: 1px solid hsl(var(--border));
|
||||
overflow: hidden;
|
||||
font-size: 0.875rem;
|
||||
border-radius: 0.75rem;
|
||||
}
|
||||
|
||||
.code-block-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background-color: hsl(var(--muted));
|
||||
padding: 0.5rem 1rem;
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
color: hsl(var(--muted-foreground));
|
||||
font-family: monospace;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.code-block-actions {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 0.75rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.code-block-actions button {
|
||||
color: hsl(var(--muted-foreground));
|
||||
transition: color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.code-block-actions button:hover {
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
|
||||
.code-block-body pre[class*="language-"] {
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.line-numbers-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 3rem;
|
||||
padding-top: 1rem;
|
||||
text-align: right;
|
||||
color: var(--line-number-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.line-highlight {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: hsl(var(--primary) / 0.1);
|
||||
border-left: 2px solid hsl(var(--primary));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.code-block-body pre[data-line-numbers="true"] .line-highlight {
|
||||
padding-left: 3.5rem;
|
||||
}
|
||||
|
||||
.code-block-body::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.code-block-body::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.code-block-body::-webkit-scrollbar-thumb {
|
||||
background: hsl(var(--border));
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.code-block-body::-webkit-scrollbar-thumb:hover {
|
||||
background: hsl(var(--muted));
|
||||
}
|
||||
|
||||
/* Custom styling for youtube blocks */
|
||||
.youtube {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
/* Aspect Ratio 16:9 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
/* Black background to blend the player */
|
||||
border-radius: 8px;
|
||||
/* Rounded corners */
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
/* Soft shadow */
|
||||
}
|
||||
|
||||
.youtube iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
/* Rounded corners on iframe */
|
||||
color: #9ca3af;
|
||||
/* Lighter gray for dark mode */
|
||||
}
|
||||
|
||||
/* Hide main navbar and footer when docs layout is active */
|
||||
@@ -216,4 +103,4 @@ body:has(.docs-layout) #main-content {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user