Skip to content

Improve Aliki visuals #1505

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
st0012 merged 2 commits into from
Dec 17, 2025
+164 −10
Merged

Improve Aliki visuals #1505

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd111df
Improve Aliki visuals
st0012 Dec 16, 2025
b921b96
Revert copy button changes
st0012 Dec 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
174 changes: 164 additions & 10 deletions lib/rdoc/generator/template/aliki/css/rdoc.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,7 @@

/* Shadows */
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 10%), 0 1px 2px -1px rgb(0 0 0 / 10%);
--shadow-md: 0 2px 8px rgb(0 0 0 / 10%);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 10%), 0 8px 10px -6px rgb(0 0 0 / 10%);

Expand All @@ -158,6 +159,13 @@
/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-base: 200ms ease-in-out;
--transition-slow: 350ms ease-in-out;
--ease-out-smooth: cubic-bezier(0.4, 0, 0.2, 1);

/* Animation Durations */
--duration-fast: 250ms;
--duration-base: 300ms;
--duration-medium: 350ms;

/* Z-Index Scale */
--z-fixed: 300;
Expand Down Expand Up @@ -202,6 +210,7 @@
--color-accent-primary: var(--color-primary-500);
--color-accent-hover: var(--color-primary-400);
--color-accent-subtle: rgb(235 84 79 / 10%);
--color-accent-subtle-hover: rgb(235 84 79 / 20%);
--color-code-bg: var(--color-neutral-800);
--color-code-border: var(--color-neutral-700);
--color-nav-bg: var(--color-neutral-900);
Expand All @@ -211,6 +220,7 @@

/* Dark theme shadows (slightly more subtle) */
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 40%), 0 1px 2px -1px rgb(0 0 0 / 40%);
--shadow-md: 0 2px 8px rgb(0 0 0 / 40%);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 40%), 0 4px 6px -4px rgb(0 0 0 / 40%);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 40%), 0 8px 10px -6px rgb(0 0 0 / 40%);

Expand Down Expand Up @@ -291,7 +301,12 @@ pre {
border-radius: var(--radius-sm);
cursor: pointer;
opacity: 0.6;
transition: opacity var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
transition:
opacity var(--transition-fast),
background var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast),
box-shadow var(--transition-fast);
display: flex;
align-items: center;
justify-content: center;
Expand All @@ -305,10 +320,18 @@ pre {
opacity: 1;
background: var(--color-background-tertiary);
border-color: var(--color-border-emphasis);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}

.copy-code-button:focus {
outline: none;
box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.copy-code-button:active {
transform: scale(0.95);
transform: scale(0.92);
box-shadow: none;
}

.copy-code-button svg {
Expand All @@ -320,7 +343,7 @@ pre {
stroke-linecap: round;
stroke-linejoin: round;
color: var(--color-text-secondary);
transition: color var(--transition-fast);
transition: color var(--transition-fast), transform var(--transition-base);
}

.copy-code-button:hover svg {
Expand Down Expand Up @@ -457,7 +480,11 @@ header.top-navbar .navbar-search form {
border-radius: var(--radius-md);
color: var(--color-text-primary);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
transition:
background var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast),
transform var(--transition-fast);
font-size: var(--font-size-lg);
line-height: 1;
width: 2.5rem;
Expand All @@ -468,6 +495,7 @@ header.top-navbar .navbar-search form {
background: var(--color-background-secondary);
border-color: var(--color-accent-primary);
color: var(--color-accent-primary);
transform: scale(1.05);
}

.theme-toggle:focus {
Expand All @@ -476,13 +504,17 @@ header.top-navbar .navbar-search form {
box-shadow: 0 0 0 3px var(--color-accent-subtle);
}

.theme-toggle:active {
transform: scale(0.95);
}

.theme-toggle-icon {
display: inline-block;
transition: transform var(--transition-base);
transition: transform var(--duration-base) var(--ease-out-smooth);
}

.theme-toggle:hover .theme-toggle-icon {
transform: rotate(20deg);
transform: rotate(15deg) scale(1.1);
}

/* Mobile navbar */
Expand Down Expand Up @@ -537,11 +569,33 @@ nav {
background: var(--color-nav-bg);
color: var(--color-nav-text);
overflow: hidden auto;
overscroll-behavior: contain;
display: flex;
flex-direction: column;
position: sticky;
top: var(--layout-header-height);
height: calc(100vh - var(--layout-header-height));
scrollbar-width: thin;
scrollbar-color: var(--color-border-default) transparent;
}

/* Custom scrollbar for WebKit browsers */
nav::-webkit-scrollbar {
width: 6px;
}

nav::-webkit-scrollbar-track {
background: transparent;
}

nav::-webkit-scrollbar-thumb {
background: var(--color-border-default);
border-radius: var(--radius-sm);
transition: background var(--transition-fast);
}

nav::-webkit-scrollbar-thumb:hover {
background: var(--color-border-emphasis);
}

/* Mobile navigation */
Expand Down Expand Up @@ -615,6 +669,18 @@ nav ul li {
line-height: var(--line-height-relaxed);
}

nav ul li a {
padding: var(--space-1) 0;
transition:
color var(--transition-fast),
transform var(--transition-fast),
padding var(--transition-fast);
}

nav ul li a:hover {
padding-left: var(--space-1);
}

nav ul ul {
padding-left: var(--space-5);
margin-top: var(--space-2);
Expand All @@ -632,6 +698,17 @@ nav a {
text-decoration: none;
}

/* Truncation for direct nav links (not links inside code tags) */
nav .nav-list > li > a,
nav .nav-section > ul > li > a,
nav .nav-section > dl > dd > a {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

nav footer {
padding: var(--space-4);
border-top: 1px solid var(--color-border-default);
Expand Down Expand Up @@ -735,6 +812,11 @@ nav .nav-section-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: inherit;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

nav .nav-section-chevron {
Expand Down Expand Up @@ -1113,19 +1195,54 @@ main .anchor-link:target {
main .method-source-code {
visibility: hidden;
max-height: 0;
overflow: auto;
transition: max-height var(--transition-base), visibility var(--transition-base);
overflow: hidden;
opacity: 0;
transform: translateY(-8px);
transition:
max-height var(--duration-medium) var(--ease-out-smooth),
visibility var(--duration-medium),
opacity var(--duration-fast) ease-out,
transform var(--duration-fast) ease-out;
}

main .method-source-code pre {
border-color: var(--color-accent-hover);
border-left: 3px solid var(--color-accent-primary);
width: 100%;
box-sizing: border-box;
transition: border-color var(--transition-fast);
scrollbar-width: thin;
scrollbar-color: var(--color-border-default) transparent;
}

main .method-source-code pre::-webkit-scrollbar {
width: 6px;
height: 6px;
}

main .method-source-code pre::-webkit-scrollbar-track {
background: transparent;
}

main .method-source-code pre::-webkit-scrollbar-thumb {
background: var(--color-border-default);
border-radius: var(--radius-sm);
}

main .method-source-code pre::-webkit-scrollbar-thumb:hover {
background: var(--color-border-emphasis);
}

main .method-source-code pre::-webkit-scrollbar-corner {
background: transparent;
}

main .method-source-code.active-menu {
visibility: visible;
max-height: 100vh;
overflow: auto;
opacity: 1;
transform: translateY(0);
}

main .method-description .method-calls-super {
Expand Down Expand Up @@ -1165,10 +1282,47 @@ main .method-heading .method-args {
}

main .method-controls {
line-height: 20px;
float: right;
color: var(--color-accent-hover);
}

main .method-controls summary {
display: inline-block;
line-height: 20px;
color: var(--color-accent-primary);
cursor: pointer;
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
background: var(--color-accent-subtle);
border: 1px solid transparent;
transition:
color var(--transition-fast),
background var(--transition-fast),
border-color var(--transition-fast),
transform var(--transition-fast);
user-select: none;
-webkit-user-select: none;
list-style: none;
}

main .method-controls summary::-webkit-details-marker {
display: none;
}

main .method-controls summary:hover {
background: var(--color-primary-100);
border-color: var(--color-primary-300);
transform: translateY(-1px);
}

main .method-controls summary:active {
transform: scale(0.96);
}

[data-theme="dark"] main .method-controls summary:hover {
background: var(--color-accent-subtle-hover);
border-color: var(--color-primary-500);
}

main .method-description,
Expand Down