summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--public/style.css372
-rw-r--r--public/style2.css100
-rw-r--r--templates/layouts/mainlayout.html.ep2
3 files changed, 63 insertions, 411 deletions
diff --git a/public/style.css b/public/style.css
index 8e771b0..81841e2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,348 +1,100 @@
:root {
- --color-background: #ddd;
- --color-table-row: #eee;
- --color-head: #026;
- --color-table-em: lightblue;
- --color-table-em2: #d3dce3;
- --color-warning: orange;
+ --jwm-color-back: #eee;
+ --jwm-color-front: #ddd;
}
-/* GENERAL */
-
body {
- font-family: sans;
+ padding: 1rem;
}
-a:link {
- text-decoration: none;
- color: blue;
-}
-a:visited {
- text-decoration: none;
- color: purple;
+a {
+ text-decoration-line: none;
}
+
a:hover {
- text-decoration: underline;
- color: red;
+ text-decoration-line: underline;
}
footer {
- margin-top: 50px;
- text-align: center;
- font-size: small;
-}
-caption {
- vertical-align: middle;
- font-size: large;
- background-color: var(--color-background);
- text-align: center;
- font-weight: bold;
+ text-align: center;
+ margin-top: 2rem;
}
-.ow h1 {
- color: var(--color-background);
- background-color: var(--color-head);
- width: 80%;
- padding: 10px;
- margin-left: auto;
- margin-right: auto;
-}
-.ow form,
-.ow dl {
- width: 80%;
- background-color: var(--color-background);
- padding: 10px;
- margin-left: auto;
- margin-right: auto;
+.jwm-base {
+ background-color: var(--jwm-color-back);
+ border-radius: 5px;
+ max-width: 960px;
+ margin: 0 auto;
+ padding: 1rem;
}
-.ow p.warn {
- background-color: var(--color-warning);
- text-align: center;
- width: 80%;
- margin-left: auto;
- margin-right: auto;
- padding: 10px;
-}
+ .jwm-base > nav {
+ margin-top: 1rem;
+ }
-.ow nav {
- margin-left: auto;
- margin-right: auto;
- width: 80%;
- padding: 10px;
- text-align: center;
- background-color: var(--color-background);
+.jwm-warning {
+ background-color: orange;
+ padding: 1rem;
}
-div.show-body {
- width: 80%;
- margin-left: auto;
- margin-right: auto;
-}
-iframe.html-mail {
- width: 100%;
- height: 400px;
+.jwm-post {
+ background-color: var(--jwm-color-front);
+ border-radius: 5px;
+ padding: 0.5rem 1rem;
}
-form.link-btn input {
- padding: 5px;
- /* margin: 4px; */
- /* border-width: 5px; */
- /* border-style: solid; */
-
- color: var(--color-background);
- background-color: var(--color-head);
- border-color: var(--color-head);
-
- text-align: center;
- display: inline-block;
- cursor: pointer;
- text-decoration: none;
+.jwm-nav {
+ background-color: var(--jwm-color-back);
+ border-radius: 5px;
+ padding: 0 1rem;
}
-form.link-btn input:hover {
- background-color: #0060a0;
- /* border-color: black; */
-}
-
-/* a.btn::before { content: '['; } */
-/* a.btn::after { content: ']'; } */
-
-/* NESTED */
-td.login-form input[type=text] {
- width: 100%;
- margin: 8px 0;
- box-sizing: border-box;
+.jwm-mail-header {
+ background-color: var(--jwm-color-front);
+ padding: 1rem;
}
-
-/* CLASSES */
-table.top {
- margin-left: auto;
- margin-right: auto;
- padding: 10px;
- width: 50%;
- background-color: var(--color-background);
-}
-td.small-section {
- text-align: center;
- background-color: var(--color-background);
-}
-td.large-section {
- vertical-align: middle;
- background-color: var(--color-table-row);
- width: 470;
-}
-p.center {
- text-align: center;
-}
-td.login-form {
- valign: middle;
- align: center;
- background-color: var(--color-table-row);
-}
-tr.submit-row {
- text-align: right;
-}
-td.label-cell {
- text-align: right;
-}
-td.warning {
- background-color: var(--color-warning);
- text-align: center;
-}
-p.languages {
- color: var(--color-link);
-}
-td.sep {
- bgcolor: #ffffff;
-}
-td.sort-param {
- valign: middle;
- width: 12%;
- bgcolor: var(--color-table-em2);
-}
-input.field-with-error {
- border: 2px solid red;
- border-radius: 4px;
-}
-.alter-font {
- font-family: serif;
-}
-strong.up {
- text-transform: uppercase;
- color: var(--color-background);
-}
-a.bright {
- color: #ffffff;
-}
-td.folder-list {
- align: left;
- width: 33%;
- color: #ffffff;
- size: 3;
-}
-em.msg-count {
- color: #ffffff;
- size: 3;
- font-family: serif;
+.jwm-mail-body {
+ width: 80%;
+ margin: 0rem auto;
}
-ul.line {
- list-style-type: none;
- margin-top: 0px;
- margin-bottom: 0px;
- /* padding: 0; */
-}
-ul.line > li:not(:last-child)::after {
- /* border-right: 2px solid var(--color-font); */
- color: var(--color-background);
- content: "|";
- margin: 0 .25em;
-}
-ul.line > li {
- /* float: left; */
- display: inline;
-}
+ .jwm-mail-body > iframe.html-mail {
+ width: 100%;
+ height: 400px;
+ }
-div.show-body {
- background-color: var(--color-table-row);
+/* make sure this lines up with pure-md class */
+@media screen and (max-width: 48em) {
+ .hide-small {
+ display: none;
+ }
}
-td.new-mail > tr {
- font-weight: bold;
+#displayheaders {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 1rem;
}
+ #mail-headers {
+ width: 100%;
+ }
-/* IDS */
-th#top-section {
- background-color: var(--color-background);
-}
-td#main-version {
- font-size: large;
- font-weight: bold;
-}
-table#noaction {
- border: 0;
- padding: 5px;
- margin-left: auto;
- margin-right: auto;
- margin-top: 100px;
- width: 300px;
-}
-tr#bottom-section {
- background-color: var(--color-background);
-}
-table#displayheaders {
- width: 95%;
- cellpadding: 1;
- cellspacing: 1;
- border: 0;
- padding: 5px;
- margin-left: auto;
- margin-right: auto;
- /* margin-top: 100px; */
- /* width: 300px; */
-}
-table#displayheaders tfoot {
- background-color: var(--color-background);
-}
-tr#sort {
- background-color: var(--color-table-em2);
-}
-td#loginmessage {
- bgcolor: var(--color-table-em);
- align: center;
- size: 2;
-}
-td#navigation {
- bgcolor: #dcdcdc;
-}
-
-table#bot-nav {
+ #empty-folder {
text-align: center;
- vertical-align: middle;
-}
+ }
-table#bot-nav > tbody > tr > td:nth-child(2) {
- /* text-align: right; */
- /* float: left; */
- /* vertical-align: middle; */
+#login {
+ max-width: 640px;
}
-table#display-folders {
- background-color: var(--color-head);
- align: center;
-}
-
-table#mail-headers {
- border-collapse: collapse;
-}
-table#mail-headers td {
- padding: 5px;
-}
-table#mail-headers > tbody > tr > td:nth-child(1) {
- text-align: right;
-}
-table#mail-headers > tbody > tr > td:nth-child(3) {
- text-align: center;
-}
-table#mail-headers > tbody > tr > td:nth-child(6) {
- text-align: right;
-}
-table#mail-headers > tbody > tr > td:nth-child(7) {
+ #login > h1 {
text-align: center;
-}
-table#mail-headers > tbody > tr {
- background-color: var(--color-table-row);
-}
-table#mail-headers > tbody > tr:nth-child(even) {
- background-color: var(--color-background);
-}
-
-td#pag2 {
- white-space: nowrap;
-}
-
-dl#show-head {
- background-color: var(--color-background);
-}
+ }
-form#move-mail {
- display: inline;
-}
-
-#pag2 > form {
- display: inline;
-}
-
-td#navigation {
- background-color: var(--color-background);
-}
-
-form#write-form > label {
- display: block;
-}
-
-p#empty {
- background-color: var(--color-table-em2);
- padding: 25px 0 25px 1cm;
- margin: 0;
-}
-nav#read-nav {
- margin-top: 10px;
-}
-
-
-/* ANIMATIONS */
-.flash-fade {
- animation-duration: 5s;
- animation-name: fade;
- animation-iteration-count: 1;
- animation-fill-mode: forwards;
-}
-@keyframes fade {
- 0% { opacity: 1; }
- 90% { opacity: 1; }
- 100% { opacity: 0; display: none; }
-}
+ #login > form {
+ background-color: var(--jwm-color-front);
+ padding-top: 1rem;
+ padding-left: 6px;
+ }
diff --git a/public/style2.css b/public/style2.css
deleted file mode 100644
index 81841e2..0000000
--- a/public/style2.css
+++ /dev/null
@@ -1,100 +0,0 @@
-:root {
- --jwm-color-back: #eee;
- --jwm-color-front: #ddd;
-}
-
-body {
- padding: 1rem;
-}
-
-a {
- text-decoration-line: none;
-}
-
-a:hover {
- text-decoration-line: underline;
-}
-
-footer {
- text-align: center;
- margin-top: 2rem;
-}
-
-.jwm-base {
- background-color: var(--jwm-color-back);
- border-radius: 5px;
- max-width: 960px;
- margin: 0 auto;
- padding: 1rem;
-}
-
- .jwm-base > nav {
- margin-top: 1rem;
- }
-
-.jwm-warning {
- background-color: orange;
- padding: 1rem;
-}
-
-.jwm-post {
- background-color: var(--jwm-color-front);
- border-radius: 5px;
- padding: 0.5rem 1rem;
-}
-
-.jwm-nav {
- background-color: var(--jwm-color-back);
- border-radius: 5px;
- padding: 0 1rem;
-}
-
-.jwm-mail-header {
- background-color: var(--jwm-color-front);
- padding: 1rem;
-}
-
-.jwm-mail-body {
- width: 80%;
- margin: 0rem auto;
-}
-
- .jwm-mail-body > iframe.html-mail {
- width: 100%;
- height: 400px;
- }
-
-/* make sure this lines up with pure-md class */
-@media screen and (max-width: 48em) {
- .hide-small {
- display: none;
- }
-}
-
-#displayheaders {
- max-width: 1280px;
- margin: 0 auto;
- padding: 1rem;
-}
-
- #mail-headers {
- width: 100%;
- }
-
- #empty-folder {
- text-align: center;
- }
-
-#login {
- max-width: 640px;
-}
-
- #login > h1 {
- text-align: center;
- }
-
- #login > form {
- background-color: var(--jwm-color-front);
- padding-top: 1rem;
- padding-left: 6px;
- }
diff --git a/templates/layouts/mainlayout.html.ep b/templates/layouts/mainlayout.html.ep
index 166f9ee..b0387af 100644
--- a/templates/layouts/mainlayout.html.ep
+++ b/templates/layouts/mainlayout.html.ep
@@ -9,7 +9,7 @@
<link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/pure-min.css"
integrity="sha384-yHIFVG6ClnONEA5yB5DJXfW2/KC173DIQrYoZMEtBvGzmf0PKiGyNEqe9N6BNDBH" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss@2.1.0/build/grids-responsive-min.css" />
- %= stylesheet '/style2.css'
+ %= stylesheet '/style.css'
<title>
%= title || 'JWebmail'