X-Git-Url: https://git.pterodactylus.net/?p=Sone.git;a=blobdiff_plain;f=src%2Fmain%2Fresources%2Fstatic%2Fcss%2Fsone.css;h=54cfb6ed5c1a40c1d48c4faccd1ba296a32cde3d;hp=1d426edcc2f614ce622afd4d5c184055d7fa43b8;hb=f4ea1e1b3526175e255831c975d6eea813589f25;hpb=a591b90dd311bf642e286a5b7b2d9402d3e495aa diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css index 1d426ed..54cfb6e 100644 --- a/src/main/resources/static/css/sone.css +++ b/src/main/resources/static/css/sone.css @@ -1,7 +1,7 @@ /* Sone Main CSS File */ /* first, override some fproxy rules. */ -#sone .post .reply div,#sone .post .time,#sone .post .delete,#sone .post .show-reply-form, input[type=text], textarea { +#sone div, #sone span, #sone .post .time,#sone .post .delete,#sone .post .show-reply-form, input[type=text], textarea { font: inherit; } @@ -16,10 +16,21 @@ input[type=text], textarea { outline: none; } +input[type=text].short { + width: 25em; +} + textarea { height: 4em; } +#sone button { + background-color: #ddd; + border-width: 1px; + color: #444; + padding: 0.5ex 1.5ex; +} + #sone form { margin: 0px; } @@ -35,6 +46,10 @@ textarea { display: none; } +#sone #formPassword { + display: none; +} + #sone a, #sone a:link, #sone a:visited { color: rgb(28, 131, 191); font-size: inherit; @@ -45,8 +60,63 @@ textarea { color: rgb(255, 172, 0); } +#sone a.link { + cursor: pointer; +} + +#sone a.internet { + color: rgb(255, 0, 0); +} + +#sone a.internet:before { + content: '⚠ '; +} + +#sone a.freenet:before { + content: '» '; +} + +#sone a.freenet-trusted { + color: rgb(0, 128, 0); +} + +#sone a.freenet-trusted:before { + content: '★ '; +} + +#sone a img { + border: none; +} + +#sone #notification-area { + margin-top: 1em; +} + +#sone #notification-area .notification { + padding: 1ex; + border: solid 1px #ccc; + background-color: #ffffa0; + margin-bottom: 1ex; + min-height: 3.5ex; +} + +#sone #notification-area .notification .dismiss { + float: right; +} + +#sone #notification-area .notification .post-count { + margin-left: 1ex; +} + +#sone #plugin-warning { + border: solid 0.5em red; + padding: 0.5em; + margin-bottom: 1em; +} + #sone #profile { height: 80px; + margin-top: 1em; margin-bottom: 1ex; } @@ -57,16 +127,10 @@ textarea { #sone #profile.online .picture { position: absolute; - background-image: url("../images/sone.png"); - width: 80px; - height: 80px; } #sone #profile.offline .picture { position: absolute; - background-image: url("../images/sone-offline.png"); - width: 80px; - height: 80px; } #sone #profile.offline .edit-profile-link, #sone #profile.offline .profile-link { @@ -105,19 +169,46 @@ textarea { #sone #main { padding: 1em; + padding-top: 0px; +} + +#sone #edit-profile #birth-day, #sone #edit-profile #birth-month, #sone #edit-profile #birth-year { + display: inline; + width: 15em; +} + +#sone #edit-profile #birth-day input, #sone #edit-profile #birth-month input, #sone #edit-profile #birth-year input { + width: 4em; + text-align: right; } #sone .post { padding: 1ex 0px; border-bottom: solid 1px #ccc; + clear: both; } -#sone .post:last-child { +#sone .post.new { + background-color: #ffffa0; + padding-left: 1ex; +} + +#sone .post.last { padding: 1ex 0px; border-bottom: none; } -#sone .post .author { +#sone .post > .avatar { + position: absolute; +} + +#sone .post > .inner-part { + margin-left: 48px; + padding-left: 0.5em; + min-height: 48px; +} + +#sone .post .author, #sone .post .recipient { display: inline; font-weight: bold; } @@ -128,30 +219,56 @@ textarea { } #sone .post .status-line { - clear: both; margin-top: 0.5ex; font-size: 85%; } +#sone .separator { + font: inherit; + color: rgb(28, 131, 191); +} + #sone .post .time { display: inline; color: #666; } -#sone .post .delete { +#sone .post .delete, #sone .post .likes, #sone .post .like, #sone .post .unlike, #sone .post .trust, #sone .post .distrust, #sone .post .untrust { display: inline; + font: inherit; + margin: 0px; } -#sone .post .delete button { - font: inherit; +#sone .post .likes.hidden { + display: none; +} + +#sone .post .like.hidden, #sone .post .unlike.hidden, #sone .post .trust.hidden, #sone .post .distrust.hidden, #sone .post .untrust.hidden { + display: none; +} + +#sone .post .delete button, #sone .post .like button, #sone .post .unlike button, #sone .post .trust button, #sone .post .distrust button, #sone .post .untrust button { border: 0px; background: none; padding: 0px; color: rgb(28, 131, 191); + font: inherit; + margin: 0px; } -#sone .post .delete button:hover { - font: inherit; +#sone .post .trust button { + color: rgb(0, 128, 0); +} + +#sone .post .distrust button { + color: rgb(255, 0, 0); +} + +#sone .post .untrust button { + color: rgb(64, 64, 64); +} + +#sone .post .delete button:hover, #sone .post .like button:hover, #sone .post .unlike button:hover, #sone .post .trust button:hover, #sone .post .distrust button:hover, #sone .post .untrust button:hover { border: 0px; background: none; padding: 0px; @@ -159,8 +276,9 @@ textarea { cursor: pointer; } -#sone .post .delete:before { - content: ' ‧ '; +#sone .post .likes span { + font: inherit; + color: green; } #sone .post .replies { @@ -168,6 +286,27 @@ textarea { padding-top: 0.2ex; } +#sone .post .replies .click-to-show { + background-color: #f0f0ff; + font-size: 85%; + padding: 0.5em; + cursor: pointer; +} + +#sone .post .replies .click-to-show.new { + background-color: #ffffa0; +} + +#sone .post .reply > .avatar { + position: absolute; +} + +#sone .post .reply > .inner-part { + margin-left: 36px; + padding-left: 0.5em; + min-height: 36px; +} + #sone .post .reply { clear: both; background-color: #f0f0ff; @@ -176,6 +315,10 @@ textarea { padding: 1ex; } +#sone .post .reply.new { + background-color: #ffffa0; +} + #sone .post .reply .time { float: none; display: inline; @@ -197,19 +340,6 @@ textarea { color: rgb(255, 172, 0); } -#sone .post .show-reply-form:before { - content: ' ‧ '; -} - -#sone .post .reply .status-line .delete { - float: none; - display: inline; -} - -#sone .post .reply .status-line .delete:before { - content: ' · '; -} - #sone .post .create-reply { clear: both; background-color: #f0f0ff; @@ -218,12 +348,12 @@ textarea { #sone .post .create-reply input[type=text] { margin-left: 0.5ex; - width: 50em; + width: 44em; } #sone .post .create-reply textarea { margin-left: 0.5ex; - width: 50em; + width: 44em; height: 4em; } @@ -239,6 +369,14 @@ textarea { padding: 0.5ex; } +#sone .sone.local { + background-color: #f0fff0; +} + +#sone .sone.new { + background-color: #ffffa0; +} + #sone .sone .profile-link { display: block; } @@ -264,6 +402,10 @@ textarea { top: -0.5ex } +#sone .sone.idle.modified .idle-marker { + display: none; +} + #sone .sone .last-update { float: right; display: inline; @@ -274,7 +416,7 @@ textarea { font-weight: bold; } -#sone .sone form { +#sone .sone form.follow, #sone .sone form.unfollow, #sone .sone form.lock, #sone .sone form.unlock { display: inline; border: solid 1px #ccc; border-left: none; @@ -285,7 +427,7 @@ textarea { bottom: -0.5ex } -#sone .sone form.block button, #sone .sone form.unblock button, #sone .sone form.follow button, #sone .sone form.unfollow button { +#sone .sone form.follow button, #sone .sone form.unfollow button, #sone .sone form.lock button, #sone .sone form.unlock button { display: inline; color: rgb(28, 131, 191); background: none; @@ -294,33 +436,73 @@ textarea { padding: 0px; } -#sone .sone form.block button:hover, #sone .sone form.unblock button:hover, #sone .sone form.follow button:hover, #sone .sone form.unfollow button:hover { +#sone .sone form.follow button:hover, #sone .sone form.unfollow button:hover, #sone .sone form.lock button:hover, #sone .sone form.unlock button:hover { display: inline; color: rgb(255, 172, 0); } +#sone .sone.locked form.lock, #sone .sone.unlocked form.unlock { + display: none; +} + +#sone .sone form.hidden { + display: none; +} + #sone .sone .spacer { display: inline; } -#sone #create-sone { +#sone .profile-field, #sone #edit-profile button[type=submit], #sone #delete-profile-field { + margin-top: 1em; +} +#sone .profile-field .name { + display: inline; + font-weight: bold; +} + +#sone .profile-field .name.hidden { + display: none; +} + +#sone .profile-field button.confirm { + font-weight: bold; + color: #080; } -#sone #tail .import-key, #sone #import-key .import-key { +#sone .profile-field button.cancel { + font-weight: bold; + color: red; +} + +#sone .profile-field .value { + margin-left: 2em; +} + +#sone #edit-profile .profile-field .value { + margin-left: inherit; +} + +#sone .profile-field .edit-field-name, #sone .profile-field .move-up-field, #sone .profile-field .move-down-field, #sone .profile-field .delete-field-name { + float: right; + margin-top: -1ex; +} + +#sone #tail { margin-top: 1em; border-top: solid 1px #ccc; - padding-top: 1em; + padding-top: 2em; text-align: center; font-size: 75%; color: #888; } -#sone #import-key .import-key { - border-top: none; +#sone #tail #version-information { + margin-top: 1em; } -#sone #add-sone textarea, #sone #create-sone textarea, #sone #load-sone textarea { +#sone #add-sone textarea, #sone #create-sone textarea, #sone #load-sone textarea, #sone #edit-profile textarea { height: 1.5em; } @@ -328,10 +510,51 @@ textarea { position: absolute; } +#sone .navigation { + text-align: center; +} + +#sone .navigation .first a, #sone .navigation .previous a, #sone .navigation .next a, #sone .navigation .last a, #sone .navigation .first span, #sone .navigation .previous span, #sone .navigation .next span, #sone .navigation .last span { + display: block; + height: 1.5em; + padding: 0.5ex; + width: 3em; + border: solid 1px #ccc; + background-color: #f0f0ff; + margin: 1ex 0; +} + +#sone .navigation .first, #sone .navigation .previous { + float: left; +} + +#sone .navigation .current-page, #sone .navigation .total-pages { + position: relative; + top: 0.5em; + margin-top: 0.5ex; + display: inline; +} + +#sone .navigation .total-pages:before { + content: '/ '; +} + +#sone .navigation .next, #sone .navigation .last { + float: right; +} + #sone h1 { font-family: inherit; font-size: 200%; font-weight: bold; + clear: both; +} + +#sone h2 { + font-family: inherit; + font-size: 150%; + font-weight: bold; + clear: both; } #sone .error label { @@ -347,3 +570,8 @@ textarea { width: 130ex;; font-size: 75%; } + +#sone .confirm { + font-weight: bold; + color: red; +}