aboutsummaryrefslogtreecommitdiff
path: root/juick-www/src/main/static/style.css
diff options
context:
space:
mode:
Diffstat (limited to 'juick-www/src/main/static/style.css')
-rw-r--r--juick-www/src/main/static/style.css378
1 files changed, 295 insertions, 83 deletions
diff --git a/juick-www/src/main/static/style.css b/juick-www/src/main/static/style.css
index 080a179e..cd6861d1 100644
--- a/juick-www/src/main/static/style.css
+++ b/juick-www/src/main/static/style.css
@@ -22,6 +22,14 @@ textarea {
font-size: 12pt;
-webkit-font-smoothing: subpixel-antialiased;
}
+html {
+ box-sizing: border-box;
+}
+*,
+*:before,
+*:after {
+ box-sizing: inherit;
+}
h1,
h2 {
font-weight: normal;
@@ -60,6 +68,9 @@ pre::-moz-selection {
.u {
text-decoration: underline;
}
+.flex-spacer {
+ flex-grow: 1;
+}
/* #endregion */
@@ -70,20 +81,24 @@ html {
color: #222;
}
#wrapper {
- margin: 0 auto;
+ align-items: flex-start;
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-between;
+ margin: 55px auto 0 auto;
+ max-width: 100%;
width: 1000px;
- margin-top: 50px;
}
#column {
- float: left;
- margin-left: 10px;
+ margin: 12px 0 0 10px;
+ order: 0;
overflow: hidden;
- padding-top: 10px;
width: 240px;
}
#content {
- float: right;
margin: 12px 0 0 0;
+ max-width: 100%;
+ order: 1;
width: 728px;
}
body > header {
@@ -92,22 +107,32 @@ body > header {
position: fixed;
top: 0;
width: 100%;
- z-index: 10;
+ z-index: 9;
}
#header_wrapper {
margin: 0 auto;
+ max-width: 100%;
+ min-height: 55px;
width: 1000px;
- display: flex;
}
#footer {
- clear: both;
color: #999;
font-size: 10pt;
- margin: 40px;
- padding: 10px 0;
+ height: 32px;
+ margin: 20px auto;
+ max-width: 100%;
+ padding: 0 12px;
+ width: 1000px;
+}
+.announcement {
+ background: #f2f2ec;
+ margin-top: 12px;
+ padding: 6px;
+ text-align: center;
+ width: 100%;
}
-@media screen and (max-width: 850px) {
+@media screen and (max-width: 1000px) {
body {
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
@@ -116,24 +141,31 @@ body > header {
body,
#wrapper,
#topwrapper,
- #content,
#footer {
- float: none;
margin: 0 auto;
- min-width: 310px;
width: auto;
}
#wrapper {
- margin-top: 50px;
+ align-items: center;
+ flex-direction: column;
+ margin: 55px auto 0 auto;
}
body > header {
margin-bottom: 15px;
}
#column {
- float: none;
- margin: 0 10px;
- padding-top: 0;
- width: auto;
+ margin: 12px 0 0 0;
+ max-width: 100%;
+ padding: 0 8px;
+ width: 728px;
+ }
+ #column.bottom {
+ order: 3;
+ }
+ #content {
+ max-width: 100%;
+ padding: 0 8px;
+ width: 728px;
}
}
@@ -141,13 +173,18 @@ body > header {
/* #region header internals */
-body > header a {
+#header_wrapper {
+ align-items: center;
+ display: flex;
+ flex-flow: row wrap;
+}
+#header_wrapper a {
color: #069;
font-size: 13pt;
}
#logo {
height: 36px;
- margin: 7px 25px 0 20px;
+ margin: 0 25px 0 20px;
width: 110px;
}
#logo a {
@@ -161,48 +198,175 @@ body > header a {
white-space: nowrap;
width: 110px;
}
-#global {
- flex-grow: 1;
+#global > ul {
+ display: flex;
}
#global li {
- display: inline-block;
- margin: 14px 12px 0 0;
+ margin: 0 10px;
}
#search {
- margin: 12px 20px 12px 0;
+ margin: 0;
}
-#search input {
+#search input,
+#user-menu-dropdown input {
background: #FFF;
border: 1px solid #DDDDD5;
padding: 4px;
}
-body > header nav li:after {
- color: #AAA;
- content: "|";
- display: inline-block;
- margin-left: 12px;
+
+#menu-spacer-1,
+#menu-expander {
+ display: none;
}
-body > header nav li:last-child:after {
+#menu-expander {
+ align-self: center;
+ cursor: pointer;
+ padding: 10px;
+}
+#user-menu {
+ align-self: stretch;
+ display: flex;
+ min-width: 10px;
+ position: relative;
+}
+#user-menu.expanded {
+ outline: none;
+}
+#user-menu > img {
+ cursor: pointer;
+ display: block;
+ height: 36px;
+ margin: 10px;
+ user-select: none;
+}
+body:not([data-hash]) #user-menu > img {
+ display: none;
+}
+body:not([data-hash]) #user-menu > #menu-expander {
+ display: block;
+ order: 3;
+}
+#user-menu-dropdown {
+ background: #f2f2ec;
+ box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.28);
+ display: flex;
+ flex-flow: row wrap;
+ min-width: 160px;
+ position: absolute;
+ right: 0;
+ top: 100%;
+}
+#user-menu:not(.expanded) > #user-menu-dropdown {
+ display: none;
+}
+#user-menu-dropdown > ul {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ margin: -1px 0 1px 0;
+}
+#user-menu-dropdown > ul.right-column {
+ min-width: 9em;
+ order: 1;
+}
+#user-menu-dropdown > ul.left-column {
+ display: none;
+ flex-grow: 100;
+ min-width: 11em;
+ order: 0;
+}
+#user-menu-dropdown > ul.left-column input {
+ max-width: 12em;
+ width: 100%;
+}
+#user-menu-dropdown li {
+ padding: 6px;
+}
+#user-menu-dropdown li > a {
+ display: block;
+}
+#user-menu-dropdown li > a .icon {
+ margin-right: 0.25em;
+}
+#user-menu-dropdown li:first-child,
+#user-menu-dropdown li.next-section {
+ border-top: 1px solid #ccc;
+}
+#user-menu-dropdown .icon--ei-share-apple {
+ transform: rotate(90deg);
+}
+#menu-photos-2,
+#menu-popular-2 {
display: none;
}
-@media screen and (max-width: 850px) {
- body > header a {
- font-size: 12pt;
+@media screen and (min-width: 710px) {
+ #user-menu:hover > #user-menu-dropdown {
+ display: flex;
}
+}
+
+@media screen and (max-width: 850px) {
#logo {
- display: none;
+ margin: 0 10px 0 10px;
+ }
+}
+
+@media screen and (max-width: 710px) {
+ #user-menu {
+ flex-grow: 1;
+ }
+ #user-menu-dropdown {
+ border: 10px solid #f2f2ec;
+ overflow: hidden;
+ width: 100vw;
+ }
+ #user-menu-dropdown > ul.left-column {
+ display: flex;
}
- #global {
- margin-left: 10px;
+ #menu-expander,
+ #menu-spacer-1 {
+ display: block;
}
+ #search,
+ #menu-spacer-2 {
+ display: none;
+ }
+}
+
+@media screen and (max-width: 600px) {
#global li {
- margin-right: 10px;
+ margin: 0 10px;
}
- #search {
+ #menu-photos-1 {
+ display: none;
+ }
+ #menu-photos-2 {
display: inline-block;
- float: none;
- margin: 10px 10px;
+ }
+}
+
+@media screen and (max-width: 470px) {
+ #logo {
+ display: none;
+ }
+ #menu-popular-2 {
+ display: inline-block;
+ }
+ #user-menu > img {
+ margin: 6px;
+ }
+ #header_wrapper {
+ min-height: 48px;
+ }
+ #header_wrapper a {
+ font-size: 12pt;
+ }
+}
+
+@media screen and (max-width: 350px) {
+ #user-menu-dropdown > ul.left-column input {
+ max-width: 100%;
}
}
@@ -219,12 +383,12 @@ body > header nav li:last-child:after {
#column hr {
margin: 10px 0;
}
-#column li > a {
+#column > *:not(#ustats) li > a {
display: block;
height: 100%;
padding: 6px;
}
-#column li > a:hover {
+#column > *:not(#ustats) li > a:hover {
background-color: #f2f2ec;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
transition: background-color 0.2s ease-in;
@@ -247,12 +411,15 @@ body > header nav li:last-child:after {
width: 222px;
}
#ctitle {
+ align-items: center;
+ display: flex;
+ flex-direction: row;
font-size: 14pt;
}
#ctitle img {
margin-right: 5px;
+ max-width: 48px;
vertical-align: middle;
- width: 48px;
}
#ustats li {
font-size: 10pt;
@@ -269,6 +436,51 @@ body > header nav li:last-child:after {
width: 48px;
}
+#column-expander {
+ cursor: pointer;
+ display: none;
+ flex-grow: 1;
+ text-align: end;
+}
+
+@media screen and (min-width: 1001px) {
+ #column {
+ position: sticky;
+ top: 60px;
+ }
+}
+
+@media screen and (max-width: 1000px) {
+ #column-expander {
+ display: block;
+ }
+ #column:not(.expanded) > *:not(#ctitle) {
+ display: none;
+ }
+ ul.toolbar {
+ display: flex;
+ justify-content: space-around;
+ padding-top: 10px;
+ }
+ #ustats ul {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-around;
+ }
+ #ustats li {
+ margin: 3px 6px;
+ }
+}
+
+@media screen and (max-width: 470px) {
+ #column .inp {
+ width: 100%;
+ }
+ #ustats li {
+ width: 45%;
+ }
+}
+
/* #endregion */
/* #region main content */
@@ -276,7 +488,12 @@ body > header nav li:last-child:after {
#content > p,
#content > h1,
#content > h2 {
- margin: 1em 0;
+ margin: 10px 0;
+}
+#content > p:first-child,
+#content > h1:first-child,
+#content > h2:first-child {
+ margin-top: 0;
}
.page {
background: #f2f2ec;
@@ -354,7 +571,7 @@ article .tags > a,
.msg-avatar {
float: left;
height: 48px;
- margin-right: 10px;
+ margin: 0 10px 10px 0;
width: 48px;
}
.msg-avatar img {
@@ -366,10 +583,13 @@ article .tags > a,
background: #FFF;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.16);
line-height: 140%;
- margin-bottom: 12px;
+ margin: 0 0 12px 0;
padding: 20px;
width: 640px;
}
+li.msgthread .msg-cont {
+ width: 100%;
+}
.reply-new .msg-cont {
border-right: 5px solid #0C0;
}
@@ -463,40 +683,34 @@ article .tags > a,
line-height: 24px;
}
#content .title2 h2 {
- font-size: x-large;
+ font-size: 12pt;
margin: 0;
}
-@media screen and (max-width: 850px) {
- article {
- margin: 8px;
- overflow: auto;
+@media screen and (max-width: 1000px) {
+ li.msgthread .msg-cont .msg-avatar,
+ li.msgthread .msg-cont .msg-header > span {
+ display: none;
}
+}
+
+@media screen and (max-width: 750px) {
article p {
- margin: 10px 0 8px 0;
- }
- article > nav.l,
- .msg-cont > nav.l {
- flex-direction: column;
- }
- article > nav.l a,
- .msg-cont > nav.l a {
- padding: 6px;
+ margin: 5px 0 10px 0;
}
.msg,
.msg-cont {
- min-width: 280px;
+ min-width: 240px;
width: auto;
}
- .msg-cont {
- margin: 8px;
+ article,
+ .msg-cont,
+ .title2 {
+ margin: 0 0 8px 0;
}
.msg-media {
overflow: auto;
}
- .title2 h2 {
- font-size: large;
- }
.msg-comment {
flex-direction: column;
}
@@ -507,12 +721,12 @@ article .tags > a,
}
}
-@media screen and (max-width: 480px) {
- .msg-ts {
- float: none;
+@media screen and (max-width: 500px) {
+ article > nav.l > a > span,
+ .msg-cont > nav.l > a > span {
+ display: none;
}
.msg-tags {
- margin-top: 10px;
min-height: 1px;
}
.msg-txt {
@@ -521,12 +735,6 @@ article .tags > a,
.title2 {
font-size: 11pt;
}
- #content .title2 h2 {
- font-size: 11pt;
- }
- .title2-right {
- line-height: initial;
- }
}
/* #endregion */
@@ -556,7 +764,6 @@ q {
}
#newmessage textarea {
border: 1px solid #CCC;
- box-sizing: border-box;
margin: 0 0 5px 0;
margin-top: 20px;
max-height: 6em;
@@ -643,6 +850,12 @@ q {
width: 100px;
}
+@media screen and (max-width: 450px) {
+ .newpm {
+ margin: 20px 0 30px 0;
+ }
+}
+
/* #endregion */
/* #region popup dialog (lightbox) */
@@ -704,7 +917,7 @@ q {
.dialoglogin {
background: #EEEEE5;
padding: 25px;
- width: 300px;
+ width: 350px;
}
.dialog-opened {
overflow: hidden;
@@ -852,7 +1065,6 @@ fieldset {
margin: 30px -3px 15px -3px;
}
.embedContainer > * {
- box-sizing: border-box;
flex-grow: 1;
margin: 3px;
min-width: 49%;