panel.css.scss in superconductor-0.0.3

- old
+ new
@@ -1,77 +1,118 @@
-// Place all the styles related to the pages controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+aside#superconductor {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 30%;
+  margin: 0;
+  z-index: 99999;
+  font-family: arial, helvetica, verdana, sans-serif;
+  background-color: #000000;
+  background-color: rgba(0,0,0,0.7);
+  background: -webkit-linear-gradient(top, rgba(0,0,0,0.7), rgba(0,0,0,0.7), rgba(0,0,0,0.85));
+  border: none;
+  border-left: solid black 1px;
+  overflow: auto;
+  visibility: visible;
+  font-size: 10pt;
+  opacity: 1;
+  -webkit-transition: width 0.5s, opacity 0.5s;
+  box-shadow: 0 0 10px rgba(0,0,0,0.7);
+  &.expanded {
+    width: 100%;
+    menu[type=toolbar] button.expander:before { content: '\21E5' }
+    -webkit-transition: width 0.5s, opacity 0.5s;
+  }
+  &.closed {
+    visibility: hidden;
+    opacity: 0;
+    -webkit-transition: visibility 0s 0.5s, opacity 0.5s;
+  }
 
-body.debugging {
-  overflow-x: hidden;
-}
+  // **
 
-section#superconductor_panel {
-  details summary { cursor: pointer; }
-  color: white;
-  z-index: 998;
-  a, a:link, a:visited { color: white; }
-  -webkit-transition: opacity 0.5s;
-  display: none;
-  font-family: Verdana, Helvetica, sans-serif;
-  font-size: 13px;
-  color: white;
-  background-color: #333333;
-  position: fixed;
-  top: 0px;
-  bottom: 0px;
-  right: -300px;
-  width: 300px;
-  br { clear: both; height: 0px; }
-  background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#222222));
-  > details {
+  &, * {
+    color: white;
+  }
+  > h1, > h2, > h3, > h4, > h5, > h6, > p, > ul, > dl, > section {
+    text-align: left;
+    margin-left: 10px;
+  }
+  dl {
+    dt {
+      float: left;
+      min-width: 80px;
+      margin-left: 5px;
+    }
+    dd {
+      margin-left: 85px;
+    }
+  }
+  code {
+    white-space: pre;
+    font-family: "Lucida Sans Typewriter", monospace;
+    font-size: 9pt;
+  }
+  hr {
+    border: none;
+    border-top: dotted #555555 1px;
+  }
+  > hr {
+    margin-left: -15px;
+  }
+  details {
+    margin: 1px 20px;
+    &[open] {
+      border-left: dotted #555555 1px;
+      margin-left: 19px;
+      margin-bottom: 1em;
+      & > summary {
+        background-color: rgba(50,50,50,0.5);
+      }
+    }
     > summary {
-      background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#000000));
+      outline: none;
+      border: dotted #555555 1px;
+      padding: 2px;
+      overflow: hidden;
       white-space: nowrap;
-      padding: 10px;
-      > a { float: right; }
+      text-overflow: ellipsis;
+      margin-left: -15px;
+      cursor: pointer;
     }
-    dl {
-      padding: 5px 10px 10px 10px;
-      margin: 0px 5px 0px 5px;
-      dt {
-        font-weight: bold;
-        clear: left;
-        float: left;
-        min-width: 100px;
-        &:after { content: ':' }
-      }
-      dd {
-        &.nowrap {
+    &.methods {
+      ul {
+        li {
+          width: 200px;
+          float: left;
           white-space: nowrap;
-          overflow: hidden;
           text-overflow: ellipsis;
+          overflow: hidden;
         }
-        > details {
-        }
+        &:after { display: block; content: ''; clear: both; }
       }
     }
+    ul.array {
+      margin: 0.2em;
+      padding-left: 1.75em;
+    }
   }
-  textarea {
-    background-color: #333333;
-    color: white;
-    width: 99%;
-    max-width: 99%;
-    height: 300px;
-    line-height: 16px;
-  }
-  &.resizing {
-    opacity: 0.85;
-  }
-  & .resizer {
-    position: absolute;
-    width: 10px;
-    height: 100%;
-    margin-left: -10px;
-    padding: 0px;
-    background: -webkit-gradient(linear, left top, right top, from(transparent), to(#111111));
-    background: gradient(linear, left top, right top, from(#FFFFFF), to(#111111));
-    cursor: w-resize;
-    border: none;
+  > menu[type=toolbar] {
+    margin: 0;
+    position: fixed;
+    top: 0;
+    right: 0;
+    button {
+      background: #333333;
+      border: solid #FFFFFF 1px;
+      color: #FFFFFF;
+      border-radius: 0;
+      padding: 2px;
+      width: 25px;
+      height: 25px;
+      font-size: 16px;
+      margin: 2px;
+      &.expander:before { content: '\21E4' }
+    }
   }
 }