comfypress 0.1.3

data/app/assets/stylesheets/comfypress/base.css.sass

@@ -0,0 +1,333 @@
+html, body#comfy
+  height: 100%
+  
+body#comfy
+  background-color: #252525
+  
+  // -- Containers ----------------------------------------------------------
+  .body-wrapper
+    height: 100%
+    .left-column
+      width: 175px
+      float: left
+      .left-column-content
+        padding: 25px 0px
+        width: 175px
+        position: fixed
+    .center-column
+      position: relative
+      margin: 0px 250px 0px 175px
+      min-height: 100%
+      background-color: #fff
+      .center-column-content
+        padding: 25px
+    .right-column
+      width: 250px
+      float: right
+      .right-column-content
+        padding: 25px 10px
+        width: 250px
+        position: fixed
+  
+  // -- Navigation ----------------------------------------------------------
+  .left-column-content ul.navigation
+    list-style: none
+    margin: 0
+    a
+      position: relative
+      display: block
+      padding: 7px 15px
+      color: #777
+      border-bottom: 1px solid #1a1a1a
+      text-decoration: none
+    a:hover, a.active
+      color: #ddd
+    a.active
+      background-color: #1f1f1f
+      box-shadow: inset 0px 0px 10px #000
+    a.active:after
+      position: absolute
+      top: 10px
+      right: -8px
+      z-index: 9999
+      content: ''
+      display: block
+      height: 16px
+      width: 8px
+      background: transparent url("/assets/comfypress/nav_arrow.png")
+  
+  // -- Right Side Boxes ----------------------------------------------------
+  .right-column-content
+    .box
+      background-color: #fff
+      padding: 5px
+      border-radius: 3px
+      margin-bottom: 10px
+      overflow: auto
+    #mirrors select
+      margin-bottom: 0
+    #form-save
+      label
+        padding-top: 0
+        
+  // -- File Uploads --------------------------------------------------------
+  .right-column-content .file-uploader
+    form
+      margin-bottom: 5px
+      .btn-file
+        width: 100%
+        position: relative
+        overflow: hidden
+        input
+          position: absolute
+          top: 0
+          left: 0
+          margin: 0
+          font-size: 23px
+          cursor: pointer
+          opacity: 0
+    .uploaded-files
+      margin: 0 -5px
+      max-height: 500px
+      overflow: auto
+      padding: 0 5px
+      .file
+        overflow: hidden
+        padding-bottom: 2px
+        &:hover .file-info
+          display: block
+        .file-name
+          overflow: hidden
+          border: 1px solid #ddd
+          border-radius: 3px
+          padding: 0 7px
+          &:hover
+            background-color: #f5f5f5
+          a.filename
+            display: block
+            margin-right: 20px
+            white-space: nowrap
+            overflow: hidden
+            font-size: 11px
+          a.delete
+            float: right
+        .file-info
+          display: none
+          padding: 1px 0
+          .thumb
+            height: 60px
+            width: 80px
+            float: left
+            background: url("/assets/comfypress/checkerboard.gif")
+          .details
+            margin-left: 85px
+            font-size: 11px
+            line-height: 16px
+            input
+              padding: 2px
+              margin: 0
+              font-size: 11px
+              width: 100%
+    iframe#file-upload-frame
+      display: none
+    
+  // -- Common Elements -----------------------------------------------------
+  table.table, ul.list
+    .icon
+      width: 28px
+      height: 28px
+      background: url("/assets/comfypress/icon_page.gif")
+      .dragger
+        width: 28px
+        height: 28px
+        background: url("/assets/comfypress/icon_move.gif")
+        cursor: move
+        display: none
+        span
+          display: none
+      &:hover .dragger
+        display: block
+    div.category
+      display: inline-block
+      vertical-align: top
+      font-size: 11px
+      line-height: 11px
+      border: 1px solid #ddd
+      padding: 2px 5px
+      background-color: #fff
+      border-radius: 3px
+      border-left-width: 7px
+  .item-title
+    color: #000
+    a
+      color: #000
+  .item-meta
+    font-size: 11px
+    line-height: 14px
+  
+  // -- Sofa Version --------------------------------------------------------
+  .center-column .body-footer
+    position: absolute
+    background: #000
+    bottom: 0px
+    left: -175px
+    width: 175px
+    padding: 5px 10px
+    font-size: 10px
+    a
+      color: #484848
+      text-decoration: none
+    a:hover
+      color: #f1f1f1
+    span.version
+      color: #f1f1f1
+      margin-left: 2px
+      
+  // -- Categories Widget ---------------------------------------------------
+  .categories-widget
+    background: #f5f5f5
+    border-radius: 3px
+    border: 1px solid #ddd
+    padding: 5px 10px
+    margin-bottom: 10px
+    .categories-widget-label
+      width: 100px
+      float: left
+      color: #777
+    .categories
+      overflow: hidden
+      margin: 0px 50px 0px 110px
+      &.editable
+        display: none
+      .category
+        display: inline-block
+        font-size: 11px
+        line-height: 20px
+        border-radius: 3px
+        background-color: #fff
+        padding: 0 7px
+        border: 1px solid #eee
+        &.active
+          border-color: #a5a5a5
+      form
+        display: inline-block
+        vertical-align: middle
+    .action-links
+      float: right
+      margin-left: 10px
+      .done
+        display: none
+    form
+      margin: 0
+      .input-append
+        margin: 0 
+        input[type=text]
+          width: 125px
+          font-size: 11px
+          line-height: 14px
+          padding: 3px
+          
+  // -- Sortable List -------------------------------------------------------
+  ul.list
+    margin: 0
+    list-style: none
+    .item
+      overflow: hidden
+      padding: 5px
+      border-radius: 3px
+      margin-bottom: 5px
+      border: 1px solid #ddd
+      &:hover
+        background-color: #f5f5f5
+      .toggle
+        float: left
+        height: 28px
+        width: 28px
+        &.open a
+          background-image: url("/assets/comfypress/arrow_bottom.gif")
+        a
+          display: block
+          height: 28px
+          width: 28px
+          background: url("/assets/comfypress/arrow_right.gif") center center no-repeat
+          span
+            display: none
+      .icon
+        float: left
+        &.draft
+          background: url("/assets/comfypress/icon_draft.gif")
+      .item-content
+        margin-left: 60px
+        a.item-label
+          color: #000
+      .btn-group
+        float: right
+    li ul
+      list-style: none
+      margin: 0 0 0 28px
+          
+  // -- Sites ---------------------------------------------------------------
+  &.c-cms-admin-sites
+    table .icon
+      background: url("/assets/comfypress/icon_site.gif")
+      
+  // -- Layouts -------------------------------------------------------------
+  &.c-cms-admin-layouts
+    ul.list
+      .item
+        .icon
+          background: url("/assets/comfypress/icon_layout.gif")
+        .item-content
+          margin-left: 35px
+      
+  // -- Pages ---------------------------------------------------------------
+  &.c-cms-admin-pages
+    #form-blocks
+      ul.nav-tabs
+        margin-left: 180px
+      .no-tags
+        margin-left: 180px
+        text-align: center
+        padding: 10px
+        background-color: #f5f5f5
+        margin-bottom: 10px
+      .files
+        margin: 5px 0
+        .file
+          display: inline-block
+          border: 1px solid #ccc
+          border-radius: 3px
+          padding: 0 5px
+          margin-bottom: 5px
+          font-size: 12px
+        
+  // -- Snippets ------------------------------------------------------------
+  &.c-cms-admin-snippets
+    table .icon
+      background: url("/assets/comfypress/icon_snippet.gif")
+      
+  // -- Files ---------------------------------------------------------------
+  &.c-cms-admin-files
+    table .icon
+      background: url("/assets/comfypress/icon_file.gif")
+    
+  // -- Revisions -----------------------------------------------------------
+  &.c-cms-admin-revisions
+    table
+      th
+        min-width: 175px
+      td.main
+        width: 50%
+    .box.revisions
+      a
+        font-size: 11px
+        border: 1px solid #ddd
+        display: block
+        padding: 0 7px
+        border-radius: 3px
+        margin-bottom: 2px
+      a:hover
+        background-color: #f5f5f5
+
+.hidden
+  display: none

data/app/assets/stylesheets/comfypress/bootstrap_overrides.css.sass

@@ -0,0 +1,45 @@
+$form_fields: "select, textarea, input[type='text'], input[type='password'], input[type='datetime'], input[type='datetime-local'], input[type='date'], input[type='month'], input[type='time'], input[type='week'], input[type='number'], input[type='email'], input[type='url'], input[type='search'], input[type='tel'], input[type='color'], .uneditable-input"
+
+body#comfy
+  
+  h1, h2, h3, h4, h5, .page-header
+    margin-top: 0
+  
+  table.table
+    th, td
+      white-space: nowrap
+    th.main, td.main
+      width: 100%
+      white-space: normal
+    td.action-links
+      text-align: right
+      
+  [class^="icon-"], [class*=" icon-"]
+    background-image: url("/assets/comfypress/bootstrap/glyphicons-halflings.png")
+  .icon-white
+    background-image: url("/assets/comfypress/bootstrap/glyphicons-halflings-white.png")
+  
+  // -- Setting up border-box sizing, letting fields size themselves --------
+  *
+    outline: none
+    -moz-box-sizing: border-box
+    -webkit-box-sizing: border-box
+    box-sizing: border-box
+  #{$form_fields}
+    height: auto
+    padding: 6px
+  form.formatted.form-horizontal
+    .control-group
+      margin-bottom: 5px
+      .controls
+        #{$form_fields}
+          width: 100%
+        textarea
+          height: 400px
+        textarea.short
+          height: 100px
+  
+  // -- Alerts --------------------------------------------------------------
+  .alert
+    margin-bottom: 0px
+    text-align: center

data/app/assets/stylesheets/comfypress/codemirror_overrides.css.sass

@@ -0,0 +1,27 @@
+body#comfy
+
+  .CodeMirror, .CodeMirror *
+    -moz-box-sizing: content-box
+    -webkit-box-sizing: content-box
+    box-sizing: content-box
+  .CodeMirror
+    height: 400px
+    border: 1px solid #ccc
+    border-radius: 3px
+    padding: 6px
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
+    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s
+    -moz-transition: border linear 0.2s, box-shadow linear 0.2s
+    -ms-transition: border linear 0.2s, box-shadow linear 0.2s
+    -o-transition: border linear 0.2s, box-shadow linear 0.2s
+    transition: border linear 0.2s, box-shadow linear 0.2s
+  .CodeMirror-focused
+    border-color: rgba(82, 168, 236, 0.8)
+    outline: 0
+    outline: thin dotted \9
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)
+    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6)
+    

data/app/assets/stylesheets/comfypress/lib/bootstrap-datetimepicker.css

@@ -0,0 +1,9 @@
+/*!
+ * Datetimepicker for Bootstrap
+ *
+ * Copyright 2012 Stefan Petre
+ * Improvements by Andrew Rowls
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ */.datetimepicker{padding:4px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;direction:ltr}.datetimepicker-inline{width:220px}.datetimepicker.datetimepicker-rtl{direction:rtl}.datetimepicker.datetimepicker-rtl table tr td span{float:right}.datetimepicker-dropdown,.datetimepicker-dropdown-left{top:0;left:0}.datetimepicker-dropdown:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,0.2);position:absolute;top:-7px;left:6px}.datetimepicker-dropdown:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;left:7px}.datetimepicker-dropdown-left:before{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-bottom-color:rgba(0,0,0,0.2);position:absolute;top:-7px;right:6px}.datetimepicker-dropdown-left:after{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;top:-6px;right:7px}.datetimepicker>div{display:none}.datetimepicker.minutes div.datetimepicker-minutes{display:block}.datetimepicker.hours div.datetimepicker-hours{display:block}.datetimepicker.days div.datetimepicker-days{display:block}.datetimepicker.months div.datetimepicker-months{display:block}.datetimepicker.years div.datetimepicker-years{display:block}.datetimepicker table{margin:0}.datetimepicker td,.datetimepicker th{text-align:center;width:20px;height:20px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;border:0}.table-striped .datetimepicker table tr td,.table-striped .datetimepicker table tr th{background-color:transparent}.datetimepicker table tr td.minute:hover{background:#eee;cursor:pointer}.datetimepicker table tr td.hour:hover{background:#eee;cursor:pointer}.datetimepicker table tr td.day:hover{background:#eee;cursor:pointer}.datetimepicker table tr td.old,.datetimepicker table tr td.new{color:#999}.datetimepicker table tr td.disabled,.datetimepicker table tr td.disabled:hover{background:0;color:#999;cursor:default}.datetimepicker table tr td.today,.datetimepicker table tr td.today:hover,.datetimepicker table tr td.today.disabled,.datetimepicker table tr td.today.disabled:hover{background-color:#fde19a;background-image:-moz-linear-gradient(top,#fdd49a,#fdf59a);background-image:-ms-linear-gradient(top,#fdd49a,#fdf59a);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fdd49a),to(#fdf59a));background-image:-webkit-linear-gradient(top,#fdd49a,#fdf59a);background-image:-o-linear-gradient(top,#fdd49a,#fdf59a);background-image:linear-gradient(top,#fdd49a,#fdf59a);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a',endColorstr='#fdf59a',GradientType=0);border-color:#fdf59a #fdf59a #fbed50;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false)}.datetimepicker table tr td.today:hover,.datetimepicker table tr td.today:hover:hover,.datetimepicker table tr td.today.disabled:hover,.datetimepicker table tr td.today.disabled:hover:hover,.datetimepicker table tr td.today:active,.datetimepicker table tr td.today:hover:active,.datetimepicker table tr td.today.disabled:active,.datetimepicker table tr td.today.disabled:hover:active,.datetimepicker table tr td.today.active,.datetimepicker table tr td.today:hover.active,.datetimepicker table tr td.today.disabled.active,.datetimepicker table tr td.today.disabled:hover.active,.datetimepicker table tr td.today.disabled,.datetimepicker table tr td.today:hover.disabled,.datetimepicker table tr td.today.disabled.disabled,.datetimepicker table tr td.today.disabled:hover.disabled,.datetimepicker table tr td.today[disabled],.datetimepicker table tr td.today:hover[disabled],.datetimepicker table tr td.today.disabled[disabled],.datetimepicker table tr td.today.disabled:hover[disabled]{background-color:#fdf59a}.datetimepicker table tr td.today:active,.datetimepicker table tr td.today:hover:active,.datetimepicker table tr td.today.disabled:active,.datetimepicker table tr td.today.disabled:hover:active,.datetimepicker table tr td.today.active,.datetimepicker table tr td.today:hover.active,.datetimepicker table tr td.today.disabled.active,.datetimepicker table tr td.today.disabled:hover.active{background-color:#fbf069 \9}.datetimepicker table tr td.active,.datetimepicker table tr td.active:hover,.datetimepicker table tr td.active.disabled,.datetimepicker table tr td.active.disabled:hover{background-color:#006dcc;background-image:-moz-linear-gradient(top,#08c,#04c);background-image:-ms-linear-gradient(top,#08c,#04c);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));background-image:-webkit-linear-gradient(top,#08c,#04c);background-image:-o-linear-gradient(top,#08c,#04c);background-image:linear-gradient(top,#08c,#04c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc',endColorstr='#0044cc',GradientType=0);border-color:#04c #04c #002a80;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.datetimepicker table tr td.active:hover,.datetimepicker table tr td.active:hover:hover,.datetimepicker table tr td.active.disabled:hover,.datetimepicker table tr td.active.disabled:hover:hover,.datetimepicker table tr td.active:active,.datetimepicker table tr td.active:hover:active,.datetimepicker table tr td.active.disabled:active,.datetimepicker table tr td.active.disabled:hover:active,.datetimepicker table tr td.active.active,.datetimepicker table tr td.active:hover.active,.datetimepicker table tr td.active.disabled.active,.datetimepicker table tr td.active.disabled:hover.active,.datetimepicker table tr td.active.disabled,.datetimepicker table tr td.active:hover.disabled,.datetimepicker table tr td.active.disabled.disabled,.datetimepicker table tr td.active.disabled:hover.disabled,.datetimepicker table tr td.active[disabled],.datetimepicker table tr td.active:hover[disabled],.datetimepicker table tr td.active.disabled[disabled],.datetimepicker table tr td.active.disabled:hover[disabled]{background-color:#04c}.datetimepicker table tr td.active:active,.datetimepicker table tr td.active:hover:active,.datetimepicker table tr td.active.disabled:active,.datetimepicker table tr td.active.disabled:hover:active,.datetimepicker table tr td.active.active,.datetimepicker table tr td.active:hover.active,.datetimepicker table tr td.active.disabled.active,.datetimepicker table tr td.active.disabled:hover.active{background-color:#039 \9}.datetimepicker table tr td span{display:block;width:23%;height:54px;line-height:54px;float:left;margin:1%;cursor:pointer;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.datetimepicker .datetimepicker-hours span{height:26px;line-height:26px}.datetimepicker .datetimepicker-minutes span{height:26px;line-height:26px}.datetimepicker table tr td span:hover{background:#eee}.datetimepicker table tr td span.disabled,.datetimepicker table tr td span.disabled:hover{background:0;color:#999;cursor:default}.datetimepicker table tr td span.active,.datetimepicker table tr td span.active:hover,.datetimepicker table tr td span.active.disabled,.datetimepicker table tr td span.active.disabled:hover{background-color:#006dcc;background-image:-moz-linear-gradient(top,#08c,#04c);background-image:-ms-linear-gradient(top,#08c,#04c);background-image:-webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));background-image:-webkit-linear-gradient(top,#08c,#04c);background-image:-o-linear-gradient(top,#08c,#04c);background-image:linear-gradient(top,#08c,#04c);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc',endColorstr='#0044cc',GradientType=0);border-color:#04c #04c #002a80;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);color:#fff;text-shadow:0 -1px 0 rgba(0,0,0,0.25)}.datetimepicker table tr td span.active:hover,.datetimepicker table tr td span.active:hover:hover,.datetimepicker table tr td span.active.disabled:hover,.datetimepicker table tr td span.active.disabled:hover:hover,.datetimepicker table tr td span.active:active,.datetimepicker table tr td span.active:hover:active,.datetimepicker table tr td span.active.disabled:active,.datetimepicker table tr td span.active.disabled:hover:active,.datetimepicker table tr td span.active.active,.datetimepicker table tr td span.active:hover.active,.datetimepicker table tr td span.active.disabled.active,.datetimepicker table tr td span.active.disabled:hover.active,.datetimepicker table tr td span.active.disabled,.datetimepicker table tr td span.active:hover.disabled,.datetimepicker table tr td span.active.disabled.disabled,.datetimepicker table tr td span.active.disabled:hover.disabled,.datetimepicker table tr td span.active[disabled],.datetimepicker table tr td span.active:hover[disabled],.datetimepicker table tr td span.active.disabled[disabled],.datetimepicker table tr td span.active.disabled:hover[disabled]{background-color:#04c}.datetimepicker table tr td span.active:active,.datetimepicker table tr td span.active:hover:active,.datetimepicker table tr td span.active.disabled:active,.datetimepicker table tr td span.active.disabled:hover:active,.datetimepicker table tr td span.active.active,.datetimepicker table tr td span.active:hover.active,.datetimepicker table tr td span.active.disabled.active,.datetimepicker table tr td span.active.disabled:hover.active{background-color:#039 \9}.datetimepicker table tr td span.old{color:#999}.datetimepicker th.switch{width:145px}.datetimepicker thead tr:first-child th,.datetimepicker tfoot tr:first-child th{cursor:pointer}.datetimepicker thead tr:first-child th:hover,.datetimepicker tfoot tr:first-child th:hover{background:#eee}.input-append.date .add-on i,.input-prepend.date .add-on i{cursor:pointer;width:14px;height:14px}

data/app/assets/stylesheets/comfypress/lib/bootstrap-wysihtml5.css

@@ -0,0 +1,102 @@
+ul.wysihtml5-toolbar {
+	margin: 0;
+	padding: 0;
+	display: block;
+}
+
+ul.wysihtml5-toolbar::after {
+	clear: both;
+	display: table;
+	content: "";
+}
+
+ul.wysihtml5-toolbar > li {
+	float: left;
+	display: list-item;
+	list-style: none;
+	margin: 0 5px 10px 0;
+}
+
+ul.wysihtml5-toolbar a[data-wysihtml5-command=bold] {
+	font-weight: bold;
+}
+
+ul.wysihtml5-toolbar a[data-wysihtml5-command=italic] {
+	font-style: italic;
+}
+
+ul.wysihtml5-toolbar a[data-wysihtml5-command=underline] {
+	text-decoration: underline;
+}
+
+ul.wysihtml5-toolbar a.btn.wysihtml5-command-active {
+	background-image: none;
+	-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);
+	-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);
+	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.05);
+	background-color: #E6E6E6;
+	background-color: #D9D9D9;
+	outline: 0;
+}
+
+ul.wysihtml5-commands-disabled .dropdown-menu {
+	display: none !important;
+}
+
+ul.wysihtml5-toolbar div.wysihtml5-colors {
+  display:block;
+  width: 50px;
+  height: 20px;
+  margin-top: 2px;
+  margin-left: 5px;
+  position: absolute;
+  pointer-events: none;
+}
+
+ul.wysihtml5-toolbar a.wysihtml5-colors-title {
+  padding-left: 70px;
+}
+
+ul.wysihtml5-toolbar div[data-wysihtml5-command-value="black"] {
+  background: black !important;
+}
+
+ul.wysihtml5-toolbar div[data-wysihtml5-command-value="silver"] {
+  background: silver !important;
+}
+
+ul.wysihtml5-toolbar div[data-wysihtml5-command-value="gray"] {
+  background: gray !important;
+}
+
+ul.wysihtml5-toolbar div[data-wysihtml5-command-value="maroon"] {
+  background: maroon !important;
+}
+
+ul.wysihtml5-toolbar div[data-wysihtml5-command-value="red"] {
+  background: red !important;
+}
+
+ul.wysihtml5-toolbar div[data-wysihtml5-command-value="purple"] {
+  background: purple !important;
+}
+
+ul.wysihtml5-toolbar div[data-wysihtml5-command-value="green"] {
+  background: green !important;
+}
+
+ul.wysihtml5-toolbar div[data-wysihtml5-command-value="olive"] {
+  background: olive !important;
+}
+
+ul.wysihtml5-toolbar div[data-wysihtml5-command-value="navy"] {
+  background: navy !important;
+}
+
+ul.wysihtml5-toolbar div[data-wysihtml5-command-value="blue"] {
+  background: blue !important;
+}
+
+ul.wysihtml5-toolbar div[data-wysihtml5-command-value="orange"] {
+  background: orange !important;
+}