SilentComics/Strip

View on GitHub
assets/css/editor-style-min.css

Summary

Maintainability
Test Coverage
/*
Theme Name: Strip
Description: Used to style the TinyMCE editor.
*/
/**
 * Table of Contents:
 *
 * 1.0 - Body
 * 2.0 - Typography
      2.1 - Links
 * 3.0 - Elements
 * 4.0 - Alignment
 * 5.0 - Caption
 * 6.0 - Galleries
 * 7.0 - Audio / Video
 * 8.0 - RTL
 */
/* Add overwrites as needed so that the content of the editor field is attractive and not broken */
body,
button,
input,
select,
textarea {
  font-size: 24px;
  font-size: 1.5rem; }

/* =24px */
body {
  color: #422442;
  font-family: 'Fenix', Georgia, serif;
  line-height: 1.45;
  margin: 24px 48px;
  max-width: 696px;
  vertical-align: baseline; }

.post-type-page {
  max-width: 696px; }

/**
 * 2.0 - Typography
 */
.body {
  clear: both;
  font-weight: 300;
  margin: 56px 0 28px; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

h2, h3, h4, h5 {
  clear: both;
  font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2; }

h6 {
  font-family: 'Fenix', Georgia, serif;
  /* font-family: Inconsolata, monospace;  */
  font-weight: 100;
  line-height: 1.2; }

p {
  margin: 0 0 28px; }

b,
strong {
  font-weight: 700; }

dfn,
cite,
em,
i {
  font-style: italic; }

blockquote {
  border-left: 4px solid #1a1a1a;
  color: #686868;
  font-size: 19px;
  font-style: italic;
  line-height: 1.4736842105;
  margin-bottom: 28px;
  padding: 0 0 0 24px; }

blockquote:not(.alignleft):not(.alignright) {
  margin-left: -28px; }

blockquote blockquote:not(.alignleft):not(.alignright) {
  margin-left: 0; }

blockquote:before,
blockquote:after {
  content: "";
  display: table; }

blockquote:after {
  clear: both; }

blockquote > :last-child {
  margin-bottom: 0; }

blockquote cite,
blockquote small {
  color: #1a1a1a;
  font-size: 16px;
  line-height: 1.75; }

blockquote em,
blockquote i,
blockquote cite {
  font-style: normal; }

blockquote strong,
blockquote b {
  font-weight: 400; }

blockquote.alignleft,
blockquote.alignright {
  border: 0 solid #1a1a1a;
  border-top-width: 4px;
  padding: 18px 0 0;
  width: -webkit-calc(50% - 14px);
  width: calc(50% - 14px); }

address {
  font-style: italic;
  margin: 0 0 28px; }

code,
kbd,
tt,
var,
samp,
pre {
  font-family: Inconsolata, monospace; }

pre {
  background: #faf4f4;
  font-size: 16px;
  font-size: 1.6rem;
  line-height: 1.3125;
  margin: 0 0 28px;
  max-width: 100%;
  overflow: auto;
  padding: 14px;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word; }

code, kbd, tt, var {
  background: #faf4f4;
  padding: 4px;
  vertical-align: middle; }

abbr[title] {
  border-bottom: 1px dotted #d1d1d1;
  cursor: help; }

mark,
ins {
  background: #007acc;
  color: #fff;
  padding: 2px 4px;
  text-decoration: none; }

sup,
sub {
  font-size: 75%;
  height: 0;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sub {
  top: -6px; }

sup {
  bottom: -3px; }

small {
  font-size: 80%; }

big {
  font-size: 125%; }

/**
 * 2.1 Links
 */
a:link {
  color: #ff7369;
  text-decoration: none; }

a:visited {
  color: #ffaaaa;
  text-decoration: none; }

a:hover,
a:focus,
a:active {
  color: #ff1200;
  text-decoration: underline;
  /* accessibility */
  border: none; }

/**
 * 3.0 - Elements
 */
hr {
  background-color: #d1d1d1;
  border: 0;
  height: 1px;
  margin-bottom: 28px; }

ul,
ol {
  margin: 0 0 28px 0;
  padding: 0; }

ul {
  list-style: disc; }

ol {
  list-style: decimal; }

li > ul,
li > ol {
  margin-bottom: 0; }

li > ul,
blockquote > ul {
  margin-left: 20px; }

li > ol,
blockquote > ol {
  margin-left: 24px; }

dl {
  margin: 0 0 28px; }

dt {
  font-weight: bold; }

dd {
  margin: 0 0 28px; }

table,
th,
td,
.mce-item-table,
.mce-item-table th,
.mce-item-table td {
  border: none; }

table a {
  color: #007acc; }

table,
.mce-item-table {
  border-collapse: separate;
  border-spacing: 0;
  border-width: 1px 0 0 1px;
  margin: 0 0 28px;
  width: 100%; }

table th,
.mce-item-table th,
table caption {
  border-width: 0 1px 1px 0;
  font-size: 16px;
  font-weight: 700;
  padding: 7px;
  text-align: left;
  vertical-align: baseline; }

table td,
.mce-item-table td {
  border-width: 0 1px 1px 0;
  font-size: 16px;
  padding: 7px;
  vertical-align: baseline; }

img {
  border: 0;
  height: auto;
  max-width: 100%;
  vertical-align: middle; }

a img {
  display: block; }

figure {
  margin: 0; }

del {
  opacity: 0.8; }

a {
  color: #007acc;
  text-decoration: none; }

fieldset {
  border: 1px solid #d1d1d1;
  margin: 0 0 28px;
  padding: 14px; }

/**
 * 4.0 - Alignment
 */
.alignleft {
  float: left;
  margin: 1.5em; }

.alignright {
  float: right;
  margin: 1.5em; }

.aligncenter {
  clear: both;
  display: block;
  margin: 0 auto 1.76em; }

/**
 * 5.0 - Caption
 */
.wp-caption {
  background: transparent;
  border: none;
  margin-bottom: 28px;
  max-width: 100%;
  padding: 0;
  text-align: inherit; }

.wp-caption-text,
.wp-caption-dd {
  color: #686868;
  font-size: 13px;
  font-style: italic;
  line-height: 1.6153846154;
  padding-top: 7px; }

/**
 * 6.0 - Galleries
 */
.mce-content-body .wpview-wrap {
  margin-bottom: 28px; }

.gallery-item {
  float: left;
  margin: 0 6px 0 0;
  padding: 0 0 6px 0;
  /* vertical space between image galleries */
  line-height: 0;
  /* remove default space between rows */
  overflow: hidden;
  position: relative; }

.gallery-columns-1 .gallery-item {
  max-width: 100%; }

.gallery-columns-2 .gallery-item {
  max-width: 48%;
  max-width: calc(50% - 4px); }

.gallery-columns-3 .gallery-item {
  max-width: 32%;
  max-width: calc(33.3% - 4px); }

.gallery-columns-4 .gallery-item {
  max-width: 23%;
  max-width: calc(25% - 6px); }

.gallery-columns-5 .gallery-item {
  max-width: 19%;
  max-width: calc(20% - 6px); }

.gallery-columns-6 .gallery-item {
  max-width: 15%;
  max-width: calc(16.7% - 6px); }

.gallery-columns-7 .gallery-item {
  max-width: 13%;
  max-width: calc(14.28% - 6px); }

.gallery-columns-8 .gallery-item {
  max-width: 11%;
  max-width: calc(12.5% - 6px); }

.gallery-columns-9 .gallery-item {
  max-width: 9%;
  max-width: calc(11.1% - 6px); }

.gallery .gallery-caption {
  font-size: 13px;
  margin: 0; }

.gallery-columns-6 .gallery-caption,
.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
  display: none; }

/**
 * 7.0 - Audio / Video
 */
.wp-audio-shortcode a,
.wp-playlist a {
  box-shadow: none; }

.mce-content-body .wp-audio-playlist {
  margin: 0;
  padding-bottom: 0; }

.mce-content-body .wp-playlist-tracks {
  margin-top: 0; }

.mce-content-body .wp-playlist-item {
  padding: 10px 0; }

.mce-content-body .wp-playlist-item-length {
  top: 10px; }

/**
 * 8.0 - RTL
 */
.rtl blockquote {
  border: 0 solid #1a1a1a;
  border-right-width: 4px; }

.rtl blockquote.alignleft,
.rtl blockquote.alignright {
  border: 0 solid #1a1a1a;
  border-top-width: 4px; }

.rtl blockquote:not(.alignleft):not(.alignright) {
  margin-right: -28px;
  padding: 0 24px 0 0; }

.rtl blockquote blockquote:not(.alignleft):not(.alignright) {
  margin-right: 0;
  margin-left: auto; }

.rtl li > ul,
.rtl blockquote > ul {
  margin-right: 20px;
  margin-left: auto; }

.rtl li > ol,
.rtl blockquote > ol {
  margin-right: 24px;
  margin-left: auto; }

.rtl table th,
.rtl .mce-item-table th,
.rtl table caption {
  text-align: right; }