Commit 7d8221c1 authored by Stephen Sawchuk's avatar Stephen Sawchuk

update todomvc-common to 0.1.9.

parent 6030db61
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
...@@ -14,7 +14,6 @@ button { ...@@ -14,7 +14,6 @@ button {
font-family: inherit; font-family: inherit;
color: inherit; color: inherit;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -34,6 +33,11 @@ body { ...@@ -34,6 +33,11 @@ body {
font-smoothing: antialiased; font-smoothing: antialiased;
} }
button,
input[type="checkbox"] {
outline: none;
}
#todoapp { #todoapp {
background: #fff; background: #fff;
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
...@@ -100,9 +104,6 @@ body { ...@@ -100,9 +104,6 @@ body {
background: #8d7d77; background: #8d7d77;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
border-top-left-radius: 1px; border-top-left-radius: 1px;
...@@ -123,7 +124,6 @@ body { ...@@ -123,7 +124,6 @@ body {
padding: 6px; padding: 6px;
border: 1px solid #999; border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-ms-box-sizing: border-box; -ms-box-sizing: border-box;
-o-box-sizing: border-box; -o-box-sizing: border-box;
...@@ -159,7 +159,8 @@ label[for='toggle-all'] { ...@@ -159,7 +159,8 @@ label[for='toggle-all'] {
left: -4px; left: -4px;
width: 40px; width: 40px;
text-align: center; text-align: center;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
} }
#toggle-all:before { #toggle-all:before {
...@@ -214,9 +215,9 @@ label[for='toggle-all'] { ...@@ -214,9 +215,9 @@ label[for='toggle-all'] {
top: 0; top: 0;
bottom: 0; bottom: 0;
margin: auto 0; margin: auto 0;
border: none; /* Mobile Safari */ /* Mobile Safari */
border: none;
-webkit-appearance: none; -webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none; -ms-appearance: none;
-o-appearance: none; -o-appearance: none;
appearance: none; appearance: none;
...@@ -224,7 +225,8 @@ label[for='toggle-all'] { ...@@ -224,7 +225,8 @@ label[for='toggle-all'] {
#todo-list li .toggle:after { #todo-list li .toggle:after {
content: '✔'; content: '✔';
line-height: 43px; /* 40 + a couple of pixels visual adjustment */ /* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px; font-size: 20px;
color: #d9d9d9; color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf; text-shadow: 0 -1px 0 #bfbfbf;
...@@ -238,15 +240,13 @@ label[for='toggle-all'] { ...@@ -238,15 +240,13 @@ label[for='toggle-all'] {
} }
#todo-list li label { #todo-list li label {
white-space: pre;
word-break: break-word; word-break: break-word;
padding: 15px; padding: 15px 60px 15px 15px;
margin-left: 45px; margin-left: 45px;
display: block; display: block;
line-height: 1.2; line-height: 1.2;
-webkit-transition: color 0.4s; -webkit-transition: color 0.4s;
-moz-transition: color 0.4s;
-ms-transition: color 0.4s;
-o-transition: color 0.4s;
transition: color 0.4s; transition: color 0.4s;
} }
...@@ -267,9 +267,6 @@ label[for='toggle-all'] { ...@@ -267,9 +267,6 @@ label[for='toggle-all'] {
font-size: 22px; font-size: 22px;
color: #a88a8a; color: #a88a8a;
-webkit-transition: all 0.2s; -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s; transition: all 0.2s;
} }
...@@ -277,9 +274,7 @@ label[for='toggle-all'] { ...@@ -277,9 +274,7 @@ label[for='toggle-all'] {
text-shadow: 0 0 1px #000, text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8); 0 0 10px rgba(199, 107, 107, 0.8);
-webkit-transform: scale(1.3); -webkit-transform: scale(1.3);
-moz-transform: scale(1.3);
-ms-transform: scale(1.3); -ms-transform: scale(1.3);
-o-transform: scale(1.3);
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -387,6 +382,7 @@ label[for='toggle-all'] { ...@@ -387,6 +382,7 @@ label[for='toggle-all'] {
Hack to remove background from Mobile Safari. Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox and Opera Can't use it globally since it destroys checkboxes in Firefox and Opera
*/ */
@media screen and (-webkit-min-device-pixel-ratio:0) { @media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all, #toggle-all,
#todo-list li .toggle { #todo-list li .toggle {
...@@ -403,14 +399,15 @@ label[for='toggle-all'] { ...@@ -403,14 +399,15 @@ label[for='toggle-all'] {
width: 65px; width: 65px;
height: 41px; height: 41px;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); transform: rotate(90deg);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
} }
} }
.hidden{ .hidden {
display:none; display: none;
} }
hr { hr {
...@@ -528,7 +525,7 @@ hr { ...@@ -528,7 +525,7 @@ hr {
border-top-color: rgba(0, 0, 0, .04); border-top-color: rgba(0, 0, 0, .04);
} }
/**body*/.learn-bar > .learn { .learn-bar > .learn {
position: absolute; position: absolute;
width: 272px; width: 272px;
top: 8px; top: 8px;
...@@ -536,19 +533,23 @@ hr { ...@@ -536,19 +533,23 @@ hr {
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
background-color: rgba(255, 255, 255, .6); background-color: rgba(255, 255, 255, .6);
-webkit-transition-property: left;
transition-property: left; transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms; transition-duration: 500ms;
} }
@media (min-width: 899px) { @media (min-width: 899px) {
/**body*/.learn-bar { .learn-bar {
width: auto; width: auto;
margin: 0 0 0 300px; margin: 0 0 0 300px;
} }
/**body*/.learn-bar > .learn {
.learn-bar > .learn {
left: 8px; left: 8px;
} }
/**body*/.learn-bar #todoapp {
.learn-bar #todoapp {
width: 550px; width: 550px;
margin: 130px auto 40px auto; margin: 130px auto 40px auto;
} }
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment