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

Web Content Accessibility Guidelines (WCAG) 2.0

Browse source 
Web Content Accessibility Guidelines (WCAG) 2.0 기준에 맞게 텍스트 색상이 지정되도록
개선.......
This commit is contained in:
MinSoo Kim 2017-02-01 00:44:30 +09:00
parent d16676e436
commit 8e1a356a6b
1 changed files with 54 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,42 @@
@charset "UTF-8";
.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) )) {
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) )) {
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 ) {
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; @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) {
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);
}
.bg-contrast(@text_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) )) {
background: @bright_color;
}
.bg-contrast(@text_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) )) {
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 ) {
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; @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) {
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);
}
@color: rgb(@red, @green, @blue);
@ -28,8 +66,9 @@ script, style
/* message */
.rx_member-notice, .rx_member-notice.info
{
background: lighten(@color, 43%);
color: contrast(lighten(@color, 43%));
.text-contrast(lighten(@color, 43%));
padding: 15px;
margin:0;
margin-top:0;
@ -38,12 +77,12 @@ script, style
.rx_member-notice.error
{
background: #fff3e0;
color: contrast(#fff3e0);
.text-contrast(#fff3e0);
}
.rx_member-notice.update
{
background: #e8f5e9;
color: contrast(#e8f5e9);
.text-contrast(#e8f5e9);
}
.rx_member-notice>*
{
@ -60,7 +99,7 @@ script, style
.rx_simple_member .sw-body
{
box-sizing:border-box;
background-color:#ffffff;
background:#ffffff;
margin: 0 0 20px;
border: 1px solid #e0e0e0;
}
@ -119,9 +158,10 @@ script, style
.rx_simple_member form div.control-group>input[type="submit"], .rx_simple_member .sw-footer>a, .rx_simple_member .sw-anchor-buttons a
{
display:block;
background: @color;
.bg-contrast(#fff, lighten(@color,10%),darken(@color,10%));
text-weight: bold;
border: medium none;
color: contrast(@color);
color: #fff;
padding: 10px;
vertical-align: bottom;
}
@ -165,7 +205,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 {
color: contrast(#ffffff, darken(@color,20%), lighten(@color,20%));
.text-contrast(#ffffff, darken(@color,20%), lighten(@color,20%));
font-weight: 700;
}
.rx_simple_member ul.rx_simple_tab>li a span {
@ -200,7 +240,7 @@ script, style
padding-right: 15px;
}
.rx_simple_member .rx_sw_list .cont_a:hover, .rx_simple_member .rx_sw_list .cont_a:focus {
color: contrast(#ffffff, darken(@color,20%), lighten(@color,20%));
.text-contrast(#ffffff, darken(@color,20%), lighten(@color,20%));
}
.rx_simple_member .content_basic{
position:relative;
@ -240,7 +280,7 @@ script, style
background: @color;
font-size: 14px;
border:0;
color: contrast(@color);
.text-contrast(@color);
padding: 10px;
vertical-align: bottom;
}
@ -275,8 +315,9 @@ script, style
}
.rx_simple_member .pagination ul li.active>a
{
background: @color;
color: contrast(@color);
.bg-contrast(#000, lighten(@color, 15%), darken(@color, 15%));
text-weight:bold;
color:#000;
}
/* button hover */
@ -284,6 +325,6 @@ script, style
.rx_simple_member form div.control-group>input[type="submit"]: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
{
background: lighten(@color, 10%);
color: contrast(lighten(@color, 10%));
.bg-contrast(#fff, lighten(@color, 13%), darken(@color, 13%));
color:#fff;
}