From 7a2ea130863bb095fa925ec0c7576b076490f0cf Mon Sep 17 00:00:00 2001 From: Alexander Alexeev Date: Sun, 20 Nov 2016 02:05:23 +0700 Subject: init juick-spring-web project --- juick-spring-www/src/main/webapp/static/style.css | 874 ++++++++++++++++++++++ 1 file changed, 874 insertions(+) create mode 100644 juick-spring-www/src/main/webapp/static/style.css (limited to 'juick-spring-www/src/main/webapp/static/style.css') diff --git a/juick-spring-www/src/main/webapp/static/style.css b/juick-spring-www/src/main/webapp/static/style.css new file mode 100644 index 00000000..46af7b81 --- /dev/null +++ b/juick-spring-www/src/main/webapp/static/style.css @@ -0,0 +1,874 @@ +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", "Droid Sans", "Helvetica Neue", sans-serif; + font-size: 12pt; + -webkit-font-smoothing: subpixel-antialiased; +} +html { + background: #EEEEE5; + color: #222; +} +body { + margin: 0 auto; + width: 1000px; +} +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 { + white-space: pre-wrap; + white-space: -moz-pre-wrap; + white-space: -pre-wrap; + white-space: -o-pre-wrap; + word-wrap: break-word; +} +span.u { + text-decoration: underline; +} +#content { + float: right; + margin: 25px 0 0 0; + width: 728px; +} +#topwrapper { + clear: both; + position: relative; +} +body>header { + width: 1000px; +} +body>header a { + border-bottom: 1px dotted #666; + color: #222; + font-size: 13pt; +} +#logo { + float: left; + height: 36px; + margin: 7px 25px 0 20px; + width: 110px; +} +#logo a { + background: url("logo.png") no-repeat; + border: 0; + display: block; + height: 36px; + overflow: hidden; + text-indent: 100%; + white-space: nowrap; + width: 110px; +} +@media screen and (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) { + #logo a { + background: url("logo@2x.png") no-repeat; + background-size: cover; + } +} +nav#global { + float: left; +} +nav#global li { + display: inline-block; + margin: 14px 12px 0 0; +} +#search { + float: right; + margin: 12px 20px 12px 0; +} +#search input { + background: #FFF; + border: 1px solid #DDDDD5; + padding: 4px; +} +#headdiv { + background: #DDDDD5; + border-bottom: 1px solid #D5D5D0; + border-top: 1px solid #D5D5D0; + clear: both; + margin: 0 0 5px 0; + padding: 0 20px; + position: relative; +} +#headdiv li { + display: inline-block; + margin: 12px 12px 12px 0; +} +nav#actions { + position: absolute; + right: 8px; + top: 0; +} +body>header nav li:after { + color: #AAA; + content: "/"; + display: inline-block; + margin-left: 12px; +} +body>header nav li:last-child:after { + display: none; +} +body>header p { + color: #222; + font-size: 13pt; + margin: 12px 0; + text-align: center; +} +#content>p, #content>h1, #content>h2 { + margin: 1em 0; +} +#newmessage { + background: #E5E5E0; + margin-bottom: 20px; + padding: 15px; +} +#newmessage textarea { + border: 1px solid #CCC; + height: 14pt; + margin: 0 0 5px 0; + min-height: 14pt; + padding: 4px; + resize: vertical; + width: 688px; +} +#newmessage input { + border: 1px solid #CCC; + margin: 5px 0; + padding: 2px 4px; +} +#newmessage>div { + display: none; +} +#newmessage .img { + width: 500px; +} +#newmessage .tags { + width: 500px; +} +#newmessage .subm { + background: #EEEEE5; + width: 150px; +} +article { + background: #fff; + line-height: 140%; + margin-bottom: 20px; + padding: 20px; +} +article aside { + float: left; + height: 48px; + margin-right: 10px; + width: 48px; +} +article aside img { + height: 48px; + width: 48px; +} +article time { + border-bottom: 1px dotted #999; + color: #999; + font-size: 10pt; +} +article p { + clear: left; + margin: 5px 0 15px 0; +} +article p.i { + text-align: center; +} +article p.ir { + float: right; + margin-bottom: 10px; + margin-left: 10px; +} +article p.ir a { + cursor: -moz-zoom-in; + cursor: -webkit-zoom-in; +} +article p.ir img { + max-height: 200px; + max-width: 200px; +} +article .irbr { + clear: right; +} +article>nav.l { + display: inline-block; + font-size: 10pt; +} +article>nav.l a { + border-bottom: 1px dotted #AAA; + color: #888; + margin-right: 15px; +} +article>nav.s { + display: inline-block; + float: right; + text-align: right; +} +article>nav.s a { + color: #222; + font-weight: bold; + vertical-align: middle; +} +article a.likes { + padding-left: 20px; +} +article a.replies { + margin-left: 18px; +} +article footer.comm { + margin: 13px 0 0 0; +} +article textarea { + border: 0; + height: 12pt; + min-height: 12pt; + padding: 2px; + resize: vertical; + vertical-align: top; + width: 530px; +} +article input { + background: #EEE; + border: 1px solid #CCC; + color: #999; + margin-left: 6px; + min-width: 50px; + vertical-align: top; +} +article .tags { + margin-top: 3px; +} +.msg-tags { + margin-top: 5px; +} +article .tags>a, .msg-tags>a { + border: 1px dotted #ccc; + color: #888; + display: inline-block; + font-size: 10pt; + margin-bottom: 5px; + margin-right: 5px; + padding: 0 10px; +} +#geomap { + height: 300px; + margin-top: 1em; + overflow: hidden; + width: 700px; +} +.msg { + margin: 10px 0 20px 0; +} +.ads { + background: #FFF; + margin: 8px 0 16px 58px; + padding: 13px 10px 5px 10px; +} +.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; + line-height: 140%; + margin-bottom: 20px; + padding: 20px; + width: 640px; +} +.msg-menu { + float: right; + height: 16px; + margin-left: 10px; + margin-top: 2.4px; + width: 16px; +} +.msg-menu>a { + background: url("menu.png") no-repeat; + display: block; + height: 16px; + vertical-align: top; + width: 16px; +} +.msg-ts, article header.t { + float: right; + font-size: small; + vertical-align: top; +} +.msg-ts, .msg-ts>a { + color: #999; +} +.msg-place { + font-size: small; +} +.msg-place>a { + color: #999; +} +.msg-txt { + clear: both; + margin: 0 0 12px; + padding-top: 10px; +} +.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: inline-block; +} +.msg-comment textarea { + border: 0; + height: 12pt; + min-height: 12pt; + padding: 2px; + resize: vertical; + vertical-align: top; + width: 634px; +} +.msg-comment .narrow { + width: 554px; +} +.msg-comment .narrowpm { + width: 580px; +} +.attach-photo { + background: url("photo-attachment.png") no-repeat 3px 4px; + cursor: pointer; + display: inline-block; + height: 13px; + overflow: hidden; + padding: 2px 4px; + width: 16px; +} +.attach-photo-active { + background: url("photo-attachment-active.png") no-repeat 3px 4px; + cursor: pointer; + display: inline-block; + height: 13px; + overflow: hidden; + padding: 2px 4px; + width: 16px; +} +.msg-comment input { + background: #EEE; + border: 1px solid #CCC; + color: #999; + margin-left: 6px; + vertical-align: top; + width: 50px; +} +.msg-recomms { + color: #AAA; + font-size: small; + margin-top: 10px; + overflow: hidden; + text-indent: 10px; +} +.reply-new .msg-cont { + border-right: 5px solid #0C0; +} +q:before, q:after { + content: ""; +} +q { + border-left: 1px dashed #CCC; + color: #666; + display: block; + margin: 10px 0 10px 10px; + padding-left: 10px; +} +#mtoolbar { + background: #E5E5DD; + border-top: 1px solid #CCC; + width: 680px; +} +#mtoolbar ul, #mtoolbar a { + padding: 5px; +} +#mtoolbar li { + display: inline; +} +#mtoolbar div { + background: url("toolbar-icons.png") no-repeat; + display: inline-block; + height: 16px; + margin: 5px; + vertical-align: middle; + width: 16px; +} +#replies .msg-txt, #private-messages .msg-txt { + margin: 0; +} +.msg-comment { + margin-top: 10px; +} +.newmessage { + border: 1px solid #DDD; + padding: 2px; + resize: vertical; + width: 695px; +} +.users { + margin: 10px 0; + width: 100%; +} +.users td { + overflow: hidden; + padding: 6px 0; + width: 33%; +} +.users img { + height: 32px; + margin-right: 6px; + vertical-align: middle; + width: 32px; +} +.title2 { + background: #DDDDD0; + margin: 20px 0; + padding: 10px 20px; +} +.title2-right { + float: right; + line-height: 24px; +} +#content .title2 h2 { + font-size: x-large; + margin: 0; +} +.page { + background: #E5E5DD; + padding: 5px; + text-align: center; +} +.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; +} +.newpm { + margin: 20px 60px 30px 60px; +} +.newpm textarea { + resize: vertical; + width: 100%; +} +.newpm-send input { + width: 100px; +} +#column { + float: left; + margin-left: 10px; + overflow: hidden; + padding-top: 10px; + width: 240px; +} +#column ul, #column p, #column hr { + margin: 10px 0; +} +#column li { + margin: 6px 0; +} +#column .margtop { + margin-top: 15px; +} +#column p { + font-size: 10pt; + line-height: 140%; +} +#column .tags { + text-align: justify; +} +#column .inp { + background: #F5F5E9; + border: 1px solid #CCC; + border-radius: 3px; + padding: 3px; + width: 222px; +} +#ctitle { + font-size: 14pt; +} +#ctitle img { + margin-right: 5px; + vertical-align: middle; +} +#ctoolbar { + background: #E5E5DD; + line-height: 0; + margin: 10px 0; + padding: 5px; +} +#ctoolbar li { + display: inline; +} +#ctoolbar a { + padding: 5px 10px; +} +#ctoolbar div { + background: url("toolbar-icons.png") no-repeat; + display: inline-block; + height: 16px; + margin: 5px 0; + vertical-align: middle; + width: 16px; +} +#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; +} +#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; +} +#dialogt td { + text-align: center; + vertical-align: middle; +} +#dialogw { + display: inline-block; + position: relative; + text-align: left; + z-index: 11; +} +#dialogc { + background: url("dialog-close.png"); + cursor: pointer; + height: 30px; + position: absolute; + right: -15px; + top: -15px; + width: 30px; + z-index: 12; +} +.dialoglogin { + background: #EEEEE5; + padding: 25px; + width: 300px; +} +#signfb,#signvk { + display: block; + height: 32px; + line-height: 32px; + margin: 10px 0; + overflow: hidden; + text-decoration: none; + text-indent: 37px; + width: 100%; +} +#signfb { + background: url("facebook.png") no-repeat #3A569C; + color: #FFF; +} +#signvk { + background: url("vk.png") no-repeat #6d8fb3; + color: #FFF; + 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: #EEEEE5; + border: 1px solid #999; + min-width: 300px; + overflow: auto; + padding: 20px; +} +.dialogl { + background: #F5F5E9; + border: 1px solid #DDD; + margin: 3px 0 20px; + padding: 5px; +} +.dialogshare li { + float: left; + margin: 5px 10px 0 0; +} +.dialogshare a { + background-image: url("sharesocial.png"); + display: block; + height: 32px; + width: 32px; +} +.dialogtxt { + background: #EEEEE5; + padding: 20px; +} +#wsthread { + background: #CCC; + bottom: 20px; + cursor: pointer; + display: none; + padding: 5px 10px; + position: fixed; + right: 20px; +} +#footer { + clear: both; + color: #999; + font-size: 10pt; + margin: 0 auto 20px 0; + padding: 10px 0; + width: 1004px; +} +#footer-social { + float: left; +} +#footer-social a { + border: 0; + display: inline-block; + height: 32px; + margin: 0 15px 0 0; + overflow: hidden; + text-indent: 100%; + white-space: nowrap; + width: 32px; +} +#footer-left { + margin-left: 286px; + margin-right: 350px; +} +#footer-right { + float: right; +} +.sharenew { + color: #FFF; + display: inline-block; + line-height: 32px; + min-height: 32px; + min-width: 200px; + padding: 0 12px 0 37px; +} +.ico32-twi { + background: #55acee url("icon-twitter.png") no-repeat; +} +.ico32-vk { + background: #6d8fb3 url("icon-vk.png") no-repeat; +} +.ico32-fb { + background: #3b579d url("icon-fb.png") no-repeat; +} +.ico32-lj { + background: #888888 url("icon-lj.png") no-repeat; +} +.ico32-gp { + background: #dc4a38 url("icon-gplus.png") no-repeat; +} +.icon { + margin-top: -2px; + vertical-align: middle; +} +.icon--ei-comment { + margin-top: -3px; +} +fieldset { + border: 1px dotted #ccc; + margin-top: 25px; +} +@media screen and (max-width: 850px) { + body { + text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + } + body,body>header,#topwrapper,#content,#footer,#mtoolbar { + float: none; + margin: 0 auto; + min-width: 310px; + width: auto; + } + body>header { + margin-bottom: 15px; + } + body>header a { + font-size: 12pt; + } + #logo { + display: none; + } + nav#global { + margin-left: 10px; + } + nav#global li { + margin-right: 10px; + } + #search { + display: inline-block; + float: none; + margin: 10px 10px; + } + #headdiv { + padding: 0 10px; + } + #headdiv li { + margin-right: 10px; + } + nav#actions { + position: relative; + right: auto; + } + #newmessage .img, #newmessage .tags { + width: 100%; + } + #column { + float: none; + margin: 0 10px; + padding-top: 0; + width: auto; + + } + article { + margin: 8px; + overflow: auto; + } + article p { + margin: 10px 0 8px 0; + } + article>nav.l { + display: block; + float: left; + line-height: 15pt; + width: 80%; + } + article>nav.s { + display: block; + } + article textarea { + width: 205px; + } + article footer { + float: left; + } + #content textarea { + width: 100%; + } + .msg,.msg-cont { + min-width: 280px; + width: auto; + } + .msg-cont,.ads { + margin: 8px; + } + .msg-comment textarea { + width: 100%; + } + .msg-media { + overflow: auto; + } + .title2 h2 { + font-size: large; + } + #footer { + margin: 0 10px; + } + #footer div { + float: none; + margin: 10px 0; + } +} +@media screen and (max-width: 480px) { + .msg-ts { + float: none; + } + .msg-tags { + margin-top: 10px; + } + .msg-txt { + padding-top: 5px; + } + .title2 { + font-size: 11pt; + } + #content .title2 h2 { + font-size: 11pt; + } + .title2-right { + line-height: initial; + } +} -- cgit v1.2.3