Skip to content

Commit 697a2a1

Browse files
nastena1606nastena1606
committed
Updated css to match original render
ing of header and buttons as it was in the material theme
1 parent 73b48e2 commit 697a2a1

3 files changed

Lines changed: 76 additions & 7 deletions

File tree

‎docs/css/design.css‎

Lines changed: 45 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,9 @@
7979
/* Primitives */
8080
--md-hue: 220;
8181
--md-primary-fg-color: var(--sky700);
82+
/* Header chrome and search use these; custom primary in MaterialX may omit them in light mode. */
83+
--md-primary-bg-color: var(--white);
84+
--md-primary-bg-color--light: rgba(255, 255, 255, 0.72);
8285

8386
/* Type */
8487
--md-typeset-color: var(--stone900);
@@ -144,6 +147,13 @@
144147
--md-typeset-table-color: hsla(var(--md-hue),0%,100%,0.25)
145148
}
146149

150+
/* Light scheme is on `body` in stock Material; some builds attach it to `html` instead. */
151+
body[data-md-color-scheme="default"],
152+
html[data-md-color-scheme="default"] {
153+
--md-primary-bg-color: var(--white) !important;
154+
--md-primary-bg-color--light: rgba(255, 255, 255, 0.72) !important;
155+
}
156+
147157
/* Typography */
148158

149159
.md-typeset {
@@ -242,7 +252,41 @@
242252
font-weight: bold;
243253
padding: 0.4167em 1.6em;
244254
border-radius: 10rem;
245-
transition: all 0.2s ease-out;
255+
border-style: solid;
256+
border-width: 0.1rem;
257+
transition: color 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
258+
}
259+
/*
260+
* Outlined buttons: Material’s hover uses accent fill; we keep a visible border.
261+
* Light mode: white fill. Dark (slate): transparent fill so buttons match the page background.
262+
*/
263+
body[data-md-color-scheme="default"] .md-typeset .md-button:not(.md-button--primary),
264+
html[data-md-color-scheme="default"] .md-typeset .md-button:not(.md-button--primary) {
265+
background-color: var(--white) !important;
266+
border-color: var(--md-typeset-a-color) !important;
267+
color: var(--md-typeset-a-color) !important;
268+
}
269+
body[data-md-color-scheme="default"] .md-typeset .md-button:not(.md-button--primary):focus,
270+
body[data-md-color-scheme="default"] .md-typeset .md-button:not(.md-button--primary):hover,
271+
html[data-md-color-scheme="default"] .md-typeset .md-button:not(.md-button--primary):focus,
272+
html[data-md-color-scheme="default"] .md-typeset .md-button:not(.md-button--primary):hover {
273+
background-color: var(--white) !important;
274+
border-color: var(--md-accent-fg-color) !important;
275+
color: var(--md-accent-fg-color) !important;
276+
}
277+
body[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary),
278+
html[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
279+
background-color: transparent !important;
280+
border-color: var(--md-typeset-a-color) !important;
281+
color: var(--md-typeset-a-color) !important;
282+
}
283+
body[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):focus,
284+
body[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):hover,
285+
html[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):focus,
286+
html[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):hover {
287+
background-color: transparent !important;
288+
border-color: var(--md-accent-fg-color) !important;
289+
color: var(--md-accent-fg-color) !important;
246290
}
247291
.md-typeset .md-button--primary {
248292
color: var(--md-accent-bg-color);
@@ -252,11 +296,6 @@
252296
.md-typeset .md-button--primary:hover {
253297
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 2px 4px -1px rgba(0, 0, 0, 0.20);
254298
}
255-
.md-typeset .md-button:not(.md-button--primary):focus,
256-
.md-typeset .md-button:not(.md-button--primary):hover {
257-
background: none;
258-
color: var(--md-accent-fg-color);
259-
}
260299
.md-typeset code {
261300
font-size: 0.9091em;
262301
color: var(--md-typeset-color);

‎docs/css/operators.css‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,34 @@
6464
rgba(0,0,0,0.3) 33%,
6565
rgba(0,0,0,0.3) 95%
6666
);
67+
}
68+
69+
/* Header foreground loads after design.css; wins if MaterialX stylesheet is merged before extras. */
70+
body[data-md-color-scheme="default"] .md-header,
71+
body[data-md-color-scheme="default"] .md-tabs,
72+
html[data-md-color-scheme="default"] .md-header,
73+
html[data-md-color-scheme="default"] .md-tabs {
74+
color: #fff !important;
75+
}
76+
body[data-md-color-scheme="default"] .md-header a,
77+
body[data-md-color-scheme="default"] .md-header .md-source,
78+
body[data-md-color-scheme="default"] .md-header .md-source__repository,
79+
html[data-md-color-scheme="default"] .md-header a,
80+
html[data-md-color-scheme="default"] .md-header .md-source,
81+
html[data-md-color-scheme="default"] .md-header .md-source__repository {
82+
color: inherit !important;
83+
}
84+
@media screen and (min-width: 60em) {
85+
body[data-md-color-scheme="default"] .md-header .md-search__input::placeholder,
86+
html[data-md-color-scheme="default"] .md-header .md-search__input::placeholder {
87+
color: rgba(255, 255, 255, 0.72) !important;
88+
}
89+
body[data-md-color-scheme="default"] .md-header .md-search__input + .md-search__icon,
90+
html[data-md-color-scheme="default"] .md-header .md-search__input + .md-search__icon {
91+
color: #fff !important;
92+
}
93+
}
94+
body[data-md-color-scheme="default"] .md-header .md-search__input ~ .md-search__icon,
95+
html[data-md-color-scheme="default"] .md-header .md-search__input ~ .md-search__icon {
96+
color: rgba(255, 255, 255, 0.72) !important;
6797
}

‎properdocs-base.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ repo_url: https://github.com/percona/k8sps-docs
1111
edit_uri: edit/main/docs/
1212

1313
theme:
14-
name: material
14+
name: materialx
1515
logo: assets/operators-mark.svg
1616
favicon: assets/operators-fav.svg
1717
custom_dir: _resource/overrides/

0 commit comments

Comments
 (0)