Skip to content

Commit

Permalink
Redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@RayPS
RayPS committed Apr 1, 2016
1 parent bfeda2b commit 2ab39e4
Showing 1 changed file with 32 additions and 30 deletions.
62 changes: 32 additions & 30 deletions marketch.sketchplugin/Contents/Sketch/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,51 +26,53 @@
height:5px;
}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{
background:rgba(0,0,0,0);
background: #1D2331;
}
::-webkit-scrollbar-thumb{
background:rgba(0,0,0,.2);
border-radius:4px;
background-color: #5F6C88;
}
::-webkit-scrollbar-thumb:hover{
background:rgba(0,0,0,.3);
background-color: #8998B7;
}
input[type=text], textarea {outline:0;padding:3px;}
.more:after {transition:all .2s ease-in-out;content:'';display:inline-block;position:absolute;top:50%;right:10px;margin-top:-4px;width:6px;height:6px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg);transform-origin:50%;}
.more:after {transition:all .2s ease-in-out;content:'';display:inline-block;position:absolute;top:50%;right:10px;margin-top:-4px;width:6px;height:6px;border-top:1px solid black;border-right:1px solid black;transform:rotate(45deg);transform-origin:50%;}
.active .more:after {transform:rotate(135deg);}
.active.more:after {transform:rotate(135deg);}

.page {position:absolute;z-index:0;height:100%;width:100%;overflow:hidden;}
.mk-hide {display:none;}
.header {padding:0;height:30px;background:#4A90D2;box-shadow:0 0 6px rgba(0,0,0,.2)}
.hd-slice {float:right;margin-right:20px;position:relative;padding-right:75px;line-height:30px;color:#fff;overflow:hidden;}
.hd-slice input {position:absolute;z-index:1;top:3px;right:0;width:65px;height:24px;opacity:0;cursor:pointer;}
.hd-slice label {position:absolute;top:4px;right:0;background:red;width:65px;height:22px;border-radius:22px;background:rgba(0,0,0,.4);}
.header {padding:0;height:60px;background:#FFFFFF;box-shadow:0 0 6px rgba(0,0,0,.2);z-index: 1;position: absolute;width: 100%;}
.hd-slice {float:right;margin-right:20px;position:relative;padding-right:75px;line-height:60px;color:black;overflow:hidden;}
.hd-slice input {position:absolute;z-index:1;top:20px;right:0;width:65px;height:24px;opacity:0;cursor:pointer;}
.hd-slice label {position:absolute;top:20px;right:0;background:red;width:65px;height:22px;border-radius:22px;background:rgba(0,0,0,.4);}
.hd-slice label i {float:left;margin:2px 0 0 2px;width:45%;top:2px;left:2px;height:18px;border-radius:20px;color:#ddd;background:#ddd;}
.hd-slice input:checked + label i {margin-left:34px;}
.hd-slice label i:before, .hd-slice label i:after {position:absolute;top:0;width:50%;height:22px;line-height:22px;text-align:center;font-style:normal;}
.hd-slice label i:before {left:0;content:'ON';}
.hd-slice label i:after {right:0;content:'OFF';text-indent:-1px;}
.unit {position:relative;float:right;z-index:13;line-height:28px;font-size:12px;margin-right:30px;color:#fff;cursor:pointer;}
.unit {position:relative;float:right;z-index:13;line-height:60px;font-size:12px;margin-right:30px;color:black; cursor:pointer;}
.unit:after {width:5px;height:5px;margin-top:-3px;right:-10px;}
.dropdown {position:absolute;width:140px;right:15px;top:30px;z-index:13;display:none;box-shadow:0 0 10px rgba(0,0,0,.5);border-radius:3px;}
.dropdown {position:absolute;width:140px;right:15px;top:50px;z-index:13;display:none;box-shadow:0 5px 10px rgba(0,0,0,.05);border-radius:5px;border: 1px solid #D6D6D6;}
.dropdown.active {display:block}
.dropdown li {padding:5px;cursor:pointer;}
.dropdown li {padding:10px;cursor:pointer;background-color: white}
.dropdown li:first-child {border-top-left-radius:3px;border-top-right-radius:3px;}
.dropdown li:last-child {border-bottom-left-radius:3px;border-bottom-right-radius:3px;}
.dropdown li:nth-child(odd) {background:#fff;}
.dropdown li:nth-child(even) {background:#f2f3f7;}
.dropdown li:hover {background:#E1E8EF;}
.brand {z-index:13;font-family:"AndaleMono";line-height:30px;font-size:18px;font-weight:bold;display:inline-block;background:#3882BD;width:150px;text-align:center;}
.brand a {color:#fff;}
/*.dropdown li:nth-child(odd) {background:#fff;}*/
/*.dropdown li:nth-child(even) {background:#f2f3f7;}*/
.dropdown li:hover {background:#ECEEF3;}
.brand {z-index:13;font-family:"AndaleMono";line-height:60px;font-size:18px;font-weight:bold;display:inline-block;background:#4E96F7;width:150px;text-align:center;}
.brand a {color:#fff;font-family: Helvetica Neue; font-style: italic; font-kerning: initial; font-size: 20px; border-bottom: 2px solid rgba(255, 255, 255, 0.2); line-height: 1; padding-bottom: 2px;}
.brand a::before {content: ''; width: 2px; height: 6px; display: block; background: rgba(255, 255, 255, 0.2); position: absolute; top: 40px; left: 28px;}
.brand a::after {content: ''; width: 2px; height: 6px; display: block; background: rgba(255, 255, 255, 0.2); position: absolute; top: 40px; left: 120px;}
.header ul {margin:0;font-size:12px;float:right;}
.header ul a {display:inline-block;font-size:12px;vertical-align:middle;}
.page-wrap {position:absolute;top:30px;bottom:0;width:100%;height:auto;}
.artboard {position:absolute;top:0;left:150px;right:0;bottom:0;z-index:0;overflow:auto;}
.wrap {position:relative;margin:15px 0 0 15px;}
.page-wrap {position:absolute;top:60px;bottom:0;width:100%;height:auto;}
.artboard {position:absolute;top:0;left:150px;right:0;bottom:0;z-index:0;overflow:auto;background-color: #eceef3;}
.wrap {position:relative;margin:30px 0 0 30px;}
.wrap:after {content:'';display:block;clear:both;height:0;overflow:hidden;}
.wrap-layer {display:none;background-size:100% 100% !important;}
.wrap-layer-active {position:relative;z-index:0;display:block;border-radius:2px;box-shadow:0 0 0 1px #efefef;}
.wrap-layer-active {position:relative;z-index:0;display:block;border-radius:2px;box-shadow:0 0 0 1px #e1e8ef;}
.wrap-layer .art-layer {box-sizing:border-box;overflow:hidden;}
.wrap-layer .art-slice {display:none;box-sizing:border-box;}
.wrap-layer .art-layer[id]:hover {box-shadow:0 0 0 1px #004BD2;}
Expand Down Expand Up @@ -121,9 +123,9 @@
.sk-slice span {float:left;position:relative;z-index:0;width:35px;border-radius:2px;height:21px;line-height:21px;text-align:center;font-size:11px;color:#fff;background:rgba(0,0,0,.6);}
.sk-slice a img {position:absolute;z-index:1;width:100%;height:100%;opacity:0;}
/**/
.panel {position:fixed;top:30px;z-index:11;right:-200px;bottom:0;padding:10px 10px 10px 10px;width:180px;color:#fff;background:#2B3A48;-webkit-transition:right 0.1s ease-in-out;}
.panel {position:fixed;top:60px;z-index:0;right:-200px;bottom:0;padding:10px 10px 10px 10px;width:180px;color:#fff;background: #555c64;-webkit-transition:right 0.1s ease-in-out;}
.panel-active {right:0;}
.panel dl {margin-bottom:10px;line-height:23px;}
.panel dl {margin-bottom:20px;line-height:23px;}
.panel dt {color:#9CA3A7;overflow:hidden;}
.panel dt span {font-weight:700;}
.panel dt em {font-weight:100;}
Expand All @@ -140,10 +142,10 @@
/* 多行 */
.pa-block {}
.pa-block dt {position:relative;}
.pa-block dt em {position:absolute;visibility:hidden;top:0;right:0;padding:0 10px 0 0;color:#FE3B00;}
.pa-block dt em {position:absolute;visibility:hidden;top:0;right:0;padding:0 10px 0 0;color:#20E8B4;}
.copy-success dt em {visibility:visible;}
.pa-block dd {}
.pa-block textarea {padding:3px;border-radius:3px;width:174px;height:19px;border:0;color:#b3b8bd;background:#555C64;resize:none;overflow-y:scroll;font-size:11px;font-family:Consolas;}
.pa-block textarea {padding:10px;border-radius:3px;width:174px;height:19px;border:0;color:#b3b8bd;background:#434950;resize:none;overflow-y:scroll;font-size:11px;font-family:Consolas;}

/* 导出 */
.pa-export {overflow:hidden;}
Expand All @@ -153,21 +155,21 @@
.pa-export li label {float:left;padding-right:5px;width:auto;line-height:25px;}
.pa-export li select {width:50px;}
.export-btn {text-align:center;}
.panel-export, .panel-export:hover {display:inline-block;padding:0 15px;height:24px;line-height:24px;border-radius:3px;color:#b3b8bd;box-shadow:0 0 3px rgba(0,0,0,.4);background:#434950;}
.panel-export, .panel-export:hover {display: inline-block; height: 30px; line-height: 30px; border-radius: 3px; color: #FFFFFF; background: #4e96f7; width: 100%;}

.aside {position:absolute;top:0;left:0;width:150px;bottom:0;overflow:hidden;overflow-y:auto;color:#fff;background:#343D50;}
.aside h2 {position:relative;}
.aside h2 span {display:block;margin-right:20px;height:33px;font-weight:700;color:#B9C0C4;overflow:hidden;}
.aside h2 span {display:block;height:33px;font-weight:700;overflow:hidden;background:#1E2535;text-indent: 15px;}
.aside h2:after {border-color:#9CA3A7;}
.aside h2, .aside h3 {font-weight:normal;text-overflow:ellipsis;overflow:hidden;white-space: nowrap;}
.page-list {overflow:hidden;}
.page-list li {line-height:33px;text-indent:10px;font-size:12px;cursor:pointer;color:#9CA3A7;}
.page-list .page-active h2 {background:#3775A8;}
.page-list .page-active h2 span {color:#fff;}
.page-list li {line-height:33px;text-indent:10px;font-size:12px;cursor:pointer;color:#808BA2;}
.page-list .page-active h2 {background:#1E2535;}
.page-list .page-active h2 span {color:#fff}
.page-list .page-active h2:after {border-color:#fff;}
.page-list .icon {float:right;position:relative;right:10px;top:12px;}
.page-list li li {text-indent:15px;border-bottom:1px solid #2b3346;}
.page-list li li:hover, .page-list .art-active {background:#4e5c78;}
.page-list li li:hover, .page-list .art-active {border-left: 5px solid #4E96F7;text-indent: 10px;background-color: #414C63;color: #E1E8EF;}
.page-list .art-active .ab-list {display:block;}

/* 英文 */
Expand Down

0 comments on commit 2ab39e4

Please sign in to comment.