aboutsummaryrefslogtreecommitdiff
path: root/juick-www/src/main/static
diff options
context:
space:
mode:
Diffstat (limited to 'juick-www/src/main/static')
-rw-r--r--juick-www/src/main/static/scripts.js4
-rw-r--r--juick-www/src/main/static/style.css112
2 files changed, 53 insertions, 63 deletions
diff --git a/juick-www/src/main/static/scripts.js b/juick-www/src/main/static/scripts.js
index bad1d415..321de92d 100644
--- a/juick-www/src/main/static/scripts.js
+++ b/juick-www/src/main/static/scripts.js
@@ -214,7 +214,7 @@ function wsIncomingReply(msg) {
li.innerHTML = msgContHtml;
li.addEventListener('click', newReply);
li.addEventListener('mouseover', newReply);
- li.querySelector('.msg-menu > a').addEventListener('click', function (e) {
+ li.querySelector('.msg-menu').addEventListener('click', function (e) {
showMessageLinksDialog(msg.mid, msg.rid);
e.preventDefault();
});
@@ -715,7 +715,7 @@ ready(function () {
}
}
- document.querySelectorAll('.msg-menu a').forEach(function (el) {
+ document.querySelectorAll('.msg-menu').forEach(function (el) {
el.addEventListener('click', function (e) {
var reply = e.target.closest('li');
var rid = reply ? parseInt(reply.id) : 0;
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index cf90bae9..acc0eaf0 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -21,12 +21,18 @@ textarea {
-webkit-font-smoothing: subpixel-antialiased;
}
html {
- background: #EEEEE5;
+ background: #eaeadf;
color: #222;
}
#wrapper {
margin: 0 auto;
width: 1000px;
+ margin-top: 50px;
+}
+#header_wrapper {
+ margin: 0 auto;
+ width: 1000px;
+ display: flex;
}
h1,
h2 {
@@ -68,20 +74,25 @@ pre::-moz-selection {
}
#content {
float: right;
- margin: 25px 0 0 0;
+ margin: 12px 0 0 0;
width: 728px;
}
#topwrapper {
clear: both;
position: relative;
}
+body > header {
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.28);
+ background: #f2f2ec;
+ position: fixed;
+ top: 0;
+ width: 100%;
+}
body > header a {
- border-bottom: 1px dotted #666;
- color: #222;
+ color: #069;
font-size: 13pt;
}
#logo {
- float: left;
height: 36px;
margin: 7px 25px 0 20px;
width: 110px;
@@ -103,14 +114,13 @@ body > header a {
}
}
#global {
- float: left;
+ flex-grow: 1;
}
#global li {
display: inline-block;
margin: 14px 12px 0 0;
}
#search {
- float: right;
margin: 12px 20px 12px 0;
}
#search input {
@@ -119,17 +129,12 @@ body > header a {
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;
+#headdiv p {
+ padding: 12px;
+ text-align: center;
}
#actions {
position: absolute;
@@ -138,7 +143,7 @@ body > header a {
}
body > header nav li:after {
color: #AAA;
- content: "/";
+ content: "|";
display: inline-block;
margin-left: 12px;
}
@@ -187,8 +192,9 @@ body > header p {
}
article {
background: #fff;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
line-height: 140%;
- margin-bottom: 20px;
+ margin-bottom: 10px;
padding: 20px;
}
article aside {
@@ -202,7 +208,6 @@ article aside img {
width: 48px;
}
article time {
- border-bottom: 1px dotted #999;
color: #999;
font-size: 10pt;
}
@@ -226,12 +231,13 @@ article .ir a {
article .ir img {
max-width: 100%;
}
-article > nav.l {
- display: inline-block;
+article > nav.l,
+.msg-cont > nav.l {
+ display: flex;
font-size: 10pt;
}
-article > nav.l a {
- border-bottom: 1px dotted #AAA;
+article > nav.l a,
+.msg-cont > nav.l a {
color: #888;
margin-right: 15px;
}
@@ -278,7 +284,7 @@ article .tags {
}
article .tags > a,
.msg-tags > a {
- border: 1px dotted #ccc;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
color: #888;
display: inline-block;
font-size: 10pt;
@@ -313,24 +319,12 @@ article .tags > a,
}
.msg-cont {
background: #FFF;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
line-height: 140%;
- margin-bottom: 20px;
+ margin-bottom: 12px;
padding: 20px;
width: 640px;
}
-.msg-menu {
- float: right;
- height: 16px;
- margin-left: 10px;
- margin-top: 2.4px;
- width: 16px;
-}
-.msg-menu > a {
- color: #666;
- display: block;
- height: 16px;
- width: 16px;
-}
.msg-ts,
article .t {
float: right;
@@ -434,24 +428,7 @@ q {
padding-left: 10px;
}
.toolbar {
- background: #E5E5DD;
border-top: 1px solid #CCC;
- width: 680px;
-}
-.toolbar ul,
-.toolbar a {
- padding: 5px;
-}
-.toolbar li {
- display: inline;
-}
-.toolbar 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 {
@@ -538,8 +515,15 @@ q {
#column hr {
margin: 10px 0;
}
-#column li {
- margin: 6px 0;
+#column li > a {
+ display: block;
+ height: 100%;
+ padding: 6px;
+}
+#column li > a:hover {
+ background-color: #f2f2ec;
+ box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
+ transition: background-color 0.2s ease-in;
}
#column .margtop {
margin-top: 15px;
@@ -564,6 +548,7 @@ q {
#ctitle img {
margin-right: 5px;
vertical-align: middle;
+ width: 48px;
}
#ustats li {
font-size: 10pt;
@@ -837,6 +822,9 @@ article.nsfw .ir img:hover {
min-width: 310px;
width: auto;
}
+ #wrapper {
+ margin-top: 50px;
+ }
body > header {
margin-bottom: 15px;
}
@@ -884,11 +872,13 @@ article.nsfw .ir img:hover {
article p {
margin: 10px 0 8px 0;
}
- article > nav.l {
- display: block;
- float: left;
- line-height: 15pt;
- width: 80%;
+ article > nav.l,
+ .msg-cont > nav.l {
+ flex-direction: column;
+ }
+ article > nav.l a,
+ .msg-cont > nav.l a {
+ padding: 6px;
}
article > nav.s {
display: block;