feat(koi): bumped and fish-ified kanidm

hosts/koi/containers/kanidm/default.nix

@@ -24,10 +24,12 @@ in {
   };
 
   virtualisation.oci-containers.containers.kanidm = {
-    image = "kanidm/server:1.3.3";
+    image = "kanidm/server:1.4.2";
     volumes = [
       "/srv/kanidm/data:/data/db"
       "${./server.toml}:/data/server.toml"
+      "${./style.css}:/hpkg/style.css"
+      "${./fish.png}:/hpkg/img/fish.png"
       "${(secrets.file config "kanidm-tls-key")}:/data/key.pem"
       "${(secrets.file config "kanidm-tls-cert")}:/data/chain.pem"
     ];

hosts/koi/containers/kanidm/style.css

@@ -0,0 +1,239 @@
+:root {
+    --totp-width-and-height: 30px;
+    --totp-stroke-width: 60px;
+}
+
+html,
+body {
+    height: 100%;
+}
+
+.form-cred-reset-body {
+    max-width: 500px;
+}
+
+#settings-window .form-cred-reset-body {
+    max-width: unset;
+}
+
+.form-signin {
+    max-width: 680px;
+}
+
+/*
+   * Sidebar
+   */
+
+.side-menu {
+    min-width: 180px;
+}
+
+.side-menu-item {
+    --icon-size: 24px;
+    padding: .4rem .7rem;
+    text-decoration: none;
+
+    &.active {
+        font-weight: 600;
+    }
+
+    &:hover,
+    &.active {
+        background-color: var(--bs-gray-300);
+    }
+
+    .icon-container img {
+        filter: invert(40%);
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+}
+
+/*
+   * Personal Settings sidemenu
+   */
+
+
+/*
+   * Navbar
+   */
+
+.kanidm_logo {
+    width: 12em;
+    height: 12em;
+}
+
+.identity-verification-container {
+    display: flex;
+    flex-direction: column;
+    max-width: fit-content;
+    align-items: center;
+    margin: auto;
+}
+
+.totp-display-container {
+    padding: 5px 10px;
+    display: flex;
+    flex-direction: row;
+    max-width: fit-content;
+    align-items: center;
+    margin: auto;
+    border-radius: 15px;
+    background: #21252915;
+    box-shadow: -5px -5px 11px #ededed, 5px 5px 11px #ffffff;
+    margin: 15px;
+}
+
+.totp-display {
+    font-size: 35px;
+    margin: 10px;
+}
+
+.totp-timer {
+    margin: 10px;
+    position: relative;
+    height: var(--totp-width-and-height);
+    width: var(--totp-width-and-height);
+}
+
+/* Removes SVG styling that would hide the time label */
+.totp-timer__circle {
+    fill: none;
+    stroke: none;
+}
+
+.totp-timer__path-remaining {
+    stroke-width: var(--totp-stroke-width);
+
+    /* Makes sure the animation starts at the top of the circle */
+    transform: rotate(90deg);
+    transform-origin: center;
+
+    /* One second aligns with the speed of the countdown timer */
+    transition: 1s linear all;
+
+    stroke: currentColor;
+}
+
+.totp-timer__svg {
+    transform: scaleX(-1);
+}
+
+.totp-timer__path-remaining.green {
+    color: rgb(65, 184, 131);
+}
+
+.totp-timer__path-remaining.orange {
+    color: orange;
+}
+
+.totp-timer__path-remaining.red {
+    color: red;
+}
+
+.totp-timer__path-remaining.no-transition {
+    -webkit-transition: none !important;
+    -moz-transition: none !important;
+    -o-transition: none !important;
+    transition: none !important;
+}
+
+.card>a {
+    height: 150px;
+}
+
+.oauth2-img {
+    max-width: 100%;
+    max-height: 90%;
+    padding: 10px;
+    height: 100%;
+}
+
+.btn-tiny {
+    --bs-btn-padding-y: .05rem;
+    --bs-btn-padding-x: .4rem;
+    --bs-btn-font-size: .75rem;
+}
+
+#cred-update-commit-bar {
+    display: block;
+    /*
+    position: fixed;
+    bottom: .5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    */
+    background: white;
+}
+
+.icon-container {
+    padding: 2px;
+    width: var(--icon-size);
+    height: var(--icon-size);
+}
+
+/* stupid.fish customizations */
+.kanidm_logo {
+    width: 0;
+    height: 0;
+    background: url(/pkg/img/fish.png) no-repeat;
+    background-size: contain;
+    padding: 4em 8em;
+}
+
+.footer .text-muted::after {
+    content: ' and some stupidity';
+}
+
+.form-signin h3 {
+    margin-bottom: 1em;
+}
+
+/* ayu mirage */
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #242936;
+        color: #cccac2;
+        --bs-body-bg: #242936;
+        --bs-body-color: #cccac2;
+        --bs-border-color: #707a8c45;
+    }
+
+    .form-control {
+        background-color: #1f2430;
+    }
+
+    .bg-light,
+    .bg-dark {
+        background-color: #1f2430 !important;
+    }
+
+    .text-muted {
+        color: #b8cfe680 !important;
+    }
+
+    .btn-dark {
+        --bs-btn-color: #cccac2;
+        --bs-btn-bg: #1f2430;
+        --bs-btn-border-color: #1f2430;
+        --bs-btn-hover-color: #cccac2;
+        --bs-btn-hover-bg: #2e3037;
+        --bs-btn-hover-border-color: #2e3037;
+        --bs-btn-focus-shadow-rgb: 66, 70, 73;
+        --bs-btn-active-color: #cccac2;
+        --bs-btn-active-bg: #2e3037;
+        --bs-btn-active-border-color: #2e3037;
+        --bs-btn-active-shadow: none;
+        --bs-btn-disabled-color: #b8cfe680;
+        --bs-btn-disabled-bg: #1f2430;
+        --bs-btn-disabled-border-color: #1f2430;
+    }
+
+    .alert-light {
+        --bs-alert-color: #cccac2;
+        --bs-alert-bg: #1f2430;
+        --bs-alert-border-color: transparent;
+        --bs-alert-link-color: #cccac2;
+    }
+}