X-Git-Url: https://git.pterodactylus.net/?p=Sone.git;a=blobdiff_plain;f=src%2Fmain%2Fresources%2Fstatic%2Fcss%2Fsone.css;h=5ea5f645d622dfaa93477355e68cd9b3acb0c46f;hp=058029cf8be03ff525a72ed0a601b5a4a1222531;hb=ffd92ca2374c0b2218e583d02e0bdd24b8c110ae;hpb=b5d2af55045456645f59236ea9b31cd063fa622d diff --git a/src/main/resources/static/css/sone.css b/src/main/resources/static/css/sone.css index 058029c..5ea5f64 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; } @@ -97,6 +101,10 @@ textarea { border: none; } +#sone .small-link { + font-size: 85%; +} + #sone .parsed { white-space: pre-wrap; } @@ -163,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); @@ -272,6 +288,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; @@ -286,6 +309,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; @@ -410,6 +440,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; @@ -430,6 +504,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; @@ -459,6 +540,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; } @@ -634,6 +730,7 @@ textarea { #sone .backlinks { font-size: 80%; + margin-bottom: 1em; } #sone .backlinks .backlink { @@ -643,21 +740,54 @@ textarea { #sone .album { } -#sone .image { - width: 200px; - height: 150px; +#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: middle; + vertical-align: top; text-align: center; padding: 0.5ex; } -#sone .image img, #sone .single-image img { - padding: 1ex; +#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; } @@ -729,6 +859,10 @@ textarea { float: right; } +#sone .clear { + clear: both; +} + #sone h1 { font-family: inherit; font-size: 200%; @@ -774,3 +908,28 @@ 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; +}