X-Git-Url: https://git.pterodactylus.net/?a=blobdiff_plain;f=src%2Fmain%2Fresources%2Fstatic%2Fcss%2Fsone.css;h=80565e5ac91f46da318f2e3144fba8982d537b6b;hb=d53b31b68dd0764585a9e110d3cae946bb189c80;hp=875d6aab9403beda4a20919db00ce385172a8baa;hpb=b7e61f73b7f8661c9f9691c078e7908b81784d3f;p=Sone.git diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css index 875d6aa..80565e5 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,14 +16,30 @@ 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; } +#sone select { + color: #444; + padding: 0.5ex 1.5ex; +} + /* now for the real stuff. */ #sone { @@ -49,6 +65,62 @@ 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 button { + margin-left: 1ex; +} + +#sone #notification-area .notification .dismiss { + float: right; +} + +#sone #notification-area .notification .post-count { + margin-left: 1ex; +} + +#sone #notification-area .notification .mark-as-read { + float: right; +} + #sone #plugin-warning { border: solid 0.5em red; padding: 0.5em; @@ -57,6 +129,7 @@ textarea { #sone #profile { height: 80px; + margin-top: 1em; margin-bottom: 1ex; } @@ -67,16 +140,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 { @@ -93,7 +160,11 @@ textarea { padding-left: 1ex; } -#sone #update-status label { +#sone #update-status { + margin-bottom: 1em; +} + +#sone #update-status label, #sone #post-message label { display: none; } @@ -109,12 +180,22 @@ textarea { float: right; } +#sone #update-status .select-sender, #sone .create-reply .select-sender, #sone #post-message .select-sender { + display: none; +} + +#sone #update-status .select-sender button, #sone #post-message .select-sender button { + display: inline; + float: left; +} + #sone .nice-name { font-weight: bold; } #sone #main { padding: 1em; + padding-top: 0px; } #sone #edit-profile #birth-day, #sone #edit-profile #birth-month, #sone #edit-profile #birth-year { @@ -133,53 +214,111 @@ textarea { clear: both; } +#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; } -#sone .post .text { +#sone .post .text, #sone .post .raw-text { display: inline; white-space: pre-wrap; } +#sone .post .text.hidden, #sone .post .raw-text.hidden { + display: none; +} + #sone .post .status-line { - clear: both; margin-top: 0.5ex; font-size: 85%; } +#sone .separator { + font: inherit; + color: rgb(28, 131, 191); +} + +#sone .show-source, #sone .show-reply-source { + display: inline; +} + +#sone .post .bookmarks { + display: inline; + color: rgb(28, 131, 191); +} + +#sone .post .bookmark, #sone .post .unbookmark { + display: inline; + font: inherit; + margin: 0px; +} + #sone .post .time { display: inline; color: #666; } -#sone .post .delete, #sone .post .likes, #sone .post .like, #sone .post .unlike { +#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 .likes.hidden { display: none; } -#sone .post .like.hidden, #sone .post .unlike.hidden { +#sone .post .like.hidden, #sone .post .unlike.hidden, #sone .post .trust.hidden, #sone .post .distrust.hidden, #sone .post .untrust.hidden, #sone .post .bookmark.hidden, #sone .post .unbookmark.hidden { display: none; } -#sone .post .delete button, #sone .post .like button, #sone .post .unlike button { +#sone .post .delete button, #sone .post .like button, #sone .post .unlike button, #sone .post .trust button, #sone .post .distrust button, #sone .post .untrust button, #sone .post .bookmark button, #sone .post .unbookmark button { border: 0px; background: none; padding: 0px; color: rgb(28, 131, 191); + font: inherit; + margin: 0px; +} + +#sone .post .delete button.confirm { + color: red; + font-weight: bold; +} + +#sone .post .trust button { + color: rgb(0, 128, 0); +} + +#sone .post .distrust button { + color: rgb(255, 0, 0); } -#sone .post .delete button:hover, #sone .post .like button:hover, #sone .post .unlike button:hover { +#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, #sone .post .bookmark button:hover, #sone .post .unbookmark button:hover { border: 0px; background: none; padding: 0px; @@ -187,10 +326,6 @@ textarea { cursor: pointer; } -#sone .post .delete:before, #sone .post .likes:before, #sone .post .like:before, #sone .post .unlike:before { - content: ' ‧ '; -} - #sone .post .likes span { font: inherit; color: green; @@ -201,6 +336,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; @@ -209,6 +365,10 @@ textarea { padding: 1ex; } +#sone .post .reply.new { + background-color: #ffffa0; +} + #sone .post .reply .time { float: none; display: inline; @@ -230,19 +390,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; @@ -251,12 +398,12 @@ textarea { #sone .post .create-reply input[type=text] { margin-left: 0.5ex; - width: 50em; + width: 42em; } #sone .post .create-reply textarea { margin-left: 0.5ex; - width: 50em; + width: 42em; height: 4em; } @@ -264,6 +411,11 @@ textarea { float: right; } +#sone .create-reply .select-sender button, #sone #post-message .select-sender button { + display: inline; + float: left; +} + #sone .sone { clear: both; background-color: #f0f0ff; @@ -276,8 +428,8 @@ textarea { background-color: #f0fff0; } -#sone .sone .id { - display: none; +#sone .sone.new { + background-color: #ffffa0; } #sone .sone .profile-link { @@ -319,7 +471,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; @@ -330,11 +482,7 @@ textarea { bottom: -0.5ex } -#sone .sone form.hidden { - display: none; -} - -#sone .sone form.block button, #sone .sone form.unblock button, #sone .sone form.follow button, #sone .sone form.unfollow button, #sone .sone form.blacklist button, #sone .sone form.unblacklist 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; @@ -343,30 +491,83 @@ 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.blacklist button:hover, #sone .sone form.unblacklist 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.edit { + font-weight: bold; + color: #080; +} + +#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; + position: relative; +} + +#sone .backlinks .backlink { + display: inline; +} + +#sone .album { + float: left; +} + +#sone .backlinks .separator { + display: inline; } #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 #edit-profile textarea { @@ -439,6 +640,6 @@ textarea { } #sone .confirm { - font-weight: bold !important; - color: red !important; + font-weight: bold; + color: red; }