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

Small style improvements

feat/theme-v2
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
.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="referrer" name="referrer" value="${stateChecker}">
<table class="table table-striped table-bordered">
<table class="ps-table">
<thead>
<tr>
<td>${msg("application")}</td>

3
account/sessions.ftl
View File

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

2
account/totp.ftl
View File

@ -65,7 +65,7 @@
<#if mode?? && mode = "manual">
<li>
<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>
</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 {
--accent: #ed1c24;
--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-alt-1: #f5f5f5;
--background-alt-2: #eeeeee;
--background-darker-1: #f5f5f5;
--background-darker-2: #eeeeee;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 800;
background: var(--background);
@ -36,7 +37,7 @@ html {
.ps-link {
cursor: pointer;
color: var(--accent);
border-bottom: 1px solid white;
border-bottom: 1px solid transparent;
transition: border-bottom 0.1s ease;
text-decoration: none; }
.ps-link:hover {
@ -61,7 +62,7 @@ html {
line-height: 1.2rem;
border: 2px solid var(--foreground);
border-radius: 1.5rem;
background-color: var(--background-alt-2);
background-color: var(--background-darker-2);
cursor: pointer; }
.ps-button:hover, .ps-button:focus {
border-color: var(--accent); }
@ -76,7 +77,7 @@ html {
.ps-input {
padding: 0.5rem 0.5rem;
border: 2px solid var(--foreground-light);
border: 2px solid var(--foreground-lighter-1);
font-size: 1.2rem; }
.ps-input:hover, .ps-input:focus {
border-color: var(--accent); }
@ -84,9 +85,32 @@ html {
color: var(--background);
background-color: var(--foreground); }
.ps-input:disabled {
background-color: var(--background-alt-2); }
background-color: var(--background-darker-2); }
.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 {
display: flex;
@ -218,7 +242,7 @@ html {
flex-shrink: 1;
pointer-events: all;
color: var(--foreground);
background: white;
background: var(--background);
overflow-wrap: break-word;
hyphens: auto;
pointer-events: all; }
@ -235,7 +259,7 @@ html {
overflow: auto; }
.ps-page--section a {
color: var(--accent);
border-bottom: 1px solid white;
border-bottom: 1px solid transparent;
transition: border-bottom 0.1s ease;
text-decoration: none; }
.ps-page--section a:hover {
@ -268,14 +292,20 @@ html {
margin-bottom: 5vw; }
.ps-page--section-contents pre,
.ps-page--section-contents code {
background-color: var(--background-alt);
background-color: var(--background-darker-2);
border-radius: 4px;
padding: 4px; }
.ps-page--section-contents pre {
border: 1px solid var(--foreground-lighter-2); }
.ps-page--section-contents > * {
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 {
margin-top: 32px;
margin-top: 2rem;
line-height: 1.5; }
.ps-section-nav {

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

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

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

@ -5,10 +5,11 @@
html {
--accent: #ed1c24;
--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-alt-1: #f5f5f5;
--background-alt-2: #eeeeee;
--background-darker-1: #f5f5f5;
--background-darker-2: #eeeeee;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 800;
@ -34,6 +35,7 @@ html {
@import './card';
@import './button';
@import './input';
@import './table';
@import './form-group';
@import './homelink';

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

@ -1,6 +1,6 @@
.ps-input {
padding: 0.5rem 0.5rem;
border: 2px solid var(--foreground-light);
border: 2px solid var(--foreground-lighter-1);
font-size: 1.2rem;
&:hover,
@ -14,10 +14,10 @@
}
&:disabled {
background-color: var(--background-alt-2);
background-color: var(--background-darker-2);
&: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 {
cursor: pointer;
color: var(--accent);
border-bottom: 1px solid white;
border-bottom: 1px solid transparent;
transition: border-bottom 0.1s ease;
text-decoration: none;

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

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