pub-solar/keycloak-theme
5
1
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Small style improvements

Browse source
This commit is contained in:
Benjamin Bädorf 2022-11-27 04:51:25 +01:00
parent b591b83da9
commit 25a4260096
No known key found for this signature in database
GPG key ID: 4406E80E13CD656C
13 changed files with 106 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1,2 +1,3 @@
tags tags
.direnv .direnv
common/resources/css/*.css

2
account/applications.ftl
View file

@ -11,7 +11,7 @@
<input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}"> <input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
<input type="hidden" id="referrer" name="referrer" value="${stateChecker}"> <input type="hidden" id="referrer" name="referrer" value="${stateChecker}">
<table class="table table-striped table-bordered"> <table class="ps-table">
<thead> <thead>
<tr> <tr>
<td>${msg("application")}</td> <td>${msg("application")}</td>

3
account/sessions.ftl
View file

@ -7,7 +7,7 @@
</div> </div>
</div> </div>
<table class="table table-striped table-bordered"> <table class="ps-table">
<thead> <thead>
<tr> <tr>
<td>${msg("ip")}</td> <td>${msg("ip")}</td>
@ -33,7 +33,6 @@
</tr> </tr>
</#list> </#list>
</tbody> </tbody>
</table> </table>
<form action="${url.sessionsUrl}" method="post"> <form action="${url.sessionsUrl}" method="post">

2
account/totp.ftl
View file

@ -65,7 +65,7 @@
<#if mode?? && mode = "manual"> <#if mode?? && mode = "manual">
<li> <li>
<p>${msg("totpManualStep2")}</p> <p>${msg("totpManualStep2")}</p>
<p><span id="kc-totp-secret-key">${totp.totpSecretEncoded}</span></p> <pre class="ps-mono"><code>${totp.totpSecretEncoded}</code></pre>
<p><a href="${totp.qrUrl}" id="mode-barcode">${msg("totpScanBarcode")}</a></p> <p><a href="${totp.qrUrl}" id="mode-barcode">${msg("totpScanBarcode")}</a></p>
</li> </li>
<li> <li>

0
common/resources/css/.css → common/resources/css/.gitkeep
View file

56
common/resources/css/index.css
View file

@ -4,10 +4,11 @@
html { html {
--accent: #ed1c24; --accent: #ed1c24;
--foreground: #000; --foreground: #000;
--foreground-light: rgba(0, 0, 0, 0.7); --foreground-lighter-1: rgba(0, 0, 0, 0.7);
--foreground-lighter-2: rgba(0, 0, 0, 0.3);
--background: #fff; --background: #fff;
--background-alt-1: #f5f5f5; --background-darker-1: #f5f5f5;
--background-alt-2: #eeeeee; --background-darker-2: #eeeeee;
font-family: 'Open Sans', Arial, sans-serif; font-family: 'Open Sans', Arial, sans-serif;
font-weight: 800; font-weight: 800;
background: var(--background); background: var(--background);
@ -36,7 +37,7 @@ html {
.ps-link { .ps-link {
cursor: pointer; cursor: pointer;
color: var(--accent); color: var(--accent);
border-bottom: 1px solid white; border-bottom: 1px solid transparent;
transition: border-bottom 0.1s ease; transition: border-bottom 0.1s ease;
text-decoration: none; } text-decoration: none; }
.ps-link:hover { .ps-link:hover {
@ -61,7 +62,7 @@ html {
line-height: 1.2rem; line-height: 1.2rem;
border: 2px solid var(--foreground); border: 2px solid var(--foreground);
border-radius: 1.5rem; border-radius: 1.5rem;
background-color: var(--background-alt-2); background-color: var(--background-darker-2);
cursor: pointer; } cursor: pointer; }
.ps-button:hover, .ps-button:focus { .ps-button:hover, .ps-button:focus {
border-color: var(--accent); } border-color: var(--accent); }
@ -76,7 +77,7 @@ html {
.ps-input { .ps-input {
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
border: 2px solid var(--foreground-light); border: 2px solid var(--foreground-lighter-1);
font-size: 1.2rem; } font-size: 1.2rem; }
.ps-input:hover, .ps-input:focus { .ps-input:hover, .ps-input:focus {
border-color: var(--accent); } border-color: var(--accent); }
@ -84,9 +85,32 @@ html {
color: var(--background); color: var(--background);
background-color: var(--foreground); } background-color: var(--foreground); }
.ps-input:disabled { .ps-input:disabled {
background-color: var(--background-alt-2); } background-color: var(--background-darker-2); }
.ps-input:disabled:hover { .ps-input:disabled:hover {
border-color: var(--foreground-light); } border-color: var(--foreground-lighter-1); }
.ps-table {
overflow: auto;
border-collapse: collapse;
margin-left: -0.25rem;
width: calc(100% + 0.25rem); }
.ps-table td, .ps-table th {
padding: 0.1rem 0.25rem; }
.ps-table tr {
border: 0;
border-left: 0.25rem solid transparent; }
.ps-table tr:nth-child(2n) {
background-color: var(--background-darker-1);
border-left: 0.25rem solid var(--background-darker-1); }
.ps-table tr:hover {
background-color: var(--background-darker-2);
border-color: var(--accent); }
.ps-table thead tr {
border-bottom: 4px solid var(--foreground-lighter-1);
font-weight: bold;
text-align: center; }
.ps-table thead td, .ps-table th {
padding: 0.1rem 0.5rem; }
.ps-form-group { .ps-form-group {
display: flex; display: flex;
@ -218,7 +242,7 @@ html {
flex-shrink: 1; flex-shrink: 1;
pointer-events: all; pointer-events: all;
color: var(--foreground); color: var(--foreground);
background: white; background: var(--background);
overflow-wrap: break-word; overflow-wrap: break-word;
hyphens: auto; hyphens: auto;
pointer-events: all; } pointer-events: all; }
@ -235,7 +259,7 @@ html {
overflow: auto; } overflow: auto; }
.ps-page--section a { .ps-page--section a {
color: var(--accent); color: var(--accent);
border-bottom: 1px solid white; border-bottom: 1px solid transparent;
transition: border-bottom 0.1s ease; transition: border-bottom 0.1s ease;
text-decoration: none; } text-decoration: none; }
.ps-page--section a:hover { .ps-page--section a:hover {
@ -268,14 +292,20 @@ html {
margin-bottom: 5vw; } margin-bottom: 5vw; }
.ps-page--section-contents pre, .ps-page--section-contents pre,
.ps-page--section-contents code { .ps-page--section-contents code {
background-color: var(--background-alt); background-color: var(--background-darker-2);
border-radius: 4px; border-radius: 4px;
padding: 4px; } padding: 4px; }
.ps-page--section-contents pre {
border: 1px solid var(--foreground-lighter-2); }
.ps-page--section-contents > * { .ps-page--section-contents > * {
margin-bottom: 0; margin-bottom: 0;
margin-top: 8px; } margin-top: 0.5rem; }
.ps-page--section-contents > .ps-table {
margin-top: 1rem; }
.ps-page--section-contents > .ps-table + * {
margin-top: 1rem; }
.ps-page--section-contents > h1, .ps-page--section-contents h2 { .ps-page--section-contents > h1, .ps-page--section-contents h2 {
margin-top: 32px; margin-top: 2rem;
line-height: 1.5; } line-height: 1.5; }
.ps-section-nav { .ps-section-nav {

2
common/resources/scss/button.scss
View file

@ -4,7 +4,7 @@
line-height: 1.2rem; line-height: 1.2rem;
border: 2px solid var(--foreground); border: 2px solid var(--foreground);
border-radius: 1.5rem; border-radius: 1.5rem;
background-color: var(--background-alt-2); background-color: var(--background-darker-2);
cursor: pointer; cursor: pointer;
&:hover, &:hover,

8
common/resources/scss/index.scss
View file

@ -5,10 +5,11 @@
html { html {
--accent: #ed1c24; --accent: #ed1c24;
--foreground: #000; --foreground: #000;
--foreground-light: rgba(0, 0, 0, 0.7); --foreground-lighter-1: rgba(0, 0, 0, 0.7);
--foreground-lighter-2: rgba(0, 0, 0, 0.3);
--background: #fff; --background: #fff;
--background-alt-1: #f5f5f5; --background-darker-1: #f5f5f5;
--background-alt-2: #eeeeee; --background-darker-2: #eeeeee;
font-family: 'Open Sans', Arial, sans-serif; font-family: 'Open Sans', Arial, sans-serif;
font-weight: 800; font-weight: 800;
@ -34,6 +35,7 @@ html {
@import './card'; @import './card';
@import './button'; @import './button';
@import './input'; @import './input';
@import './table';
@import './form-group'; @import './form-group';
@import './homelink'; @import './homelink';

6
common/resources/scss/input.scss
View file

@ -1,6 +1,6 @@
.ps-input { .ps-input {
padding: 0.5rem 0.5rem; padding: 0.5rem 0.5rem;
border: 2px solid var(--foreground-light); border: 2px solid var(--foreground-lighter-1);
font-size: 1.2rem; font-size: 1.2rem;
&:hover, &:hover,
@ -14,10 +14,10 @@
} }
&:disabled { &:disabled {
background-color: var(--background-alt-2); background-color: var(--background-darker-2);
&:hover { &:hover {
border-color: var(--foreground-light); border-color: var(--foreground-lighter-1);
} }
} }
} }

2
common/resources/scss/link.scss
View file

@ -1,7 +1,7 @@
.ps-link { .ps-link {
cursor: pointer; cursor: pointer;
color: var(--accent); color: var(--accent);
border-bottom: 1px solid white; border-bottom: 1px solid transparent;
transition: border-bottom 0.1s ease; transition: border-bottom 0.1s ease;
text-decoration: none; text-decoration: none;

22
common/resources/scss/page.scss
View file

@ -37,7 +37,7 @@
flex-shrink: 1; flex-shrink: 1;
pointer-events: all; pointer-events: all;
color: var(--foreground); color: var(--foreground);
background: white; background: var(--background);
overflow-wrap: break-word; overflow-wrap: break-word;
hyphens: auto; hyphens: auto;
pointer-events: all; pointer-events: all;
@ -60,7 +60,7 @@
a { a {
color: var(--accent); color: var(--accent);
border-bottom: 1px solid white; border-bottom: 1px solid transparent;
transition: border-bottom 0.1s ease; transition: border-bottom 0.1s ease;
text-decoration: none; text-decoration: none;
@ -108,18 +108,30 @@
pre, pre,
code { code {
background-color: var(--background-alt); background-color: var(--background-darker-2);
border-radius: 4px; border-radius: 4px;
padding: 4px; padding: 4px;
} }
pre {
border: 1px solid var(--foreground-lighter-2);
}
> * { > * {
margin-bottom: 0; margin-bottom: 0;
margin-top: 8px; margin-top: 0.5rem;
}
> .ps-table {
margin-top: 1rem;
+ * {
margin-top: 1rem;
}
} }
> h1, h2 { > h1, h2 {
margin-top: 32px; margin-top: 2rem;
line-height: 1.5; line-height: 1.5;
} }
} }

33
common/resources/scss/style.scss
View file

@ -1,33 +0,0 @@
* {
box-sizing: border-box;
}
html {
--accent: #ed1c24;
--foreground: #000;
--background: #fff;
--background-alt: #f5f5f5;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 800;
background: var(--background);
color: var(--foreground);
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
width: 100vw;
height: 100vh;
margin: 0;
font-size: 1vw;
}
@import './main';
@import './page';
@import './logo';
@import './background';
@import './footer';
@import './homelink';
@import './hakken-dates.scss';

32
common/resources/scss/table.scss
View file

@ -1,3 +1,35 @@
.ps-table { .ps-table {
overflow: auto; overflow: auto;
border-collapse: collapse;
margin-left: -0.25rem;
width: calc(100% + 0.25rem);
td, th {
padding: 0.1rem 0.25rem;
}
tr {
border: 0;
border-left: 0.25rem solid transparent;
&:nth-child(2n) {
background-color: var(--background-darker-1);
border-left: 0.25rem solid var(--background-darker-1);
}
&:hover {
background-color: var(--background-darker-2);
border-color: var(--accent);
}
}
thead tr {
border-bottom: 4px solid var(--foreground-lighter-1);
font-weight: bold;
text-align: center;
}
thead td, th {
padding: 0.1rem 0.5rem;
}
} }