mbirth/LuckyCoinkydink
1
0
Fork 0
Code Issues Pull Requests Activity

Optimize CSS: linear gradients

Browse Source 
Since all modern browsers by now support linear-gradient in at least
the current version, we can use it unprefixed. -webkit prefix kept
for iOS 6, though. All other browser fall back to solid color. This
alone actually saves about 6% of the backend CSS!
This commit is contained in:
Matthias Mees 2014-03-04 13:40:54 +01:00
parent 0a471f2e56
commit 023e479beb
1 changed files with 4 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
templates/2k11/admin/style.css
View File

@ -573,10 +573,7 @@ input[type="submit"] {
button,
input[type="button"] {
background: #ddd;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #ddd));
background-image: -webkit-linear-gradient(#fff, #ddd);
background-image: -moz-linear-gradient(#fff, #ddd);
background-image: -o-linear-gradient(#fff, #ddd);
background-image: linear-gradient(#fff, #ddd);
border-color: #ddd #bbb #999;
color: #222;
@ -588,10 +585,7 @@ input[type="button"] {
input[type="submit"],
button[type="submit"] {
background: #468847;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #63af64), color-stop(100%, #468847));
background-image: -webkit-linear-gradient(#63af64, #468847);
background-image: -moz-linear-gradient(#63af64, #468847);
background-image: -o-linear-gradient(#63af64, #468847);
background-image: linear-gradient(#63af64, #468847);
border-color: #468847 #2f5c30 #182f18;
}
@ -602,10 +596,7 @@ input[type="reset"],
input[type="submit"].state_cancel,
input[type="submit"].state_cancel:visited {
background: #b94a48;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cc7a79), color-stop(100%, #b94a48));
background-image: -webkit-linear-gradient(#cc7a79, #b94a48);
background-image: -moz-linear-gradient(#cc7a79, #b94a48);
background-image: -o-linear-gradient(#cc7a79, #b94a48);
background-image: linear-gradient(#cc7a79, #b94a48);
border-color: #b94a48 #893634 #582322;
}
@ -614,10 +605,8 @@ input[type="submit"].state_cancel:visited {
.tabs > ul a:hover,
button:hover,
input[type="button"]:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(1px, #eee), color-stop(100%, #ccc));
background: #ccc;
background-image: -webkit-linear-gradient(#fff, #eee 1px, #ccc);
background-image: -moz-linear-gradient(#fff, #eee 1px, #ccc);
background-image: -o-linear-gradient(#fff, #eee 1px, #ccc);
background-image: linear-gradient(#fff, #eee 1px, #ccc);
}
@ -625,10 +614,8 @@ input[type="button"]:hover {
.state_submit:focus,
input[type="submit"]:hover,
button[type="submit"]:hover {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #63af64), color-stop(1px, #519e52), color-stop(100%, #3b723c));
background: #63af64;
background-image: -webkit-linear-gradient(#63af64, #519e52 1px, #3b723c);
background-image: -moz-linear-gradient(#63af64, #519e52 1px, #3b723c);
background-image: -o-linear-gradient(#63af64, #519e52 1px, #3b723c);
background-image: linear-gradient(#63af64, #519e52 1px, #3b723c);
}
@ -637,10 +624,8 @@ button[type="submit"]:hover {
input[type="reset"]:hover,
input[type="submit"].state_cancel:hover,
input[type="submit"].state_cancel:focus {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cc7a79), color-stop(1px, #c26260), color-stop(100%, #a2403e));
background: #cc7a79;
background-image: -webkit-linear-gradient(#cc7a79, #c26260 1px, #a2403e);
background-image: -moz-linear-gradient(#cc7a79, #c26260 1px, #a2403e);
background-image: -o-linear-gradient(#cc7a79, #c26260 1px, #a2403e);
background-image: linear-gradient(#cc7a79, #c26260 1px, #a2403e);
}
@ -651,10 +636,7 @@ input:checked + .media_selector,
.tabs > ul a:active,
button:active,
input[type="button"]:active {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(1px, #ddd), color-stop(100%, #eee));
background-image: -webkit-linear-gradient(#fff, #ddd 1px, #eee);
background-image: -moz-linear-gradient(#fff, #ddd 1px, #eee);
background-image: -o-linear-gradient(#fff, #ddd 1px, #eee);
background-image: linear-gradient(#fff, #ddd 1px, #eee);
box-shadow: inset rgba(0, 0, 0, 0.25) 0 1px 2px 0;
border-color: #999 #bbb #ddd;
@ -663,10 +645,7 @@ input[type="button"]:active {
.state_submit:active,
input[type="submit"]:active
button[type="submit"]:active {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #63af64), color-stop(1px, #468847), color-stop(100%, #519e52));
background-image: -webkit-linear-gradient(#63af64, #468847 1px, #519e52);
background-image: -moz-linear-gradient(#63af64, #468847 1px, #519e52);
background-image: -o-linear-gradient(#63af64, #468847 1px, #519e52);
background-image: linear-gradient(#63af64, #468847 1px, #519e52);
border-color: #182f18 #2f5c30 #468847;
}
@ -674,20 +653,14 @@ button[type="submit"]:active {
.state_cancel:active,
input[type="reset"]:active
input[type="submit"].state_cancel:active {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cc7a79), color-stop(1px, #b94a48), color-stop(100%, #c26260));
background-image: -webkit-linear-gradient(#cc7a79, #b94a48 1px, #c26260);
background-image: -moz-linear-gradient(#cc7a79, #b94a48 1px, #c26260);
background-image: -o-linear-gradient(#cc7a79, #b94a48 1px, #c26260);
background-image: linear-gradient(#cc7a79, #b94a48 1px, #c26260);
border-color: #582322 #893634 #b94a48;color: #fafafa;
}
input[type="submit"].entry_preview {
background: #ddd;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #ddd));
background-image: -webkit-linear-gradient(#fff, #ddd);
background-image: -moz-linear-gradient(#fff, #ddd);
background-image: -o-linear-gradient(#fff, #ddd);
background-image: linear-gradient(#fff, #ddd);
border-color: #ddd #bbb #999;
color: #222;
@ -696,10 +669,8 @@ input[type="submit"].entry_preview {
input[type="submit"].entry_preview:hover,
input[type="submit"].entry_preview:focus {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(1px, #eee), color-stop(100%, #ccc));
background: #ccc;
background-image: -webkit-linear-gradient(#fff, #eee 1px, #ccc);
background-image: -moz-linear-gradient(#fff, #eee 1px, #ccc);
background-image: -o-linear-gradient(#fff, #eee 1px, #ccc);
background-image: linear-gradient(#fff, #eee 1px, #ccc);
color: #222;
text-shadow: #fff 0 1px 1px;
@ -1279,10 +1250,7 @@ summary {
----------------------------------------------------------------- */
#top {
background: #3e5f81;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #3e5f81), color-stop(100%, #294564));
background-image: -webkit-linear-gradient(#3e5f81, #294564);
background-image: -moz-linear-gradient(#3e5f81, #294564);
background-image: -o-linear-gradient(#3e5f81, #294564);
background-image: linear-gradient(#3e5f81, #294564);
box-shadow: 0 1px 4px rgba(0,0,0,.5);
color: #ccdde7;
@ -1618,10 +1586,7 @@ form > .button_link:first-of-type,
.serendipity_statistics > section > h3,
#login fieldset > span {
background: #ddd;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #ddd));
background-image: -webkit-linear-gradient(#fff, #ddd);
background-image: -moz-linear-gradient(#fff, #ddd);
background-image: -o-linear-gradient(#fff, #ddd);
background-image: linear-gradient(#fff, #ddd);
border-bottom: 1px solid #aaa;
color: #666;
@ -2943,10 +2908,7 @@ img.mfp-img {
#main_menu h3 {
background: #ddd;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fff), color-stop(100%, #ddd));
background-image: -webkit-linear-gradient(#fff, #ddd);
background-image: -moz-linear-gradient(#fff, #ddd);
background-image: -o-linear-gradient(#fff, #ddd);
background-image: linear-gradient(#fff, #ddd);
border-bottom: 1px solid #aaa;
display: block;