Skip to content

Commit

Permalink
feat: restore custom background
Browse files Browse the repository at this point in the history
  • Loading branch information
logonoff committed Jan 13, 2025
1 parent 6740e2a commit e166f53
Show file tree
Hide file tree
Showing 7 changed files with 81 additions and 495 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ To undo the changes for testing:
The RHO branded templates take advantage of the override mechanism by providing customized templates via secrets via the following method:
1. Copy the output from `yarn generate-branding-secret` to https://github.com/openshift/cluster-authentication-operator/blob/master/bindata/oauth-openshift/branding-secret.yaml.
2. Submit a pull request to https://github.com/openshift/cluster-authentication-operator containing the copied changes.
1. Submit a pull request to https://github.com/openshift/cluster-authentication-operator containing the copied changes.
To test the changes:
Expand Down
30 changes: 29 additions & 1 deletion _includes/head.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,35 @@

{% if collection.label != 'okd' %}
.pf-v6-c-background-image {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 192 145' version='1.1' viewBox='0 0 192 145' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .rh%7Bfill:%23A3A3A3;%7D%3C/style%3E%3Cpath class='rh' opacity='0.2' d='m127.5 83.5c12.5 0 30.6-2.6 30.6-17.5 0-1.2 0-2.3-0.3-3.4l-7.4-32.4c-1.7-7.1-3.2-10.3-15.7-16.6-9.7-5-30.8-13.1-37.1-13.1-5.9 0-7.6 7.5-14.5 7.5-6.7 0-11.6-5.6-17.9-5.6-6 0-9.9 4.1-12.9 12.5 0 0-8.4 23.7-9.5 27.2-0.2 0.6-0.2 1.4-0.2 1.9-0.1 9.3 36.2 39.5 84.9 39.5m32.5-11.4c1.7 8.2 1.7 9.1 1.7 10.1 0 14-15.7 21.8-36.4 21.8-46.8 0-87.7-27.4-87.7-45.5 0-2.8 0.6-5.4 1.5-7.3-16.8 0.8-38.6 3.8-38.6 23 0 31.5 74.6 70.3 133.7 70.3 45.3 0 56.7-20.5 56.7-36.6-0.1-12.8-11-27.2-30.9-35.8'/%3E%3C/svg%3E") !important;
background-color: var(--pf-t--global--background--color--secondary--default);
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg enable-background='new 0 0 192 145' version='1.1' viewBox='0 0 192 145' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle type='text/css'%3E .rh%7Bfill:%23A3A3A3;%7D%3C/style%3E%3Cpath class='rh' opacity='0.2' d='m127.5 83.5c12.5 0 30.6-2.6 30.6-17.5 0-1.2 0-2.3-0.3-3.4l-7.4-32.4c-1.7-7.1-3.2-10.3-15.7-16.6-9.7-5-30.8-13.1-37.1-13.1-5.9 0-7.6 7.5-14.5 7.5-6.7 0-11.6-5.6-17.9-5.6-6 0-9.9 4.1-12.9 12.5 0 0-8.4 23.7-9.5 27.2-0.2 0.6-0.2 1.4-0.2 1.9-0.1 9.3 36.2 39.5 84.9 39.5m32.5-11.4c1.7 8.2 1.7 9.1 1.7 10.1 0 14-15.7 21.8-36.4 21.8-46.8 0-87.7-27.4-87.7-45.5 0-2.8 0.6-5.4 1.5-7.3-16.8 0.8-38.6 3.8-38.6 23 0 31.5 74.6 70.3 133.7 70.3 45.3 0 56.7-20.5 56.7-36.6-0.1-12.8-11-27.2-30.9-35.8'/%3E%3C/svg%3E");
background-position: 110% 105%;
background-repeat: no-repeat;
background-size: 90%;
@media (min-width: 768px) {
background-size: 80%;
}
@media (min-width: 1000px) {
background-position: 110% 100%;
background-size: 70%;
}
@media(min-width: 1200px) {
background-position: 100% 70%;
background-size: 70%;
}
@media (min-width: 1400px) {
background-size: 75%;
}
@media (min-width: 1800px) {
background-size: 70%;
}
@media (min-width: 1800px) {
background-position: 75% 80%;
background-size: 60%;
}
@media (min-width: 2200px) {
background-size: 50%;
}
}
{% endif %}

Expand Down
4 changes: 4 additions & 0 deletions _includes/styles/errors.css
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ body) {
--pf-t--global--spacer--700: 4rem;
--pf-t--global--text-decoration--line--200: underline;
--pf-t--global--background--color--100: var(--pf-t--color--white);
--pf-t--global--background--color--200: var(--pf-t--color--gray--10);
--pf-t--global--border--color--100: var(--pf-t--color--gray--30);
--pf-t--global--border--radius--large: var(--pf-t--global--border--radius--400);
--pf-t--global--color--status--danger--100: var(--pf-t--color--red-orange--60);
Expand All @@ -127,6 +128,7 @@ body) {
--pf-t--global--text-decoration--link--line--default: var(--pf-t--global--text-decoration--line--200);
--pf-t--global--text-decoration--link--line--hover: var(--pf-t--global--text-decoration--line--200);
--pf-t--global--background--color--primary--default: var(--pf-t--global--background--color--100);
--pf-t--global--background--color--secondary--default: var(--pf-t--global--background--color--200);
--pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
--pf-t--global--color--status--danger--default: var(--pf-t--global--color--status--danger--100);
--pf-t--global--font--size--body--default: var(--pf-t--global--font--size--sm);
Expand All @@ -139,6 +141,7 @@ body) {
}

:root:where(.pf-v6-theme-dark) {
--pf-t--global--dark--background--color--100: var(--pf-t--color--gray--95);
--pf-t--global--dark--background--color--200: var(--pf-t--color--gray--80);
--pf-t--global--dark--border--color--200: var(--pf-t--color--gray--40);
--pf-t--global--dark--color--status--danger--100: var(--pf-t--color--red-orange--50);
Expand All @@ -147,6 +150,7 @@ body) {
--pf-t--global--dark--text--color--link--100: var(--pf-t--color--blue--20);
--pf-t--global--dark--text--color--link--200: var(--pf-t--color--blue--10);
--pf-t--global--background--color--primary--default: var(--pf-t--global--dark--background--color--200);
--pf-t--global--background--color--secondary--default: var(--pf-t--global--dark--background--color--100);
--pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
--pf-t--global--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--100);
--pf-t--global--icon--color--regular: var(--pf-t--global--dark--icon--color--100);
Expand Down
Loading

0 comments on commit e166f53

Please sign in to comment.