diff --git a/index.html b/index.html index 06091bd..3e91398 100644 --- a/index.html +++ b/index.html @@ -133,9 +133,17 @@ z-index: 4; } + #loading-screen .brand { + top: 2rem; + left: 2rem; + position: absolute; + z-index: 5; + transform: scale(1.5); + } + #loading-screen .appName { top: 8rem; - position: fixed; + position: absolute; display: flex; z-index: 5; } @@ -259,6 +267,40 @@ background: var(--header); } + .brand { + margin-top: 0.5rem; + margin-left: 2rem; + display: flex; + } + + .brand .logo { + background: var(--alt-color); + border-radius: 0.3rem; + padding: 0.1rem 0.1rem 0 0.2rem; + height: 2.5rem; + } + + .brand .name { + margin-top: 0.5rem; + background: var(--alt-color); + color: var(--accent-dark); + text-shadow: 0px 0px rgba(var(--rgb-bw), 0.5); + border-radius: 0 0.2rem 0.2rem 0; + padding: 0.1rem 0.2rem; + height: 1.3rem; + font: bold 1rem Georgia, serif; + } + + .brand .logo svg { + width: auto; + height: 2.5rem; + } + + .brand .logo svg path { + fill: var(--accent-dark) !important; + stroke: var(--alt-dark); + } + header .appName { padding: 0.2rem 0.5rem; } @@ -367,6 +409,15 @@ font-weight: bold; } + #confirmation span { + display: block; + margin: 0 1rem; + font-style: normal; + font-size: 0.9rem; + white-space: pre-wrap; + text-align: center; + } + #confirmation div { text-align: center; } @@ -462,14 +513,14 @@ } #contact-list { - height: 29rem; + max-height: 29rem; overflow-y: scroll; } .contact-card { padding: 1rem; background: rgba(var(--rgb-bw), 0); - overflow:hidden; + overflow: hidden; } .contact-card:hover { @@ -480,10 +531,6 @@ padding: 0.3rem 0.5rem; } - .unread span:nth-child(1) { - background-color: var(--accent-dark); - } - .contact-card span:nth-child(1) { border-radius: 0.5rem; background-color: var(--alt-dark); @@ -491,7 +538,7 @@ } .contact-card span:nth-child(2) { - white-space: nowrap; + white-space: nowrap; } .contact-card span:nth-child(3) { @@ -503,6 +550,10 @@ font-size: 0.65rem; } + .contact-card.unread span:nth-child(1) { + background-color: var(--accent-dark) !important; + } + /* Conversations */ #conversation-head { @@ -534,7 +585,7 @@ font-weight: bold; display: block; white-space: nowrap; - overflow:hidden; + overflow: hidden; } #receiver-floID { @@ -595,14 +646,16 @@ align-items: center; } - .input-container input, .input-container textarea, .input-container button{ + .input-container input, + .input-container textarea, + .input-container button { height: 2rem; border-radius: 0.2rem; border: 0.1rem solid rgba(var(--rgb-bw), 0.2); padding: 0.2rem; } - .input-container textarea{ + .input-container textarea { height: 15rem; resize: none; } @@ -677,7 +730,7 @@ #settings-screen { border: 0.2rem solid var(--accent-dark); text-align: center; - width: 25rem; + width: 28rem; } #settings-screen h4 { @@ -706,7 +759,9 @@ } #settings-screen label, - #settings-screen input[type="button"] { + #settings-screen input[type="button"], + #settings-screen input[type="text"] { + margin: 0 0.5rem; font-size: 0.9rem; display: inline-block; height: 2rem; @@ -718,6 +773,24 @@ cursor: pointer; } + #settings-screen input[type="text"] { + width: 24rem; + font-size: 0.7rem; + text-align: center; + padding: 0.5rem 0.1rem; + margin-bottom: 0.5rem; + } + + #settings-screen input[type="text"]::selection { + color: var(--accent-color); + background-color: transparent; + } + + #settings-screen input[type="text"]::placeholder { + color: var(--accent-color); + font-size: 0.9rem; + } + #settings-screen label:hover, #settings-screen input[type="button"]:hover { color: var(--foreground); @@ -755,6 +828,10 @@ border-bottom: 0.1rem solid var(--alt-color); } + .mail-card.unread { + background: var(--accent-light) !important; + } + .mail-card:hover { background: var(--alt-color); } @@ -782,8 +859,8 @@ font-size: 0.8rem; font-style: italic; overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + text-overflow: ellipsis; + white-space: nowrap; margin-left: 5rem; } @@ -795,19 +872,19 @@ } /* Mail view */ - #mail-view{ + #mail-view { max-height: 32rem; width: 50rem; overflow-y: scroll; position: relative; } - .mail-content{ + .mail-content { margin: 2rem; border-bottom: 0.2rem dashed var(--alt-dark); } - .mail-content span:nth-child(1){ + .mail-content span:nth-child(1) { display: block; font-weight: bold; font-size: 1.2rem; @@ -815,19 +892,20 @@ margin-bottom: 0.5rem; color: var(--accent-dark) } - .mail-content span:nth-child(2){ + + .mail-content span:nth-child(2) { display: inline-block; font-size: 0.8rem; } - .mail-content span:nth-child(3){ + .mail-content span:nth-child(3) { margin-left: 0.5rem; font-weight: bold; display: inline-block; font-size: 0.9rem; } - .mail-content span:nth-child(4){ + .mail-content span:nth-child(4) { margin-left: 0.5rem; font-style: italic; display: inline-block; @@ -835,28 +913,28 @@ max-width: 25rem; max-height: 0.7rem; overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + text-overflow: ellipsis; + white-space: nowrap; } - .mail-content span:nth-child(4):hover{ + .mail-content span:nth-child(4):hover { max-height: 1.5rem; overflow-y: auto; - white-space: normal; + white-space: normal; } - .mail-content span:nth-child(5){ - float:right; + .mail-content span:nth-child(5) { + float: right; font-size: 0.8rem; text-align: right; } - .mail-content p{ + .mail-content p { display: block; white-space: pre-wrap; } - #prev-mail{ + #prev-mail { margin: 0.5rem 1rem; float: right; font-size: 0.8rem; @@ -866,13 +944,13 @@ color: var(--accent-color) } - #prev-mail:hover{ + #prev-mail:hover { font-weight: bold; } /* Compose and Reply mail */ - .compose-mail{ + .compose-mail { width: 30rem; height: auto; border: 0.1rem solid var(--alt-dark); @@ -880,40 +958,58 @@ bottom: 0; } - #new-mail{ + #new-mail { position: absolute; right: 0; } - #reply-mail{ + #reply-mail { position: sticky; } - .compose-head{ + .compose-head { background: var(--alt-dark); - padding:0.5rem; - color:var(--alt-light); + padding: 0.5rem; + color: var(--alt-light); cursor: pointer; } - .compose-body{ - display: none; - background:var(--alt-light); + .compose-head span { + float: right; + padding: 0 0.2rem; } - .compose-body.active{ + .compose-head:hover span { + background: rgba(var(--rgb-bw), 0.3); + } + + .compose-head span::after { + content: '\1F5D6'; + } + + .compose-head.active span::after { + content: '\1F5D5'; + } + + .compose-body { + display: none; + background: var(--alt-light); + } + + .compose-head.active+.compose-body { display: block; } - .compose-mail-form{ - margin:0; + .compose-mail-form { + margin: 0; padding: 0.5rem; } - .compose-mail input, .compose-mail-form textarea{ - margin:0.5rem; + .compose-mail input, + .compose-mail-form textarea { + margin: 0.5rem; width: 28rem; - } + } .compose-mail button { margin: 0.5rem 0.5rem 0.5rem 1rem; @@ -921,19 +1017,19 @@ color: var(--alt-dark); } - .compose-mail button[type="submit"]{ + .compose-mail button[type="submit"] { width: 22rem; } - .compose-mail button[type="reset"]{ + .compose-mail button[type="reset"] { width: 3rem; + font-weight: bold; } .compose-mail button:hover, .compose-mail button:focus { background: rgba(var(--rgb-bw), 0.1); } - -
+