summaryrefslogtreecommitdiff
path: root/app/static/styles
diff options
context:
space:
mode:
authorMarius Peter <marius.peter@tutanota.com>2022-05-15 13:15:58 +0200
committerMarius Peter <marius.peter@tutanota.com>2022-05-15 13:15:58 +0200
commit3aee6067123cd8afd985f68847e6bb476a853bb0 (patch)
tree4cfe21d929cb4b3c8f2e91347c7c2a47f02a96e3 /app/static/styles
parent4d12e4ea5a8c14d13a93382029d82f3cba05d912 (diff)
Static files.
Diffstat (limited to 'app/static/styles')
-rw-r--r--app/static/styles/style.css107
1 files changed, 75 insertions, 32 deletions
diff --git a/app/static/styles/style.css b/app/static/styles/style.css
index 402e802..d2bf8e7 100644
--- a/app/static/styles/style.css
+++ b/app/static/styles/style.css
@@ -1,3 +1,6 @@
+/* -*- mode: web; -*- */
+
+
:root {
--primary-color: #003B5C;
--secondary-color: #C3D7EE;
@@ -43,43 +46,72 @@ body {
src: url("/static/fonts/Inconsolata.otf");
}
+
+h1 {
+ margin: 0.25em;
+}
+
nav {
- display: flex;
+ /* display: flex; */
background: darkgrey;
color: white;
/* margin: 0.5em; */
- padding: 0.5em;
+ padding: 0 0.5em;
+ /* justify-content: space-between; */
+}
+
+nav#user {
+ /* background: red; */
+ display: flex;
justify-content: space-between;
}
-h1 {
- margin: 0;
+nav#user ul {
+ justify-content: end;
+}
+
+nav#modules {
+ /* left: 0; */
}
+nav#actions {
+ top: 0;
+ position: sticky;
+}
+
+
nav ul {
display: flex;
flex-wrap: wrap;
margin: 0;
- justify-content: right;
+ padding: 0.25em 0;
list-style: none;
}
nav ul li {
- margin: 0 0 0.5em 0;
- padding: 0.5em 0;
+ margin: 0.25em;
+ /* margin: 0 0 0.5em 0; */
+ /* padding: 0.5em 0; */
}
+
+
+
.button {
- height: 1em;
+ display: inline-block;
padding: 0.5em;
- margin: 0 0.5em;
background: dimgray;
color: white;
- border-radius: 8px;
+ border-radius: 12px;
text-decoration: none;
border: 1px dimgray solid;
}
+.button-light {
+ background: white;
+ color: dimgray;
+}
+
.button:hover {
background: white;
color: black;
@@ -103,43 +135,50 @@ table tr:nth-child(even) {
background: lightgray;
}
-#actions {
- background: darkgray;
- padding: 1em 0.5em;
- top: 0;
- position: sticky;
-}
-
-.flashes {
+#flash {
position: fixed;
- width: 30%;
+ max-width: 16em;
bottom: 0;
right: 0;
- margin: 1em;
+ padding: 0 0.5em;
+}
+
+#flash ul {
+ margin: 0;
+ padding: 0.25em 0;
list-style-type: none;
- padding: 0;
+}
+
+#flash ul li {
+ margin: 0.25em;
}
@keyframes fadeIn {
- 0% {
- opacity: 0;
- transform: translateY(100%);
- }
- 100% {
- opacity: 0.7;
- transform: translateY(0);
- }
+ 0% {
+ opacity: 0;
+ transform: translateY(100%);
+ }
+ 100% {
+ opacity: 0.8;
+ transform: translateY(0);
+ }
}
.alert {
padding: 1em;
+ margin: 0.5em;
border-radius: 8px;
- margin: 1em;
- border: 1px dimgray solid;
- opacity: 0.7;
+ /* border: 1px dimgray solid; */
+ opacity: 0.8;
animation: 0.5s ease-out 0s 1 fadeIn;
}
+/* The default alert category */
+.alert-message {
+ background: cornflowerblue;
+ color: black;
+}
+
.alert-info {
background: darkblue;
color: white;
@@ -154,3 +193,7 @@ fieldset {
margin: 0 auto;
width: 12em;
}
+
+.latest-target {
+ background: gold;
+}
Copyright 2019--2024 Marius PETER