From 0910a651d5a81f676c8939ac512ce514a8c827e3 Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Fri, 29 Jun 2012 16:52:29 +1200 Subject: [PATCH] FIX: restore and update style for DevelopmentAdmin. --- css/debug.css | 33 +++++++++ dev/DebugView.php | 23 +++---- dev/DevelopmentAdmin.php | 9 +-- dev/TaskRunner.php | 7 +- scss/debug.scss | 140 +++++++++++++++++++++++++++++++++++++++ 5 files changed, 191 insertions(+), 21 deletions(-) create mode 100644 css/debug.css create mode 100644 scss/debug.scss diff --git a/css/debug.css b/css/debug.css new file mode 100644 index 00000000000..f4be9277d77 --- /dev/null +++ b/css/debug.css @@ -0,0 +1,33 @@ +body { background-color: #eee; margin: 0; overflow-x: hidden; padding: 0; font-family: Helvetica,Arial,sans-serif; } + +.info { margin: 0 0 6px 0; padding: 18px; background-color: #003050; position: relative; line-height: 24px; color: #fff; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #002137), color-stop(10%, #003050), color-stop(90%, #003050), color-stop(100%, #002137)); background-image: -webkit-linear-gradient(#002137, #003050 10%, #003050 90%, #002137); background-image: -moz-linear-gradient(#002137, #003050 10%, #003050 90%, #002137); background-image: -o-linear-gradient(#002137, #003050 10%, #003050 90%, #002137); background-image: -ms-linear-gradient(#002137, #003050 10%, #003050 90%, #002137); background-image: linear-gradient(#002137, #003050 10%, #003050 90%, #002137); } +.info h1 { margin: 0 0 6px 0; padding: 0 32px 0 0; color: #fff; font-size: 24px; text-shadow: 0 1px #002137; line-height: 30px; background: url(../admin/images/logo_small.png) no-repeat right 3px; } +.info h3 { color: #7da4be; font-size: 16px; line-height: 18px; font-weight: normal; } +.info p { margin: 0; font-size: 14px; color: #fff; } +.info a { color: #fff; font-weight: bold; text-decoration: none; } +.info a:hover, .info a:active { color: #fff; text-decoration: underline; } + +.header { margin: 0; border-bottom: 6px solid #ccdef3; height: 23px; background-color: #666673; padding: 4px 0 2px 6px; } + +.trace, .build, .options { padding: 6px 12px; } +.trace li, .build li, .options li { font-size: 14px; margin: 6px 0; } + +a { color: #666; } +a:hover { color: #222; } +a:active { color: #111; } + +p { margin-bottom: 6px; } + +pre { margin-bottom: 20px; background-color: #f5f5f5; border: 1px solid #eee; border: 1px solid rgba(0, 0, 0, 0.08); color: #333; padding: 11px; overflow: auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05); } +pre span { color: #999; } +pre .error { color: #f00; } + +h2 { margin: 0 0 12px 0; } + +h3 { margin: 0 0 6px 0; color: #333; font-size: 18px; line-height: 24px; } + +ul { margin: 0 0 18px 0; padding: 0 0 0 18px; } + +.pass { margin-top: 18px; padding: 2px 20px 2px 40px; color: #006600; background: #E2F9E3; border: 1px solid #8DD38D; border-radius: 4px; } + +.fail { margin-top: 18px; padding: 2px 20px 2px 40px; color: #C80700; background: #FFE9E9; border: 1px solid #C80700; border-radius: 4px; } diff --git a/dev/DebugView.php b/dev/DebugView.php index 404fb7e8eaf..7358bb870f9 100644 --- a/dev/DebugView.php +++ b/dev/DebugView.php @@ -90,21 +90,16 @@ public function writeHeader() { ENT_COMPAT, 'UTF-8' ); + + $debugCSS = Controller::join_links( + Director::absoluteBaseURL(), + FRAMEWORK_DIR, + 'css/debug.css' + ); + echo '' . $url . ''; - echo ''; + echo ''; + echo ''; echo ''; } diff --git a/dev/DevelopmentAdmin.php b/dev/DevelopmentAdmin.php index 19a65677861..d9beb471c82 100644 --- a/dev/DevelopmentAdmin.php +++ b/dev/DevelopmentAdmin.php @@ -97,8 +97,10 @@ function index() { $base = Director::baseURL(); echo '
"; $renderer->writeFooter(); // CLI mode diff --git a/scss/debug.scss b/scss/debug.scss new file mode 100644 index 00000000000..2b3a459c553 --- /dev/null +++ b/scss/debug.scss @@ -0,0 +1,140 @@ +@import "compass/css3"; + +body { + background-color: #eee; + margin:0; + overflow-x: hidden; + padding:0; + font-family: Helvetica,Arial,sans-serif; +} + +.info { + margin:0 0 6px 0; + padding: 18px; + background-color: #003050; + position: relative; + line-height: 24px; + color: #fff; + + @include background-image( + linear-gradient(darken(#003050, 5%), #003050 10%, #003050 90%, darken(#003050, 5%)) + ); + + + h1 { + margin: 0 0 6px 0; + padding: 0 32px 0 0; + color: #fff; + font-size: 24px; + text-shadow: 0 1px darken(#003050, 5%); + line-height: 30px; + + background: url(../admin/images/logo_small.png) no-repeat right 3px; + } + + h3 { + color: #7da4be; + font-size: 16px; + line-height: 18px; + font-weight: normal; + } + p { + margin: 0; + font-size: 14px; + color: #fff; + } + + a { + color: #fff; + font-weight: bold; + text-decoration: none; + + &:hover, + &:active { + color: #fff; + text-decoration: underline; + } + } +} + + + +.header { + margin: 0; + border-bottom: 6px solid #ccdef3; + height: 23px; + background-color: #666673; + padding: 4px 0 2px 6px; +} + +.trace, +.build, +.options { + padding:6px 12px; + + li { + font-size:14px; margin:6px 0; + } +} + +a { + color: #666; + + &:hover { + color: #222; + } + + &:active { + color: #111; + } +} + +p { + margin-bottom: 6px; +} + +pre { + margin-bottom: 20px; + background-color: #f5f5f5; + border: 1px solid #eee; + border: 1px solid rgba(0,0,0,.08); + color: #333; + padding: 11px; + overflow: auto; + + @include border-radius(4px); + @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05)); + + span { + color:#999; + } + .error { + color:#f00; + } +} + +h2 { + margin: 0 0 12px 0; +} + +h3 { + margin: 0 0 6px 0; + color: #333; + font-size: 18px; + line-height: 24px; +} + +ul { + margin: 0 0 18px 0; + padding: 0 0 0 18px; +} + +.pass { + margin-top:18px; padding:2px 20px 2px 40px; color:#006600; background:#E2F9E3; border: 1px solid #8DD38D; + border-radius:4px; +} + +.fail { + margin-top:18px; padding:2px 20px 2px 40px; color:#C80700; background:#FFE9E9; + border:1px solid #C80700; border-radius:4px; +}