feat: initial commit

README.md

@@ -0,0 +1,7 @@
+# ashhhleyyy-kc
+
+![Screenshot of the keycloak login screen with this theme applied](./screenshot.png)
+
+My custom theme for [Keycloak](https://keycloak.org).
+
+I target whatever version I'm running (usually the latest), and so it may break on different versions.

login/resources/css/main.css

@@ -0,0 +1,371 @@
+@import url('https://unpkg.com/@fontsource/poppins@4.5.8/index.css');
+
+:root {
+    --background: #13092b;
+    --background-2: #090f2b;
+    --foreground: #ddd;
+    --foreground-bright: #fff;
+    --foreground-dim: #aaa;
+    --error: orange;
+    --accent: #f9027a;
+    --accent-dim: hsl(331, 50%, 49%);
+    --primary: #8da1ee;
+    --confirm: #82f1b1;
+    --warning: #fb7185;
+}
+
+body {
+    font-family: 'Poppins', sans-serif;
+    background-color: var(--background);
+    background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg');
+    background-attachment: fixed;
+    background-position: center;
+    color: var(--foreground);
+    margin: 0;
+}
+
+body.error {
+    background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg?error=true');
+}
+
+@media only screen and (max-width: 720px) {
+    body {
+        background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg?small=true');
+    }
+
+    body.error {
+        background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg?error=true&small=true');
+    }
+}
+
+a {
+    color: var(--foreground);
+}
+
+h1 {
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.avatar {
+    margin-top: 16px;
+    margin-right: 8px;
+    border-radius: 50%;
+    border: 2px solid var(--accent);
+}
+
+.page-container {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    min-height: 100vh;
+    max-width: 100vw;
+}
+
+.site-header {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.nav {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin: 16px;
+    width: 100%;
+    max-width: 720px;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.kc-logo-text {
+    font-family: monospace;
+    font-size: 24px;
+    font-weight: 500;
+    text-decoration: none;
+    color: var(--foreground-bright);
+}
+
+.kc-logo-text:hover {
+    color: var(--foreground);
+}
+
+.kc-logo-text::before {
+    content: "[ ";
+    color: var(--accent);
+}
+
+.kc-logo-text::after {
+    content: " ]";
+    color: var(--accent);
+}
+
+.content {
+    margin: 16px;
+    padding: 32px;
+    width: calc(100vw - 32px);
+    max-width: 480px;
+    background-color: var(--background-2);
+    border: 1px solid var(--accent);
+    border-radius: 4px;
+}
+
+.error .content {
+    border-color: var(--error);
+}
+
+.footer {
+    margin-bottom: 16px;
+}
+
+.generated {
+    font-size: 12px;
+}
+
+.link-list {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.link-list > li {
+    padding: 8px;
+    border-radius: 8px;
+    border: 1px solid var(--accent);
+    width: calc(100% - 16px);
+    max-width: 512px;
+    margin: 8px;
+    display: flex;
+    place-content: center;
+    background-size: 125%;
+    background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg?small=true');
+}
+
+.link-list > li.about {
+    background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg?small=true&star_colour=%23f9027a');
+}
+
+.link-list > li.github {
+    background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg?small=true&star_colour=%23891ee3');
+}
+
+.link-list > li.twitter {
+    background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg?small=true&star_colour=%2300acee');
+}
+
+.link-list > li.twitch {
+    background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg?small=true&star_colour=%236441a5');
+}
+
+.link-list > li.twitch {
+    background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg?small=true&star_colour=%236441a5');
+}
+
+.link-list > li.nucleoid {
+    background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg?small=true&star_colour=%232cab6b');
+}
+
+.link-list > li.modrinth {
+    background-image: url('https://ashhhleyyy.dev/assets-gen/background.svg?small=true&star_colour=%2330b27b');
+}
+
+blockquote {
+    border-left: var(--accent) 2px solid;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    padding-inline-start: 20px;
+    margin-inline-start: 10px;
+    margin-inline-end: 20px;
+    color: var(--foreground-dim);
+}
+
+pre {
+    overflow-x: auto;
+    border: var(--accent) 1px solid;
+    padding: 8px;
+    background-color: black !important;
+    border-radius: 4px;
+}
+
+pre::-webkit-scrollbar, code::-webkit-scrollbar {
+    height: 8px;
+}
+
+pre::-webkit-scrollbar-track, code::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0);
+}
+
+pre::-webkit-scrollbar-thumb, code::-webkit-scrollbar-thumb {
+    background-color: var(--accent);
+    border-radius: 2px;
+}
+
+pre::-webkit-scrollbar-thumb:hover, code::-webkit-scrollbar-thumb:hover {
+    background-color: var(--accent-dim);
+}
+
+code {
+    font-family: 'JetBrains Mono', 'Oxygen Mono', monospace;
+    border: var(--accent-dim) 1px solid;
+    padding: 2px;
+    border-radius: 4px;
+    background-color: black;
+}
+
+pre > code {
+    border: none;
+    padding: 0;
+}
+
+.icon-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.icon-row > * {
+    margin-right: 16px;
+}
+
+.icon-row svg {
+    transition: fill 200ms ease;
+    fill: white;
+}
+
+.hover-email:hover {
+    fill: var(--accent);
+}
+
+.hover-discord:hover {
+    fill: #5865F2;
+}
+
+.hover-github:hover {
+    fill: #24292f;
+}
+
+.hover-mastodon:hover {
+    fill: #3c99dc;
+}
+
+.hover-reddit:hover {
+    fill: #ff4500;
+}
+
+.hover-twitch:hover {
+    fill: #6441a5;
+}
+
+.hover-twitter:hover {
+    fill: #00acee;
+}
+
+.hover-gitea:hover {
+    fill: #609926;
+}
+
+.icon {
+    height: 1.2em;
+    fill: var(--foreground-dim);
+    vertical-align: sub;
+}
+
+table, th, td {
+    border: var(--accent-dim) 1px solid;
+}
+
+table {
+    border-spacing: 0;
+    border-spacing: 0;
+    overflow-x: scroll;
+    border-width: 2px;
+    border-radius: 4px;
+}
+
+td {
+    padding: 8px;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 16px;
+}
+
+.form-input {
+    margin: 8px 0;
+    background-color: rgba(128, 128, 128, .25);
+    color: white;
+    border: #888 2px solid;
+    padding: 8px;
+    border-radius: 8px;
+    font-size: medium;
+}
+
+.button {
+    border: none;
+    padding: 8px;
+    border-radius: 8px;
+    cursor: pointer;
+    text-decoration: none;
+    font-size: initial;
+    color: black;
+    transition: filter 200ms ease;
+    vertical-align: middle;
+}
+
+input[type="text"]:focus-visible,
+input[type="password"]:focus-visible {
+    outline: none;
+    border-color: var(--accent);
+}
+
+.error-message {
+    color: var(--warning);
+}
+
+.button:hover {
+    filter: brightness(.8);
+}
+
+.button.primary {
+    background-color: var(--primary);
+}
+
+.button.confirm {
+    background-color: var(--confirm);
+}
+
+.button.warning {
+    background-color: var(--warning);
+}
+
+a.primary {
+    color: var(--primary);
+}
+
+a.confirm {
+    color: var(--confirm);
+}
+
+a.warning {
+    color: var(--warning);
+}
+
+#kc-form-buttons {
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+#kc-form-buttons .button {
+    flex: 1;
+}

login/theme.properties

@@ -0,0 +1,18 @@
+parent=base
+import=common/keycloak
+styles=css/main.css
+
+meta=viewport==width=device-width,initial-scale=1
+
+kcLoginClass=page-container
+
+kcHeaderClass=site-header
+kcHeaderWrapperClass=nav
+
+kcFormCardClass=content
+kcFormGroupClass=form-group
+kcInputClass=form-input
+kcInputErrorMessageClass=error-message
+
+kcButtonClass=button
+kcButtonPrimaryClass=primary