新样式

This commit is contained in:
Liang Ding 2014-11-29 21:49:57 +08:00
parent ece87e3ef1
commit 78ce9cf061
8 changed files with 288 additions and 82 deletions

View File

@ -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;

View File

@ -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%;
}

View File

@ -16,10 +16,8 @@
/* start side */
.side {
background-color: #FFF;
width: 20%;
position: absolute;
border-right: 1px solid #9B9B9B;
height: 100%;
z-index: 8;
}

137
static/css/themes/black.css Normal file
View File

@ -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;
}

View File

@ -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;
}

View File

@ -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;

View File

@ -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");

View File

@ -18,6 +18,7 @@
<link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/side.css?{{.conf.StaticResourceVersion}}">
<link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/start.css?{{.conf.StaticResourceVersion}}">
<link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/about.css?{{.conf.StaticResourceVersion}}">
<link rel="stylesheet" href="{{.conf.StaticServer}}/static/css/themes/default.css?{{.conf.StaticResourceVersion}}">
<link rel="stylesheet" href="{{.conf.StaticServer}}/static/user/{{.session.Username}}/style.css?{{.conf.StaticResourceVersion}}">
@ -120,8 +121,6 @@
</ul>
</div>
<input id="importFileupload" type="file" name="files[]" style="display: none;" onclick="tree.import();" multiple>
<div class="content">
<div class="side">
<span title="{{.i18n.min}}" class="font-ico ico-min"></span>
@ -133,6 +132,7 @@
<div class="tabs-panel">
<div data-index="filreTree">
<ul id="files" tabindex="-1" class="ztree"></ul>
<input id="importFileupload" type="file" name="files[]" style="display: none;" onclick="tree.import();" multiple>
<!-- 目录右键菜单 -->
<div id="dirRMenu" class="frame">
<ul>