mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-10 02:24:35 +08:00
feat: initialize monorepo with package.json for CCW workflow platform
This commit is contained in:
catlog22
972
ccw/docs-site/src/css/custom.css
Normal file
972
ccw/docs-site/src/css/custom.css
Normal file
@@ -0,0 +1,972 @@
|
||||
/**
|
||||
* CCW Docusaurus Custom Styles
|
||||
* Custom overrides for Docusaurus theme
|
||||
*/
|
||||
|
||||
/* Import CSS variables first */
|
||||
@import './variables.css';
|
||||
|
||||
/* =============================================================================
|
||||
Global Styles
|
||||
============================================================================= */
|
||||
|
||||
/* Root font setup */
|
||||
:root {
|
||||
--ifm-font-family-base: var(--ccw-font-sans);
|
||||
--ifm-font-family-monospace: var(--ccw-font-mono);
|
||||
--ifm-font-size-base: 16px;
|
||||
--ifm-line-height-base: 1.65;
|
||||
--ifm-container-width: 1140px;
|
||||
--ifm-container-width-xl: 1320px;
|
||||
}
|
||||
|
||||
/* Dark mode adjustments */
|
||||
[data-theme='dark'] {
|
||||
--ifm-background-color: var(--ccw-bg);
|
||||
--ifm-background-surface-color: var(--ccw-bg-secondary);
|
||||
--ifm-text-color: var(--ccw-text-primary);
|
||||
--ifm-link-color: var(--ccw-primary);
|
||||
--ifm-link-hover-color: var(--ccw-primary-hover);
|
||||
--ifm-border-color: var(--ccw-border);
|
||||
--ifm-code-font-size: 90%;
|
||||
--ifm-alert-border-color: var(--ccw-border);
|
||||
--ifm-alert-background-color: var(--ccw-bg-secondary);
|
||||
--ifm-alert-foreground-color: var(--ccw-text-primary);
|
||||
}
|
||||
|
||||
/* Global reset adjustments */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--ccw-bg);
|
||||
color: var(--ccw-text-primary);
|
||||
font-family: var(--ccw-font-sans);
|
||||
line-height: var(--ifm-line-height-base);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* Selection color */
|
||||
::selection {
|
||||
background-color: var(--ccw-primary-light);
|
||||
color: var(--ccw-text-primary);
|
||||
}
|
||||
|
||||
/* Focus styles */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--ccw-border-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Custom Scrollbar
|
||||
============================================================================= */
|
||||
|
||||
/* Webkit browsers (Chrome, Safari, Edge) */
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--ccw-bg-secondary);
|
||||
border-radius: var(--ccw-radius-full);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--ccw-border-hover);
|
||||
border-radius: var(--ccw-radius-full);
|
||||
border: 2px solid var(--ccw-bg-secondary);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--ccw-text-tertiary);
|
||||
}
|
||||
|
||||
/* Firefox scrollbar */
|
||||
* {
|
||||
scrollbar-color: var(--ccw-border-hover) var(--ccw-bg-secondary);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Navbar / Header
|
||||
============================================================================= */
|
||||
|
||||
.navbar {
|
||||
background-color: var(--ccw-bg-elevated);
|
||||
border-bottom: 1px solid var(--ccw-border);
|
||||
box-shadow: var(--ccw-shadow-sm);
|
||||
}
|
||||
|
||||
.navbar__logo {
|
||||
height: 32px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.navbar__link {
|
||||
color: var(--ccw-text-secondary);
|
||||
font-weight: 500;
|
||||
transition: color var(--ccw-transition-fast);
|
||||
}
|
||||
|
||||
.navbar__link:hover,
|
||||
.navbar__link--active {
|
||||
color: var(--ccw-primary);
|
||||
}
|
||||
|
||||
.navbar__toggle {
|
||||
color: var(--ccw-text-secondary);
|
||||
}
|
||||
|
||||
/* Dropdown menu */
|
||||
.navbar__item {
|
||||
border-radius: var(--ccw-radius-md);
|
||||
margin: 0 var(--ccw-spacing-xs);
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
color: var(--ccw-text-secondary);
|
||||
border-radius: var(--ccw-radius-md);
|
||||
padding: var(--ccw-spacing-sm) var(--ccw-spacing-md);
|
||||
transition: all var(--ccw-transition-fast);
|
||||
}
|
||||
|
||||
.menu__link:hover {
|
||||
background-color: var(--ccw-secondary);
|
||||
color: var(--ccw-primary);
|
||||
}
|
||||
|
||||
.menu__link--active {
|
||||
background-color: var(--ccw-primary-light);
|
||||
color: var(--ccw-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Sidebar
|
||||
============================================================================= */
|
||||
|
||||
.menu {
|
||||
border-right: 1px solid var(--ccw-border);
|
||||
}
|
||||
|
||||
.menu__list {
|
||||
padding: var(--ccw-spacing-sm);
|
||||
}
|
||||
|
||||
.menu__list-item {
|
||||
margin-bottom: var(--ccw-spacing-xs);
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
color: var(--ccw-text-secondary);
|
||||
display: block;
|
||||
padding: var(--ccw-spacing-sm) var(--ccw-spacing-md);
|
||||
border-radius: var(--ccw-radius-md);
|
||||
transition: all var(--ccw-transition-fast);
|
||||
}
|
||||
|
||||
.menu__link:hover {
|
||||
background-color: var(--ccw-secondary);
|
||||
color: var(--ccw-text-primary);
|
||||
transform: translateX(2px);
|
||||
}
|
||||
|
||||
.menu__link--active {
|
||||
background-color: var(--ccw-primary-light);
|
||||
color: var(--ccw-primary);
|
||||
font-weight: 600;
|
||||
border-left: 3px solid var(--ccw-primary);
|
||||
}
|
||||
|
||||
.menu__list-item--collapsed .menu__link--active {
|
||||
border-left-color: var(--ccw-primary);
|
||||
}
|
||||
|
||||
/* Sidebar category headers */
|
||||
.menu__list-item-collapsible > .menu__link--sublist {
|
||||
font-weight: 600;
|
||||
color: var(--ccw-text-primary);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Main Content
|
||||
============================================================================= */
|
||||
|
||||
.main-wrapper {
|
||||
background-color: var(--ccw-bg);
|
||||
}
|
||||
|
||||
.markdown {
|
||||
color: var(--ccw-text-primary);
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--ccw-text-primary);
|
||||
font-weight: 700;
|
||||
line-height: 1.25;
|
||||
margin-top: var(--ccw-spacing-xl);
|
||||
margin-bottom: var(--ccw-spacing-md);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.25rem;
|
||||
border-bottom: 1px solid var(--ccw-border);
|
||||
padding-bottom: var(--ccw-spacing-md);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.875rem;
|
||||
border-bottom: 1px solid var(--ccw-border);
|
||||
padding-bottom: var(--ccw-spacing-sm);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h5, h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Paragraphs */
|
||||
p {
|
||||
margin-bottom: var(--ccw-spacing-md);
|
||||
color: var(--ccw-text-secondary);
|
||||
}
|
||||
|
||||
/* Links */
|
||||
a {
|
||||
color: var(--ccw-primary);
|
||||
text-decoration: none;
|
||||
transition: color var(--ccw-transition-fast);
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--ccw-primary-hover);
|
||||
border-bottom-color: var(--ccw-primary);
|
||||
}
|
||||
|
||||
/* Lists */
|
||||
ul, ol {
|
||||
margin-left: var(--ccw-spacing-lg);
|
||||
margin-bottom: var(--ccw-spacing-md);
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: var(--ccw-spacing-xs);
|
||||
color: var(--ccw-text-secondary);
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
code {
|
||||
background-color: var(--ccw-bg-tertiary);
|
||||
color: var(--ccw-primary);
|
||||
padding: 0.2em 0.4em;
|
||||
border-radius: var(--ccw-radius-sm);
|
||||
font-family: var(--ccw-font-mono);
|
||||
font-size: 0.875em;
|
||||
border: 1px solid var(--ccw-border);
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: var(--ccw-bg-tertiary);
|
||||
border: 1px solid var(--ccw-border);
|
||||
border-radius: var(--ccw-radius-lg);
|
||||
padding: var(--ccw-spacing-md);
|
||||
overflow-x: auto;
|
||||
margin: var(--ccw-spacing-lg) 0;
|
||||
box-shadow: var(--ccw-shadow-sm);
|
||||
}
|
||||
|
||||
pre code {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: var(--ccw-text-primary);
|
||||
font-size: 0.875em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Inline code in headings */
|
||||
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
|
||||
font-size: inherit;
|
||||
background-color: var(--ccw-bg-tertiary);
|
||||
padding: 0.15em 0.3em;
|
||||
}
|
||||
|
||||
/* Blockquotes */
|
||||
blockquote {
|
||||
border-left: 4px solid var(--ccw-primary);
|
||||
padding-left: var(--ccw-spacing-lg);
|
||||
margin: var(--ccw-spacing-lg) 0;
|
||||
color: var(--ccw-text-secondary);
|
||||
background-color: var(--ccw-secondary);
|
||||
border-radius: 0 var(--ccw-radius-md) var(--ccw-radius-md) 0;
|
||||
padding: var(--ccw-spacing-md) var(--ccw-spacing-lg);
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: var(--ccw-spacing-lg) 0;
|
||||
border-radius: var(--ccw-radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--ccw-shadow-sm);
|
||||
}
|
||||
|
||||
th, td {
|
||||
padding: var(--ccw-spacing-sm) var(--ccw-spacing-md);
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--ccw-border);
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: var(--ccw-bg-secondary);
|
||||
font-weight: 600;
|
||||
color: var(--ccw-text-primary);
|
||||
border-bottom: 2px solid var(--ccw-border);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background-color: var(--ccw-secondary);
|
||||
}
|
||||
|
||||
/* Horizontal rule */
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--ccw-border);
|
||||
margin: var(--ccw-spacing-2xl) 0;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Cards
|
||||
============================================================================= */
|
||||
|
||||
.card {
|
||||
background-color: var(--ccw-bg-elevated);
|
||||
border: 1px solid var(--ccw-border);
|
||||
border-radius: var(--ccw-radius-lg);
|
||||
padding: var(--ccw-spacing-lg);
|
||||
transition: all var(--ccw-transition-base);
|
||||
box-shadow: var(--ccw-shadow-sm);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--ccw-shadow-lg);
|
||||
border-color: var(--ccw-primary);
|
||||
}
|
||||
|
||||
.card__header {
|
||||
margin-bottom: var(--ccw-spacing-md);
|
||||
}
|
||||
|
||||
.card__title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--ccw-text-primary);
|
||||
margin-bottom: var(--ccw-spacing-sm);
|
||||
}
|
||||
|
||||
.card__body {
|
||||
color: var(--ccw-text-secondary);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card__footer {
|
||||
margin-top: var(--ccw-spacing-md);
|
||||
padding-top: var(--ccw-spacing-md);
|
||||
border-top: 1px solid var(--ccw-border);
|
||||
}
|
||||
|
||||
/* Header icon styling */
|
||||
.card__header .header__icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: var(--ccw-primary-light);
|
||||
color: var(--ccw-primary);
|
||||
border-radius: var(--ccw-radius-lg);
|
||||
margin-bottom: var(--ccw-spacing-md);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Buttons
|
||||
============================================================================= */
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: var(--ccw-spacing-sm) var(--ccw-spacing-lg);
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
border-radius: var(--ccw-radius-md);
|
||||
transition: all var(--ccw-transition-fast);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button--primary {
|
||||
background-color: var(--ccw-primary);
|
||||
color: var(--ccw-text-inverse);
|
||||
}
|
||||
|
||||
.button--primary:hover {
|
||||
background-color: var(--ccw-primary-hover);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--ccw-shadow-md);
|
||||
}
|
||||
|
||||
.button--secondary {
|
||||
background-color: var(--ccw-secondary);
|
||||
color: var(--ccw-text-primary);
|
||||
border: 1px solid var(--ccw-border);
|
||||
}
|
||||
|
||||
.button--secondary:hover {
|
||||
background-color: var(--ccw-secondary-hover);
|
||||
border-color: var(--ccw-border-hover);
|
||||
}
|
||||
|
||||
.button--outline {
|
||||
background-color: transparent;
|
||||
color: var(--ccw-primary);
|
||||
border: 1px solid var(--ccw-primary);
|
||||
}
|
||||
|
||||
.button--outline:hover {
|
||||
background-color: var(--ccw-primary-light);
|
||||
}
|
||||
|
||||
.button--sm {
|
||||
padding: var(--ccw-spacing-xs) var(--ccw-spacing-md);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.button--lg {
|
||||
padding: var(--ccw-spacing-md) var(--ccw-spacing-xl);
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Alerts / Admonitions
|
||||
============================================================================= */
|
||||
|
||||
.admonition {
|
||||
border-radius: var(--ccw-radius-lg);
|
||||
border-left-width: 4px;
|
||||
border-left-style: solid;
|
||||
padding: var(--ccw-spacing-md) var(--ccw-spacing-lg);
|
||||
margin: var(--ccw-spacing-lg) 0;
|
||||
background-color: var(--ccw-bg-secondary);
|
||||
border: 1px solid var(--ccw-border);
|
||||
border-left-width: 4px;
|
||||
}
|
||||
|
||||
.admonition:hover {
|
||||
box-shadow: var(--ccw-shadow-sm);
|
||||
}
|
||||
|
||||
.admonitionHeading {
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ccw-spacing-sm);
|
||||
margin-bottom: var(--ccw-spacing-sm);
|
||||
}
|
||||
|
||||
.admonitionIcon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.admonition--note {
|
||||
border-left-color: var(--ccw-info);
|
||||
background-color: var(--ccw-info-light);
|
||||
}
|
||||
|
||||
.admonition--tip {
|
||||
border-left-color: var(--ccw-accent);
|
||||
background-color: var(--ccw-accent-light);
|
||||
}
|
||||
|
||||
.admonition--important {
|
||||
border-left-color: var(--ccw-primary);
|
||||
background-color: var(--ccw-primary-light);
|
||||
}
|
||||
|
||||
.admonition--warning {
|
||||
border-left-color: var(--ccw-warning);
|
||||
background-color: var(--ccw-warning-light);
|
||||
}
|
||||
|
||||
.admonition--caution {
|
||||
border-left-color: var(--ccw-error);
|
||||
background-color: var(--ccw-error-light);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Pagination
|
||||
============================================================================= */
|
||||
|
||||
.pagination-nav {
|
||||
margin-top: var(--ccw-spacing-2xl);
|
||||
border-top: 1px solid var(--ccw-border);
|
||||
padding-top: var(--ccw-spacing-xl);
|
||||
}
|
||||
|
||||
.pagination-nav__link {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: var(--ccw-spacing-md);
|
||||
background-color: var(--ccw-bg-elevated);
|
||||
border: 1px solid var(--ccw-border);
|
||||
border-radius: var(--ccw-radius-lg);
|
||||
transition: all var(--ccw-transition-fast);
|
||||
}
|
||||
|
||||
.pagination-nav__link:hover {
|
||||
background-color: var(--ccw-secondary);
|
||||
border-color: var(--ccw-primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--ccw-shadow-md);
|
||||
}
|
||||
|
||||
.pagination-nav__label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--ccw-text-tertiary);
|
||||
margin-bottom: var(--ccw-spacing-xs);
|
||||
}
|
||||
|
||||
.pagination-nav__title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--ccw-text-primary);
|
||||
}
|
||||
|
||||
.pagination-nav__link--next {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.pagination-nav__link--prev {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Footer
|
||||
============================================================================= */
|
||||
|
||||
.footer {
|
||||
background-color: var(--ccw-bg-secondary);
|
||||
border-top: 1px solid var(--ccw-border);
|
||||
padding: var(--ccw-spacing-xl) 0;
|
||||
margin-top: var(--ccw-spacing-2xl);
|
||||
}
|
||||
|
||||
.footer__title {
|
||||
font-weight: 600;
|
||||
color: var(--ccw-text-primary);
|
||||
margin-bottom: var(--ccw-spacing-md);
|
||||
}
|
||||
|
||||
.footer__link-item {
|
||||
color: var(--ccw-text-secondary);
|
||||
transition: color var(--ccw-transition-fast);
|
||||
}
|
||||
|
||||
.footer__link-item:hover {
|
||||
color: var(--ccw-primary);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Search
|
||||
============================================================================= */
|
||||
|
||||
.DocSearch {
|
||||
--docsearch-primary-color: var(--ccw-primary);
|
||||
--docsearch-text-color: var(--ccw-text-primary);
|
||||
--docsearch-muted-color: var(--ccw-text-tertiary);
|
||||
--docsearch-searchbox-shadow: var(--ccw-shadow-sm);
|
||||
--docsearch-modal-shadow: var(--ccw-shadow-2xl);
|
||||
--docsearch-key-gradient: linear-gradient(268.89deg, rgba(234, 238, 242, 0) 0%, rgba(234, 238, 242, 0.8) 50%, rgba(234, 238, 242, 0) 100%);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Tags
|
||||
============================================================================= */
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--ccw-spacing-sm);
|
||||
margin: var(--ccw-spacing-md) 0;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--ccw-spacing-xs) var(--ccw-spacing-md);
|
||||
background-color: var(--ccw-secondary);
|
||||
color: var(--ccw-text-secondary);
|
||||
border-radius: var(--ccw-radius-full);
|
||||
font-size: 0.875rem;
|
||||
transition: all var(--ccw-transition-fast);
|
||||
border: 1px solid var(--ccw-border);
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
background-color: var(--ccw-primary-light);
|
||||
color: var(--ccw-primary);
|
||||
border-color: var(--ccw-primary);
|
||||
}
|
||||
|
||||
.tag--regular {
|
||||
background-color: var(--ccw-secondary);
|
||||
}
|
||||
|
||||
.tag--accent {
|
||||
background-color: var(--ccw-primary-light);
|
||||
color: var(--ccw-primary);
|
||||
border-color: var(--ccw-primary);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Breadcrumbs
|
||||
============================================================================= */
|
||||
|
||||
.breadcrumbs {
|
||||
margin-bottom: var(--ccw-spacing-lg);
|
||||
}
|
||||
|
||||
.breadcrumbs__item {
|
||||
color: var(--ccw-text-tertiary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.breadcrumbs__item--active {
|
||||
color: var(--ccw-text-secondary);
|
||||
}
|
||||
|
||||
.breadcrumbs__link {
|
||||
color: var(--ccw-text-secondary);
|
||||
transition: color var(--ccw-transition-fast);
|
||||
}
|
||||
|
||||
.breadcrumbs__link:hover {
|
||||
color: var(--ccw-primary);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Tabs
|
||||
============================================================================= */
|
||||
|
||||
.tabs {
|
||||
border-bottom: 1px solid var(--ccw-border);
|
||||
margin: var(--ccw-spacing-lg) 0;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
display: flex;
|
||||
gap: var(--ccw-spacing-sm);
|
||||
margin-bottom: -1px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: var(--ccw-spacing-sm) var(--ccw-spacing-md);
|
||||
border: 1px solid transparent;
|
||||
border-bottom: none;
|
||||
border-radius: var(--ccw-radius-md) var(--ccw-radius-md) 0 0;
|
||||
color: var(--ccw-text-secondary);
|
||||
transition: all var(--ccw-transition-fast);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tab-item:hover {
|
||||
color: var(--ccw-primary);
|
||||
background-color: var(--ccw-secondary);
|
||||
}
|
||||
|
||||
.tab-item--active {
|
||||
color: var(--ccw-primary);
|
||||
background-color: var(--ccw-bg);
|
||||
border-color: var(--ccw-border);
|
||||
border-bottom-color: var(--ccw-bg);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
padding: var(--ccw-spacing-lg) 0;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Code Syntax Highlighting
|
||||
============================================================================= */
|
||||
|
||||
.theme-code-block {
|
||||
border-radius: var(--ccw-radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.code-block-title {
|
||||
background-color: var(--ccw-bg-tertiary);
|
||||
padding: var(--ccw-spacing-sm) var(--ccw-spacing-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--ccw-text-secondary);
|
||||
border-bottom: 1px solid var(--ccw-border);
|
||||
}
|
||||
|
||||
.prism-code {
|
||||
background-color: var(--ccw-bg-tertiary) !important;
|
||||
}
|
||||
|
||||
/* Token colors for syntax highlighting */
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: var(--ccw-text-tertiary);
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: var(--ccw-text-secondary);
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: var(--ccw-error);
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: var(--ccw-accent);
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: var(--ccw-warning);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: var(--ccw-primary);
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: var(--ccw-info);
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: var(--ccw-error);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Responsive Adjustments
|
||||
============================================================================= */
|
||||
|
||||
@media (max-width: 996px) {
|
||||
:root {
|
||||
--ifm-container-width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.875rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: var(--ccw-spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination-nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pagination-nav__link {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Print Styles
|
||||
============================================================================= */
|
||||
|
||||
@media print {
|
||||
.navbar,
|
||||
.sidebar,
|
||||
.footer,
|
||||
.pagination-nav {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.card {
|
||||
break-inside: avoid;
|
||||
box-shadow: none;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Utility Classes
|
||||
============================================================================= */
|
||||
|
||||
/* Text utilities */
|
||||
.text-primary {
|
||||
color: var(--ccw-primary);
|
||||
}
|
||||
|
||||
.text-secondary {
|
||||
color: var(--ccw-text-secondary);
|
||||
}
|
||||
|
||||
.text-accent {
|
||||
color: var(--ccw-accent);
|
||||
}
|
||||
|
||||
.text-success {
|
||||
color: var(--ccw-success);
|
||||
}
|
||||
|
||||
.text-warning {
|
||||
color: var(--ccw-warning);
|
||||
}
|
||||
|
||||
.text-error {
|
||||
color: var(--ccw-error);
|
||||
}
|
||||
|
||||
/* Background utilities */
|
||||
.bg-primary {
|
||||
background-color: var(--ccw-primary);
|
||||
color: var(--ccw-text-inverse);
|
||||
}
|
||||
|
||||
.bg-secondary {
|
||||
background-color: var(--ccw-secondary);
|
||||
}
|
||||
|
||||
.bg-accent {
|
||||
background-color: var(--ccw-accent);
|
||||
color: var(--ccw-text-inverse);
|
||||
}
|
||||
|
||||
/* Spacing utilities */
|
||||
.mt-sm { margin-top: var(--ccw-spacing-sm); }
|
||||
.mt-md { margin-top: var(--ccw-spacing-md); }
|
||||
.mt-lg { margin-top: var(--ccw-spacing-lg); }
|
||||
.mt-xl { margin-top: var(--ccw-spacing-xl); }
|
||||
|
||||
.mb-sm { margin-bottom: var(--ccw-spacing-sm); }
|
||||
.mb-md { margin-bottom: var(--ccw-spacing-md); }
|
||||
.mb-lg { margin-bottom: var(--ccw-spacing-lg); }
|
||||
.mb-xl { margin-bottom: var(--ccw-spacing-xl); }
|
||||
|
||||
.p-sm { padding: var(--ccw-spacing-sm); }
|
||||
.p-md { padding: var(--ccw-spacing-md); }
|
||||
.p-lg { padding: var(--ccw-spacing-lg); }
|
||||
.p-xl { padding: var(--ccw-spacing-xl); }
|
||||
|
||||
/* =============================================================================
|
||||
Animation Utilities
|
||||
============================================================================= */
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn var(--ccw-transition-slow) ease-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
193
ccw/docs-site/src/css/variables.css
Normal file
193
ccw/docs-site/src/css/variables.css
Normal file
@@ -0,0 +1,193 @@
|
||||
/**
|
||||
* CCW Design System - CSS Variables
|
||||
* Docusaurus custom theme variables
|
||||
*/
|
||||
|
||||
/* =============================================================================
|
||||
Light Mode (Default)
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* Primary Colors */
|
||||
--ccw-primary-h: 221;
|
||||
--ccw-primary-s: 83%;
|
||||
--ccw-primary-l: 53%;
|
||||
--ccw-primary: hsl(var(--ccw-primary-h), var(--ccw-primary-s), var(--ccw-primary-l));
|
||||
--ccw-primary-hover: hsl(var(--ccw-primary-h), var(--ccw-primary-s), 43%);
|
||||
--ccw-primary-active: hsl(var(--ccw-primary-h), var(--ccw-primary-s), 38%);
|
||||
--ccw-primary-light: hsl(var(--ccw-primary-h), var(--ccw-primary-s), 95%);
|
||||
--ccw-primary-dark: hsl(var(--ccw-primary-h), var(--ccw-primary-s), 23%);
|
||||
|
||||
/* Secondary Colors */
|
||||
--ccw-secondary-h: 210;
|
||||
--ccw-secondary-s: 40%;
|
||||
--ccw-secondary-l: 96%;
|
||||
--ccw-secondary: hsl(var(--ccw-secondary-h), var(--ccw-secondary-s), var(--ccw-secondary-l));
|
||||
--ccw-secondary-hover: hsl(var(--ccw-secondary-h), var(--ccw-secondary-s), 92%);
|
||||
--ccw-secondary-border: hsl(var(--ccw-secondary-h), var(--ccw-secondary-s), 88%);
|
||||
|
||||
/* Accent Colors */
|
||||
--ccw-accent-h: 142;
|
||||
--ccw-accent-s: 76%;
|
||||
--ccw-accent-l: 36%;
|
||||
--ccw-accent: hsl(var(--ccw-accent-h), var(--ccw-accent-s), var(--ccw-accent-l));
|
||||
--ccw-accent-hover: hsl(var(--ccw-accent-h), var(--ccw-accent-s), 26%);
|
||||
--ccw-accent-light: hsl(var(--ccw-accent-h), var(--ccw-accent-s), 92%);
|
||||
|
||||
/* Background Colors */
|
||||
--ccw-bg-h: 0;
|
||||
--ccw-bg-s: 0%;
|
||||
--ccw-bg-l: 100%;
|
||||
--ccw-bg: hsl(var(--ccw-bg-h), var(--ccw-bg-s), var(--ccw-bg-l));
|
||||
--ccw-bg-secondary: hsl(210, 20%, 98%);
|
||||
--ccw-bg-tertiary: hsl(210, 20%, 96%);
|
||||
--ccw-bg-elevated: hsl(0, 0%, 100%);
|
||||
--ccw-bg-overlay: hsla(0, 0%, 0%, 0.5);
|
||||
|
||||
/* Text Colors */
|
||||
--ccw-text-h: 222;
|
||||
--ccw-text-s: 47%;
|
||||
--ccw-text-l: 11%;
|
||||
--ccw-text-primary: hsl(var(--ccw-text-h), var(--ccw-text-s), var(--ccw-text-l));
|
||||
--ccw-text-secondary: hsl(215, 16%, 47%);
|
||||
--ccw-text-tertiary: hsl(215, 16%, 65%);
|
||||
--ccw-text-disabled: hsl(215, 16%, 80%);
|
||||
--ccw-text-inverse: hsl(0, 0%, 100%);
|
||||
|
||||
/* Border Colors */
|
||||
--ccw-border-h: 214;
|
||||
--ccw-border-s: 32%;
|
||||
--ccw-border-l: 91%;
|
||||
--ccw-border: hsl(var(--ccw-border-h), var(--ccw-border-s), var(--ccw-border-l));
|
||||
--ccw-border-hover: hsl(var(--ccw-border-h), var(--ccw-border-s), 80%);
|
||||
--ccw-border-focus: var(--ccw-primary);
|
||||
|
||||
/* Shadow */
|
||||
--ccw-shadow-sm: 0 1px 2px 0 hsla(0, 0%, 0%, 0.05);
|
||||
--ccw-shadow-md: 0 4px 6px -1px hsla(0, 0%, 0%, 0.1), 0 2px 4px -1px hsla(0, 0%, 0%, 0.06);
|
||||
--ccw-shadow-lg: 0 10px 15px -3px hsla(0, 0%, 0%, 0.1), 0 4px 6px -2px hsla(0, 0%, 0%, 0.05);
|
||||
--ccw-shadow-xl: 0 20px 25px -5px hsla(0, 0%, 0%, 0.1), 0 10px 10px -5px hsla(0, 0%, 0%, 0.04);
|
||||
--ccw-shadow-2xl: 0 25px 50px -12px hsla(0, 0%, 0%, 0.25);
|
||||
|
||||
/* Status Colors */
|
||||
--ccw-success: hsl(142, 76%, 36%);
|
||||
--ccw-success-light: hsl(142, 76%, 92%);
|
||||
--ccw-warning: hsl(38, 92%, 50%);
|
||||
--ccw-warning-light: hsl(38, 92%, 94%);
|
||||
--ccw-error: hsl(0, 84%, 60%);
|
||||
--ccw-error-light: hsl(0, 84%, 94%);
|
||||
--ccw-info: hsl(199, 89%, 48%);
|
||||
--ccw-info-light: hsl(199, 89%, 94%);
|
||||
|
||||
/* Typography */
|
||||
--ccw-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
--ccw-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
|
||||
|
||||
/* Spacing */
|
||||
--ccw-spacing-xs: 0.25rem;
|
||||
--ccw-spacing-sm: 0.5rem;
|
||||
--ccw-spacing-md: 1rem;
|
||||
--ccw-spacing-lg: 1.5rem;
|
||||
--ccw-spacing-xl: 2rem;
|
||||
--ccw-spacing-2xl: 3rem;
|
||||
|
||||
/* Border Radius */
|
||||
--ccw-radius-sm: 0.25rem;
|
||||
--ccw-radius-md: 0.375rem;
|
||||
--ccw-radius-lg: 0.5rem;
|
||||
--ccw-radius-xl: 0.75rem;
|
||||
--ccw-radius-full: 9999px;
|
||||
|
||||
/* Transitions */
|
||||
--ccw-transition-fast: 150ms ease;
|
||||
--ccw-transition-base: 200ms ease;
|
||||
--ccw-transition-slow: 300ms ease;
|
||||
|
||||
/* Z-index */
|
||||
--ccw-z-dropdown: 1000;
|
||||
--ccw-z-sticky: 1020;
|
||||
--ccw-z-fixed: 1030;
|
||||
--ccw-z-modal-backdrop: 1040;
|
||||
--ccw-z-modal: 1050;
|
||||
--ccw-z-popover: 1060;
|
||||
--ccw-z-tooltip: 1070;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Dark Mode
|
||||
============================================================================= */
|
||||
|
||||
[data-theme='dark'] {
|
||||
/* Primary Colors (adjusted for dark mode) */
|
||||
--ccw-primary: hsl(var(--ccw-primary-h), var(--ccw-primary-s), 60%);
|
||||
--ccw-primary-hover: hsl(var(--ccw-primary-h), var(--ccw-primary-s), 50%);
|
||||
--ccw-primary-active: hsl(var(--ccw-primary-h), var(--ccw-primary-s), 45%);
|
||||
--ccw-primary-light: hsl(var(--ccw-primary-h), 20%, 20%);
|
||||
--ccw-primary-dark: hsl(var(--ccw-primary-h), var(--ccw-primary-s), 30%);
|
||||
|
||||
/* Secondary Colors */
|
||||
--ccw-secondary: hsl(217, 33%, 17%);
|
||||
--ccw-secondary-hover: hsl(217, 33%, 23%);
|
||||
--ccw-secondary-border: hsl(217, 33%, 28%);
|
||||
|
||||
/* Background Colors */
|
||||
--ccw-bg-h: 222;
|
||||
--ccw-bg-s: 47%;
|
||||
--ccw-bg-l: 11%;
|
||||
--ccw-bg: hsl(var(--ccw-bg-h), var(--ccw-bg-s), var(--ccw-bg-l));
|
||||
--ccw-bg-secondary: hsl(217, 33%, 17%);
|
||||
--ccw-bg-tertiary: hsl(215, 28%, 22%);
|
||||
--ccw-bg-elevated: hsl(217, 33%, 20%);
|
||||
--ccw-bg-overlay: hsla(0, 0%, 0%, 0.7);
|
||||
|
||||
/* Text Colors */
|
||||
--ccw-text-primary: hsl(210, 40%, 98%);
|
||||
--ccw-text-secondary: hsl(215, 16%, 75%);
|
||||
--ccw-text-tertiary: hsl(215, 16%, 55%);
|
||||
--ccw-text-disabled: hsl(215, 16%, 40%);
|
||||
--ccw-text-inverse: hsl(0, 0%, 0%);
|
||||
|
||||
/* Border Colors */
|
||||
--ccw-border-h: 217;
|
||||
--ccw-border-s: 33%;
|
||||
--ccw-border-l: 17%;
|
||||
--ccw-border: hsl(var(--ccw-border-h), var(--ccw-border-s), var(--ccw-border-l));
|
||||
--ccw-border-hover: hsl(var(--ccw-border-h), var(--ccw-border-s), 25%);
|
||||
--ccw-border-focus: var(--ccw-primary);
|
||||
|
||||
/* Shadow (adjusted for dark mode) */
|
||||
--ccw-shadow-sm: 0 1px 2px 0 hsla(0, 0%, 0%, 0.3);
|
||||
--ccw-shadow-md: 0 4px 6px -1px hsla(0, 0%, 0%, 0.4), 0 2px 4px -1px hsla(0, 0%, 0%, 0.3);
|
||||
--ccw-shadow-lg: 0 10px 15px -3px hsla(0, 0%, 0%, 0.5), 0 4px 6px -2px hsla(0, 0%, 0%, 0.3);
|
||||
--ccw-shadow-xl: 0 20px 25px -5px hsla(0, 0%, 0%, 0.6), 0 10px 10px -5px hsla(0, 0%, 0%, 0.3);
|
||||
--ccw-shadow-2xl: 0 25px 50px -12px hsla(0, 0%, 0%, 0.7);
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
Docusaurus Override Variables
|
||||
============================================================================= */
|
||||
|
||||
:root {
|
||||
/* Link colors */
|
||||
--docusaurus-link-color: var(--ccw-primary);
|
||||
--docusaurus-link-hover-color: var(--ccw-primary-hover);
|
||||
--docusaurus-link-underline-color: rgba(var(--ccw-primary-h), var(--ccw-primary-s), var(--ccw-primary-l), 0.3);
|
||||
|
||||
/* Alert colors */
|
||||
--docusaurus-alert-background-color: var(--ccw-bg);
|
||||
--docusaurus-alert-border-color: var(--ccw-border);
|
||||
--docusaurus-alert-border-left-width: 4px;
|
||||
|
||||
/* Code block colors */
|
||||
--docusaurus-code-background: var(--ccw-bg-tertiary);
|
||||
--docusaurus-code-color: var(--ccw-text-primary);
|
||||
--docusaurus-code-font-family: var(--ccw-font-mono);
|
||||
|
||||
/* Pagination colors */
|
||||
--docusaurus-pagination-nav-border-color: var(--ccw-border);
|
||||
--docusaurus-pagination-nav-hover-background-color: var(--ccw-secondary);
|
||||
}
|
||||
|
||||
[data-theme='dark'] {
|
||||
--docusaurus-link-underline-color: rgba(60, 170%, 255%, 0.3);
|
||||
}
|
||||
Reference in New Issue
Block a user