Permalink
Browse files

Adding more fancy CSS3 styling.

  • Loading branch information...
1 parent ec9d29f commit c36bc1e6c1b4ecf204f52a19bddc193afe72e85f @markstory markstory committed Sep 1, 2011
Showing with 117 additions and 58 deletions.
  1. +117 −58 app/webroot/css/cake.generic.css
View
175 app/webroot/css/cake.generic.css
@@ -158,7 +158,7 @@ table tr td {
border-bottom:1px solid #ddd;
}
table tr:nth-child(even) {
- background: #f5f5f5;
+ background: #f9f9f9;
}
td.actions {
text-align: center;
@@ -168,6 +168,8 @@ table td.actions a {
margin: 0px 6px;
padding:2px 5px;
}
+
+/* SQL log */
.cake-sql-log {
background: #fff;
}
@@ -321,38 +323,56 @@ input[type=submit] {
}
form .submit input[type=submit] {
background:#62af56;
- background: -webkit-gradient(linear, left top, left bottom, from(#a8ea9c), to(#62af56));
- background-image: -moz-linear-gradient(top, #a8ea9c, #62af56);
+ background-image: -webkit-linear-gradient(top, #76BF6B, #3B8230);
+ background-image: -moz-linear-gradient(top, #76BF6B, #3B8230);
border-color: #2d6324;
- color: #000;
- text-shadow: #8cee7c 0px 1px 0px;
+ color: #fff;
+ text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
}
form .submit input[type=submit]:hover {
- background:#4ca83d;
- background: -webkit-gradient(linear, left top, left bottom, from(#85e573), to(#4ca83d));
- background-image: -moz-linear-gradient(top, #85e573, #4ca83d);
+ background: #4ca83d;
+ background-image: -webkit-linear-gradient(top, #62af56, #286E1E);
+ background-image: -moz-linear-gradient(top, #62af56, #286E1E);
+}
+/* Form errors */
+form .error {
+ background: #FFDACC;
+ border-radius: 5px;
+ font-weight: normal;
+}
+form .error-message {
+ border-radius: none;
+ border: none;
+ background: none;
+ margin: 0;
+ padding-left: 4px;
+ padding-right: 0;
+}
+form .error,
+form .error-message {
+ color: #9E2424;
}
/** Notices and Errors **/
-div.message {
+.message {
clear: both;
color: #fff;
font-size: 140%;
font-weight: bold;
margin: 0 0 1em 0;
- background: #c73e14;
padding: 5px;
}
+.success,
+.message,
+.cake-debug,
.notice,
-.error,
-div.error-message {
+p.error,
+.error-message {
background: #ffcc00;
background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#ffcc00), to(#E6B800));
background-image: -moz-linear-gradient(top, #ffcc00, #E6B800);
background-image: -ms-linear-gradient(top, #ffcc00, #E6B800);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffcc00), color-stop(100%, #E6B800));
background-image: -webkit-linear-gradient(top, #ffcc00, #E6B800);
background-image: -o-linear-gradient(top, #ffcc00, #E6B800);
background-image: linear-gradient(top, #ffcc00, #E6B800);
@@ -362,35 +382,43 @@ div.error-message {
padding: 7px 14px;
color: #404040;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
- border-width: 1px;
- border-style: solid;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
+.success,
+.message,
+.cake-debug,
p.error,
-div.error-message {
+.error-message {
clear: both;
color: #fff;
- font-weight: bold;
border: 1px solid rgba(0, 0, 0, 0.5);
background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
background-image: linear-gradient(top, #ee5f5b, #c43c35);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
+.success {
+ clear: both;
+ color: #fff;
+ border: 1px solid rgba(0, 0, 0, 0.5);
+ background-repeat: repeat-x;
+ background-image: -moz-linear-gradient(top, #76BF6B, #3B8230);
+ background-image: -ms-linear-gradient(top, #76BF6B, #3B8230);
+ background-image: -o-linear-gradient(top, #76BF6B, #3B8230);
+ background-image: linear-gradient(top, #76BF6B, #3B8230);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
+}
p.error {
- font-family: Courier, monospace;
+ font-family: Monaco, Consolas, Courier, monospace;
font-size: 120%;
- line-height: 140%;
padding: 0.8em;
margin: 1em 0;
}
@@ -401,14 +429,11 @@ p.error em {
.notice {
color: #000;
display: block;
- font-family: Courier, monospace;
font-size: 120%;
- line-height: 140%;
padding: 0.8em;
margin: 1em 0;
}
.success {
- background: green;
color: #fff;
}
@@ -432,28 +457,45 @@ div.actions ul li a:hover {
text-decoration: underline;
}
+/* Buttons and button links */
input[type=submit],
div.actions ul li a,
td.actions a {
font-weight:normal;
padding: 4px 8px;
background:#e6e49f;
- background: -webkit-gradient(linear, left top, left bottom, from(#f1f1d4), to(#e6e49f));
- background-image: -moz-linear-gradient(top, #f1f1d4, #e6e49f);
+ background-image: -webkit-linear-gradient(top, #fefefe, #dedede);
+ background-image: -moz-linear-gradient(top, #fefefe, #dedede);
+ background-image: -ms-linear-gradient(top, #fefefe, #dedede);
+ background-image: -o-linear-gradient(top, #fefefe, #dedede);
+ background-image: linear-gradient(top, #fefefe, #dedede);
color:#333;
- border:1px solid #aaac62;
- -webkit-border-radius:8px;
- -moz-border-radius:8px;
- border-radius:8px;
+ border:1px solid #bbb;
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
text-decoration:none;
text-shadow: #fff 0px 1px 0px;
min-width: 0;
+ -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
+ box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
}
input[type=submit]:hover,
div.actions ul li a:hover,
td.actions a:hover {
- background: #f0f09a;
- background: -webkit-gradient(linear, left top, left bottom, from(#f7f7e1), to(#eeeca9));
+ background: #fefefe;
+ background-image: -webkit-linear-gradient(top, #dfdfdf, #eee);
+ background-image: -moz-linear-gradient(left top, left bottom, #fafafa, #fefefe);
+ background-image: -ms-linear-gradient(left top, left bottom, #fafafa, #fefefe);
+ background-image: -o-linear-gradient(left top, left bottom, #fafafa, #fefefe);
+ background-image: linear-gradient(left top, left bottom, #fafafa, #fefefe);
+ text-shadow: #eee 0px 1px 0px;
+ -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+ border-color: #aaa;
+ text-decoration: none;
}
/** Related **/
@@ -466,102 +508,119 @@ div.related {
pre {
color: #000;
background: #f0f0f0;
- padding: 1em;
+ padding: 15px;
+ box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
-pre.cake-debug {
- background: #ffcc00;
+.cake-debug {
font-size: 120%;
line-height: 140%;
margin-top: 1em;
- overflow: auto;
position: relative;
+ white-space: normal;
}
-div.cake-stack-trace {
- background: #fff;
+.cake-stack-trace {
+ background: rgba(255, 255, 255, 0.7);
color: #333;
- margin: 0px;
- padding: 6px;
+ margin: 10px 0 0 0;
+ padding: 10px;
font-size: 120%;
line-height: 140%;
overflow: auto;
position: relative;
+ border-radius: 5px;
+}
+.cake-stack-trace a {
+ text-shadow: none;
+ background: rgba(255, 255, 255, 0.7);
+ padding: 5px;
+ border-radius: 10px;
+ margin: 0px 4px 10px 2px;
+ font-family: sans-serif;
+ font-size: 14px;
+ line-height: 14px;
+ display: inline-block;
+ text-decoration: none;
+ box-shadow: inset 0px 1px 0 rgba(0, 0, 0, 0.3);
}
-div.cake-code-dump pre {
+.cake-code-dump pre {
position: relative;
overflow: auto;
}
-div.cake-stack-trace pre, div.cake-code-dump pre {
+.cake-stack-trace pre,
+.cake-code-dump pre {
color: #000;
background-color: #F0F0F0;
margin: 0px;
padding: 1em;
overflow: auto;
+ text-shadow: none;
}
-div.cake-code-dump pre, div.cake-code-dump pre code {
+.cake-code-dump pre,
+.cake-code-dump pre code {
clear: both;
font-size: 12px;
line-height: 15px;
margin: 4px 2px;
padding: 4px;
overflow: auto;
}
-div.cake-code-dump span.code-highlight {
+.cake-code-dump span.code-highlight {
background-color: #ff0;
padding: 4px;
}
-div.code-coverage-results div.code-line {
+.code-coverage-results div.code-line {
padding-left:5px;
display:block;
margin-left:10px;
}
-div.code-coverage-results div.uncovered span.content {
+.code-coverage-results div.uncovered span.content {
background:#ecc;
}
-div.code-coverage-results div.covered span.content {
+.code-coverage-results div.covered span.content {
background:#cec;
}
-div.code-coverage-results div.ignored span.content {
+.code-coverage-results div.ignored span.content {
color:#aaa;
}
-div.code-coverage-results span.line-num {
+.code-coverage-results span.line-num {
color:#666;
display:block;
float:left;
width:20px;
text-align:right;
margin-right:5px;
}
-div.code-coverage-results span.line-num strong {
+.code-coverage-results span.line-num strong {
color:#666;
}
-div.code-coverage-results div.start {
+.code-coverage-results div.start {
border:1px solid #aaa;
border-width:1px 1px 0px 1px;
margin-top:30px;
padding-top:5px;
}
-div.code-coverage-results div.end {
+.code-coverage-results div.end {
border:1px solid #aaa;
border-width:0px 1px 1px 1px;
margin-bottom:30px;
padding-bottom:5px;
}
-div.code-coverage-results div.realstart {
+.code-coverage-results div.realstart {
margin-top:0px;
}
-div.code-coverage-results p.note {
+.code-coverage-results p.note {
color:#bbb;
padding:5px;
margin:5px 0 10px;
font-size:10px;
}
-div.code-coverage-results span.result-bad {
+.code-coverage-results span.result-bad {
color: #a00;
}
-div.code-coverage-results span.result-ok {
+.code-coverage-results span.result-ok {
color: #fa0;
}
-div.code-coverage-results span.result-good {
+.code-coverage-results span.result-good {
color: #0a0;
}

0 comments on commit c36bc1e

Please sign in to comment.