Skip to content

Update custom.css to offer a Material Design theme #308

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
jason-fox merged 14 commits into from
May 25, 2026
Merged

Update custom.css to offer a Material Design theme #308

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d58ed7a
Update custom to offer a Material Design theme
jason-fox May 13, 2026
e84ea78
Add missing hover classes to tabs
jason-fox May 13, 2026
11e4e38
Hover button updates
jason-fox May 13, 2026
140e8bf
Fixing CSS issues
jason-fox May 13, 2026
45ed6ce
Fix note regression
jason-fox May 13, 2026
318417b
More tweaks
jason-fox May 13, 2026
ed39d15
Update notes
jason-fox May 14, 2026
85f80e1
Add RTL note override
jason-fox May 23, 2026
88f954a
Reorder attrs
jason-fox May 23, 2026
40cf043
Remove shdaow
jason-fox May 23, 2026
1975d21
Ensure icon is displayed on note
jason-fox May 24, 2026
1b614c3
Fix icon
jason-fox May 24, 2026
df01642
Increase contrast.
jason-fox May 25, 2026
4536a13
Tweak dita colors to use bootstrap defined values
jason-fox May 25, 2026
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
21 changes: 13 additions & 8 deletions css/common-bootstrap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,15 @@
*/

:root {
--dita-prussian-blue: #1d365d;
--dita-maroon: #800000;
--dita-prussian-blue: var(--bs-primary-text-emphasis);
--dita-maroon: var(--bs-danger-text-emphasis);
--dita-violet: var(--bs-purple);
}

.list-group-item.active,
.nav-link.active,
[data-bs-theme='dark'] {
--dita-prussian-blue: #6a91cf;
--dita-violet: #cc99cd;
--dita-maroon: #ff7676;
}

.list-group-item {
Expand Down Expand Up @@ -48,14 +46,10 @@

@media (prefers-color-scheme: dark) {
:root {
--dita-prussian-blue: #6a91cf;
--dita-violet: #cc99cd;
--dita-maroon: #ff7676;
}

[data-bs-theme='light'] {
--dita-prussian-blue: #1d365d;
--dita-maroon: #800000;
--dita-violet: var(--bs-purple);
}
}
Expand Down Expand Up @@ -136,3 +130,14 @@
.search-box:focus-visible {
outline: -webkit-focus-ring-color auto 1px;
}

.note {
border-left: 6px solid;
border-left-color: var(--bs-alert-color, transparent);
}

[dir='rtl'] .note {
border-right: 6px solid;
border-right-color: var(--bs-alert-color, transparent);
border-left: 0;
}
744 changes: 734 additions & 10 deletions css/custom.css
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions xsl/utility-classes.xsl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -596,7 +596,7 @@
else if (@type='trouble') then 'alert-warning'
else if (@type='danger') then 'alert-danger'
else if (@type='notice') then 'alert-info'
else if (@type='note') then 'alert-primary'
else if (@type='note' or (contains(@class, ' topic/note ') and not(contains(@class, ' bootstrap-d/alert ')) and not(contains(@class, ' topic/section ')) and empty(@type))) then 'alert-primary'
else if (@type='other') then 'alert-dark'
else 'alert-info'"
/>
Expand Down Expand Up @@ -795,7 +795,8 @@
<xsl:variable name="icon">
<xsl:value-of
select="
if (@type='tip') then $BOOTSTRAP_ICON_TIP
if (@icon or contains(@otherprops, 'icon(') or *[contains(@class, ' topic/title ')]/*[contains(@class, ' bootstrap-d/icon ')]) then ''
else if (@type='tip') then $BOOTSTRAP_ICON_TIP
else if (@type='fastpath') then $BOOTSTRAP_ICON_FASTPATH
else if (@type='remember') then $BOOTSTRAP_ICON_REMEMBER
else if (@type='restriction') then $BOOTSTRAP_ICON_RESTRICTION
Expand All @@ -806,7 +807,7 @@
else if (@type='trouble') then $BOOTSTRAP_ICON_TROUBLE
else if (@type='danger') then $BOOTSTRAP_ICON_DANGER
else if (@type='notice') then $BOOTSTRAP_ICON_NOTICE
else if (@type='note') then $BOOTSTRAP_ICON_NOTE
else if (@type='note' or (contains(@class, ' topic/note ') and not(contains(@class, ' bootstrap-d/alert ')) and not(contains(@class, ' topic/section ')) and empty(@type))) then $BOOTSTRAP_ICON_NOTE
else ''"
/>
</xsl:variable>
Expand Down