This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

更新基础颜色,增加青色与紫色

old
宇天 2017-09-28 22:39:55 +08:00
parent 0f772ee913
commit 6ab1adb31c
9 changed files with 56 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/basic-elem.css
View File

File diff suppressed because one or more lines are too long

24
css/basic-elem.scss
View File

@ -17,12 +17,18 @@
&.radius-3 {border-radius:3px;}
&.radius-5 {border-radius:5px;}
&.teal {border:0;background:nth($ct, 1);color:#fff;}
&.teal:hover {background:nth($ct, 2);}
&.teal:active {background:nth($ct, 3);}
&.green {border:0;background:nth($cg, 1);color:#fff;}
&.green:hover {background:nth($cg, 2);}
&.green:active {background:nth($cg, 3);}
&.blue {border:0;background:nth($cb, 1);color:#fff;}
&.blue:hover {background:nth($cb, 2);}
&.blue:active {background:nth($cb, 3);}
&.purple {border:0;background:nth($cpp, 1);color:#fff;}
&.purple:hover {background:nth($cpp, 2);}
&.purple:active {background:nth($cpp, 3);}
&.red {border:0;background:nth($cr, 1);color:#fff;}
&.red:hover {background:nth($cr, 2);}
&.red:active {background:nth($cr, 3);}
@ -81,7 +87,7 @@
&.radius-3 {border-radius:3px;}
&.radius-5 {border-radius:5px;}
&:focus,&:hover {border-color:nth($cg, 1);color:nth($cg, 1);}
&:focus,&:hover {border-color:nth($ct, 1);}
&.alert {border-color:nth($cr, 1);color:nth($cr, 1);
input {color:nth($cr, 1);}
}
@ -109,7 +115,7 @@
&.radius-3 {border-radius:3px;}
&.radius-5 {border-radius:5px;}
&:focus {border-color:nth($cg, 1);}
&:focus {border-color:nth($ct, 1);}
&.alert {border-color:nth($cr, 1);color:nth($cr, 1)}
&.disabled {border-color:transparent;background:nth($cp, 1);color:nth($cp, 3)}
}
@ -133,9 +139,15 @@
&.green >input:checked {background:nth($cg, 2);
&::after {background:nth($cg, 3);}
}
&.teal >input:checked {background:nth($cg, 2);
&::after {background:nth($ct, 3);}
}
&.blue >input:checked {background:nth($cb, 2);
&::after {background:nth($cb, 3);}
}
&.purple >input:checked {background:nth($cb, 2);
&::after {background:nth($cpp, 3);}
}
&.red >input:checked {background:nth($cr, 2);
&::after {background:nth($cr, 3);}
}
@ -154,6 +166,8 @@
&:disabled {border-color:nth($cp, 3);color:nth($cp, 3);}
}
&.green >input {color:nth($cg, 1)!important;border-color:nth($cg, 1)}
&.teal >input {color:nth($ct, 1)!important;border-color:nth($ct, 1)}
&.purple >input {color:nth($cpp, 1)!important;border-color:nth($cpp, 1)}
&.blue >input {color:nth($cb, 1)!important;border-color:nth($cb, 1)}
&.red >input {color:nth($cr, 1)!important;border-color:nth($cr, 1)}
&.orange >input {color:nth($co, 1)!important;border-color:nth($co, 1)}
@ -169,6 +183,8 @@
}
&.green {border-color:nth($cg, 1);background:nth($cg, 1);color:#fff;}
&.teal {border-color:nth($ct, 1);background:nth($ct, 1);color:#fff;}
&.purple {border-color:nth($cpp, 1);background:nth($cpp, 1);color:#fff;}
&.blue {border-color:nth($cb, 1);background:nth($cb, 1);color:#fff;}
&.red {border-color:nth($cr, 1);background:nth($cr, 1);color:#fff;}
&.orange {border-color:nth($co, 1);background:nth($co, 1);color:#fff;}
@ -190,7 +206,7 @@
p {margin:0!important;}
&::before {position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";}
}
.do-ui-mark {border-color:nth($cg, 2);color:nth($cg, 3);background:#edfbf8;
.do-ui-mark {border-color:nth($ct, 2);color:nth($ct, 3);background:#edfbf8;
&::before {color:nth($cg, 3);content:"\e657";}
&::before {color:nth($ct, 3);content:"\e657";}
}

12
css/var.scss
View File

@ -1,9 +1,11 @@
$cg: #1abc9c #48c9b0 #16a085;
$cb: #3498db #5dade2 #2c81ba;
$cr: #e74c3c #ec7063 #c54133;
$co: #f39c12 #fbbb56 #e67e22;
$ct: #1abc9c #48c9b0 #16a085;
$cg: #4caf50 #81c784 #388e3c;
$cpp: #651fff #7c4dff #6200ea;
$cb: #2196f3 #64b5f6 #1976d2;
$cr: #ff5722 #ff7043 #e64a19;
$co: #ff9800 #ffa726 #f57c00;
$cp: #e7e8eb #ecf0f1 #bdc3c7;
$cgr: #34495e #5d6d7e #2c3e50;
$cgr: #546e7a #607d8b #37474f;
@mixin ts($c: all, $t: .1s, $m: ease-in-out){
transition:$c $t $m;

2
js/lib/datepicker/style.css
View File

@ -1 +1 @@
.do-datepicker{position:relative;z-index:65534;width:100%;height:100%}.do-datepicker a{text-decoration:none}.do-datepicker .date-input{display:block;width:100%;height:100%;padding:0 5px;line-height:18px;border:1px solid #e7e8eb;transition:all .1s ease-in-out}.do-datepicker .date-input:focus{border-color:#1abc9c}.do-datepicker .calendar-box{position:absolute;left:0;top:100%;width:267px;height:auto;min-height:60px;padding:10px;line-height:35px;border:1px solid #ddd;background:#fff;font-size:14px;color:#34495e;text-align:center;box-shadow:0 1px 5px rgba(0,0,0,0.1)}.do-datepicker .calendar-box dt.title{width:100%;height:35px;background:#e7e8eb}.do-datepicker .calendar-box dd.contrl{position:relative;width:90%;height:35px;margin:0 5%}.do-datepicker .calendar-box dd.contrl a{position:absolute;left:0;top:0;width:35px;height:35px;color:#34495e;font-weight:bold}.do-datepicker .calendar-box dd.contrl a:hover{color:#1abc9c}.do-datepicker .calendar-box dd.contrl a.prev-month{left:35px}.do-datepicker .calendar-box dd.contrl a.next-month{left:auto;right:35px}.do-datepicker .calendar-box dd.contrl a.next-year{left:auto;right:0}.do-datepicker .calendar-box dd.calendar{width:100%;height:auto}.do-datepicker .calendar-box dd.calendar .week{width:100%;height:35px;margin-bottom:5px;border-bottom:1px solid #eee}.do-datepicker .calendar-box dd.calendar span.td{float:left;width:35px}.do-datepicker .calendar-box dd.calendar .list span.td{height:30px;line-height:30px;cursor:pointer;transition:all .1s ease-in-out}.do-datepicker .calendar-box dd.calendar .list span.td:hover{background:#e7e8eb}.do-datepicker .calendar-box dd.calendar .list span.td.weeken{color:#e74c3c}.do-datepicker .calendar-box dd.calendar .list span.td.selected{background:#48c9b0;color:#fff}.do-datepicker .calendar-box dd.calendar .list span.td.disabled{color:#bdc3c7;cursor:default}.do-datepicker .calendar-box dd.calendar .list span.td.disabled:hover{background:none}.do-datepicker .calendar-box dd.time{position:relative;width:100%;height:41px;padding:5px 0;margin-top:5px;line-height:30px;border-top:1px solid #eee}.do-datepicker .calendar-box dd.time label{float:left;width:60px;height:30px}.do-datepicker .calendar-box dd.time label input{width:30px;height:30px;border:1px solid #e7e8eb;text-align:center}.do-datepicker .calendar-box dd.time .now{float:right;width:50px;height:30px;border-radius:3px;background:#1abc9c;color:#fff;text-align:center}.do-datepicker .calendar-box dd.time .now:hover{background:#48c9b0}.do-datepicker .calendar-box dd.time .now:active{background:#16a085}.do-datepicker .calendar-box dd.tips{position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,0.7);color:#fff;font-size:12px;text-align:center}
.do-datepicker{position:relative;z-index:65534;width:100%;height:100%}.do-datepicker a{text-decoration:none}.do-datepicker .date-input{display:block;width:100%;height:100%;padding:0 5px;line-height:18px;border:1px solid #e7e8eb;transition:all .1s ease-in-out}.do-datepicker .date-input:focus{border-color:#1abc9c}.do-datepicker .calendar-box{position:absolute;left:0;top:100%;width:267px;height:auto;min-height:60px;padding:10px;line-height:35px;border:1px solid #ddd;background:#fff;font-size:14px;color:#546e7a;text-align:center;box-shadow:0 1px 5px rgba(0,0,0,0.1)}.do-datepicker .calendar-box dt.title{width:100%;height:35px;background:#e7e8eb}.do-datepicker .calendar-box dd.contrl{position:relative;width:90%;height:35px;margin:0 5%}.do-datepicker .calendar-box dd.contrl a{position:absolute;left:0;top:0;width:35px;height:35px;color:#546e7a;font-weight:bold}.do-datepicker .calendar-box dd.contrl a:hover{color:#1abc9c}.do-datepicker .calendar-box dd.contrl a.prev-month{left:35px}.do-datepicker .calendar-box dd.contrl a.next-month{left:auto;right:35px}.do-datepicker .calendar-box dd.contrl a.next-year{left:auto;right:0}.do-datepicker .calendar-box dd.calendar{width:100%;height:auto}.do-datepicker .calendar-box dd.calendar .week{width:100%;height:35px;margin-bottom:5px;border-bottom:1px solid #eee}.do-datepicker .calendar-box dd.calendar span.td{float:left;width:35px}.do-datepicker .calendar-box dd.calendar .list span.td{height:30px;line-height:30px;cursor:pointer;transition:all .1s ease-in-out}.do-datepicker .calendar-box dd.calendar .list span.td:hover{background:#e7e8eb}.do-datepicker .calendar-box dd.calendar .list span.td.weeken{color:#ff5722}.do-datepicker .calendar-box dd.calendar .list span.td.selected{background:#48c9b0;color:#fff}.do-datepicker .calendar-box dd.calendar .list span.td.disabled{color:#bdc3c7;cursor:default}.do-datepicker .calendar-box dd.calendar .list span.td.disabled:hover{background:none}.do-datepicker .calendar-box dd.time{position:relative;width:100%;height:41px;padding:5px 0;margin-top:5px;line-height:30px;border-top:1px solid #eee}.do-datepicker .calendar-box dd.time label{float:left;width:60px;height:30px}.do-datepicker .calendar-box dd.time label input{width:30px;height:30px;border:1px solid #e7e8eb;text-align:center}.do-datepicker .calendar-box dd.time .now{float:right;width:50px;height:30px;border-radius:3px;background:#1abc9c;color:#fff;text-align:center}.do-datepicker .calendar-box dd.time .now:hover{background:#48c9b0}.do-datepicker .calendar-box dd.time .now:active{background:#16a085}.do-datepicker .calendar-box dd.tips{position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,0.7);color:#fff;font-size:12px;text-align:center}

12
js/lib/datepicker/style.scss
View File

@ -11,7 +11,7 @@
a {text-decoration:none;}
.date-input {display:block;width:100%;height:100%;padding:0 5px;line-height:18px;border:1px solid nth($cp, 1);@include ts();
&:focus {border-color:nth($cg, 1)}
&:focus {border-color:nth($ct, 1)}
}
.calendar-box {position:absolute;left:0;top:100%;width:267px;height:auto;min-height:60px;padding:10px;line-height:35px;border:1px solid #ddd;background:#fff;font-size:14px;color:nth($cgr, 1);text-align:center;box-shadow:0 1px 5px rgba(0,0,0,.1);
@ -20,7 +20,7 @@
dd.contrl {position:relative;width:90%;height:35px;margin:0 5%;
a {position:absolute;left:0;top:0;width:35px;height:35px;color:nth($cgr, 1);font-weight:bold;}
a:hover {color:nth($cg, 1)}
a:hover {color:nth($ct, 1)}
a.prev-month {left:35px;}
a.next-month {left:auto;right:35px;}
a.next-year {left:auto;right:0;}
@ -34,7 +34,7 @@
&:hover {background:nth($cp, 1);}
&.weeken {color:nth($cr, 1)}
&.selected {background:nth($cg, 2);color:#fff}
&.selected {background:nth($ct, 2);color:#fff}
&.disabled {color:nth($cp, 3);cursor:default;}
&.disabled:hover {background:none;}
}
@ -44,10 +44,10 @@
label {float:left;width:60px;height:30px;
input {width:30px;height:30px;border:1px solid nth($cp, 1);text-align:center;}
}
.now {float:right;width:50px;height:30px;border-radius:3px;background:nth($cg, 1);color:#fff;text-align:center;
.now {float:right;width:50px;height:30px;border-radius:3px;background:nth($ct, 1);color:#fff;text-align:center;
&:hover {background:nth($cg, 2);}
&:active {background:nth($cg, 3);}
&:hover {background:nth($ct, 2);}
&:active {background:nth($ct, 3);}
}
}
dd.tips {position:absolute;z-index:65535;left:25%;top:40%;width:50%;height:30px;line-height:30px;background:rgba(0,0,0,.7);color:#fff;font-size:12px;text-align:center;}

2
js/lib/layer/skin/def.css
View File

File diff suppressed because one or more lines are too long

16
js/lib/layer/skin/def.scss
View File

@ -17,15 +17,15 @@
&.skin-def {color:#666;font-size:14px;box-shadow:0 0 10px rgba(0,0,0,.3);
.icon-0::before {content:"\e62e";color:nth($cr, 1);} // question
.icon-1::before {content:"\e610";color:nth($cg, 1);} // get
.icon-1::before {content:"\e610";color:nth($ct, 1);} // get
.icon-2::before {content:"\e6f8";color:nth($cb, 1);} // happy
.icon-3::before {content:"\e6fd";color:nth($co, 1);} // sad
.icon-4::before {content:"\e6f6";color:nth($co, 1);} // warn
.icon-5::before {content:"\e630";color:nth($cg, 1);} // face
.icon-5::before {content:"\e630";color:nth($ct, 1);} // face
.icon-6::before {content:"\e636";color:nth($cgr, 1);} // time
.icon-7::before {content:"\e623";color:nth($co, 1);} // star
.icon-8::before {content:"\e604";color:nth($cr, 1);} // mute
.icon-9::before {content:"\e605";color:nth($cg, 1);} // unmute
.icon-9::before {content:"\e605";color:nth($ct, 1);} // unmute
/* 弹层标题栏 */
@ -34,7 +34,7 @@
.action-min,
.action-close {position:absolute;display:block;top:12px;width:20px;height:20px;line-height:20px;font-size:14px;text-align:center;cursor:pointer;color:nth($cgr, 2);
&:hover {color:nth($cg, 1);}
&:hover {color:nth($ct, 1);}
}
.action-min {right:40px;
&::before {content:"\e634"}
@ -52,7 +52,7 @@
.prompt-value {width: 230px;height: 30px;padding: 0 8px;border: 1px solid #ddd;border-radius: 3px;
&.alert {border-color:nth($cr, 1)}
&:focus {border-color:nth($cg, 1)}
&:focus {border-color:nth($ct, 1)}
}
.msg-box {line-height:30px;}
}
@ -124,7 +124,7 @@
.dot-box{width:100%;height:100%;
i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:nth($cg, 3);-webkit-animation: bounce 1s infinite ease-in-out;-moz-animation: bounce 1s infinite ease-in-out;animation: bounce 1s infinite ease-in-out;-webkit-transform:scaleY(.6);-moz-transform:scaleY(.6);transform:scaleY(.6);
i {float:left;display:block;width:10px;height:100%;margin:0 5px;background:nth($ct, 3);-webkit-animation: bounce 1s infinite ease-in-out;-moz-animation: bounce 1s infinite ease-in-out;animation: bounce 1s infinite ease-in-out;-webkit-transform:scaleY(.6);-moz-transform:scaleY(.6);transform:scaleY(.6);
&:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;}
&:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
@ -141,7 +141,7 @@
i {position:absolute;display:block;width:60px;height:60px;-webkit-animation: circle2 2s infinite ease-in-out;-moz-animation: circle2 2s infinite ease-in-out;animation: circle2 2s infinite ease-in-out;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);transform: rotate(45deg);
&::before {display:block;width:8px;height:8px;background:nth($cg, 3);border-radius:50%;content:""}
&::before {display:block;width:8px;height:8px;background:nth($ct, 3);border-radius:50%;content:""}
&:nth-child(2) {-webkit-animation-delay:.1s;-moz-animation-delay:.1s;animation-delay:.1s;}
&:nth-child(3) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}
@ -156,7 +156,7 @@
.dot-box{width:90%;height:90%;margin:5%;
i {float:left;display:block;width:30px;height:30px;background:nth($cg, 3);-webkit-animation: grid 1.5s infinite linear;-moz-animation: grid 1.5s infinite linear;animation: grid 1.5s infinite linear;
i {float:left;display:block;width:30px;height:30px;background:nth($ct, 3);-webkit-animation: grid 1.5s infinite linear;-moz-animation: grid 1.5s infinite linear;animation: grid 1.5s infinite linear;
&:nth-child(4),
&:nth-child(8) {-webkit-animation-delay:.2s;-moz-animation-delay:.2s;animation-delay:.2s;}

2
js/lib/pages/main.css
View File

@ -1 +1 @@
.do-pages{height:auto;text-align:center;font-size:13px}.do-pages a{display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color:#34495e;text-decoration:none;cursor:pointer}.do-pages a.curr,.do-pages a.disabled{cursor:default}.do-pages.skin-1{width:100%}.do-pages.skin-1 a.normal,.do-pages.skin-1 a.disabled,.do-pages.skin-1 a.curr{padding:0 10px;margin:0 3px}.do-pages.skin-1 a.curr{font-weight:bold;font-size:15px}.do-pages.skin-1 a.disabled{min-width:0;padding:0}.do-pages.skin-1 .input-box,.do-pages.skin-1 .input-box span,.do-pages.skin-1 .input-box input{display:inline-block}.do-pages.skin-1 .input-box input{width:25px;height:20px;padding:0 3px;background:#fff;border:1px solid #ddd}.do-pages.skin-1 .input-box a.normal{height:30px;line-height:30px}.do-pages.skin-2{float:right;width:auto}.do-pages.skin-2 a.normal,.do-pages.skin-2 a.disabled,.do-pages.skin-2 a.curr{float:left;margin:0;padding:0 5px;color:#fff}.do-pages.skin-2 a.disabled{display:none}.do-pages.skin-2 .input-box{display:none}.do-pages.plain a.normal{background:#e7e8eb}.do-pages.plain a.normal:hover{background:#ecf0f1}.do-pages.skin-2.plain a.curr,.do-pages.plain a.normal:active{background:#bdc3c7}.do-pages.grey a.normal{background:#34495e;color:#fff}.do-pages.grey a.normal:hover{background:#5d6d7e}.do-pages.skin-2.grey a.curr,.do-pages.grey a.normal:active{background:#2c3e50}.do-pages.red a.normal{background:#e74c3c;color:#fff}.do-pages.red a.normal:hover{background:#ec7063}.do-pages.skin-2.red a.curr,.do-pages.red a.normal:active{background:#c54133}.do-pages.orange a.normal{background:#f39c12;color:#fff}.do-pages.orange a.normal:hover{background:#fbbb56}.do-pages.skin-2.orange a.curr,.do-pages.orange a.normal:active{background:#e67e22}.do-pages.green a.normal{background:#1abc9c;color:#fff}.do-pages.green a.normal:hover{background:#48c9b0}.do-pages.skin-2.green a.curr,.do-pages.green a.normal:active{background:#16a085}.do-pages.blue a.normal{background:#3498db;color:#fff}.do-pages.blue a.normal:hover{background:#5dade2}.do-pages.skin-2.blue a.curr,.do-pages.blue a.normal:active{background:#2c81ba}
.do-pages{height:auto;text-align:center;font-size:13px}.do-pages a{display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color:#546e7a;text-decoration:none;cursor:pointer}.do-pages a.curr,.do-pages a.disabled{cursor:default}.do-pages.skin-1{width:100%}.do-pages.skin-1 a.normal,.do-pages.skin-1 a.disabled,.do-pages.skin-1 a.curr{padding:0 10px;margin:0 3px}.do-pages.skin-1 a.curr{font-weight:bold;font-size:15px}.do-pages.skin-1 a.disabled{min-width:0;padding:0}.do-pages.skin-1 .input-box,.do-pages.skin-1 .input-box span,.do-pages.skin-1 .input-box input{display:inline-block}.do-pages.skin-1 .input-box input{width:25px;height:20px;padding:0 3px;background:#fff;border:1px solid #ddd}.do-pages.skin-1 .input-box a.normal{height:30px;line-height:30px}.do-pages.skin-2{float:right;width:auto}.do-pages.skin-2 a.normal,.do-pages.skin-2 a.disabled,.do-pages.skin-2 a.curr{float:left;margin:0;padding:0 5px;color:#fff}.do-pages.skin-2 a.disabled{display:none}.do-pages.skin-2 .input-box{display:none}.do-pages.plain a.normal{background:#e7e8eb}.do-pages.plain a.normal:hover{background:#ecf0f1}.do-pages.skin-2.plain a.curr,.do-pages.plain a.normal:active{background:#bdc3c7}.do-pages.grey a.normal{background:#546e7a;color:#fff}.do-pages.grey a.normal:hover{background:#607d8b}.do-pages.skin-2.grey a.curr,.do-pages.grey a.normal:active{background:#37474f}.do-pages.red a.normal{background:#ff5722;color:#fff}.do-pages.red a.normal:hover{background:#ff7043}.do-pages.skin-2.red a.curr,.do-pages.red a.normal:active{background:#e64a19}.do-pages.orange a.normal{background:#ff9800;color:#fff}.do-pages.orange a.normal:hover{background:#ffa726}.do-pages.skin-2.orange a.curr,.do-pages.orange a.normal:active{background:#f57c00}.do-pages.green a.normal{background:#4caf50;color:#fff}.do-pages.green a.normal:hover{background:#81c784}.do-pages.skin-2.green a.curr,.do-pages.green a.normal:active{background:#388e3c}.do-pages.teal a.normal{background:#1abc9c;color:#fff}.do-pages.teal a.normal:hover{background:#48c9b0}.do-pages.skin-2.teal a.curr,.do-pages.teal a.normal:active{background:#16a085}.do-pages.blue a.normal{background:#2196f3;color:#fff}.do-pages.blue a.normal:hover{background:#64b5f6}.do-pages.skin-2.blue a.curr,.do-pages.blue a.normal:active{background:#1976d2}.do-pages.purple a.normal{background:#651fff;color:#fff}.do-pages.purple a.normal:hover{background:#7c4dff}.do-pages.skin-2.purple a.curr,.do-pages.purple a.normal:active{background:#6200ea}

10
js/lib/pages/main.scss
View File

@ -67,11 +67,21 @@
&.skin-2.green a.curr,
&.green a.normal:active {background:nth($cg, 3)}
&.teal a.normal {background:nth($ct, 1);color: #fff;}
&.teal a.normal:hover {background:nth($ct, 2)}
&.skin-2.teal a.curr,
&.teal a.normal:active {background:nth($ct, 3)}
&.blue a.normal {background:nth($cb, 1);color: #fff;}
&.blue a.normal:hover {background:nth($cb, 2)}
&.skin-2.blue a.curr,
&.blue a.normal:active {background:nth($cb, 3)}
&.purple a.normal {background:nth($cpp, 1);color: #fff;}
&.purple a.normal:hover {background:nth($cpp, 2)}
&.skin-2.purple a.curr,
&.purple a.normal:active {background:nth($cpp, 3)}
}