LCARStrek/browser/devtools/projecteditor/projecteditor.css

   1 /* vim:set ts=2 sw=2 sts=2 et: */
   2 /* This Source Code Form is subject to the terms of the Mozilla Public
   3  * License, v. 2.0. If a copy of the MPL was not distributed with this
   4  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   5
   6  :root {
   7   color: #FF9F00;
   8 }
   9
  10 .plugin-hidden {
  11   display: none;
  12 }
  13
  14 .arrow {
  15   list-style-image: url("chrome://global/skin/tree/twisty-closed.gif");
  16   width: 20px;
  17   height: 20px;
  18 }
  19
  20 .arrow[open] {
  21   list-style-image: url("chrome://global/skin/tree/twisty-open.gif");
  22 }
  23
  24 .arrow[invisible] {
  25   visibility: hidden;
  26 }
  27
  28 #projecteditor-menubar {
  29   display: none;
  30 }
  31
  32 #projecteditor-toolbar,
  33 #projecteditor-toolbar-bottom {
  34   display: none; /* For now don't show the status bars */
  35   min-height: 22px;
  36   height: 22px;
  37   background: #9C9CFF;
  38 }
  39
  40 #sources {
  41   overflow: auto;
  42 }
  43
  44 .sources-tree {
  45   overflow:auto;
  46   overflow-x: hidden;
  47   -moz-user-focus: normal;
  48
  49   /* Allows this to expand inside of parent xul element, while
  50      still supporting child flexbox elements, including ellipses. */
  51   -moz-box-flex: 1;
  52   display: block;
  53 }
  54
  55 .sources-tree input {
  56   margin: 2px;
  57   border: 1px solid #A09090;
  58 }
  59
  60 #main-deck .sources-tree {
  61   background: #000000;
  62   min-width: 100px;
  63 }
  64
  65 .entry {
  66   color: #FF9F00;
  67   display: flex;
  68   align-items: center;
  69 }
  70
  71 .entry .file-label {
  72   display: flex;
  73   flex: 1;
  74   align-items: center;
  75 }
  76
  77 .entry .file-icon {
  78   display: inline-block;
  79   background: url("file-icons-sheet@2x.png");
  80   background-size: 140px 15px;
  81   background-repeat: no-repeat;
  82   width: 20px;
  83   height: 15px;
  84   background-position: -40px 0;
  85   flex-shrink: 0;
  86 }
  87
  88 .entry .file-icon.icon-none {
  89   display: none;
  90 }
  91
  92 .entry .icon-css {
  93   background-position: 0 0;
  94 }
  95
  96 .entry .icon-js {
  97   background-position: -20px 0;
  98 }
  99
 100 .entry .icon-html {
 101   background-position: -40px 0;
 102 }
 103
 104 .entry .icon-file {
 105   background-position: -60px 0;
 106 }
 107
 108 .entry .icon-folder {
 109   background-position: -80px 0;
 110 }
 111
 112 .entry .icon-img {
 113   background-position: -100px 0;
 114 }
 115
 116 .entry .icon-manifest {
 117   background-position: -120px 0;
 118 }
 119
 120 .entry {
 121   border: none;
 122   box-shadow: none;
 123   white-space: nowrap;
 124   cursor: pointer;
 125 }
 126
 127 .entry:hover:not(.entry-group-title):not(.selected) {
 128   background: #404000;
 129 }
 130
 131 .entry.selected {
 132   background: #008484;
 133   color: #000000;
 134   outline: none;
 135 }
 136
 137 .entry-group-title {
 138   background: #A09090;
 139   color: #000000;
 140   font-weight: bold;
 141   font-size: 1.05em;
 142   line-height: 35px;
 143   padding: 0 10px;
 144 }
 145
 146 .sources-tree .entry-group-title .expander {
 147   display: none;
 148 }
 149
 150 .entry .expander {
 151   width: 16px;
 152   padding: 0;
 153 }
 154
 155 .tree-collapsed .children {
 156   display: none;
 157 }
 158
 159 /* Plugins */
 160
 161 #projecteditor-toolbar textbox {
 162   margin: 0;
 163 }
 164
 165 .projecteditor-basic-display {
 166   padding: 0 3px;
 167 }
 168
 169 /* App Manager */
 170 .project-name-label {
 171   font-weight: bold;
 172   padding-left: 10px;
 173   overflow: hidden;
 174   text-overflow: ellipsis;
 175 }
 176
 177 .project-flex {
 178   flex: 1;
 179 }
 180
 181 .project-image {
 182   max-height: 25px;
 183   margin-left: -10px;
 184 }
 185
 186 .project-image,
 187 .project-status,
 188 .project-options {
 189   flex-shrink: 0;
 190 }
 191
 192 .project-status {
 193   width: 10px;
 194   height: 10px;
 195   border-radius: 50%;
 196   border: solid 1px #9C9CFF;
 197   margin-right: 10px;
 198   color: #000000;
 199   visibility: hidden;
 200 }
 201
 202 .project-status[status=valid] {
 203   background: #008484;
 204   visibility: visible;
 205 }
 206
 207 .project-status[status=warning] {
 208   background: #FF9F00;
 209   visibility: visible;
 210 }
 211
 212 .project-status[status=error] {
 213   background: #FF0000;
 214   visibility: visible;
 215 }
 216
 217 /* Status Bar */
 218 .projecteditor-file-label {
 219   font-weight: bold;
 220   padding-left: 29px;
 221   padding-right: 10px;
 222   flex: 1;
 223 }
 224
 225 /* Image View */
 226 .editor-image {
 227   padding: 10px;
 228 }