X-Git-Url: https://git.pterodactylus.net/?p=Sone.git;a=blobdiff_plain;f=src%2Fmain%2Fresources%2Fstatic%2Fcss%2Fsone.css;h=d5880b191f34fd4ee00becff18ac6d06f63a2e06;hp=8eb8449df7e792d3b8fdf166b8f3c68a49eb9a89;hb=1b25052b79d18b8b7af4eae95358ae0635da46a1;hpb=6991fe9edc0e1652b695f9c0b2844bb6a0842c84 diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css index 8eb8449..d5880b1 100644 --- a/src/main/resources/static/css/sone.css +++ b/src/main/resources/static/css/sone.css @@ -51,6 +51,10 @@ textarea { display: none; } +#sone .toggle-link { + margin-top: 1em; +} + #sone #formPassword { display: none; } @@ -89,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; } @@ -121,6 +151,14 @@ textarea { 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; @@ -133,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); @@ -212,6 +258,7 @@ textarea { padding: 1ex 0px; border-bottom: solid 1px #ccc; clear: both; + position: relative; } #sone .post.new { @@ -224,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; @@ -239,15 +327,32 @@ textarea { font-weight: bold; } -#sone .post .text, #sone .post .raw-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 .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 { margin-top: 0.5ex; font-size: 85%; @@ -262,6 +367,10 @@ textarea { display: inline; } +#sone .permalink { + display: inline; +} + #sone .post .bookmarks { display: inline; color: rgb(28, 131, 191); @@ -351,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; @@ -358,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; } @@ -433,7 +553,11 @@ textarea { } #sone .sone .profile-link { - display: block; + display: inline; +} + +#sone .sone .sone-stats { + display: inline; } #sone .sone .short-request-uri { @@ -545,6 +669,83 @@ textarea { 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 { margin-top: 1em; border-top: solid 1px #ccc; @@ -606,6 +807,10 @@ textarea { clear: both; } +#sone h1.backlink { + margin-bottom: 0px; +} + #sone h2 { font-family: inherit; font-size: 150%; @@ -618,7 +823,7 @@ textarea { font-weight: bold; } -#sone input.default { +#sone input.default, #sone textarea.default { color: #888; } @@ -631,3 +836,25 @@ textarea { 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; +}