diff options
-rw-r--r-- | public/style.css | 372 | ||||
-rw-r--r-- | public/style2.css | 100 | ||||
-rw-r--r-- | templates/layouts/mainlayout.html.ep | 2 |
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' |