From 41ada302eca8b3ed19159bc411b71aa08b43b50d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 21 Oct 2011 00:37:01 -0700 Subject: [PATCH] tweaking prettify styles to introduce dark theme --- .../js/google-code-prettify/prettify.css | 68 +++++++++++++-- docs/index.html | 86 +++++++++---------- 2 files changed, 104 insertions(+), 50 deletions(-) diff --git a/docs/assets/js/google-code-prettify/prettify.css b/docs/assets/js/google-code-prettify/prettify.css index da6b6e7e17..d82028f3d5 100644 --- a/docs/assets/js/google-code-prettify/prettify.css +++ b/docs/assets/js/google-code-prettify/prettify.css @@ -6,18 +6,29 @@ .kwd, .tag { color: #195f91; } .typ, .atn, .dec, .var { color: #CB4B16; } .pln { color: #93a1a1; } -pre.prettyprint { - background: #fefbf3; +.prettyprint { + background-color: #fefbf3; padding: 9px; border: 1px solid rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.1); - -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1); - box-shadow: 0 1px 2px rgba(0,0,0,.1); + -moz-box-shadow: 0 1px 2px rgba(0,0,0,.1); + box-shadow: 0 1px 2px rgba(0,0,0,.1); } /* Specify class=linenums on a pre to get line numbering */ -ol.linenums { margin: 0 0 0 40px; } /* IE indents via margin-left */ -ol.linenums li { color: rgba(0,0,0,.15); line-height: 20px; } +.linenums { + margin: 0 0 0 40px; +} +/* IE indents via margin-left */ +.linenums li { + margin-left: -5px; + padding: 0 5px; + color: rgba(0,0,0,.15); + line-height: 20px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; +} /* Alternate shading for lines */ li.L1, li.L3, li.L5, li.L7, li.L9 { } @@ -38,4 +49,47 @@ $violet: #6c71c4; $blue: #268bd2; $cyan: #2aa198; $green: #859900; -*/ \ No newline at end of file +*/ + + +/* +#1d1f21 Background +#282a2e Current Line +#373b41 Selection +#c5c8c6 Foreground +#969896 Comment +#cc6666 Red +#de935f Orange +#f0c674 Yellow +#b5bd68 Green +#8abeb7 Aqua +#81a2be Blue +#b294bb Purple +*/ + + +/* DARK THEME */ +/* ---------- */ + +.prettyprint-dark { + background-color: #1d1f21; + border: 0; + padding: 10px; +} +.prettyprint-dark .linenums li { + color: #444; +} +.prettyprint-dark .linenums li:hover { + background-color: #282a2e; +} +/* tags in html */ +.prettyprint-dark .kwd, +.prettyprint-dark .tag { color: #cc6666; } +/* html attr */ +.prettyprint-dark .typ, +.prettyprint-dark .atn, +.prettyprint-dark .dec, +.prettyprint-dark .var { color: #de935f; } +/* html attr values */ +.prettyprint-dark .str, +.prettyprint-dark .atv { color: #b5bd68; } diff --git a/docs/index.html b/docs/index.html index 07035f06de..8c09793753 100644 --- a/docs/index.html +++ b/docs/index.html @@ -175,7 +175,7 @@

Example grid markup

As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.

-
+
 <div class="row">
   <div class="span6">
     ...
@@ -327,7 +327,7 @@
     

       
Inside the grid

       
The variables needed to modify the grid system currently all reside in variables.less.

-      
+      

@@ -601,7 +601,7 @@
     

       
Presenting code

       
Code, blocks of or just snippets inline, can be displayed with style just by wrapping in the right tag. For blocks of code spanning multiple lines, use the <pre> element. For inline code, use the <code> element.

-      

         
           

             Variable

+      

@@ -651,7 +651,7 @@
     

       
Label anything

       
Ever needed one of those fancy New! or Important flags when writing code? Well, now you have them. Here's what's included by default:

-      

         
           

             Element

+      

@@ -903,7 +903,7 @@
 </table>
Example: Zebra-striped
Get a little fancy with your tables by adding zebra-striping—just add the .zebra-striped class.

-      

         
           

             Label
       
       

+      

@@ -949,7 +949,7 @@
       
Note: Zebra-striping is a progressive enhancement not available for older browsers like IE8 and below.
 <table class="zebra-striped">
-...
+  ...
 </table>
Example: Zebra-striped w/ TableSorter.js
Taking the previous example, we improve the usefulness of our tables by providing sorting functionality via jQuery and the Tablesorter plugin. Click any column’s header to change the sort.

@@ -1763,43 +1763,43 @@ Lorem ipsum dolar sit amet illo error ipsum verita
      

       
What's included

        
Bring some of Bootstrap's primary components to life with new custom plugins that work with jQuery and Ender. We encourage you to extend and modify them to fit your specific development needs.

-       

         
           

             #
 
       
       

-         
-           
-             
-             
-           
-         
-         
-           
-             
-             
-           
-           
-             
-             
-           
-           
-             
-             
-           
-           
-             
-             
-           
-           
+        
FileDescription
bootstrap-modal.jsOur Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.
bootstrap-alerts.jsThe alert plugin is a super tiny class for adding close functionality to alerts.
bootstrap-dropdown.jsThis plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.
bootstrap-scrollspy.jsThe ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.

+          
+            
+              
+              
+            
+          
+          
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+            
-             
-           
-           
-             
-             
-           
-           
-             
-             
-           
-         
+              
+            
+            
+              
+              
+            
+            
+              
+              
+            
+          
FileDescription
bootstrap-modal.jsOur Modal plugin is a super slim take on the traditional modal js plugin! We took special care to include only the bare functionality that we require at twitter.
bootstrap-alerts.jsThe alert plugin is a super tiny class for adding close functionality to alerts.
bootstrap-dropdown.jsThis plugin is for adding dropdown interaction to the bootstrap topbar or tabbed navigations.
bootstrap-scrollspy.jsThe ScrollSpy plugin is for adding an auto updating nav based on scroll position to the bootstrap topbar.

              bootstrap-tabs.jsThis plugin adds quick, dynamic tab and pill functionality for cycling through local content.
bootstrap-twipsy.jsBased on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!
bootstrap-popover.jsThe popover plugin provides a simple interface for adding popovers to your application. It extends the boostrap-twipsy.js plugin, so be sure to grab that file as well when including popovers in your project!
This plugin adds quick, dynamic tab and pill functionality for cycling through local content.
bootstrap-twipsy.jsBased on the excellent jQuery.tipsy plugin written by Jason Frame; twipsy is an updated version, which doesn't rely on images, uses css3 for animations, and data-attributes for local title storage!
bootstrap-popover.jsThe popover plugin provides a simple interface for adding popovers to your application. It extends the boostrap-twipsy.js plugin, so be sure to grab that file as well when including popovers in your project!

        

        
Is javascript necessary?

        
Nope! Bootstrap is designed first and foremost to be a CSS library. This javascript provides a basic interactive layer on top of the included styles.

@@ -1922,7 +1922,7 @@ Lorem ipsum dolar sit amet illo error ipsum verita
     
Compiling Less

     
After modifying the .less files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.

     
Ways to compile

-    
+    

       
         

           Method