新样式
This commit is contained in:
Liang Ding
parent
ece87e3ef1
commit
78ce9cf061
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,10 +16,8 @@
|
|||
|
||||
/* start side */
|
||||
.side {
|
||||
background-color: #FFF;
|
||||
width: 20%;
|
||||
position: absolute;
|
||||
border-right: 1px solid #9B9B9B;
|
||||
height: 100%;
|
||||
z-index: 8;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
|
|
@ -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}}">
|
||||
|
||||
|
|
@ -119,9 +120,7 @@
|
|||
</li>
|
||||
</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>
|
||||
|
|
@ -146,7 +146,7 @@
|
|||
<li class="export" onclick="tree.export(this);">{{.i18n.export}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 文件右键菜单 -->
|
||||
<div id="fileRMenu" class="frame">
|
||||
<ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue