path: root/debian/missing-sources/wyrm/sass/wyrm_addons/redactor/_redactor.sass

body
  .redactor-air
    position: absolute
    z-index: $z-index-modal
  .redactor_box_fullscreen
    position: fixed
    top: 0
    left: 0
    z-index: $z-index-modal - 5
    overflow: hidden
    width: 100%

/*
 *	Fullscreen

.redactor-fake
  background: $white
  border: solid 1px $input-border-color
  padding: $gutter

.redactor-box
  position: relative
  overflow: visible
  border: 1px solid $input-border-color
  background-color: #fff
  +clearfix
  iframe
    display: block
    margin: 0 auto
    padding: 0
  textarea
    position: relative
    display: block
    overflow: auto
    margin: 0
    padding: $gutter
    width: 100%
    outline: none
    border: none
    background-color: $gray-darker
    box-shadow: none
    color: $text-invert
    font-size: 12px
    font-family: $code-font-family
    resize: none
  pre
    background: #2d2d2d
    font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace
    font-size: 12px
    line-height: 1.5
    padding: $base-line-height / 2
    overflow-x: auto
    width: 100%
    display: block
    border: none
    color: $white
    white-space: pre-wrap
  code
    max-width: 100%
  figcaption
    &:empty:before
      opacity: 0.4
      content: "Type to add caption (optional)"
  figure[data-type=embed]
    background: $table-stripe-color
    padding: $base-line-height / 2
    border-radius: 4px
    margin-bottom: $base-line-height
    &:before
      display: block
      content: "EMBED: May not render correctly in this preview."
      margin-bottom: $base-line-height / 2
      font-size: 80%
      color: $red
      font-weight: bold

.redactor_box_fullscreen
  background: $background-color
  overflow-y: scroll !important
  .redactor-editor
    max-width: 960px
    padding: $gutter
    margin: $gutter * 2 auto $gutter !important

.redactor-editor
  font-family: $base-font-family
  position: relative
  padding: $gutter
  padding-bottom: 5px
  outline: none
  background: #fff
  box-shadow: none !important
  white-space: normal
  font-size: $base-font-size
  line-height: $base-line-height
  .redactor_placeholder
    color: #999 !important
    display: block !important
    margin-bottom: 10px !important
  &.redactor_editor_wym
    padding: 10px 7px 0 7px !important
    background: #f6f6f6 !important

// GENERIC STYLING
.redactor-editor
  ul
    @extend %wy-plain-list-disc
  ol
    @extend %wy-plain-list-decimal
/*
 *	TOOLBAR

.redactor-toolbar
  position: relative
  top: 0
  left: 0
  margin: 0 !important
  padding: 0 !important
  padding-left: 1px !important
  border-bottom: 2px solid $input-border-color
  background: hsl(0,0%,95%)
  list-style: none !important
  z-index: $z-index-tooltip - 1
  &:after
    display: block
    visibility: hidden
    clear: both
    height: 0
    content: "."

.redactor-toolbar.toolbar_fixed_box
  border: 1px solid $input-border-color
  border-bottom-color: #b8b8b8

.redactor-toolbar li
  float: left !important
  margin: 0 !important
  padding: 2px 0 2px 1px
  outline: none
  list-style: none !important
  &.redactor-separator
    float: left
    margin: 0 0 0 2px !important
    padding: 0
    height: 29px
    border-right: 1px solid #f4f4f4
    border-left: 1px solid #d8d8d8
  &.redactor_btn_right
    float: right !important
    margin-right: 2px !important
  a
    @extend %icon
    zoom: 1
    font-size: 14px
    color: $text-color
    width: 25px
    line-height: 25px
    text-align: center
    &:hover
      outline: none
      background-color: $gray-light
      color: $white
    &:active, &.redactor-act
      outline: none
      background-color: $text-color
      color: $white

.redactor_button_disabled
  opacity: 0.3
  &:hover
    cursor: default

/*
 *	BUTTONS
 *	step 25px

body .redactor-toolbar li a
  display: inline-block
  &.redactor_btn_html
    @extend .#{$icon-prefix}-#{$icon-code}
  &.redactor_btn_formatting
    @extend .#{$icon-prefix}-#{$icon-text-height}
  &.redactor_btn_bold
    @extend .#{$icon-prefix}-#{$icon-bold}
  &.redactor_btn_italic
    @extend .#{$icon-prefix}-#{$icon-italic}
  &.redactor_btn_deleted
    @extend .#{$icon-prefix}-#{$icon-strikethrough}
  &.redactor_btn_unorderedlist
    @extend .#{$icon-prefix}-#{$icon-list-ul}
  &.redactor_btn_orderedlist
    @extend .#{$icon-prefix}-#{$icon-list-ol}
  &.redactor_btn_outdent
    @extend .#{$icon-prefix}-#{$icon-outdent}
  &.redactor_btn_indent
    @extend .#{$icon-prefix}-#{$icon-indent}
  &.redactor_btn_image
    @extend .#{$icon-prefix}-#{$icon-picture}
  &.redactor_btn_video
    @extend .#{$icon-prefix}-#{$icon-youtube}
  &.redactor_btn_file
    @extend .#{$icon-prefix}-#{$icon-paperclip}
  &.redactor_btn_table
    @extend .#{$icon-prefix}-#{$icon-table}
  &.redactor_btn_link
    @extend .#{$icon-prefix}-#{$icon-link}
  &.redactor_btn_quote
    @extend .#{$icon-prefix}-#{$icon-quote-right}
  &.redactor_btn_fontcolor
    background-position: -325px
  &.redactor_btn_backcolor
    background-position: -350px
  &.redactor_btn_alignleft
    @extend .#{$icon-prefix}-#{$icon-align-left}
  &.redactor_btn_aligncenter
    @extend .#{$icon-prefix}-#{$icon-align-center}
  &.redactor_btn_alignright
    @extend .#{$icon-prefix}-#{$icon-align-right}
  &.redactor_btn_justify
    @extend .#{$icon-prefix}-#{$icon-align-justify}
  &.redactor_btn_horizontalrule
    background-position: -475px
  &.redactor_btn_underline
    background-position: -525px
  &.redactor_btn_fullscreen
    @extend .#{$icon-prefix}-#{$icon-arrows-alt}
  &.redactor_btn_normalscreen
    background-position: -575px
  &.redactor_btn_clips
    background-position: -600px
  &.redactor_btn_alignment
    background-position: -625px
  &.redactor_btn_fontfamily
    background-position: -650px
  &.redactor_btn_fontsize
    background-position: -675px
  &.redactor_btn_direction
    background-position: -700px
  &.redactor_btn_lists
    background-position: -725px
  &.redactor_btn_font
    background-position: -750px
  &.redactor_btn_h1
    background-position: -775px
  &.redactor_btn_h2
    background-position: -800px
  &.redactor_btn_h3
    background-position: -825px
  &.redactor_btn_quote
    background-position: -850px
  &.redactor_btn_pre
    background-position: -875px

/*
 *	Toolbar classes

.redactor_format_blockquote
  @extend blockquote
.redactor_format_pre
  @extend pre
.redactor_format_h1, .redactor_format_h2, .redactor_format_h3, .redactor_format_h4, .redactor_format_h5
  font-weight: bold
.redactor_format_h1
  @extend h1
.redactor_format_h2
  @extend h2
.redactor_format_h3
  @extend h3
.redactor_format_h4
  @extend h4
.redactor_format_h5
  @extend h5
/*
 *	DROPDOWN

.redactor-dropdown
  position: absolute
  top: 28px
  left: 0
  z-index: $z-index-modal - 1
  padding: $base-line-height / 2
  width: 200px
  border: solid 1px $dropdown-border-color
  background: $dropdown-color
  box-shadow: 0 5px 5px 0 rgba(0,0,0,.1)
  font-size: 13px
  font-family: $base-font-family
  line-height: 21px
  .redactor-dropdown-pre
    background: $gray-dark
    color: $white
    font-family: $code-font-family
  .redactor-dropdown-code
    background: $text-code-background-color
    border: solid 1px $text-code-border-color
    padding: 0 5px
    font-family: $code-font-family
    color: $text-code-color
    display: inline-block
  .redactor-dropdown-h1
    font-size: 175%
    font-weight: bold
  .redactor-dropdown-h2
    font-size: 150%
    font-weight: bold
  .redactor-dropdown-h3
    font-size: 125%
    font-weight: bold
  .redactor-dropdown-h4
    font-size: 115%
    font-weight: bold
  .redactor-dropdown-h5
    font-size: 110%
    font-weight: bold
  .redactor-dropdown-h6
    font-weight: bold


.redactor-separator-drop
  padding: 0 !important
  border-top: 1px solid $input-border-color
  font-size: 0
  line-height: 0

.redactor-dropdown a
  display: block
  padding: 3px 5px
  color: #000
  text-decoration: none
  &:hover
    background-color: $gray-light
    color: #FFF !important
    text-decoration: none

/* MODAL

#redactor-modal-overlay
  @extend .wy-body-mask

#redactor-modal
  @extend .wy-modal
  width: 50% !important
  margin-left: -25% !important
  margin-top: -25% !important
  top: 50% !important

#redactor-modal footer
  @extend .wy-btn-group
  margin-bottom: 0

#redactor-modal-close
  @extend .wy-modal-close
.redactor_input
  width: 99%
  font-size: 14px

.redactor-modal-box
  overflow: auto
  margin-bottom: 10px
  height: 350px

#redactor_image_box
  overflow: auto
  margin-bottom: 10px
  height: 270px

#redactor_image_box_select
  display: block
  margin-bottom: 15px !important
  width: 200px

#redactor_image_box img
  margin-right: 10px
  margin-bottom: 10px
  max-width: 100px
  cursor: pointer

#redactor_tabs
  margin-bottom: 18px
  a
    display: inline-block
    margin-right: 5px
    padding: 4px 14px
    border: 1px solid #d2d2d2
    border-radius: 10px
    background-color: #fff
    color: #000
    text-decoration: none
    font-size: 12px
    line-height: 1
    &:hover, &.redactor_tabs_act
      padding: 5px 15px
      border: none
      background-color: $input-border-color
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset
      color: #777 !important
      text-decoration: none !important
      text-shadow: 0 1px 0 #eee

.redactor-modal-btn
  @extend .btn
  width: auto !important
.redactor-modal-action-btn
  @extend .btn-success
  @extend .#{$icon-prefix}
  @extend .#{$icon-prefix}-#{$icon-ok}
  &:before
    margin-right: 5px
.redactor-modal-close-btn
  @extend .btn-neutral
  @extend .#{$icon-prefix}
  @extend .#{$icon-prefix}-#{$icon-ok}
  &:before
    margin-right: 5px

/* Drag and Drop Area

.redactor_droparea
  position: relative
  margin: auto
  margin-bottom: 5px
  width: 100%
  .redactor_dropareabox
    position: relative
    z-index: $z-index-popover
    padding: 60px 0
    width: 99%
    border: 2px dashed #bbb
    background-color: #fff
    text-align: center
    color: #555
    font-size: 12px

.redactor_dropalternative
  color: #555
  font-size: 12px
  margin: 4px 0 2px 0

.redactor_dropareabox
  &.hover
    border-color: #aaa
    background: #efe3b8
  &.error
    border-color: #dcc3c3
    background: #f7e5e5
  &.drop
    border-color: #e0e5d6
    background: #f4f4ee

.wy-control-group-disabled
  .redactor-box, .redactor-editor
    background: darken($input-background-color, 2%)
  .redactor-toolbar li a
    cursor: not-allowed

#redactor-progress-drag
  position: fixed
  top: 50%
  left: 50%
  width: 200px
  margin-left: -130px
  margin-top: -35px
  z-index: $z-index-modal
  padding: 30px
  background: rgba(0, 0, 0, 0.7)
  box-shadow: none

.redactor-progress
  height: 12px
  overflow: hidden
  background-color: #f4f4f4
  border-radius: 3px
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2)
  margin-bottom: 1.5em
  .redactor-progress-bar
    top: 1px
    left: 1px
    position: relative
    background-color: #55aaff
    width: 0
    height: 12px
    -webkit-box-sizing: border-box
    -moz-box-sizing: border-box
    -ms-box-sizing: border-box
    box-sizing: border-box

.redactor-progress-striped .redactor-progress-bar
  background-image: url('data:image/gif;base64,R0lGODlhIAAQAIABAP///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowMTgwMTE3NDA3MjA2ODExODE3QTgyOEM0MzAwRkUyMyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3NEY2MUMyQTlDMzgxMUUwOUFFQ0M4MEYwM0YzNUE2RCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NEY2MUMyOTlDMzgxMUUwOUFFQ0M4MEYwM0YzNUE2RCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAxODAxMTc0MDcyMDY4MTE4MTdBODI4QzQzMDBGRTIzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAxODAxMTc0MDcyMDY4MTE4MTdBODI4QzQzMDBGRTIzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkECQoAAQAsAAAAACAAEAAAAiwMjqkQ7Q/bmijaR+ndee7bLZ8VKmNUJieUVqvTHi8cz1Jtx0yOz7pt6L10BQAh+QQJCgABACwAAAAAIAAQAAACLYwNqctwD2GbKtpH6d157ts1nxUyY1Qup5QmK9Y6LxLPdGsHsTvv8uuzBXuhAgAh+QQJCgABACwAAAAAIAAQAAACLIx/oMsNCKNxdMk7K8VXbx55DhiKDAmZJ5qoFhu4LysrcFzf9QPvet4D0igFACH5BAkKAAEALAAAAAAgABAAAAIsjI8Hy+2QYnyUyWtqxVdvnngUGIoOiZgnmqkWG7gvKy9wXN81BO963gPSGAUAIfkECQoAAQAsAAAAACAAEAAAAixEjqkB7Q/bmijaR+ndee7bLZ8VKmNUJieUVqvTHi8cz1Jtx0yOz7pt6L10BQAh+QQJCgABACwAAAAAIAAQAAACLYQdqctxD2GbKtpH6d157ts1nxUyY1Qup5QmK9Y6LxLPdGsDsTvv8uuzBXuhAgAh+QQJCgABACwAAAAAIAAQAAACLIR/ocsdCKNxdMk7K8VXbx55DhiKDAmZJ5qoFgu4LysrcFzf9QPvet4D0igFACH5BAUKAAEALAAAAAAgABAAAAIshI8Xy+2RYnyUyWtqxVdvnngUGIoOiZgnmqkWC7gvKy9wXN81BO963gPSGAUAOw==')
  &:after
    content: ""
    position: absolute
    top: 0
    right: 0
    bottom: 0
    left: 0
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA6lpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFRTE5QjlCQTlDMkQxMUUwOUFFQ0M4MEYwM0YzNUE2RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowNkRFQUIzNjlDMkUxMUUwOUFFQ0M4MEYwM0YzNUE2RCI+IDxkYzp0aXRsZT4gPHJkZjpBbHQ+IDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+Z3JhZGllbnQ8L3JkZjpsaT4gPC9yZGY6QWx0PiA8L2RjOnRpdGxlPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFRTE5QjlCODlDMkQxMUUwOUFFQ0M4MEYwM0YzNUE2RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFRTE5QjlCOTlDMkQxMUUwOUFFQ0M4MEYwM0YzNUE2RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pq477Q0AAAD2SURBVHjaxFIxDsIwDLRF/1AmRp7AM9iYWHkD76AP6h9Qi1SGfqAMqGJg6XA4jts0RUwZiKLEsZ3L+Rwmoi0lDC6Ky4rAMuGO5DY5iuWH93oDegMuK8QA7JIYCMDpvwDDMBzNHCGtONYq2enjHKYLMObCp7dtu/+FDppDgyJpTemsrm/9l7L2ku4aUy4BTEmKR1hmVXV9OjfsqlqC7irAhBKxDnmOQdPc+ynKMXdenEELAFmzrnu8RoK6jpRhHkGJmFgdXmsByNf5Wx+fJPbigEI3OKrB77Bfy2VZzppqC0IfAtlIAusC9CNtUn/iIRXgnALwEWAA/+5+ZNOapmcAAAAASUVORK5CYII=')


.redactor-toolbar-tooltip
  position: absolute
  z-index: $z-index-tooltip
  text-align: center
  top: 0
  left: 0
  background: rgba(0,0,0,.8)
  color: $text-invert
  padding: 5px 8px
  line-height: 1
  font-size: 12px
  border-radius: 2px

+media($mobile)
  body .redactor_toolbar li a
    &.redactor_btn_table
      display: none
    &.redactor_btn_html
      display: none
    &.redactor_btn_fullscreen
      display: none
  #redactor-modal
    width: 100% !important
    margin: 0 !important
    left: 0 !important
    right: 0 !important
    top: 20% !important