diff options
Diffstat (limited to 'juick-server/src/main/assets/style.css')
| -rw-r--r-- | juick-server/src/main/assets/style.css | 952 |
1 files changed, 952 insertions, 0 deletions
diff --git a/juick-server/src/main/assets/style.css b/juick-server/src/main/assets/style.css new file mode 100644 index 00000000..d7cd2223 --- /dev/null +++ b/juick-server/src/main/assets/style.css @@ -0,0 +1,952 @@ +/* #region generic */ + +html, +body, +div, +h1, +h2, +ul, +li, +p, +form, +input, +textarea, +pre { + margin: 0; + padding: 0; +} +html, +input, +textarea { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-size: 12pt; + -webkit-font-smoothing: subpixel-antialiased; +} +h1, +h2 { + font-weight: normal; +} +ul { + list-style-type: none; +} +a { + color: #069; + text-decoration: none; +} +img, +hr { + border: none; +} +hr { + background: #CCC; + height: 1px; + margin: 10px 0; +} +pre { + background: #222; + color: #0f0; + overflow-x: auto; + padding: 6px; + white-space: pre; +} +pre::selection { + background: #0f0; + color: #222; +} +pre::-moz-selection { + background: #0f0; + color: #222; +} +.u { + text-decoration: underline; +} + +/* #endregion */ + +/* #region overall layout */ + +html { + background: #f8f8f8; + color: #222; +} +#wrapper { + margin: 0 auto; + width: 1000px; + margin-top: 52px; +} +#column { + float: left; + margin-left: 10px; + overflow: hidden; + padding-top: 10px; + width: 240px; +} +#content { + float: right; + margin: 12px 0 0 0; + width: 728px; +} +#minimal_content { + margin: 0 auto; + min-width: 310px; + width: auto; +} +*::selection { + background: #006699; + color: #fff; +} +body > header { + position: fixed; + top: 0; + width: 100%; + z-index: 10; + transition-duration: 0.5s; + transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + transition-property: transform; +} +@supports (backdrop-filter: blur(10px)) { + body > header--background { + background: rgba(255, 255, 255, 0.8); + backdrop-filter: blur(10px); + } +} +#header_wrapper { + margin: 0 auto; + width: 1000px; + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + padding: 4px; +} +.header--background { + box-shadow: 0 0 3px rgba(0, 0, 0, 0.28); + background: #fff; +} +.header--hidden { + transform: translateY(-100%); +} +#footer { + clear: both; + color: #999; + font-size: 10pt; + margin: 40px; + padding: 10px 0; +} + +@media screen and (max-width: 850px) { + body { + text-size-adjust: 100%; + } + body, + #wrapper, + #topwrapper, + #content, + #footer { + float: none; + margin: 0 auto; + min-width: 310px; + width: auto; + } + #wrapper { + margin-top: 50px; + } + body > header { + margin-bottom: 15px; + } + #column { + float: none; + margin: 0 10px; + padding-top: 0; + width: auto; + } +} + +/* #endregion */ + +/* #region header internals */ + +#logo { + height: 36px; + width: 110px; +} +#logo a { + background: url("logo@2x.png") no-repeat; + background-size: cover; + border: 0; + display: block; + height: 36px; + overflow: hidden; + text-indent: 100%; + white-space: nowrap; + width: 110px; +} +#global { + display: flex; +} +#global a { + color: #888; + display: inline-block; + font-size: 13pt; + padding: 14px 6px; +} +#global li { + display: inline-block; +} +#ctitle a { + padding: 14px; +} +#global li:hover, +#ctitle a:hover, +.l a:hover { + background-color: #fff; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); + cursor: pointer; + transition: box-shadow 0.2s ease-in; +} +#search input { + background: #FFF; + border: 1px solid #ccc; + outline: none !important; + padding: 4px; + -webkit-appearance: none; + border-radius: 0; +} + +/* #endregion */ + +/* #region left column internals */ + +.toolbar { + border-top: 1px solid #CCC; +} + +#column ul, +#column p, +#column hr { + margin: 10px 0; +} +#column li > a { + display: block; + height: 100%; + padding: 6px; +} +#column li > a:hover { + background-color: #fff; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); + transition: background-color 0.2s ease-in; +} +#column .margtop { + margin-top: 15px; +} + +#column .tags { + background: #fff; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); + line-height: 140%; + padding: 6px; + text-align: justify; +} +#column .inp { + background: #fff; + border: 1px solid #ddddd5; + outline: none !important; + padding: 4px; + width: 222px; +} +#column .tags h4 { + background: #eee; + border: 1px solid #eee; + color: #888; + display: block; + text-align: center; +} +#ctitle { + font-size: 14pt; +} +#ctitle img { + margin-right: 5px; + vertical-align: middle; + width: 48px; +} +#ustats li { + font-size: 10pt; + margin: 3px 0; +} +#column table.iread { + width: 100%; +} +#column table.iread td { + text-align: center; +} +#column table.iread img { + height: 48px; + width: 48px; +} + +/* #endregion */ + +/* #region main content */ +#content > p, +#content > h1, +#content > h2, +#minimal_content > p, +#minimal_content > h1, +#minimal_content > h2 { + margin: 1em 0; +} +.page { + background: #eee; + padding: 6px; + text-align: center; +} + +.page a { + color: #888; +} + +/* #endregion */ + +/* #region article, message internals */ + +article { + background: #fff; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); + line-height: 140%; + margin-bottom: 10px; + padding: 20px; +} +article time { + color: #999; + font-size: 10pt; +} +article p { + clear: left; + margin: 5px 0 15px 0; + word-wrap: break-word; + overflow-wrap: break-word; +} +article .ir { + text-align: center; +} +article .ir a { + cursor: zoom-in; + display: block; +} +article .ir img { + max-width: 100%; +} +article > nav.l, +.msg-cont > nav.l { + border-top: 1px solid #eee; + display: flex; + justify-content: space-around; + font-size: 10pt; +} +article > nav.l a, +.msg-cont > nav.l a { + color: #888; + margin-right: 15px; +} +article .likes { + padding-left: 20px; +} +article .replies { + margin-left: 18px; +} +article .tags { + margin-top: 3px; +} +.msg-tags { + margin-top: 12px; + min-height: 1px; +} +article .tags > a, +.badge, +.msg-tags > a { + background: #eee; + border: 1px solid #eee; + color: #888; + display: inline-block; + font-size: 10pt; + margin-bottom: 5px; + margin-right: 5px; + padding: 0 10px; +} +.l .msg-button { + align-items: center; + display: flex; + flex-basis: 0; + flex-direction: column; + flex-grow: 1; + padding-top: 12px; +} +.l .msg-button-icon { + font-weight: bold; +} +.msgthread { + margin-bottom: 0; +} +.msg-avatar { + float: left; + height: 48px; + margin-right: 10px; + width: 48px; +} +.msg-avatar img { + height: 48px; + vertical-align: top; + width: 48px; +} +.msg-cont { + background: #FFF; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.16); + line-height: 140%; + margin-bottom: 12px; + padding: 20px; + width: 640px; +} +.reply-new .msg-cont { + border-right: 5px solid #0C0; +} +.msg-ts { + font-size: small; + vertical-align: top; +} +.msg-ts, +.msg-ts > a { + color: #999; +} +.msg-txt { + clear: both; + margin: 0 0 12px; + padding-top: 10px; + word-wrap: break-word; + overflow-wrap: break-word; +} +.msg-media { + text-align: center; +} +.msg-links { + color: #999; + font-size: small; + margin: 5px 0 0 0; +} +.msg-comments { + color: #AAA; + font-size: small; + margin-top: 10px; + overflow: hidden; + text-indent: 10px; +} +.ta-wrapper { + border: 1px solid #DDD; + display: flex; + flex-grow: 1; +} +.msg-comment { + display: flex; + width: 100%; + margin-top: 10px; +} +.msg-comment-hidden { + display: none; +} +.msg-comment textarea { + border: 0; + flex-grow: 1; + outline: none !important; + padding: 4px; + resize: vertical; + vertical-align: top; +} +.attach-photo { + cursor: pointer; +} +.attach-photo-active { + color: green; +} +.msg-comment input { + align-self: flex-start; + background: #EEE; + border: 1px solid #CCC; + color: #999; + margin: 0 0 0 6px; + position: -webkit-sticky; + position: sticky; + top: 70px; + vertical-align: top; + width: 50px; +} +.msg-recomms { + color: #AAA; + font-size: small; + margin-top: 10px; + overflow: hidden; + text-indent: 10px; +} +#replies .msg-txt, +#private-messages .msg-txt { + margin: 0; +} +.title2 { + background: #fff; + margin: 20px 0; + padding: 10px 20px; + width: 640px; +} +.title2-right { + float: right; + line-height: 24px; +} +#content .title2 h2 { + font-size: x-large; + margin: 0; +} + +@media screen and (max-width: 850px) { + #header_wrapper { + width: auto; + } + #global { + justify-content: space-around; + flex-grow: 1; + } + #search { + padding: 4px; + } + article { + overflow: auto; + } + article p { + margin: 10px 0 8px 0; + } + .msg, + .msg-cont { + min-width: 280px; + width: auto; + } + .msg-cont { + margin: 8px 0; + } + .msg-media { + overflow: auto; + } + .title2 h2 { + font-size: large; + } + .msg-comment { + flex-direction: column; + } + .msg-comment input { + align-self: flex-end; + margin: 6px 0 0 0; + width: 100px; + } +} + +@media screen and (max-width: 480px) { + #wrapper { + margin-top: 104px; + } + #search { + display: none; + } + #global a { + padding: 14px 2px; + font-size: 11pt; + } + .msg-cont > nav.l, + article > nav.l { + font-size: 9pt; + } + .msg-txt { + padding-top: 5px; + } + .title2 { + font-size: 11pt; + width: auto; + } + #content .title2 h2 { + font-size: 11pt; + } + .title2-right { + line-height: initial; + } +} + +/* #endregion */ + +/* #region user-generated texts */ + +q:before, +q:after { + content: ""; +} +q, +blockquote { + border-left: 3px solid #CCC; + color: #666; + display: block; + margin: 10px 0 10px 10px; + padding-left: 10px; +} + +/* #endregion */ + +/* #region new message form internals */ + +#newmessage { + background: #E5E5E0; + margin-bottom: 20px; + padding: 15px; +} +#newmessage textarea { + border: 1px solid #CCC; + box-sizing: border-box; + margin: 0 0 5px 0; + margin-top: 20px; + max-height: 6em; + min-width: 280px; + padding: 4px; + width: 100%; +} +#newmessage input { + border: 1px solid #CCC; + margin: 5px 0; + padding: 2px 4px; +} +#newmessage .img { + width: 500px; +} +#newmessage .tags { + width: 500px; +} +#newmessage .subm { + background: #EEEEE5; + width: 150px; +} +@media screen and (max-width: 850px) { + #newmessage .img, + #newmessage .tags { + width: 100%; + } +} + +/* #endregion */ + +/* #region user lists */ + +.users { + margin: 10px 0; + width: 100%; + display: flex; + flex-wrap: wrap; +} +.users > span { + overflow: hidden; + padding: 6px 0; + width: 200px; +} +.users img { + height: 32px; + margin-right: 6px; + vertical-align: middle; + width: 32px; +} + +/* #endregion */ + +/* #region signup form */ + +.signup-h1 > img { + margin-right: 10px; + vertical-align: middle; +} +.signup-h1 { + font-size: x-large; + margin: 20px 0 10px 0; +} +.signup-h2 { + font-size: large; + margin: 10px 0 5px 0; +} +.signup-hr { + margin: 20px 0; +} + +/* #endregion */ + +/* #region PM */ + +.newpm { + margin: 20px 60px 30px 60px; +} +.newpm textarea { + resize: vertical; + width: 100%; +} +.newpm-send input { + width: 100px; +} + +/* #endregion */ + +/* #region popup dialog (lightbox) */ + +#dialogb { + background: #222; + height: 100%; + left: 0; + opacity: 0.6; + position: fixed; + top: 0; + width: 100%; + z-index: 10; +} +#dialogt { + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + z-index: 10; + display: flex; + align-items: center; + justify-content: center; +} +#dialogw { + z-index: 11; + max-width: 96%; + max-height: calc(100% - 100px); + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +#dialogw a { + display: block; +} +#dialogw img { + max-height: 100%; + max-height: 90vh; + max-width: 100%; +} +#dialog_header { + width: 100%; + height: 44px; + position: fixed; + display: flex; + flex-direction: row-reverse; + align-items: center; +} +.header_image { + background: rgba(0, 0, 0, 0.28); +} +#dialogc { + cursor: pointer; + color: #ccc; + padding-right: 6px; +} +.dialoglogin { + background: #fff; + padding: 25px; + width: 300px; +} +.dialog-opened { + overflow: hidden; +} +#signemail, +#signfb, +#signvk { + display: block; + line-height: 32px; + margin: 10px 0; + text-decoration: none; + width: 100%; +} +#signvk { + margin-bottom: 30px; +} +.dialoglogin form { + margin-top: 7px; +} +.signinput, +.signsubmit { + border: 1px solid #CCC; + margin: 3px 0; + padding: 3px; +} +.signinput { + width: 292px; +} +.signsubmit { + width: 70px; +} +.dialogshare { + background: #fff; + min-width: 300px; + overflow: auto; + padding: 20px; +} +.dialogl { + background: #fff; + border: 1px solid #DDD; + margin: 3px 0 20px; + padding: 5px; +} +.dialogshare li { + float: left; + margin: 5px 10px 0 0; +} +.dialogshare a { + display: block; +} +.dialogtxt { + background: #fff; + padding: 20px; +} + +@media screen and (max-width: 480px) { + .dialog-opened { + position: fixed; + width: 100%; + } +} + +/* #endregion */ + +/* #region misc */ + +#wsthread { + background: #CCC; + bottom: 20px; + cursor: pointer; + display: none; + padding: 5px 10px; + position: fixed; + right: 20px; +} +.sharenew { + display: inline-block; + line-height: 32px; + min-height: 32px; + min-width: 200px; + padding: 0 12px 0 37px; +} +.icon { + margin-top: -2px; + vertical-align: middle; +} +.icon--ei-link { + margin-top: -1px; +} +.icon--ei-comment { + margin-top: -5px; +} +.newmessage { + /* textarea on the /post page */ + border: 1px solid #DDD; + padding: 2px; + resize: vertical; + width: 100%; +} + +/* #endregion */ + +/* #region footer internals */ + +#footer-social { + float: left; +} +#footer-social a { + border: 0; + display: inline-block; +} +#footer-left { + margin-left: 286px; + margin-right: 350px; +} +#footer-right { + float: right; +} + +@media screen and (max-width: 850px) { + #footer { + margin: 0 10px; + } + #footer div { + float: none; + margin: 10px 0; + } +} + +/* #endregion */ + +/* #region settings */ + +fieldset { + border: 1px dotted #ccc; + margin-top: 25px; +} + +/* #endregion */ + +/* #region embeds */ + +.embedContainer { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + padding: 0; + margin: 30px -3px 15px -3px; +} +.embedContainer > * { + box-sizing: border-box; + flex-grow: 1; + margin: 3px; + min-width: 49%; +} +.embedContainer > .compact { + flex-grow: 0; +} +.embedContainer .picture img { + display: block; +} +.embedContainer img, +.embedContainer video { + max-width: 100%; + max-height: 80vh; +} +.embedContainer > .audio, +.embedContainer > .youtube { + min-width: 90%; +} +.embedContainer audio { + width: 100%; +} +.embedContainer iframe { + overflow: hidden; + resize: vertical; + display: block; +} + +/* #endregion */ + +/* #region nsfw */ + +article.nsfw .embedContainer img, +article.nsfw .embedContainer video, +article.nsfw .embedContainer iframe, +article.nsfw .ir img { + opacity: 0.1; +} +article.nsfw .embedContainer img:hover, +article.nsfw .embedContainer video:hover, +article.nsfw .embedContainer iframe:hover, +article.nsfw .ir img:hover { + opacity: 1; +} + +/* #endregion */ |