fanbinit/rhymix
1
0
Fork 0
mirror of https://github.com/Lastorder-DC/rhymix.git synced 2026-01-09 03:32:00 +09:00
Code Issues Projects Releases Packages Wiki Activity

음영 변화를 나타낼 수 있도록 LESS 파일 내 함수 개선

Browse source
This commit is contained in:
MinSoo Kim 2017-02-05 22:55:22 +09:00
parent 0e9ae4de80
commit fc3adab4bc
1 changed files with 28 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

59
modules/member/skins/simple_world/css/css.less
View file

@ -4,49 +4,48 @@
@author misol <misol.kr@gmail.com>
@brief Select a text color according to WCAG 2.0 contrast guideline. The calcualtion of contrast follows the formula on the guideline.
*/
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @i:0) when (@i >= 10) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) {
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i >= 20) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) {
color: @bright_color;
}
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @i:0) when (@i >= 10) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) {
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i >= 20) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) {
color: @dark_color;
}
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @i:0) when (@i < 10) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) ) > 4.5 ) {
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 20) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) ) > 4.5 * @multi ) {
color: @bright_color;
}
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @i:0) when (@i < 10) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) ) ) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) ) =< 4.5) {
.text-contrast(@bg_color; lighten(@bright_color, 5%); @dark_color; @i + 1);
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 20) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) ) ) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) ) =< 4.5 * @multi ) {
.text-contrast(@bg_color; lighten(@bright_color, 5%); @dark_color; @multi; @i + 1);
}
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @i:0) when (@i < 10) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > 4.5) {
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 20) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > 4.5 * @multi ) {
color: @dark_color;
}
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @i:0) when (@i < 10) and (( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< 4.5 ) {
.text-contrast(@bg_color; @bright_color; darken(@dark_color, 5%); @i + 1);
.text-contrast(@bg_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 20) and (( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@bg_color) + 0.05) )) and ( ( (luma(@bg_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< 4.5 * @multi ) {
.text-contrast(@bg_color; @bright_color; darken(@dark_color, 5%); @multi; @i + 1);
}
/*
@method .bg-contrast()
@author misol <misol.kr@gmail.com>
@brief Select a background color, which has less contrast background color than WCAG 2.0 contrast guideline. On the WCAG 2.0 guideline, bigger string can have less contrast as 3.0.
*/
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @i:0) when (@i >= 10) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) {
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i >= 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) {
background: @bright_color;
}
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @i:0) when (@i >= 10) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) {
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i >= 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) {
background: @dark_color;
}
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @i:0) when (@i < 10) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) ) > 3 ) {
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) ) > 3 * @multi ) {
background: @bright_color;
}
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @i:0) when (@i < 10) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) ) ) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) ) =< 3) {
.bg-contrast(@text_color; lighten(@bright_color,5%); @dark_color; @i + 1);
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) ) ) and ( ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) ) =< 3 * @multi ) {
.bg-contrast(@text_color; lighten(@bright_color,3%); @dark_color; @multi; @i + 1);
}
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @i:0) when (@i < 10) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > 3) {
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > 3 * @multi ) {
background: @dark_color;
}
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @i:0) when (@i < 10) and (( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< 3 ) {
.bg-contrast(@text_color; @bright_color; darken(@dark_color, 5%); @i + 1);
.bg-contrast(@text_color; @bright_color:#fff; @dark_color:#000; @multi:1; @i:0) when (@i < 100) and (( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) > ( ( luma(@bright_color) + 0.05) / ( luma(@text_color) + 0.05) )) and ( ( (luma(@text_color) + 0.05) / (luma(@dark_color) + 0.05) ) =< 3 * @multi ) {
.bg-contrast(@text_color; @bright_color; darken(@dark_color, 3%); @multi; @i + 1);
}
/* As LESS library in Rhymix substitude variables as an strings, convert colors as the color objects of LESS. */
@ -81,9 +80,8 @@ script, style
/* message; error, info, update */
.rx_member-notice, .rx_member-notice.info
{
background: lighten(@color, 43%);
.text-contrast(lighten(@color, 43%));
.bg-contrast(#000; lighten(@color, 5%); darken(@color, 5%); 5.0);
color: #000;
padding: 15px;
margin:0;
margin-top:0;
@ -175,12 +173,12 @@ script, style
display:block;
padding: 10px;
vertical-align: bottom;
darken: darken(@color,45%);
.bg-contrast(darken(@color,45%), lighten(@color,10%),darken(@color,10%));
.bg-contrast(#000; lighten(@color,5%); darken(@color,5%); 4.3);
font-weight: bold;
text-shadow: none;
border:0;
box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23);
color: darken(@color,45%);
color: #000;
}
.rx_simple_member form div.control-group>input[type="submit"], .rx_simple_member .sw-footer{
margin: 20px 0 0;
@ -221,7 +219,7 @@ script, style
text-decoration: none;
}
.rx_simple_member ul.rx_simple_tab>li a:hover, .rx_simple_member ul.rx_simple_tab>li a:focus, .rx_simple_member ul.rx_simple_tab>li.active a {
.text-contrast(#ffffff, darken(@color,20%), lighten(@color,20%));
.text-contrast(#fff; darken(@color,5%); lighten(@color,5%));
font-weight: 700;
}
.rx_simple_member ul.rx_simple_tab>li a span {
@ -256,7 +254,6 @@ script, style
padding-right: 15px;
}
.rx_simple_member .rx_sw_list .cont_a:hover, .rx_simple_member .rx_sw_list .cont_a:focus {
.text-contrast(#ffffff, darken(@color,20%), lighten(@color,20%));
}
.rx_simple_member .content_basic{
position:relative;
@ -293,10 +290,10 @@ script, style
right:2px;
}
.rx_simple_member .rx_sw_list .content_delete button{
background: lighten(@color, 30%);
background: lighten(@color, 5%);
font-size: 14px;
border:0;
.text-contrast(lighten(@color, 20%));
.text-contrast(lighten(@color, 5%));
box-shadow: 0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23);
padding: 10px;
vertical-align: bottom;
@ -333,7 +330,7 @@ script, style
}
.rx_simple_member .pagination ul li.active>a
{
.bg-contrast(#000, lighten(@color, 15%), darken(@color, 15%));
.bg-contrast(#000; lighten(@color, 5%); darken(@color, 5%));
font-weight:bold;
color:#000;
}
@ -343,8 +340,8 @@ script, style
.rx_simple_member form div.control-group>input[type="submit"]:focus, .rx_simple_member form div.control-group>input.btn.dateRemover:focus, .rx_simple_member .sw-footer>a:focus, .rx_simple_member .sw-anchor-buttons a:focus, .rx_simple_member .pagination ul li>a:focus, .rx_simple_member .rx_sw_list .content_delete button:focus
{
.bg-contrast(#fff, lighten(@color, 13%), darken(@color, 13%));
font-weight:bold;
color:#fff;
.bg-contrast(#000; lighten(@color,5%); darken(@color,5%); 2.5);
color: #000;
box-shadow: 0 2px 4px rgba(0,0,0,0.16), 0 2px 4px rgba(0,0,0,0.23);
}