Created
March 10, 2012 22:45
-
-
Save ciembor/2013756 to your computer and use it in GitHub Desktop.
Customized QUnit CSS style. Dark, with Monokai colors.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * QUnit v1.4.0pre - A JavaScript Unit Testing Framework | |
| * | |
| * http://docs.jquery.com/QUnit | |
| * | |
| * Copyright (c) 2012 John Resig, Jörn Zaefferer | |
| * Dual licensed under the MIT (MIT-LICENSE.txt) | |
| * or GPL (GPL-LICENSE.txt) licenses. | |
| */ | |
| /** Font Family and Sizes */ | |
| body { | |
| background-color: #191919; | |
| margin: 0; | |
| } | |
| strong, b { | |
| font-weight: normal; | |
| } | |
| #qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult { | |
| font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif; | |
| } | |
| #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; } | |
| #qunit-tests { font-size: smaller; } | |
| /** Resets */ | |
| #qunit-tests, #qunit-tests ol, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /** Header */ | |
| #qunit-header { | |
| padding: 0.5em 0 0.5em 1em; | |
| color: #8699a4; | |
| background-color: #0d3349; | |
| font-size: 1.5em; | |
| line-height: 1em; | |
| font-weight: normal; | |
| border-radius: 15px 15px 0 0; | |
| -moz-border-radius: 15px 15px 0 0; | |
| -webkit-border-top-right-radius: 15px; | |
| -webkit-border-top-left-radius: 15px; | |
| } | |
| #qunit-header a { | |
| text-decoration: none; | |
| color: #75715E; | |
| } | |
| #qunit-header a:hover, | |
| #qunit-header a:focus { | |
| color: #fff; | |
| } | |
| #qunit-header label { | |
| display: inline-block; | |
| } | |
| #qunit-banner { | |
| height: 5px; | |
| } | |
| #qunit-testrunner-toolbar { | |
| padding: 0.5em 0 0.5em 2em; | |
| color: #A6E22E; | |
| background-color: #eee; | |
| } | |
| #qunit-userAgent { | |
| padding: 0.5em 0 0.5em 2.5em; | |
| background-color: #2b81af; | |
| color: #fff; | |
| text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px; | |
| } | |
| /** Tests: Pass/Fail */ | |
| #qunit-tests { | |
| list-style: circle inside; | |
| } | |
| #qunit-tests li { | |
| padding: 0.3em 0.3em 0.3em 0.3em; | |
| border-bottom: 1px solid #191919; | |
| list-style-position: inside; | |
| } | |
| #qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running { | |
| display: none; | |
| } | |
| #qunit-tests li strong { | |
| cursor: pointer; | |
| padding-left: 10px; | |
| } | |
| #qunit-tests li a { | |
| padding: 0.5em; | |
| color: #75715E; | |
| text-decoration: none; | |
| } | |
| #qunit-tests li a:hover, | |
| #qunit-tests li a:focus { | |
| color: #75715E; | |
| } | |
| #qunit-tests ol { | |
| margin-top: 0.5em; | |
| padding: 0.5em; | |
| background-color: #191919; | |
| } | |
| #qunit-tests table { | |
| border-collapse: collapse; | |
| margin-top: .2em; | |
| } | |
| #qunit-tests th { | |
| text-align: right; | |
| vertical-align: top; | |
| padding: 0 .5em 0 0; | |
| } | |
| #qunit-tests td { | |
| vertical-align: top; | |
| } | |
| #qunit-tests pre { | |
| font-family: Monospace; | |
| font-size: 13px; | |
| margin: 0; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| #qunit-tests del { | |
| background-color: #A6E22E; | |
| color: #000; | |
| text-decoration: none; | |
| } | |
| #qunit-tests ins { | |
| background-color: #F92672; | |
| color: #000; | |
| text-decoration: none; | |
| } | |
| /*** Test Counts */ | |
| #qunit-tests b.counts { color: #E18124; } | |
| #qunit-tests b.passed { color: #A6E22E; } | |
| #qunit-tests b.failed { color: #F92672; } | |
| .test-source, .test-diff { color: #fff } | |
| .test-source>th, .test-diff>th { color: #FD971F } | |
| #qunit-tests li li { | |
| margin: 0.5em; | |
| padding: 0.4em 0.5em 0.4em 0.5em; | |
| background-color: #191919; | |
| border-bottom: none; | |
| list-style-position: inside; | |
| } | |
| /*** Passing Styles */ | |
| #qunit-tests li li.pass { | |
| color: #A6E22E; | |
| background-color: #191919; | |
| padding-left: 15px; | |
| border-left: 4px solid #A6E22E; | |
| } | |
| #qunit-tests .pass { | |
| padding: 0px; | |
| color: #fff; | |
| background-color: #121212; | |
| display: block; | |
| min-height: 22px; | |
| padding-top: 6px; | |
| } | |
| #qunit-tests .pass .test-name { color: #A6E22E; } | |
| #qunit-tests .pass .test-actual, | |
| #qunit-tests .pass .test-expected { color: #999999; } | |
| #qunit-banner.qunit-pass { background-color: #A6E22E; } | |
| /*** Failing Styles */ | |
| #qunit-tests li li.fail { | |
| color: #F92672; | |
| background-color: #191919; | |
| border-left: 4px solid #F92672; | |
| padding-left: 15px; | |
| white-space: pre; | |
| } | |
| #qunit-tests .fail { | |
| padding: 0px; | |
| color: #fff; | |
| background-color: #121212; | |
| display: block; | |
| min-height: 22px; | |
| padding-top: 6px; | |
| } | |
| #qunit-tests .fail .test-name, | |
| #qunit-tests .fail .module-name { font-weight: bold; color: #F92672; } | |
| #qunit-tests .fail .test-actual { color: #F92672; } | |
| #qunit-tests .fail .test-expected { color: #A6E22E; } | |
| #qunit-banner.qunit-fail { background-color: #F92672; } | |
| /** Result */ | |
| #qunit-testresult { | |
| padding: 4px 10px 4px 10px; | |
| margin-top: 3px; | |
| color: #fff; | |
| background-color: #191919; | |
| border-bottom: 1px solid #191919; | |
| } | |
| /** Fixture */ | |
| #qunit-fixture { | |
| position: absolute; | |
| top: -10000px; | |
| left: -10000px; | |
| width: 1000px; | |
| height: 1000px; | |
| } |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
It's ugly modification of default QUnit CSS. I use it in Aptana Studio's internal web browser, with Monokai theme (and custom background). My index.html
<body>looks like that:And this style will not work with default index.html