From a9d3686ccc496044cfdee013ccfbece955793052 Mon Sep 17 00:00:00 2001
From: piotrruss <mail@pruss.it>
Date: Sat, 21 Aug 2021 00:24:01 +0200
Subject: icon focus, notes update timestamp, loading note

---
 styles/Main.module.scss | 91 ++++++++++++++++++++++++++++++++-----------------
 styles/_reset.scss      |  1 +
 styles/_window.scss     | 22 +++++++++---
 3 files changed, 77 insertions(+), 37 deletions(-)

(limited to 'styles')

diff --git a/styles/Main.module.scss b/styles/Main.module.scss
index 15be72a..082bc80 100644
--- a/styles/Main.module.scss
+++ b/styles/Main.module.scss
@@ -1,17 +1,25 @@
 .icon {
   text-decoration: none;
   display: inline-block;
-  width: 4em;
-  cursor: pointer;
+  width: 4.5em;
+  padding: .5em;
 
   img {
-    width: 4em;
+    width: 3em;
   }
 
   p {
-    padding-top: .5em;
+    margin-top: .25em;
+    padding: .25em;
     text-align: center;
     color: #333;
+    transition: .2s background;
+    border-radius: .5em;
+  }
+
+  &:focus p {
+    background-color: rgba(255,255,255,.3);
+    // background-color: #0cc;
   }
 }
 
@@ -42,7 +50,6 @@
 
 .header {
   height: 2em;
-  padding: 0.5rem;
   background-color: rgba(255, 255, 255, 0.4);
   border-bottom: 1px solid rgba(255, 255, 255, 0.5);
 
@@ -53,28 +60,54 @@
       flex-grow: 1;
       overflow: auto;
     }
-  }
 
-  li {
-    margin-left: 1em;
-    margin-right: 1em;
-    display: inline-block;
-    cursor: pointer;
-
-    & > span,
-    & > a {
-      color: #333;
-      font-weight: 600;
-      text-decoration: none;
-      align-items: center;
+    ul {
+      display: block;
+
+      & > li {
+        display: inline-block;
+
+        & > span,
+        & > a {
+          display: inline-block;
+          color: #333;
+          text-decoration: none;
+          align-items: center;
+          padding: .25em .5em;
+          margin: .25em;
+          border-radius: .5em;
+          transition: .3s background;
+
+          &:hover {
+            background-color: rgba(0,0,0,.1);
+          }
+        }
+      }
     }
   }
 }
 
+.headerOverlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  cursor: auto;
+}
+
 .user {
   font-weight: 600;
-  cursor: pointer;
+  // cursor: pointer;
   position: relative;
+  padding: .25em .5em;
+  margin: .25em;
+  border-radius: .5em;
+  transition: .3s background;
+
+  &:hover {
+    background-color: rgba(0,0,0,.1);
+  }
 
 }
 
@@ -82,20 +115,14 @@
   position: absolute;
   right: 4px;
   top: 2.1em;
-  width: 10em;
+  width: 8em;
   padding: .5em;
-  background-color: rgba(255, 255, 255, .9);
-  border: 1px solid rgba(255, 255, 255, .5);
+  background-color: rgba(255, 255, 255, 0.5);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+  border-radius: .5em;
 
-  & > li {
-    margin: 0;
-    padding:.5em;
-    width: 100%;
-    line-height: em;
-
-    &:hover {
-      background-color: #ddd;
-    }
+  & > li > span {
+    text-decoration: none;
   }
 }
 
@@ -117,7 +144,7 @@
 
   .email {
     color: blue;
-    cursor: pointer;
+    // cursor: pointer;
   }
   .error {
     color: brown;
diff --git a/styles/_reset.scss b/styles/_reset.scss
index a5f98fb..0dc1326 100755
--- a/styles/_reset.scss
+++ b/styles/_reset.scss
@@ -25,6 +25,7 @@ time, mark, audio, video {
   webkit-user-select: none;
   ms-user-select: none;
   user-select: none;
+  cursor: auto;
 }
 article, aside, details, figcaption, figure, 
 footer, header, hgroup, menu, nav, section {
diff --git a/styles/_window.scss b/styles/_window.scss
index 81fb055..a365c2e 100644
--- a/styles/_window.scss
+++ b/styles/_window.scss
@@ -23,12 +23,24 @@
   }
 
   &:not(.window--popup) {
-    top: 10vh;
-    left: 10vw;
     height: 80vh;
     width: 80vw;
+    top: 10vh;
+    left: 10vw;
+
+
+    @media (min-width: 80em) {
+      width: 64em;
+      left: calc((100vw - 64em) / 2)
+    }
+
+    @media (min-height: 80em) {
+      width: 64em;
+      left: calc((100vh - 64em) / 2)
+    }
   }
 
+
   &__title {
     position: absolute;
     background-color: rgb(151, 215, 200, .9);
@@ -58,7 +70,7 @@
     position: absolute;
     top: .5em;
     right: .5em;
-    cursor: pointer;
+    // cursor: pointer;
     z-index: 1;
 
     & > span {
@@ -99,7 +111,7 @@
     background: #eee;
 
     & > div {
-      cursor: pointer;
+      // cursor: pointer;
       display: inline-block;
       padding: .5em;
       transition: .3s background;
@@ -132,7 +144,7 @@
     border-top: 1px solid rgb(151, 215, 200, .1);
     border-bottom: 1px solid rgb(151, 215, 200, .5);
     border-radius: .5em;
-    cursor: pointer;
+    // cursor: pointer;
     transition: .3s background-color;
 
     &:hover {
-- 
cgit v1.2.3