diff --git a/static/css/base.css b/static/css/base.css
index 500fd3d..d0b1a3e 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -15,6 +15,20 @@
*/
/* start reset & function */
+::-webkit-scrollbar {
+ background: none;
+ width: 16px;
+ height: 16px;
+}
+
+::-webkit-scrollbar-thumb {
+ border: solid 0 rgba(0, 0, 0, 0);
+ border-right-width: 4px;
+ border-left-width: 4px;
+ -webkit-border-radius: 9px 4px;
+ -webkit-box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.2), inset 0 0 0 4px rgba(128, 128, 128, 0.2);
+}
+
body {
font-size: 13px;
margin: 0;
diff --git a/static/css/dialog.css b/static/css/dialog.css
index c812536..d1262d5 100644
--- a/static/css/dialog.css
+++ b/static/css/dialog.css
@@ -40,13 +40,14 @@
display: none;
-moz-user-select: none;
user-select: none;
+ box-shadow: 0 2px 10px 1px #000000;
}
.dialog-title {
float: left;
line-height: 22px;
margin-left: 3px;
- color: #000;
+ font-weight: bold;
}
.dialog-header-bg {
@@ -54,9 +55,6 @@
background-color: #CCD5E5;
cursor: move;
width: 100%;
- border: 1px solid #9B9B9B;
- border-top-color: #8E97A7;
- border-bottom-color: #8891A1;
}
.dialog-close-icon {
@@ -65,12 +63,6 @@
text-decoration: none;
}
-.dialog-main {
- border: 1px solid #9B9B9B;
- border-top-width: 0px;
- background-color: #F0F0F0;
-}
-
.dialog-main > div {
width: 100%;
}
diff --git a/static/css/side.css b/static/css/side.css
index b2e8e62..30c759d 100644
--- a/static/css/side.css
+++ b/static/css/side.css
@@ -16,10 +16,8 @@
/* start side */
.side {
- background-color: #FFF;
width: 20%;
position: absolute;
- border-right: 1px solid #9B9B9B;
height: 100%;
z-index: 8;
}
diff --git a/static/css/themes/black.css b/static/css/themes/black.css
new file mode 100644
index 0000000..53296ae
--- /dev/null
+++ b/static/css/themes/black.css
@@ -0,0 +1,137 @@
+/*
+ * Copyright (c) 2014, B3log
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.side {
+ background-color: #303130;
+ border-right: 1px solid #000;
+}
+
+.footer {
+ background-color: #181B1D;
+ border-top: 1px solid #000000;
+ color: rgba(255, 255, 255, 0.5);
+}
+
+.edit-panel {
+ background-color: #181818;
+ color: #EBEBEB;
+}
+
+.font-ico {
+ color: rgba(255, 255, 255, 0.5);
+ text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.57);
+}
+
+.font-ico:hover {
+ color: #e1e1e1;
+}
+
+.menu {
+ background: #252525;
+ box-shadow: 0 1px 0 0 #353535 inset;
+ border-bottom: 1px solid #000000;
+}
+
+.menu > ul > li > span {
+ color: #cecece;
+ text-shadow: #292a2b 0px 1px 0px;
+}
+
+.menu > ul > li > span:hover {
+ background-color: #333333;
+ box-shadow: 1px -1px 0 0 #000000, -1px 0 0 0 #000000, 0 1px 0 0 rgba(255, 255, 255, 0.15) inset;
+ color: #d4d4d4;
+}
+
+.menu > ul > li > span.selected {
+ background-color: #494949;
+ color: #d4d4d4;
+ box-shadow: 1px 0 0 0 #000000 inset, 1px 0 0 0 #000000, 0 1px 0 0 rgba(255, 255, 255, 0.15) inset;
+}
+
+.frame {
+ color: #f1f1f1;
+ border: 1px solid #00040a;
+ box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.65);
+ background-color: #494949;
+ text-shadow: 0px 1px 0px #2c2c2c;
+}
+
+.frame li:hover {
+ background-color: #3875D7;
+ color: #FFF;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.frame li.disabled:hover {
+ background-color: #494949;
+ color: #999;
+}
+
+.frame .hr {
+ font-size: 1px;
+ margin: 2px 3px;
+ border-top: 1px solid #353535;
+ border-bottom: 1px solid #565656;
+ height: 0;
+}
+
+.tabs {
+ box-shadow: 0 -1px 0 0 #000000 inset, 0 1px 0 0 rgba(255, 255, 255, 0.06) inset, 0 1px 0 rgba(255, 255, 255, 0.06);
+ background-color: #252525;
+}
+
+.tabs > div {
+ background-color: #444444;
+ color: #adadad;
+ text-shadow: 0 1px rgba(0, 0, 0, 0.4);
+ border-right: 1px solid #181B1D;
+}
+
+.tabs > div:hover {
+ background-color: #363636;
+}
+
+.tabs > div.current {
+ color: rgba(255, 255, 255, 0.85);
+ text-shadow: 0 1px rgba(0, 0, 0, 0.4);
+ background-color: #303030;
+}
+
+.dialog-header-bg {
+ border-bottom: 1px solid #000000;
+ box-shadow: 0 1px #5b5c5e inset;
+ background-image: -webkit-linear-gradient(top, #404143 0%, #333537 52%, #252729 52%, #252729 100%);
+}
+
+.dialog-title {
+ font-weight: bold;
+ color: #ffffff;
+}
+
+.dialog-main {
+ background-color: #DEDEDF;
+}
+
+.dialog-footer {
+ box-shadow: 0 1px 0 0 #353535 inset;
+ border-top: 1px solid #000000;
+ background-color: #2B2B2B;
+}
+
+.ztree li a {
+ color: #e1e1e1;
+}
\ No newline at end of file
diff --git a/static/css/themes/default.css b/static/css/themes/default.css
new file mode 100644
index 0000000..12f1792
--- /dev/null
+++ b/static/css/themes/default.css
@@ -0,0 +1,119 @@
+/*
+ * Copyright (c) 2014, B3log
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+.side {
+ background-color: #FFF;
+ border-right: 1px solid #9B9B9B;
+}
+
+.footer {
+ border-top: 1px solid #919191;
+ background-color: #F0F0F0;
+ color: #919191;
+}
+
+.edit-panel {
+ background-color: #FFF;
+}
+
+.font-ico {
+ color: #666;
+}
+
+.font-ico:hover {
+ color: #333;
+}
+
+.menu {
+ background: #F0F0F0;
+ box-shadow: 0 1px 0 0 #E7E7E7 inset;
+ border-bottom: 1px solid #919191;
+}
+
+.menu > ul > li > span {
+ color: #000;
+ text-shadow: 0px 1px 0px #efefef;
+}
+
+.menu > ul > li > span:hover {
+ background-color: #cfcfcf;
+ box-shadow: 1px -1px 0 0 #b6b6b6, -1px 0 0 0 #b6b6b6, 0 1px 0 0 rgba(255, 255, 255, 0.15) inset;
+ color: #393939;
+}
+
+.menu > ul > li > span.selected {
+ background-color: #3875D7;
+ color: #FFF;
+ box-shadow: 1px 0 0 0 #b6b6b6 inset, 1px 0 0 0 #b6b6b6, 0 1px 0 0 rgba(255, 255, 255, 0.15) inset;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.frame {
+ border: 1px solid #5F5F5F;
+ box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+ background-color: #F8F8F8;
+}
+
+.frame li:hover {
+ background-color: #3875D7;
+ color: #FFF;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.frame li.disabled:hover {
+ background-color: #F8F8F8;
+ color: #999;
+}
+
+.frame .hr {
+ font-size: 1px;
+ margin: 2px 3px;
+ border-top: 1px solid #e6e6e6;
+ border-bottom: 1px solid #F8F8F8;
+ height: 0;
+}
+
+.tabs {
+ box-shadow: 0 -1px 0 0 rgba(6, 6, 6, 0.1) inset, 0 1px 0 0 rgba(255, 255, 255, 0.44999999999999996) inset, 0 1px 0 transparent;
+ background-color: #E6E6E6;
+}
+
+.tabs > div {
+ background-color: #DDD;
+ color: #8B8B8B;
+ border-right: 1px solid #ADADAD;
+}
+
+.tabs > div:hover {
+ background-color: #E4E4E4;
+}
+
+.tabs > div.current {
+ background-color: #9F9F9F;
+ color: #FFF;
+ text-shadow: 0 1px rgba(0, 0, 0, 0.4);
+}
+
+.dialog-header-bg {
+ border-bottom: 1px solid #8891A1;
+}
+
+.dialog-title {
+ color: #000;
+}
+
+.dialog-main {
+ background-color: #F0F0F0;
+}
\ No newline at end of file
diff --git a/static/css/wide.css b/static/css/wide.css
index 22e4f1c..9c134b0 100644
--- a/static/css/wide.css
+++ b/static/css/wide.css
@@ -31,14 +31,9 @@
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
- color: #666;
cursor: pointer;
font-size: 13px;
- line-height: 18px;
-}
-
-.font-ico:hover {
- color: #333;
+ line-height: 20px;
}
.ico-play:before {
@@ -83,12 +78,9 @@
/* start frame */
.frame {
position: absolute;
- border: 1px solid #5F5F5F;
- background-color: #F8F8F8;
width: 320px;
z-index: 21;
display: none;
- box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.frame li {
@@ -102,18 +94,6 @@
text-shadow: 0 0 0 !important;
}
-.frame li:hover,
-.menu > ul > li > span.selected {
- background-color: #3875D7;
- color: #FFF;
- text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.frame li.disabled:hover {
- background-color: #F8F8F8;
- color: #999;
-}
-
.frame a {
color: #000;
text-decoration: none;
@@ -123,58 +103,39 @@
.frame a:hover {
color: #FFF;
}
-
-.frame .hr {
- background-color: #bdbdbd;
- height: 1px;
- margin: 0 1px;
-}
/* end frame */
/* start tabs */
.tabs {
- height: 20px;
+ height: 21px;
overflow: hidden;
width: 100%;
- background-color: #E6E6E6;
- border-top: 1px solid #A4A4A4;
- border-bottom: 1px solid #9D9D9D;
}
.tabs > div {
float: left;
- line-height: 18px;
- height: 18px;
+ line-height: 20px;
+ height: 20px;
padding: 0 5px;
cursor: pointer;
- background-color: #DDD;
- color: #8B8B8B;
- border-right: 1px solid #ADADAD;
+
}
-.tabs > div.current {
- background-color: #9F9F9F;
- color: #FFF;
+.tabs > div > span.changed {
+ font-weight: bold;
}
/* end tabs */
/* start menu */
-.menu {
- background-color: #F0F0F0;
- height: 24px;
-}
-
.menu > ul > li {
float: left;
}
.menu > ul > li > span {
- color: #000;
font-size: 12px;
- line-height: 24px;
- padding: 5px;
- text-decoration: none;
+ line-height: 21px;
cursor: pointer;
+ padding: 4px 7px;
}
/* end menu */
@@ -188,21 +149,6 @@
overflow: hidden;
}
-.edit-panel .tabs > div {
- background-color: #d1d1d1;
- border-right-color: #9b9b9b;
- color: #333;
- cursor: auto;
-}
-
-.edit-panel .tabs > div.current {
- background-color: #F7F7F7;
-}
-
-.edit-panel .tabs > div > span.changed {
- font-weight: bold;
-}
-
.toolbars {
position: absolute;
right: 5px;
@@ -346,8 +292,8 @@
/* start footer */
.footer {
- border-top: 1px solid #919191;
- background-color: #F0F0F0;
+ box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
+ text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.57);
padding-left: 5px;
height: 19px;
line-height: 18px;
diff --git a/static/js/wide.js b/static/js/wide.js
index 01dc192..aa0aa65 100644
--- a/static/js/wide.js
+++ b/static/js/wide.js
@@ -366,7 +366,7 @@ var wide = {
});
},
_initLayout: function () {
- var mainH = $(window).height() - $(".menu").height() - $(".footer").height(),
+ var mainH = $(window).height() - $(".menu").height() - $(".footer").height() - 2,
bottomH = Math.floor(mainH * 0.3);
// 减小初始化界面抖动
$(".content").height(mainH).css("position", "relative");
diff --git a/views/index.html b/views/index.html
index 732d0cb..ec72210 100644
--- a/views/index.html
+++ b/views/index.html
@@ -18,6 +18,7 @@
+
@@ -119,9 +120,7 @@
-
-
-
+