aboutsummaryrefslogtreecommitdiffstats
path: root/styles
diff options
context:
space:
mode:
Diffstat (limited to 'styles')
-rw-r--r--styles/Main.module.scss91
-rwxr-xr-xstyles/_reset.scss1
-rw-r--r--styles/_window.scss22
3 files changed, 77 insertions, 37 deletions
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 {