showoff 0.9.11.1 → 0.10.0

data/public/css/showoff.css

@@ -13,6 +13,16 @@
       padding:0;
   }
 
+  /* UI elements */
+  #topbar,
+  #sidebar,
+  #statusbar,
+  #bottom,
+  #feedbackSidebar {
+    font-family: 'Open Sans', 'Lucida Grande', helvetica, arial, sans-serif;
+    font-size: 0.55em;
+  }
+
   #preso, .slide {
       background: #fff;
       width: 1024px;
@@ -72,6 +82,19 @@
   }
 }
 
+.content {
+  position: relative;
+  /* for some reason, setting top to 50% is pushing the content too far down, no idea why */
+  top: 42%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+}
+
+.slide .center {
+  text-align: center;
+}
+
 /* plain (non-bullet) text */
 .content > p,
 .content > form > p {
@@ -90,20 +113,18 @@
     margin: 2em;
 }
 
+/* prevent large images from getting too out of hand */
+.content img {
+  max-width: 100%;
+  max-height: 100%;
+}
+
 .center img {
     display:block;
     margin-left:auto;
     margin-right:auto;
 }
 
-.slide .center {
-  height: 740px;
-  width: 1020px;
-  display: table-cell;
-  text-align: center;
-  vertical-align: middle;
-}
-
 /* numbered lists are numbered */
 .content ol {
     margin-left: 40px;
@@ -161,7 +182,7 @@
 .bullets ul ul > li { font-size: 80%; }
 
 .content ul li.incremental.hidden {
-  display: none;
+  visibility: hidden;
 }
 
 .commandline pre {
@@ -250,19 +271,95 @@ img#disconnected {
 }
 
 #help {
-    background: #9f9;
-    position: absolute;
-    right: 80px;
-    display: none;
-    z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
-}
-#help table tr td.key {
-    text-align: right;
-    border-right: 2px solid #8b8;
-    padding-right: 4px;
-    font-weight: bold;
+  display: none;
+  position:absolute;
+  top: 5%;
+  left: 25%;
+  width: 50%;
+  max-height: 90%;
+  z-index: 2147483647;
+  padding: 0 16px 16px 16px;
+  border-radius: 4px;
+  -webkit-box-shadow:0 0 25px rgba(0,0,0,0.35);
+  -moz-box-shadow:0 0 25px rgba(0,0,0,0.35);
+  box-shadow:0 0 25px rgba(0,0,0,0.35);
+  background-color: #fff;
 }
 
+  #help div {
+    padding: 6px 0;
+  }
+
+    #help h1 {
+      font-size: 1.25em;
+      border-bottom: 2px solid #ccc;
+    }
+
+    #help div + div {
+      border-top: 1px solid #eee;
+    }
+
+    #help .description,
+    #help .action,
+    #help .hotkeys {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    #help .description {
+      width: 30%;
+    }
+
+    #help .action {
+      width: 15%;
+      font-size: 0.75em;
+      color: gray;
+    }
+
+    #help .hotkeys {
+      width: 25%;
+    }
+
+    #help .hotkeys .key {
+      border: 1px solid #ccc;
+      background-color: #dfdfdf;
+      border-radius: 0.25em;
+      padding: 0.15em 0.5em;
+      margin: 0.25em;
+    }
+
+#presenterPopup {
+  display: none;
+  position: absolute;
+  z-index: 2147483647;
+  top: 24px;
+  left: 25%;
+  max-height: 80%;
+  width: 50%;
+  border-radius: 0 0 .5em .5em;
+  border-bottom: 8px solid #222222;
+  font-size: .65em;
+  background-color: #222222;
+  overflow: auto;
+}
+
+  #presenterPopup h1,
+  #presenterPopup h3 {
+   font-size: 2em;
+   color: #ffffff;
+  }
+
+  #presenterPopup a {
+    margin-left: 12px;
+    color: #ffffff;
+  }
+
+  #presenterPopup ul#downloads {
+    margin-left: 0;
+    list-style-type: none;
+    font-size: 1.25em;
+  }
+
 /**********************************
  ***       Table styling        ***
  **********************************/
@@ -392,7 +489,8 @@ img#disconnected {
 }
 
 .fg-menu-container {
-    z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
+  z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
+  font-size: 0.8em;
 }
 
 .fg-button { clear:left; margin:0 4px 40px 20px; padding: .4em 1em; text-decoration:none !important; cursor:pointer; position: relative; text-align: center; zoom: 1; }
@@ -403,74 +501,15 @@ a.fg-button { float:left; }
 
 .fg-button.ui-state-loading .ui-icon { background: url(spinner_bar.gif) no-repeat 0 0; }
 
-#navmenu, #stylemenu {
+#navmenu {
   position: absolute;
   top: 10px;
   left: 10px;
   width: 50px;
+  font-size: 0.8em;
   z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
 }
 
-.code .c { color: #999988; font-style: italic } /* Comment */
-.code .err { color: #a61717; background-color: #e3d2d2 } /* Error */
-.code .k { font-weight: bold } /* Keyword */
-.code .o { font-weight: bold } /* Operator */
-.code .cm { color: #999988; font-style: italic } /* Comment.Multiline */
-.code .cp { color: #999999; font-weight: bold } /* Comment.Preproc */
-.code .c1 { color: #999988; font-style: italic } /* Comment.Single */
-.code .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */
-.code .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */
-.code .gd .x { color: #000000; background-color: #ffaaaa } /* Generic.Deleted.Specific */
-.code .ge { font-style: italic } /* Generic.Emph */
-.code .gr { color: #aa0000 } /* Generic.Error */
-.code .gh { color: #999999 } /* Generic.Heading */
-.code .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */
-.code .gi .x { color: #000000; background-color: #aaffaa } /* Generic.Inserted.Specific */
-.code .go { color: #888888 } /* Generic.Output */
-.code .gp { color: #555555 } /* Generic.Prompt */
-.code .gs { font-weight: bold } /* Generic.Strong */
-.code .gu { color: #aaaaaa } /* Generic.Subheading */
-.code .gt { color: #aa0000 } /* Generic.Traceback */
-.code .kc { font-weight: bold } /* Keyword.Constant */
-.code .kd { font-weight: bold } /* Keyword.Declaration */
-.code .kp { font-weight: bold } /* Keyword.Pseudo */
-.code .kr { font-weight: bold } /* Keyword.Reserved */
-.code .kt { color: #445588; font-weight: bold } /* Keyword.Type */
-.code .m { color: #009999 } /* Literal.Number */
-.code .s { color: #d14 } /* Literal.String */
-.code .na { color: #008080 } /* Name.Attribute */
-.code .nb { color: #0086B3 } /* Name.Builtin */
-.code .nc { color: #445588; font-weight: bold } /* Name.Class */
-.code .no { color: #008080 } /* Name.Constant */
-.code .ni { color: #800080 } /* Name.Entity */
-.code .ne { color: #990000; font-weight: bold } /* Name.Exception */
-.code .nf { color: #990000; font-weight: bold } /* Name.Function */
-.code .nn { color: #555555 } /* Name.Namespace */
-.code .nt { color: #000080 } /* Name.Tag */
-.code .nv { color: #008080 } /* Name.Variable */
-.code .ow { font-weight: bold } /* Operator.Word */
-.code .w { color: #bbbbbb } /* Text.Whitespace */
-.code .mf { color: #009999 } /* Literal.Number.Float */
-.code .mh { color: #009999 } /* Literal.Number.Hex */
-.code .mi { color: #009999 } /* Literal.Number.Integer */
-.code .mo { color: #009999 } /* Literal.Number.Oct */
-.code .sb { color: #d14 } /* Literal.String.Backtick */
-.code .sc { color: #d14 } /* Literal.String.Char */
-.code .sd { color: #d14 } /* Literal.String.Doc */
-.code .s2 { color: #d14 } /* Literal.String.Double */
-.code .se { color: #d14 } /* Literal.String.Escape */
-.code .sh { color: #d14 } /* Literal.String.Heredoc */
-.code .si { color: #d14 } /* Literal.String.Interpol */
-.code .sx { color: #d14 } /* Literal.String.Other */
-.code .sr { color: #009926 } /* Literal.String.Regex */
-.code .s1 { color: #d14 } /* Literal.String.Single */
-.code .ss { color: #990073 } /* Literal.String.Symbol */
-.code .bp { color: #999999 } /* Name.Builtin.Pseudo */
-.code .vc { color: #008080 } /* Name.Variable.Class */
-.code .vg { color: #008080 } /* Name.Variable.Global */
-.code .vi { color: #008080 } /* Name.Variable.Instance */
-.code .il { color: #009999 } /* Literal.Number.Integer.Long */
-
 .results {
   background-color:#002200;
   color:#00AA00;
@@ -485,13 +524,38 @@ a.fg-button { float:left; }
   z-index: 2147483647; /* max, see http://www.puidokas.com/max-z-index/ */
 }
 
-.executing {
-  color:#0000FF !important;
-  background-color: yellow;
+.results pre {
+  margin: 0;
+  padding: 0;
+}
+
+/* Add a Shell "code highlighting" style to resemble the look of a terminal window. */
+.content pre.highlight code.language-shell {
+  display: block;
+  background-color: black;
+  color: green;
+  border: 2px solid #ddd;
+  padding: 0.5em;
+  overflow: hidden;
+}
+
+/* executable code blocks */
+code.execute {
+  cursor: context-menu;
+  background-image: url(run_code.png);
+  background-position: right 5px top 5px;
+  background-repeat: no-repeat;
+  display: block;
+  min-height: 42px;
+}
+
+code.executing {
+  opacity: 0.5;
+  background-image: url(run_code-dim.png);
 }
 
-.executing:hover {
-  cursor: pointer;
+code.executing:hover {
+  cursor: wait;
 }
 
 #tips, #preshow_timer {
@@ -641,15 +705,15 @@ body#download {
   overflow:auto;
   height: auto;
 }
-#download h1 {
+body#download h1 {
   font-size: 3em;
 }
-ul#downloads {
+body#download ul#downloads {
     margin-left:  20%;
     font-size: large;
     list-style-type: disc;
 }
-ul#downloads li {
+body#download ul#downloads li {
     margin: 0.5em;
 }
 
@@ -745,43 +809,6 @@ body#stats {
  *** end stats page ***
  **********************/
 
-/**********************
- ** presenter popups **
- **********************/
-.tipsy-inner { text-align: left; max-width: 500px; }
-.tipsy-inner h1 { font-size: 1.5em; }
-.tipsy-inner h2 { font-size: 1.35em; }
-.tipsy-inner h3 { font-size: 1.25em; }
-.tipsy-inner a { color: #0d8dfd; }
-.tipsy-inner a:hover { color: #04ffff; }
-
-.tipsy-inner p.newpage { text-align: right; padding-bottom: 0.25em; }
-.tipsy-inner p.newpage a {
-  color: white;
-  padding: 0.25em;
-  text-decoration: none;
-  -moz-border-radius: 5px;
-  -webkit-border-radius: 5px;
-  -khtml-border-radius: 5px;
-  border-radius: 5px;
-  border: 1px solid black;
-}
-.tipsy-inner p.newpage a:hover {
-  font-weight: bold;
-  background-color: #222;
-  border: 1px solid white;
-}
-
-
-.tipsy-inner #stats { min-width: 450px; }
-.tipsy-inner #stats .row { color: black; }
-.tipsy-inner #stats #all { max-height: 325px; overflow: auto; }
-
-.tipsy-inner ul#downloads { font-size: 1em; margin-left: 0.25em; }
-/************************
- * end presenter popups *
- ************************/
-
 /* iPhone */
 /* Portrait */
 @media screen and (max-width: 320px)