summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMarius Peter <marius.peter@tutanota.com>2022-05-01 21:39:22 +0200
committerMarius Peter <marius.peter@tutanota.com>2022-05-01 21:39:22 +0200
commit1727413d592302a1198b6cad8ee0d1cf9b5d50f5 (patch)
treea43ca13de9acb2b90a51e0f500fe617eaa547f88
parentcaa0e1db19c0616031f7879d4298ed152b05f557 (diff)
Stylesheets.
-rw-r--r--app/static/styles/invoice.css204
-rw-r--r--app/static/styles/style.css81
2 files changed, 283 insertions, 2 deletions
diff --git a/app/static/styles/invoice.css b/app/static/styles/invoice.css
new file mode 100644
index 0000000..2b863f9
--- /dev/null
+++ b/app/static/styles/invoice.css
@@ -0,0 +1,204 @@
+@font-face {
+ font-family: "Public Sans";
+ src: url("/static/fonts/PublicSans-Regular.otf");
+}
+
+@font-face {
+ font-family: "Inconsolata";
+ src: url("/static/fonts/Inconsolata.otf");
+}
+
+.clearfix:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+a {
+ color: #0087C3;
+ text-decoration: none;
+}
+
+body {
+ position: relative;
+ width: 21cm;
+ height: 29.7cm;
+ margin: 0 auto;
+ color: #555555;
+ background: #FFFFFF;
+ font-family: Arial, sans-serif;
+ font-size: 14px;
+ font-family: "Public Sans";
+}
+
+header {
+ padding: 10px 0;
+ margin-bottom: 20px;
+ border-bottom: 1px solid #AAAAAA;
+}
+
+#logo {
+ float: left;
+ margin-top: 8px;
+}
+
+#logo img {
+ height: 70px;
+}
+
+#company {
+ float: right;
+ text-align: right;
+}
+
+
+#details {
+ margin-bottom: 50px;
+}
+
+#client {
+ padding-left: 6px;
+ border-left: 6px solid #0087C3;
+ float: left;
+}
+
+#client .to {
+ color: #777777;
+}
+
+h2.name {
+ font-size: 1.4em;
+ font-weight: normal;
+ margin: 0;
+}
+
+#invoice {
+ float: right;
+ text-align: right;
+}
+
+#invoice h1 {
+ color: #0087C3;
+ font-size: 2.4em;
+ line-height: 1em;
+ font-weight: normal;
+ margin: 0 0 10px 0;
+}
+
+#invoice .date {
+ font-size: 1.1em;
+ color: #777777;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin-bottom: 20px;
+}
+
+table th,
+table td {
+ padding: 20px;
+ background: #EEEEEE;
+ text-align: center;
+ border-bottom: 1px solid #FFFFFF;
+}
+
+table th {
+ white-space: nowrap;
+ font-weight: normal;
+}
+
+table td {
+ text-align: right;
+}
+
+table td h3{
+ color: #57B223;
+ font-size: 1.2em;
+ font-weight: normal;
+ margin: 0 0 0.2em 0;
+}
+
+table .no {
+ color: #FFFFFF;
+ font-size: 1.6em;
+ background: #57B223;
+}
+
+table .desc {
+ text-align: left;
+}
+
+table .unit {
+ background: #DDDDDD;
+}
+
+table .qty {
+}
+
+table .total {
+ background: #57B223;
+ color: #FFFFFF;
+}
+
+table td.unit,
+table td.qty,
+table td.total {
+ font-size: 1.2em;
+}
+
+table tbody tr:last-child td {
+ border: none;
+}
+
+table tfoot td {
+ padding: 10px 20px;
+ background: #FFFFFF;
+ border-bottom: none;
+ font-size: 1.2em;
+ white-space: nowrap;
+ border-top: 1px solid #AAAAAA;
+}
+
+table tfoot tr:first-child td {
+ border-top: none;
+}
+
+table tfoot tr:last-child td {
+ color: #57B223;
+ font-size: 1.4em;
+ border-top: 1px solid #57B223;
+
+}
+
+table tfoot tr td:first-child {
+ border: none;
+}
+
+#thanks{
+ font-size: 2em;
+ margin-bottom: 50px;
+}
+
+#notices{
+ padding-left: 6px;
+ border-left: 6px solid #0087C3;
+}
+
+#notices .notice {
+ font-size: 1.2em;
+}
+
+footer {
+ color: #777777;
+ width: 100%;
+ height: 30px;
+ position: absolute;
+ bottom: 0;
+ border-top: 1px solid #AAAAAA;
+ padding: 8px 0;
+ text-align: center;
+}
+
diff --git a/app/static/styles/style.css b/app/static/styles/style.css
index ca60a7b..402e802 100644
--- a/app/static/styles/style.css
+++ b/app/static/styles/style.css
@@ -11,7 +11,7 @@
}
body {
- font-family: 'Public Sans', sans-serif;
+ font-family: "Public Sans", sans-serif;
line-height: 1.2;
margin: 0;
padding: 0;
@@ -38,12 +38,18 @@ body {
src: url("/static/fonts/PublicSans-Regular.otf");
}
+@font-face {
+ font-family: "Inconsolata";
+ src: url("/static/fonts/Inconsolata.otf");
+}
+
nav {
display: flex;
background: darkgrey;
color: white;
- margin: 0.5em;
+ /* margin: 0.5em; */
padding: 0.5em;
+ justify-content: space-between;
}
h1 {
@@ -71,9 +77,80 @@ nav ul li {
color: white;
border-radius: 8px;
text-decoration: none;
+ border: 1px dimgray solid;
}
.button:hover {
background: white;
color: black;
+ border: 1px dimgray solid;
+}
+
+table {
+ font-family: "Inconsolata";
+ line-height: 1.5;
+ /* border-collapse: collapse; */
+ width: 80vw;
+ margin: 2em auto;
+}
+
+table thead {
+ background: dimgray;
+ color: white;
+}
+
+table tr:nth-child(even) {
+ background: lightgray;
+}
+
+#actions {
+ background: darkgray;
+ padding: 1em 0.5em;
+ top: 0;
+ position: sticky;
+}
+
+.flashes {
+ position: fixed;
+ width: 30%;
+ bottom: 0;
+ right: 0;
+ margin: 1em;
+ list-style-type: none;
+ padding: 0;
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ transform: translateY(100%);
+ }
+ 100% {
+ opacity: 0.7;
+ transform: translateY(0);
+ }
+}
+
+.alert {
+ padding: 1em;
+ border-radius: 8px;
+ margin: 1em;
+ border: 1px dimgray solid;
+ opacity: 0.7;
+ animation: 0.5s ease-out 0s 1 fadeIn;
+}
+
+.alert-info {
+ background: darkblue;
+ color: white;
+}
+
+.alert-error {
+ background: maroon;
+ color: white;
+}
+
+fieldset {
+ margin: 0 auto;
+ width: 12em;
}
Copyright 2019--2024 Marius PETER