X-Git-Url: https://git.pterodactylus.net/?p=Sone.git;a=blobdiff_plain;f=src%2Fmain%2Fresources%2Fstatic%2Fcss%2Fsone.css;h=26d74e436dd25780c8ef8fd20aa3a92f418d7a1a;hp=69e93d659107e330d766218302366f64a6acc037;hb=faf66247a34f64946990a985d2ea3003465969cb;hpb=a996006a648e2d8b0ef70bbddc66d12d77f7d150 diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css index 69e93d6..26d74e4 100644 --- a/src/main/resources/static/css/sone.css +++ b/src/main/resources/static/css/sone.css @@ -171,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); @@ -246,6 +254,10 @@ textarea { text-align: right; } +#sone td.numeric { + text-align: right; +} + #sone .post { padding: 1ex 0px; border-bottom: solid 1px #ccc; @@ -280,6 +292,13 @@ textarea { margin-right: 1ex; } +#sone .menu-avatar { + display: inline-block; + width: 64px; + height: 64px; + overflow: hidden; +} + #sone .post .sone-menu .inner-menu { margin-left: 64px; padding-left: 1ex; @@ -294,6 +313,13 @@ textarea { 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; @@ -365,7 +391,7 @@ textarea { color: #666; } -#sone .post .delete, #sone .post .likes, #sone .post .like, #sone .post .unlike, #sone .post .trust, #sone .post .distrust, #sone .post .untrust { +#sone .post .delete, #sone .post .likes, #sone .post .like, #sone .post .unlike, #sone .post .wot-link { display: inline; font: inherit; margin: 0px; @@ -375,11 +401,11 @@ textarea { display: none; } -#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 { +#sone .post .like.hidden, #sone .post .unlike.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 .trust button, #sone .post .distrust button, #sone .post .untrust button, #sone .post .bookmark button, #sone .post .unbookmark button { +#sone .post .delete button, #sone .post .like button, #sone .post .unlike button, #sone .post .bookmark button, #sone .post .unbookmark button { border: 0px; background: none; padding: 0px; @@ -393,19 +419,7 @@ textarea { 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 .trust button:hover, #sone .post .distrust button:hover, #sone .post .untrust button:hover, #sone .post .bookmark button:hover, #sone .post .unbookmark button:hover { +#sone .post .delete button:hover, #sone .post .like button:hover, #sone .post .unlike button:hover, #sone .post .bookmark button:hover, #sone .post .unbookmark button:hover { border: 0px; background: none; padding: 0px; @@ -418,6 +432,50 @@ textarea { color: green; } +#sone .post .linked-elements { + margin-top: 1ex; +} + +#sone .linked-element.loaded .image { + display: inline-block; + border: solid 1px black; + width: 160px; + height: 120px; + background-size: cover; + background-position: center; + margin-right: 1ex; + margin-bottom: 1ex; +} + +#sone .linked-element.loaded .html-page { + display: inline-block; + width: 160px; + max-height: 120px; + overflow: hidden; + vertical-align: top; +} + +#sone .reply .linked-element.loaded .html-page { + width: 120px; + max-height: 90px; +} + +#sone .linked-element.loaded .html-page .heading { + font-size: 115%; + font-weight: 600; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +#sone .linked-element.loaded .html-page .description { + font-size: 85%; +} + +#sone .linked-element.loaded .html-page { + display: inline-block; +} + #sone .post .replies { clear: both; padding-top: 0.2ex; @@ -438,6 +496,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; @@ -467,6 +532,21 @@ textarea { font-size: inherit; } +#sone .post .reply .linked-elements { + margin-top: 1ex; +} + +#sone .post .reply .linked-element.loaded .image { + display: inline-block; + border: solid 1px black; + width: 120px; + height: 90px; + background-size: cover; + background-position: center; + margin-right: 1ex; + margin-bottom: 1ex; +} + #sone .post .show-reply-form { display: inline; } @@ -652,48 +732,52 @@ textarea { #sone .album { } -#sone .image-row { +#sone .image-row, #sone .album-row { display: table-row; } -#sone .image-container { - width: 200px; - height: 200px; +#sone .image-container, #sone .album-container { + width: 250px; + height: 250px; overflow: hidden; padding: -1px; border: solid 1px #000; } -#sone .image { - width: 200px; - height: 150px; +#sone .image, #sone .album { display: table-cell; vertical-align: top; text-align: center; padding: 0.5ex; } -#sone .image img, #sone .single-image img { +#sone .single-image img { border: solid 1px #000; background-color: #fff; } -#sone .image .edit-image input { +#sone .image .edit-image input, #sone .album .edit-album input { width: 95%; } -#sone .image .edit-image textarea { +#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: 195px; + width: 98%; word-wrap: break-word; + max-height: 5em; + overflow: auto; } #sone .backlinks .separator { @@ -767,6 +851,10 @@ textarea { float: right; } +#sone .clear { + clear: both; +} + #sone h1 { font-family: inherit; font-size: 200%; @@ -812,3 +900,32 @@ textarea { #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-top: 0.5em; +} + +#sone #avatar-selection li#no-avatar { + display: block; +} + +#sone form#options ul { + padding-left: 1em; +} + +#sone form#options li { + list-style-type: none; +} + +#sone table thead tr { + font-weight: bold; +}