add: helper slider

[pettanr/pettanr.git] / app / assets / stylesheets / test.css.scss

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_directory ./base
 *= require jquery-ui
*/
table.no-border {
  border: none;
}

table.no-border td, tr {
  border: none;
  padding: 0px;
  margin: 0px;
  vertical-align: top;
}

div.md5 {
  padding: 0px;
  margin: 0px;
  font-size: 12px;
  text-align: left;
}

div.empty {
  color:   #aaaaaa;
}

input.error {
  border-width: 3px;
  border-style:  solid;
  border-color:   #ef29ef;
}
textarea.error {
  border-style:  solid;
  border-color:   #111;
}
select.error {
  border-style:  solid;
  border-color:   #111;
}

.sheet {
  position:    relative;
  overflow:    hidden;
  float: left;
  clear: left;
}

.sheet-data {
  float: left;
}

.sheet-break {
  clear: both;
}

.sheet_panel {
  position:    absolute;
}

// hide number field's spinner
  //for chrome
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
  }
  // for firefox
  input[type=number] {
      -moz-appearance:textfield;
  }

.pettanr-comic-wrapper {
  margin:  1em auto;
}
.pettanr-comic-panel {
  border-style:  solid;
  border-color:   #111;
  position:    relative;
  margin:     1em 0;
  overflow:    hidden;
}
.pettanr-comic-panel img {
  position:    absolute;
}
.pettanr-comic-balloon {
  position:    absolute;
}
.pettanr-comic-balloon img {
  width:     100%;
  height:     100%;    }


.pettanr-comic-speech {
margin : 0 !important;
padding : 0 !important;
display : table;
table-layout : fixed;
position : absolute;
top : 0;
left : 16.6%;
width : 66.6%;
height : 100%;
*height : auto;
*top : 50% !important;
}
.pettanr-comic-speech-inner {
vertical-align : middle;
display : table-cell;
*display : block;
zoom : 1;
*position : relative;
*top : -50%;
}
.pettanr-comic-speech p {
padding : 0.5em 0 !important;
margin : 0 !important;
}
.pettanr-comic-speech strong {
font-weight : bold;
}
.pettanr-comic-speech em,
.pettanr-comic-speech i {
font-style : italic;
}
.pettanr-comic-speech samp,
.pettanr-comic-speech code {
font-family : monospace;
}

.pettanr-comic-panel .ui-resizable-handle {
  background-color:#f8b87c;
}
.ui-resizable-n {
  cursor          : n-resize;
  height          : 9px;
  width           : 100%;
  top             : -3px;
  left            : 0;
}
.ui-resizable-s {
  cursor          : s-resize;
  height          : 9px;
  width           : 100%;
  bottom          : -3px;
  left            : 0;
}
.ui-resizable-e {
  cursor          : e-resize;
  width           : 9px;
  right           : -3px;
  top             : 0;
  height          : 100%;
}
.ui-resizable-w {
  cursor          : w-resize;
  width           : 9px;
  left            : -3px;
  top             : 0;
  height          : 100%;
}
.ui-resizable-se {
  cursor          : se-resize;
  width           : 12px;
  height          : 12px;
  right           : 1px;
  bottom          : 1px;
}
.ui-resizable-sw {
  cursor          : sw-resize;
  width           : 9px;
  height          : 9px;
  left            : -5px;
  bottom          : -5px;
}
.ui-resizable-nw {
  cursor          : nw-resize;
  width           : 9px;
  height          : 9px;
  left            : -5px;
  top             : -5px;
}
.ui-resizable-ne {
  cursor          : ne-resize;
  width           : 9px;
  height          : 9px;
  right           : -5px;
  top             : -5px;
}
.ground_color-code-wrap {
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    padding: 10px 5px;
    background: #fafafa;
    display: none;
}
.speech-fore_color-wrap {
    border: 1px solid #d0d0d0;
    border-radius: 10px;
    padding: 10px 5px;
    background: #fafafa;
    display: none;
}
.colorpicker-red, .colorpicker-green, .colorpicker-blue {
  float: left;
  clear: left;
  width: 256px;
  margin: 3px 10px;
}
.code_swatch {
  width: 50px;
  height: 50px;
  margin-top: 0;
  margin-left: 10px;
  background-image: none;
}
.colorpicker-red .ui-slider-range {
  background: #ef2929;
}
.colorpicker-red .ui-slider-handle {
  border-color: #ef2929;
}
.colorpicker-green .ui-slider-range {
  background: #8ae234;
}
.colorpicker-green .ui-slider-handle {
  border-color: #8ae234;
}
.colorpicker-blue .ui-slider-range {
  background: #729fcf;
}
.colorpicker-blue .ui-slider-handle {
  border-color: #729fcf;
}
.colorpicker-hex, #colorpicker-rgb {
  margin: 5px;
}
.ui-slider .ui-slider-handle {
  width: 1em;
  height: 1em;
}
.ui-slider-horizontal {
  height: 0.6em;
}
  // for ap
  .code-wrap {
      border: 1px solid #d0d0d0;
      border-radius: 10px;
      padding: 10px 5px;
      background: #fafafa;
      display: none;
  }
  .colorpicker {
    float: left;
    clear: left;
    width: 256px;
    margin: 3px 10px;
  }
  .per-slider {
    float: left;
    clear: left;
    width: 100px;
    margin: 3px 10px;
  }

#elements-tabs {
    font-size: 12px;
}
.inner-elements-tabs {
}

.ui-tabs-vertical {
}
.ui-tabs-vertical .ui-tabs-nav {
    padding: .2em .1em .2em .2em;
    float: left; 
    width: 100px;
}
.ui-tabs-vertical .ui-tabs-nav li {
    clear: left;
    border-bottom-width: 1px !important;
    border-right-width: 0 !important;
    margin: 0 -1px 0.2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
    display:block;
    width: 100%;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
    padding-bottom: 0;
    padding-right: .1em;
    border-right-width: 1px;
    border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
    padding: 1em;
    float: left;
    margin-left: 55px;
    width: 35em;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0.2em;
}
.element-tab {
}
.elements-tab {
   overflow: hidden;
   height: auto;
}
 
.elements-tab img {
   float: left;
   margin: 0 1px 0 0 !important;
   padding: 0 !important;
   border: 0 !important;
}
 
.elements-tab p {
   overflow: hidden;
   height: auto;
}
.elements-tab-face-icon {
   float: left;
}
.elements-tab-face-caption {
   float: left;
}
.elements-tab-face-end {
  clear: both;
}
.ui-button .ui-icon.ui-icon-destroy {
  width: 16px; 
  height: 16px; cursor: pointer; 
  background-image: image-url("destroy.png") !important;
}
.ui-button.ui-state-hover .ui-icon.ui-icon-destroy {
  width: 16px; 
  height: 16px; cursor: pointer; 
  background-image: image-url("destroy-highlighted.png");
}

.new-element-board-body div {
   float: left;
}
.new-element-buttons div {
  clear: both;
}
.new-element-buttons h3 {
  margin-top: 6px;
  margin-bottom: 6px;
}
.new-element-buttons span {
  margin: 3px;
  margin-right: 8px;
}
ul.scenarios_elements {
  list-style-type: none;
  padding: 0;
}

.scenario-label {
   float: left;
}

.speech_balloon_template_item {
  float: left;
}
.speech_balloon_template_item-row-break {
  clear: both;
}

.field {
    float: left; 
}
.row_break {
  clear: both;
}

.extend_column {
  margin-left: 20px;
}

.extend-field {
  margin-left: 20px;
}

.filer {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.filer-head {
  clear: both;
  margin: 0;
  padding: 0;
  height: 22px; 
  overflow: hidden;
  background: #efefef;
}
.filer-head div {
  float: left;
}

.filer-body {
  padding-left: 0;
  list-style-type: none;
}
.filer-item {
  clear: both;
  margin: 0;
  padding: 0;
  height: 66px; 
  overflow: hidden;
}
.filer-item div {
}

.filer-head-pick {
  width: 66px; 
}
.filer-head-symbol {
  width: 66px; 
}
.filer-head-caption {
  width: 200px; 
}
.filer-head-summary {
  width: 200px; 
}
.filer-head-icon {
  width: 66px; 
}
.filer-head-date {
  width: 100px; 
}
.filer-head-edit {
  width: 66px; 
}

.filer-item-pick {
  float: left;
  width: 66px; 
}
.filer-item-symbol {
  float: left;
  width: 66px; 
}
.filer-item-caption {
  float: left;
  width: 200px; 
}
.filer-item-summary {
  float: left;
  width: 200px; 
}
.filer-item-icon {
  float: left;
  width: 66px; 
}
.filer-item-date {
  float: left;
  width: 76px; 
}
.filer-item-edit {
  float: left;
  width: 76px; 
}

//folder
.filer-head-folder .filer-head-symbol {
}
.filer-head-folder .filer-head-caption {
  width: 150px; 
}
.filer-head-folder .filer-head-summary {
  width: 50px; 
}
.filer-head-folder .filer-head-icon {
}
.filer-head-folder .filer-head-date {
}
.filer-head-folder .filer-head-edit {
}

.filer-item-folder .filer-item-caption {
  width: 150px; 
}
.filer-item-folder .filer-item-summary {
  width: 50px; 
}

//scroll
.filer-head-scroll .filer-head-symbol {
}
.filer-head-scroll .filer-head-caption {
  width: 250px; 
}
.filer-head-scroll .filer-head-summary {
  width: 150px; 
}
.filer-head-scroll .filer-head-icon {
}
.filer-head-scroll .filer-head-date {
}
.filer-head-scroll .filer-head-edit {
}

.filer-item-scroll .filer-item-caption {
  width: 250px; 
}
.filer-item-scroll .filer-item-summary {
  width: 150px; 
}

//comic
.filer-head-comic .filer-head-caption {
  width: 250px; 
}
.filer-head-comic .filer-head-summary {
  width: 150px; 
}
.filer-item-comic .filer-item-caption {
  width: 250px; 
}
.filer-item-comic .filer-item-summary {
  width: 150px; 
}

//story
.filer-head-story .filer-head-caption {
  width: 250px; 
}
.filer-head-story .filer-head-summary {
  width: 150px; 
}
.filer-item-story .filer-item-caption {
  width: 250px; 
}
.filer-item-story .filer-item-summary {
  width: 150px; 
}

//panel
.filer-head-panel .filer-head-caption {
  width: 250px; 
}
.filer-head-panel .filer-head-summary {
  width: 150px; 
}
.filer-item-panel .filer-item-caption {
  width: 250px; 
}
.filer-item-panel .filer-item-summary {
  width: 150px; 
}

//panel_picture
.filer-head-panel_picture .filer-head-caption {
  width: 100px; 
}
.filer-head-panel_picture .filer-head-summary {
  width: 300px; 
}
.filer-item-panel_picture .filer-item-caption {
  width: 100px; 
}
.filer-item-panel_picture .filer-item-summary {
  width: 300px; 
}
.panel_picture-summary div {
  float: left;
}

//speech_balloon
.filer-head-speech_balloon .filer-head-caption {
  width: 300px; 
}
.filer-head-speech_balloon .filer-head-summary {
  width: 100px; 
}
.filer-item-speech_balloon .filer-item-caption {
  width: 300px; 
}
.filer-item-speech_balloon .filer-item-summary {
  width: 100px; 
}

//speech
.filer-head-speech .filer-head-caption {
  width: 300px; 
}
.filer-head-speech .filer-head-summary {
  width: 100px; 
}
.filer-item-speech .filer-item-caption {
  width: 300px; 
}
.filer-item-speech .filer-item-summary {
  width: 100px; 
}

//ground_picture
.filer-head-ground_picture .filer-head-caption {
  width: 100px; 
}
.filer-head-ground_picture .filer-head-summary {
  width: 300px; 
}
.filer-item-ground_picture .filer-item-caption {
  width: 100px; 
}
.filer-item-ground_picture .filer-item-summary {
  width: 300px; 
}
.ground_picture-summary div {
  float: left;
}

//ground_color
.filer-head-ground_color .filer-head-caption {
  width: 300px; 
}
.filer-head-ground_color .filer-head-summary {
  width: 100px; 
}
.filer-item-ground_color .filer-item-caption {
  width: 300px; 
}
.filer-item-ground_color .filer-item-summary {
  width: 100px; 
}

//original_picture
.filer-head-original_picture .filer-head-caption {
  width: 50px; 
}
.filer-head-original_picture .filer-head-summary {
  width: 350px; 
}
.filer-item-original_picture .filer-item-caption {
  width: 50px; 
}
.filer-item-original_picture .filer-item-summary {
  width: 350px; 
}
.original_picture-summary div {
  float: left;
}

//resource_picture
.filer-head-resource_picture .filer-head-summary {
  width: 250px; 
}
.filer-item-resource_picture .filer-item-summary {
  width: 250px; 
}

//speech_balloon_template
.filer-head-speech_balloon_template .filer-head-caption {
}
.filer-item-speech_balloon_template .filer-item-caption {
}

.logo{
  float: left;
}
.history div {
  float: left;
}

.history-list {
  width: 400px; 
  background-color:#f8f8f8;
}

.history-list-log {
  border-width: 0px;
  border-style:  solid;
  border-color:   #ef29ef;
}

ul.pagination {
  list-style-type: none;
}

ul.pagination li {
  float: left;
  padding: 3px;
  font-size: 20px;
}

.credits .credit {
  float: left;
}

.credit .credit-icon {
  float: left;
}

.credit table {
  float: left;
}

.op-smy div {
  float: left;
}

.op-smy span {
  float: left;
}