Small style improvements

.gitignore

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

account/applications.ftl

@@ -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>

account/sessions.ftl

@@ -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">

account/totp.ftl

@@ -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>

common/resources/css/index.css

@@ -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-darker-1: #f5f5f5;
-  --background-alt-2: #eeeeee;
+  --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 {

common/resources/scss/button.scss

@@ -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,

common/resources/scss/index.scss

@@ -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-darker-1: #f5f5f5;
-  --background-alt-2: #eeeeee;
+  --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';

common/resources/scss/input.scss

@@ -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);
     }
   }
 }

common/resources/scss/link.scss

@@ -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;
 

common/resources/scss/page.scss

@@ -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;
     }
   }

common/resources/scss/style.scss

@@ -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';
-

common/resources/scss/table.scss

@@ -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;
+  }
 }