Skip to content

Modify css for better web accessibility #90

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
merged 12 commits into from
Aug 10, 2022
Merged

Modify css for better web accessibility #90

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9b8b62e
change link, code and heading color
Revathyvenugopal162 Aug 5, 2022
33b8335
Modify side colomn size and dropdown button
Revathyvenugopal162 Aug 5, 2022
f7075cc
Modify toctree size
Revathyvenugopal162 Aug 5, 2022
18b86b9
Modify allignment
Revathyvenugopal162 Aug 5, 2022
e82aeaf
Modify code block color
Revathyvenugopal162 Aug 5, 2022
c48af57
Modify inline code border
Revathyvenugopal162 Aug 5, 2022
5a4064f
Apply suggestions from code review
Revathyvenugopal162 Aug 8, 2022
651f8d4
Modify syntax, quotes and link colors
Revathyvenugopal162 Aug 8, 2022
66c83a0
Modify inline comments
Revathyvenugopal162 Aug 8, 2022
273c86b
Modify link color for dark theme
Revathyvenugopal162 Aug 10, 2022
971b917
Modify the font weight for code block and toctree
Revathyvenugopal162 Aug 10, 2022
7a44f3b
Modify code for sig-parameter
Revathyvenugopal162 Aug 10, 2022
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
153 changes: 132 additions & 21 deletions src/ansys_sphinx_theme/static/css/ansys_sphinx_theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
--pst-color-navbar-link: 255, 255, 255;
--pst-color-navbar-link-hover: 255, 183, 27; /* --ansysBronze */
--pst-color-navbar-link-active: 255, 183, 27; /* --ansysBronze */
--pst-font-size-h1: 40px;

}

Expand All @@ -56,7 +57,7 @@ html[data-theme="light"] {
--pst-color-success: rgb(40, 167, 69);
--pst-color-text-base: rgb(51, 51, 51);
--pst-color-text-muted: rgb(26, 24, 24);
--pst-color-border: rgb(201, 201, 201);
--pst-color-border: #c9c9c9;
--pst-color-shadow: rgb(216, 216, 216);

/*****************************************************************************
Expand All @@ -68,7 +69,7 @@ html[data-theme="light"] {
* on_surface: object set on surface object (without shadows)
*/
--pst-color-on-background: rgb(0, 0, 0);
--pst-color-on-surface: rgb(255, 255, 255);
--pst-color-on-surface: #f2f2f2;

/*****************************************************************************
* extensions
Expand All @@ -80,12 +81,13 @@ html[data-theme="light"] {
* layout
*/

--pst-color-link: rgb( 57, 114, 161);
--pst-color-link-hover: #005B81;
--pst-color-inline-code: rgb(232, 62, 140);
--pst-color-link:#0077B3;
--pst-color-link-hover:#32cfea;
--pst-color-inline-code: #CD186D;
--pst-color-target: rgb(255, 255, 255);
/* color for sphinx-gallery-code output*/
--pst-color-codeout: #fafae2;
--pst-color-sig:#0965C8;
}

html[data-theme="dark"] {
Expand All @@ -95,7 +97,7 @@ html[data-theme="dark"] {
--pst-color-primary: rgb(255, 183, 27);
--pst-color-secondary: rgb(200, 146, 17);
--pst-color-success: rgb(72, 135, 87);
--pst-color-text-base: rgb(217, 215, 201);
--pst-color-text-base: rgb(201, 209, 217);
--pst-color-text-muted: rgb(192, 192, 192);
--pst-color-border: rgb(192, 192, 192);
--pst-color-shadow: var(--pst-color-background);
Expand All @@ -114,12 +116,17 @@ html[data-theme="dark"] {
* layout
*/

--pst-color-link: rgb( 57, 114, 161);
--pst-color-link-hover: #005B81;
--pst-color-link: #0088CC;
--pst-color-link-hover:#32cfea;
--pst-color-inline-code: rgb(221, 158, 194);
--pst-color-target: rgb(71, 39, 0);
/* color for sphinx-gallery-code output*/
--pst-color-codeout: #6c757d;
--pst-color-sig:#d6ab1e;
}

h1, h2 {
color: var(--pst-color-text-base);
}

.admonition, div.admonition{
Expand All @@ -131,10 +138,21 @@ html[data-theme="dark"] {
}

.docutils {
color: #C89211;
font-family: 'Inconsolata';
font-weight: bold;
font-size: 107%;
color: var(--pst-color-inline-code);
font-family:var(--font-family-monospace);
font-weight: 500;
font-size: 87.5%;
}

code.literal {
padding: .1rem .25rem;
padding-top: 0.1rem;
padding-right: 0.25rem;
padding-bottom: 0.1rem;
padding-left: 0.25rem;
background-color: var(--pst-color-on-surface);
border: 1px solid var(--pst-color-border);
border-radius: .25rem;
}

.xref.std.std-ref {
Expand All @@ -146,17 +164,16 @@ html[data-theme="dark"] {
}

.sig-prename {
color: #C89211;
font-family: 'Source Sans Pro', sans-serif;
}

.sig-name.descname {
color: #C89211;
color: var(--pst-color-inline-code);
/* font-family: ' Source Sans Pro', sans-serif; */
}

.sig-name {
color: #C89211;
color: var(--pst-color-sig);
font-family: 'Source Sans Pro', sans-serif;
}

Expand Down Expand Up @@ -343,9 +360,9 @@ table.longtable-centered tr:hover td {
}

/*
##############
DataFrame
##############
#########
DataFrame
#########
Not sure why the odd columns (white) are rendered gray.

I do not think we will be able to call this class.
Expand All @@ -367,7 +384,6 @@ I do not think we will be able to call this class.
background-color: rgb(255, 183, 27, 0.6);
}


/*
#########################
DataFrame-centered
Expand Down Expand Up @@ -401,8 +417,6 @@ I do not think we will be able to call this class.
text-align: center;
}



/*
###############
Autosummary
Expand Down Expand Up @@ -442,3 +456,100 @@ a > code.download
.sphx-glr-script-out .highlight pre{
background-color: var(--pst-color-codeout) !important;
}

.prev-next-area a p.prev-next-title {
color: var(--pst-color-link);
font-weight: 600;
font-size: 1.1em;
}

html[data-theme="light"] .highlight .s1 {
color: #519312;
}

/*
###############
Dropdown button
###############
*/

.navbar button.navbar-toggler {
margin-right: 1em;
border-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
Comment on lines +471 to +479
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Revathyvenugopal162 Thanks for adding it. 👍

}

/*
####################################################
Side column size (first and second column from left)
####################################################
*/

.col-md-3 {
flex: 0 0 20%;
max-width: 20%;
}

.col-xl-7 {
flex: 0 0 63.33333%;
max-width: 63.33333%;
}

a.headerlink {
color: var(--pst-color-text-base);
}

/*
#################################
Right side toctree color and font
#################################
*/

.toc-entry>.nav-link.active {
font-weight: 500;
color: var(--pst-color-link);
background-color: transparent;
border-left: 2px solid var(--pst-color-text-muted);
}


.toc-h2 {
font-size: 0.98rem;
}

.toc-h3 {
font-size: .96rem;
}

.toc-h4 {
font-size: .90rem;
}

.toc-entry a:hover {
color: var(--pst-color-link);
text-decoration: none;
font-weight: 600;
}

/*
############################################
Navigation column (according to side column)
############################################
*/
.col-lg-9 {
flex: 0 0 80%;
max-width: 80%;
padding-right: 25px;
padding-left: 40px;
}

/*
#################################
Syntax highlighting in code block
#################################
*/

html[data-theme="light"] .highlight .o {
color: #B35000;
font-weight: bold;
}