The big patch #1 (background imgs, settings page, bug fixes, etc...)

content.json

@@ -93,7 +93,8 @@
  "signs_required": 1,
  "title": "ZeroMe",
  "translate": [
-  "js/all.js"
+  "js/all.js",
+  "css/all.css"
  ],
  "zeronet_version": "0.5.1"
 }

css/Activity.css

@@ -12,7 +12,13 @@
 	margin-left: -28px; border-radius: 15px; background-color: #f6f7f8
 }
 
-.activity { padding-left: 35px; padding-bottom: 19px; font-family: Roboto, Helvetica, Arial; font-size: 15px; line-height: 1.5em; color: #888 }
+.activity { padding-left: 35px; padding-bottom: 19px; font-family: Roboto, Helvetica, Arial; font-size: 15px; line-height: 1.5em; color: #777 }
+
+.light-bg {
+    background-color: #ffffff; opacity: 0.9; border: 1px solid #EEF0F1; padding: 15px;
+    border-radius: 4px;
+}
+.no-transparent .light-bg { opacity: 1; }
+
 .activity .body { top: -5px; position: relative; max-height: 67px; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; }
-.activity:last-child { background-color: #F6F7F8 }
-.activity.latest .circle { border-color: #666 }
+.activity.latest .circle { border-color: #666 }

css/Button.css

@@ -5,7 +5,27 @@
 .button:hover { background-color: #5d68ff; color: #F6F7F8; text-decoration: none; border-color: #5d68ff; transition: none }
 .button:hover .icon { background-color: #FFF; transition: none }
 .button:focus { transition: all 0.3s }
-.button:active { transform: translateY(1px); transition: all 0.3s, transform none; box-shadow: inset 0px 5px 7px -3px rgba(212, 212, 212, 0.41); outline: none; transition: none }
+.button:active { transform: translateY(1px); transition: all 0.3s, transform none; box-shadow: inset 0px 5px 7px -3px rgba(212, 212, 212, 0.41); outline: none; transition: none; filter:opacity(0.5) }
+
+.button.loading {
+	color: rgba(0,0,0,0) !important; background: url(../img/loading.gif) no-repeat center center !important; border-color: rgba(0,0,0,0) !important;
+	transition: all 0.5s ease-out; pointer-events: none; transition-delay: 0.5s
+}
+
+.button-tiny {
+	text-decoration: none !important;
+	margin-top: 4px; border: 1px solid hsla(236,100%,79%,1); color: #5d68ff; border-radius: 33px; display: inline-block;
+	font-size: 14px; font-weight: lighter; text-align: center; transition: all 0.3s; padding: 4px 4px; background-position: -200px center;
+	min-width: 100px;
+}
+/*.button-tiny:hover { background-color: #5d68ff; color: #F6F7F8; text-decoration: none; border-color: #5d68ff; transition: none }*/
+.button-tiny:hover { background-color: #2ecc71 !important; border-color: #2ecc71 !important; color: #FFF !important; }
+.button-tiny:hover .icon { filter: sepia(1) blur(0.5px) }
+.button-tiny:focus { transition: all 0.3s }
+.button-tiny:active { transform: translateY(1px); transition: all 0.3s, transform none; box-shadow: inset 0px 5px 7px -3px rgba(212, 212, 212, 0.41); outline: none; transition: none }
+
+.button-active { background-color: #2ecc71 !important; border-color: #2ecc71 !important; color: #FFF !important; }
+.button-active .icon { filter: sepia(1) }
 
 .button.loading {
 	color: rgba(0,0,0,0) !important; background: url(../img/loading.gif) no-repeat center center !important; border-color: rgba(0,0,0,0) !important;
@@ -17,14 +37,39 @@
 .button-follow:hover { background-color: rgba(255,255,255,0.3) !important; border-color: #2ecc71 !important; color: #2ecc71 }
 .button-follow-big { padding-left: 25px; float: none; border: 1px solid #2ecc71; color: #2ecc71; min-width: 100px; }
 .button-follow-big .icon-follow { margin-right: 10px; display: inline-block; transition: transform 0.3s ease-in-out }
-.button-follow-big:hover { border-color: #2ecc71 !important; color: #2ecc71; background-color: white; text-decoration: underline; }
+.button-follow-big:hover { border-color: #2ecc71 !important; color: #fff; background-color: #2ecc71 }
+.users .user.followed .button-follow-big:hover::after { content: "Unfollow" }
+.users .user.followed .button-follow-big::after { content: "Following" }
+
+.button-mute { float: none; border: 1px solid #2ecc71; color: #2ecc71;  }
+.button-mute .icon-mute { margin-right: 4px; display: inline-block; transition: transform 0.3s ease-in-out }
+.button-mute:hover { border-color: #2ecc71 !important; color: #2ecc71; background-color: white; text-decoration: underline; }
 
 /* Submit */
 .button-submit {
-	padding: 12px 30px; border-radius: 3px; margin-top: 11px; background-color: #5d68ff; /*box-shadow: 0px 1px 4px rgba(93, 104, 255, 0.41);*/
-	border: none; border-bottom: 2px solid #4952c7; font-weight: bold;  color: #ffffff; font-size: 12px; text-transform: uppercase; margin-left: 10px;
+	padding: 12px 20px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; border-radius: 3px; margin-top: 11px; background: rgb(211, 12, 55);
+	/* box-shadow: 0px 1px 4px rgba(93, 104, 255, 0.41); */
+	border: none; border-bottom: 2px solid rgba(0, 0, 0, 0.5); font-weight: bold; color: #ffffff; font-size: 12px; text-transform: uppercase;
+}
+.button-submit:hover { background: rgb(211, 12, 55); -webkit-box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.5) !important; -moz-box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.5) !important; -o-box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.5) !important; -ms-box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.5) !important; box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.5) !important; padding: 13px 20px; border: none }
+
+.button-submit.button-small:hover {
+    padding: 8px 20px;
+    border: none!important;
+}
+
+.button-submit.button-small[href="#Delete"]:hover::after {content: "Caution!";}
+.button-submit.button-small[href="#Delete"]::after {content: "Delete";}
+.button-submit.button-small[href="#Delete"]:hover {
+    background: red;
+    color: #fff;
+}
+
+.post-create .button-submit:not(.select-user) { background-size: 40px; background-position: 1px 1px; background-repeat: no-repeat; background-image: url(../img/post.svg); margin-left: 10px; text-indent: 20px }
+.post-create .button-submit:not(.select-user) {
+	background-size: 40px; background-position: 1px 1px; background-repeat: no-repeat;
+	background-image: url(../img/post.svg); margin-left: 10px; text-indent: 20px;
 }
-.button-submit:hover { color: white; background-color: #6d78ff }
 
 .button-small { padding: 7px 20px; margin-left: 10px }
 .button-outline { background-color: white; border: 1px solid #EEE; border-bottom: 2px solid #EEE; color: #AAA; }

css/Checkbox.css

@@ -0,0 +1,9 @@
+.checkbox-skin { background-color: #CCC; width: 35px; height: 18px; border-radius: 15px; transition: all 0.3s ease-in-out; display: inline-block; }
+.checkbox-skin:before {
+	content: ""; position: relative; width: 14px; background-color: white; height: 14px; display: block; border-radius: 100%; margin-top: 2px; margin-left: 2px;
+	transition: all 0.5s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
+.checkbox .title { display: inline; line-height: 30px; vertical-align: 4px; margin-left: 11px; }
+.checkbox.checked .checkbox-skin:before { margin-left: 19px; }
+.checkbox.checked .checkbox-skin { background-color: #2ECC71; }
+.checkbox.disabled .checkbox-skin { opacity: 0.5; }

css/Comment.css

@@ -1,7 +1,8 @@
 .comment-list {
-    background-color: #fafafa; padding-left: 80px; margin-left: -80px; padding-right: 20px; margin-right: -20px; margin-bottom: -17px; padding-bottom: 10px;
+    background-color: transparent; padding-left: 80px; margin-left: -80px; padding-right: 20px; margin-right: -20px; margin-bottom: -17px; padding-bottom: 10px;
     border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding-top: 19px; margin-top: 10px; border-top: 1px solid #E3E3E3; font-size: 85%;
 }
+.no-transparent .comment-list { background-color: #fafafa; }
 .comment-list .body { padding-top: 0px }
 .comment-list .body p { padding: 0px }
 
@@ -15,4 +16,4 @@
 .comment .icon-reply:hover { opacity: 1; transition: none }
 .comment .user .name { line-height: 16px; }
 
-.comment h1, .comment h2, .comment h3, .comment h4, .comment h5, .comment h6 { font-size: inherit; font-weight: bold }
+.comment h1, .comment h2, .comment h3, .comment h4, .comment h5, .comment h6 { font-size: inherit; font-weight: bold }

css/Head.css

@@ -1,9 +1,11 @@
-.head-container { background-color: white; box-shadow: 0px -7px 32px rgba(0,0,0,0.15); }
-
+.head-container { background-color: white; box-shadow: 0px -7px 32px rgba(0,0,0,0.15); max-height: 50px; }
+.sticky-header .head-container { width: 100%; position: fixed; z-index: 2; }
 .head .logo {
 	height: 50px; padding: 4px 6px; box-sizing: border-box; display: inline-block;
-	color: white; font-size: 30px; font-weight: lighter; text-decoration: none
+	color: white; font-size: 30px; font-weight: lighter; text-decoration: none; vertical-align: top;
+	text-align: center;
 }
+body:not(.logo-left) .head .logo { width: 42%; }
 
 .head .right { float: right; }
 .head .user { display: inline-block; vertical-align: top; margin-right: 20px; text-align: right; padding-top: 7px; }
@@ -13,6 +15,19 @@
 	display: inline-block; height: 50px; width: 50px; text-align: center; vertical-align: middle; transition: all 0.3s;
 	border-left: 1px solid #EEE; line-height: 50px; font-size: 20px; color: #AAA; font-weight: normal; text-decoration: none;
 }
-.head .settings:hover { color: #5d68ff; background-color: #FAFAFA; transition: none }
-.head .settings:active { background-color: #F5F5F5; transition: none }
-.head .menu { box-shadow: 0px 4px 8px rgba(0,0,0,0.1) }
+.head .settings:hover { color: #fff; background-color: rgb(211, 12, 55); transition: none }
+.head .settings:active { filter: opacity(0.5); transition: none }
+.head .menu { box-shadow: 0px 4px 8px rgba(0,0,0,0.1) }
+
+.head li { float: left; }
+.head ul { list-style-type:none; display: inline-block; margin:0; padding:0; overflow:hidden; }
+.head ul li, .head ul li a { display: block; text-align: center; color: #AAA; }
+.head ul li:hover, .head ul li a:hover {
+	background-color: rgb(211, 12, 55); transition: none; color: #fff; text-decoration: none;
+}
+.head ul li:active, .head ul li a:active {
+    filter: opacity(0.5);
+}
+.head ul li a { padding-top: 16px; width: 100px; height: 34px; }
+
+.sticky-header .headerfoot { width: 100%; height: 50px}

css/Menu.css

@@ -9,8 +9,8 @@
 .menu-item { display: block; text-decoration: none; color: black; padding: 6px 24px; transition: all 0.2s; border-bottom: none; font-weight: normal; padding-left: 32px; white-space: nowrap; }
 .menu-item-separator { margin-top: 3px; margin-bottom: 3px; border-top: 1px solid #eee }
 
-.menu-item:hover { background-color: #F6F6F6; transition: none; color: inherit; cursor: pointer; color: black; text-decoration: none }
-.menu-item:active, .menu-item:focus { background-color: #AF3BFF; color: white; transition: none }
+.menu-item:hover { background-color: rgb(211, 12, 55); transition: none; color: inherit; cursor: pointer; color: #fff; text-decoration: none }
+.menu-item:active, .menu-item:focus { filter: opacity(0.5); transition: none }
 .menu-item.selected:before {
 	content: "L"; display: inline-block; transform: rotateZ(45deg) scaleX(-1); line-height: 15px;
 	font-weight: bold; position: absolute; margin-left: -14px; font-size: 12px; margin-top: 2px;

css/Post.css

@@ -1,22 +1,39 @@
+
+.post-2-column { display:flex; margin-left: -700px; }
+.post-2-column .post-list { margin: 6px; }
+
+.center < .post-2-column { margin-left: 800px; }
+
 .post {
-	background-color: white; padding: 16px 20px; padding-left: 80px; border-radius: 4px; backface-visibility: hidden; transform-style: preserve-3d; transform: translateZ(0);
+	background-color: rgba(255,255,255,0.9); padding: 16px 20px; padding-left: 80px; border-radius: 4px; backface-visibility: hidden; transform-style: preserve-3d; transform: translateZ(0);
 	border: 1px solid #EEF0F1; border-bottom: 2px solid #ECEDEE; margin-bottom: 12px; transition: all 0.3s;
 }
+.no-transparent .post { background-color: white; }
 .post.selected { box-shadow: 0px 0px 40px rgba(0,0,0,0.1); }
 
-.post .user .settings { float: right; color: #AAA; opacity: 0; transition: all 0.3s; padding: 0px 10px; margin-right: -10px }
+.post .user .settings { float: right; color: #AAA; transition: all 0.3s; padding: 0px 10px; margin-right: -10px }
 .post .user .settings:hover { text-decoration: none; color: #333 }
 .post .user .settings:active { background-color: #F5F5F5; transition: none }
-.post .user:hover .settings { opacity: 1; transition: none }
+.post .user:hover .settings { transition: none }
 
 .post .user { padding-bottom: 8px; height: 21px; line-height: 20px; }
 .post .user .address, .post .added, .post .sep { font-size: 14px; color: #AAA;}
 .post .body { padding-top: 2px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; line-height: 1.5em; color: #333; word-break: break-word; overflow: hidden }
-.post .reply-name { font-size: 14px; font-family: Roboto, Helvetica, Arial; color: #000 }
+.post .reply-name { font-size: 14px; font-family: Roboto, Helvetica, Arial; color: #555; background: #EEE; padding: 4px; border-radius: 18px; }
 .post .actions { height: 30px; margin-left: -5px; }
-.post .actions .icon { margin-right: 1px }
+.post .actions .icon { margin-right: 1px; text-decoration: none }
 .post .actions .link { color: #AAA; font-size: 12px; height: 30px; vertical-align: middle; line-height: 30px; display: inline-block; padding-right: 10px }
-.post .actions .link.active { color: #5d68ff; }
+a.icon.link:hover {
+    color: rgb(211, 12, 55);
+}
+a.icon.link:active {
+    background: rgb(211, 12, 55);
+    color: #fff;
+    border-radius: 5px;
+}
+.post .actions .link.active { color: rgb(211, 12, 55); }
+.post .actions .link.active:hover { filter: opacity(0.5) }
+.post .actions .link.active:active { color: #fff }
 .post .actions .like { width: 35px; margin-right: 0px; transition: width 0.3s, margin-right 0.3s; white-space: nowrap; position: relative; }
 .post .actions .like.like-zero { width: 20px; margin-right: 5px; }
 
@@ -35,8 +52,10 @@
 
 .post-create-container { margin-bottom: 12px }
 .post-create { transition: all 0.6s }
+textarea { background: rgba(255, 255, 255, 0.5); }
+.no-transparent textarea { background: white; }
 .post-create .postfield {
-	font-family: Roboto; font-size: 16px; border: 1px solid white; padding: 15px 15px;
+	font-family: Roboto; font-size: 16px; border: 1px solid rgba(255, 255, 255, 0.3); padding: 15px 15px;
 	font-size: 16px; width: 100%; height: 52px; box-sizing: border-box; padding-right: 40px;
 }
 .post-create .user { margin-bottom: 0px; height: auto; padding-bottom: 0px; }
@@ -58,13 +77,14 @@
 .post-create:not(.editing) .image { opacity: 0; height: 0px; }
 
 .post-list-empty { text-align: center; padding-top: 100px }
-.post-list-type { text-align: right; }
+.post-list-type { text-align: right; background-color: rgba(255,255,255,0.9); padding: 0px 20px; padding-left: 80px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -o-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); border: 1px solid #EEF0F1; border-bottom: 2px solid #ECEDEE; margin-bottom: 12px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s }
+.no-transparent .post-list-type { background-color: white }
 .post-list-type a {
 	margin-right: 10px; padding-bottom: 5px; display: inline-block; border-bottom: 2px solid rgba(0,0,0,0);
-	color: #999; margin-bottom: 7px; margin-top: 10px; margin-left: 10px; transition: all 0.3s
+	color: #555; margin-bottom: 7px; margin-top: 10px; margin-left: 10px; transition: all 0.3s
 }
-.post-list-type .active { border-bottom: 2px solid #606aff; color: #606aff; }
-.post-list-type a:hover { border-bottom: 2px solid #606aff; color: #606aff; transition: none; text-decoration: none }
+.post-list-type .active { border-bottom: 2px solid rgb(211, 12, 55); color: rgb(211, 12, 55) }
+.post-list-type a:hover { border-bottom: 2px solid rgb(211, 12, 55); color: rgb(211, 12, 55); transition: none; text-decoration: none }
 
 .post .img { background-size: cover; text-align: center; position: relative; margin-bottom: 10px; }
 .post .img .show {
@@ -91,4 +111,4 @@
 .post .img .image-settings { color: white; padding: 2px 7px; text-decoration: none }
 .post .img .details:hover { background-color: rgba(0,0,0,0.7); transition: none }
 .post .img .details:active { background-color: rgba(0,0,0,0.5); transition: none }
-.post .img .oldversion { background-color: rgba(0, 0, 0, 0.5); padding: 10px 10px; top: 49%; position: relative; color: white; border-radius: 25px; }
+.post .img .oldversion { background-color: rgba(0, 0, 0, 0.5); padding: 10px 10px; top: 49%; position: relative; color: white; border-radius: 25px; }

css/Settings.css

@@ -0,0 +1,18 @@
+.checkbox.setting .desc { color: #888; margin-left: 30px; }
+.checkbox.setting .title { color: #555; }
+.red { color: #FF0000 !important; font-weight: bold !important; }
+
+.settings .sep {
+  font-weight: lighter;
+  color: #222;
+  font-size: 24px;
+}
+
+.settings .text.search {
+    width: 28%;
+    margin-bottom: 0px;
+    height: 20px;
+    margin: 6px;
+    margin-top: 8px;
+    margin-left: 25px;
+}

css/Uploadable.css

@@ -1,2 +1 @@
-.uploadable .icon-upload { opacity: 0; transition: all 0.3s }
-.uploadable .icon-upload:hover { opacity: 0.8; transition: all 0.1s }
+.uploadable .icon-upload { transition: all 0.3s }