X-Git-Url: https://git.pterodactylus.net/?p=Sone.git;a=blobdiff_plain;f=src%2Fmain%2Fresources%2Fstatic%2Fcss%2Fsone.css;h=d5880b191f34fd4ee00becff18ac6d06f63a2e06;hp=dfd6b9a1462c5ba3b6b722ab07f78b888011e649;hb=1b25052b79d18b8b7af4eae95358ae0635da46a1;hpb=8340bad96a0e0fa5dcf1f6a0b2435566452001a0 diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css index dfd6b9a..d5880b1 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 { @@ -35,6 +51,10 @@ textarea { display: none; } +#sone .toggle-link { + margin-top: 1em; +} + #sone #formPassword { display: none; } @@ -73,10 +93,36 @@ textarea { content: '★ '; } +#sone a.in-page-link:before { + content: '↓ '; +} + #sone a img { border: none; } +#sone .small-link { + font-size: 85%; +} + +#sone .parsed { + white-space: pre-wrap; +} + +#sone #main.offline { + opacity: 0.5; +} + +#sone #offline-marker { + display: none; + position: fixed; + top: 2em; + right: 2em; + width: 128px; + height: 128px; + background-image: url("../images/sone-offline.png"); +} + #sone #notification-area { margin-top: 1em; } @@ -89,6 +135,10 @@ textarea { min-height: 3.5ex; } +#sone #notification-area .notification button { + margin-left: 1ex; +} + #sone #notification-area .notification .dismiss { float: right; } @@ -97,6 +147,18 @@ textarea { margin-left: 1ex; } +#sone #notification-area .notification .mark-as-read { + float: right; +} + +#sone #notification-area .notification .hidden { + display: none; +} + +#sone #notification-area #local-post-notification, #sone #notification-area #local-reply-notification { + display: none; +} + #sone #plugin-warning { border: solid 0.5em red; padding: 0.5em; @@ -109,6 +171,14 @@ textarea { margin-bottom: 1ex; } +#sone .profile-avatar { + display: inline-block; + width: 80px; + height: 80px; + overflow: hidden; + position: absolute; +} + #sone .profile-link { font-weight: bold; color: rgb(28, 131, 191); @@ -136,7 +206,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; } @@ -152,6 +226,15 @@ 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; } @@ -175,6 +258,7 @@ textarea { padding: 1ex 0px; border-bottom: solid 1px #ccc; clear: both; + position: relative; } #sone .post.new { @@ -187,10 +271,51 @@ textarea { border-bottom: none; } +#sone .post .sone-menu { + position: absolute; + top: 0; + left: -1ex; + padding: 1ex 1ex; + margin: -1px -1px; + display: none; + background-color: rgb(255, 255, 224); + border: solid 1px rgb(0, 0, 0); + z-index: 1; +} + +#sone .post .sone-menu .avatar { + position: absolute; + margin-right: 1ex; +} + +#sone .menu-avatar { + display: inline-block; + width: 48px; + height: 48px; + overflow: hidden; +} + +#sone .post .sone-menu .inner-menu { + margin-left: 64px; + padding-left: 1ex; + min-height: 64px; +} + +#sone .sone-menu .follow, #sone .sone-menu .unfollow { + cursor: pointer; +} + #sone .post > .avatar { position: absolute; } +#sone .post-avatar { + display: inline-block; + width: 48px; + height: 48px; + overflow: hidden; +} + #sone .post > .inner-part { margin-left: 48px; padding-left: 0.5em; @@ -202,9 +327,30 @@ textarea { font-weight: bold; } -#sone .post .text { +#sone .post .author-wot-link { + font-size: 90%; +} + +#sone .post .text, #sone .post .raw-text, #sone .post .short-text { display: inline; white-space: pre-wrap; + word-wrap: break-word; +} + +#sone .post .text.hidden, #sone .post .raw-text.hidden, #sone .post .short-text.hidden { + display: none; +} + +#sone .post .expand-post-text:before, #sone .post .expand-reply-text:before { + content: "» "; +} + +#sone .post .shrink-post-text:before, #sone .post .shrink-reply-text:before { + content: "« "; +} + +#sone .post .shrink-post-text { + cursor: pointer; } #sone .post .status-line { @@ -212,33 +358,76 @@ textarea { font-size: 85%; } +#sone .separator { + font: inherit; + color: rgb(28, 131, 191); +} + +#sone .show-source, #sone .show-reply-source { + display: inline; +} + +#sone .permalink { + 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 .untrust button { + color: rgb(64, 64, 64); } -#sone .post .delete button:hover, #sone .post .like button:hover, #sone .post .unlike button:hover { +#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; @@ -246,10 +435,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; @@ -275,6 +460,13 @@ textarea { position: absolute; } +#sone .reply-avatar { + display: inline-block; + width: 36px; + height: 36px; + overflow: hidden; +} + #sone .post .reply > .inner-part { margin-left: 36px; padding-left: 0.5em; @@ -282,13 +474,17 @@ textarea { } #sone .post .reply { + position: relative; clear: both; background-color: #f0f0ff; - font-size: 85%; margin: 1ex 0px; padding: 1ex; } +#sone .post .reply .inner-part { + font-size: 85%; +} + #sone .post .reply.new { background-color: #ffffa0; } @@ -314,10 +510,6 @@ textarea { color: rgb(255, 172, 0); } -#sone .post .show-reply-form:before { - content: ' ‧ '; -} - #sone .post .create-reply { clear: both; background-color: #f0f0ff; @@ -326,12 +518,12 @@ textarea { #sone .post .create-reply input[type=text] { margin-left: 0.5ex; - width: 44em; + width: 42em; } #sone .post .create-reply textarea { margin-left: 0.5ex; - width: 44em; + width: 42em; height: 4em; } @@ -339,6 +531,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; @@ -356,7 +553,11 @@ textarea { } #sone .sone .profile-link { - display: block; + display: inline; +} + +#sone .sone .sone-stats { + display: inline; } #sone .sone .short-request-uri { @@ -431,8 +632,118 @@ textarea { 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 { + font-size: 80%; + margin-bottom: 1em; +} + +#sone .backlinks .backlink { + display: inline; +} + +#sone .album { +} + +#sone .image-row, #sone .album-row { + display: table-row; +} + +#sone .image-container, #sone .album-container { + width: 250px; + height: 250px; + overflow: hidden; + padding: -1px; + border: solid 1px #000; +} + +#sone .image, #sone .album { + display: table-cell; + vertical-align: top; + text-align: center; + padding: 0.5ex; +} + +#sone .single-image img { + border: solid 1px #000; + background-color: #fff; +} + +#sone .image .edit-image input, #sone .album .edit-album input { + width: 95%; +} + +#sone .image .edit-image textarea, #sone .album .edit-album textarea { + width: 95%; +} + +#sone .image .album-sone { + font-size: 80%; +} + +#sone .image .image-title, #sone .album .album-title { + font-weight: bold; +} + +#sone .image .image-description, #sone .album .album-description { + text-align: left; + width: 98%; + word-wrap: break-word; + max-height: 5em; + overflow: auto; +} + +#sone .backlinks .separator { + display: inline; +} + +#sone #search { + text-align: right; +} + +#sone #search input[type=text] { + width: 35em; +} + +#sone #sone-results + #sone #post-results { + clear: both; + padding-top: 1em; } #sone #tail { @@ -496,6 +807,10 @@ textarea { clear: both; } +#sone h1.backlink { + margin-bottom: 0px; +} + #sone h2 { font-family: inherit; font-size: 150%; @@ -508,7 +823,7 @@ textarea { font-weight: bold; } -#sone input.default { +#sone input.default, #sone textarea.default { color: #888; } @@ -518,6 +833,28 @@ textarea { } #sone .confirm { - font-weight: bold !important; - color: red !important; + font-weight: bold; + color: red; +} + +#sone .warning { + color: red; + font-style: italic; +} + +#sone #sort-options { + margin-bottom: 1em; +} + +#sone ul#avatar-selection { + padding: 0; +} + +#sone #avatar-selection li { + display: inline-block; +} + +#sone #avatar-selection li .post-avatar { + vertical-align: middle; + margin-bottom: 0.5em; }