ep_sm.txt

div.withSeq .scene_mark_button--seq::before {
  content: "S";
}

div.withAct .scene_mark_button--act::before{
  content: "A";
}

div.withEpi .scene_mark_button--epi::before {
  content: "E";
}

div .scene_mark_button--sce::before{
  content: "C";
}

/* the SM button clicked */
.scene_mark_button--epi::before,
.scene_mark_button--act::before,
.scene_mark_button--seq::before,
.scene_mark_button--sce::before{
  color: #19BBDA; /*COLOR A*/
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 9px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  float: left;
  padding: 0 5px;
  margin-left: -42px;
  cursor: pointer;
  box-shadow: 0.5px 0.5px 0.5px #C5C7CB inset; /*COLOR 200*/
}

.hidden .scene_mark_button--epi::before,
.hidden .scene_mark_button--act::before,
.hidden .scene_mark_button--seq::before,
.hidden .scene_mark_button--sce::before{
  color: #64666A; /*COLOR 100*/
  box-shadow: 1px 1px 1px #C5C7CB; /*COLOR 200*/
}


/*
 [1] Don't show Act button when heading has an Episode
 [2] Don't show Sequence button when heading has an Act
 [3] Don't show Synopsis button when heading has a Sequence */
div.withEpi + div.withAct .scene_mark_button--act::before, /*[1]*/
div.withAct + div.withSeq .scene_mark_button--seq::before, /*[2]*/
div.withSeq + div.withSceneSynopsis .scene_mark_button--sce::before{ /*[3]*/
  content: "";
  border: none; /*fix to avoid show border*/
}

/* styles for vertical line between all scene marks of a heading: */
episode_name,
episode_summary,
act_name,
act_summary,
sequence_name,
sequence_summary,
synopsis_name,
synopsis_summary {
  font-size: 11px;
  padding-left: 1px;
  border-left: 1px solid #D8D9DC; /*COLOR 220*/
}

.sceneMark--title,
.sceneMark--summary {
  font-family: 'Roboto', sans-serif;
  display: block;
  padding-left: 59px;
}

.sceneMark--title{
  font-weight: 300;
  color: #64666A; /*COLOR 100*/
  font-size: 10px;
  text-transform: uppercase;
  padding-bottom: 5px;
}

.sceneMark--summary{
  font-weight: 300;
  font-size: 10px;
  color: #64666A; /*COLOR 100*/
  padding-bottom: 0;
}

/* styles for small box with act/seq number: */
episode_name::before,
act_name::before,
sequence_name::before,
synopsis_name::before{
  display: inline-block;
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  float: left;
  padding: 0 2px;
  margin-left: -8px;
}

/*small box on the right of the episode 'E' icon when episode is hidden*/
#innerdocbody:not(.easc_mode--epi) .hidden .scene_mark_button--epi::before {
  border-right: #64666A 5px solid; /*COLOR 100*/
}

/*small box on the right of the act 'A' icon when act is hidden*/
#innerdocbody:not(.easc_mode--act) .hidden .scene_mark_button--act::before {
  border-right: #A0A2A6 5px solid; /*COLOR 160*/
}

/*small box on the right of the sequence 'S' icon when sequence is hidden*/
#innerdocbody:not(.easc_mode--seq) .hidden .scene_mark_button--seq::before {
  border-right: #D8D9DC 5px solid; /*COLOR 220*/
}

episode_name::before {
 border-left: #64666A 5px solid; /*COLOR 100*/
}

act_name::before {
 border-left: #A0A2A6 5px solid; /*COLOR 160*/
}

sequence_name::before {
 border-left: #D8D9DC 5px solid; /*COLOR 220*/
}

/* scene name has a special border */
scene_border::before {
  content: ' ';
  height: 16px;
  width: 4px;
  float: left;
  position: relative;
  border: 1px solid #D8D9DC; /*COLOR 220*/
}

div.withSeq + div.withSceneSynopsis scene_border::before {
  top: 20px;
}

/* small box numbered: default */
episode_name::before  {
  content: "EP\0020\0020\0020 " counter(epi_editor);
}
act_name::before {
  content: "ACT\0020" counter(act_editor);
}
sequence_name::before {
  content: "SEQ\0020" counter(seq_editor);
}
synopsis_name::before {
  content: "SCE\0020" counter(sce_editor);
  padding-left: 7px; /*we need it because we add an additional element on the scenes name*/
}

/* small box numbered: Portuguese/BR */
#innerdocbody[lang=pt-br] act_name::before {
  content: "ATO\0020" counter(act_editor);
}
#innerdocbody[lang=pt-br] synopsis_name::before {
  content: "CEN\0020" counter(sce_editor);
}

episode_name::before,
act_name::before,
sequence_name::before,
synopsis_name::before {
  white-space: pre; /* necessary to break the line */
  position: absolute;
  left: 66px;
  font-size: 9px;
}

/* counters need to be updated on any SM title (even the hidden ones) */
#innerdocbody       > div.withSceneSynopsis:first-child, /* scene title on 1st line of pad */
div:not(.sceneMark) + div.withSceneSynopsis,  /* scene title without seq above */
div.withSeq         + div.withSceneSynopsis { /* scene title with seq above */
  counter-increment: sce_editor;
}

#innerdocbody       > div.withSeq:first-child, /* seq title on 1st line of pad */
div:not(.sceneMark) + div.withSeq,             /* seq title without act above */
div.withAct         + div.withSeq {            /* seq title with act above */
  counter-increment: seq_editor;
}
#innerdocbody       > div.withAct:first-child,
div:not(.sceneMark) + div.withAct,
div.withEpi         + div.withAct {
  counter-increment: act_editor;
}
#innerdocbody       > div.withEpi:first-child,
div:not(.sceneMark) + div.withEpi {
  counter-increment: epi_editor;
}

/* trash icon on hover */
.scene_mark_trash--epi:hover::before,
.scene_mark_trash--act:hover::before,
.scene_mark_trash--seq:hover::before {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAuMXB4IiBoZWlnaHQ9IjExLjAyMXB4IiB2aWV3Qm94PSIwIDAgMTAuMSAxMS4wMjEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwLjEgMTEuMDIxIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxyZWN0IHg9IjMuMzEzIiB5PSIzLjk5NyIgZmlsbD0iIzY0NjY2QSIgd2lkdGg9IjEiIGhlaWdodD0iNC43OTMiLz4NCgk8cmVjdCB4PSI1Ljc4NSIgeT0iMy45OTciIGZpbGw9IiM2NDY2NkEiIHdpZHRoPSIxIiBoZWlnaHQ9IjQuNzkzIi8+DQoJPHBhdGggZmlsbD0iIzY0NjY2QSIgZD0iTTEwLjA5OSwxLjc0SDB2MWgwLjg0djguMzA4aDguNDE3VjIuNzRoMC44NDJWMS43NHogTTguMjU4LDEwLjA0OEgxLjg0VjIuNzQxaDYuNDE3VjEwLjA0OHoiLz4NCgk8cmVjdCB4PSIzLjgxNSIgeT0iMC4wMTciIGZpbGw9IiM2NDY2NkEiIHdpZHRoPSIyLjQ3MyIgaGVpZ2h0PSIxIi8+DQo8L2c+DQo8L3N2Zz4NCg==);
}

/* trash icon*/
.scene_mark_trash--epi::before,
.scene_mark_trash--act::before,
.scene_mark_trash--seq::before {
  content: ' ';
  margin-left: -19px;
  cursor: pointer;
  float: left;
  padding: 1.5px;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNS4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTAuMXB4IiBoZWlnaHQ9IjExLjAyMXB4IiB2aWV3Qm94PSIwIDAgMTAuMSAxMS4wMjEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEwLjEgMTEuMDIxIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNBMEEyQTYiIGQ9Ik00LjMxMyw4Ljc5aC0xVjMuOTk3aDFWOC43OXogTTYuNzg1LDMuOTk3aC0xVjguNzloMVYzLjk5N3ogTTEwLjA5OSwyLjc0SDkuMjU4djguMzA4SDAuODRWMi43NEgwdi0xDQoJaDEwLjA5OVYyLjc0eiBNOC4yNTgsMi43NDFIMS44NHY3LjMwN2g2LjQxN1YyLjc0MXogTTYuMjg3LDAuMDE3SDMuODE1djFoMi40NzNWMC4wMTd6Ii8+DQo8L3N2Zz4NCg==);
  background-repeat: no-repeat;
  cursor: pointer;
  background-size: contain;
  background-position: 50% 15%;
}

/*popup with scene mark lining information*/
#smInfoWindow {
  position: absolute;
  z-index: 1;
  font-family: 'Roboto';
  min-width: 35px;
  padding-top: 2px;
  background-color: #FFFFFF; /*COLOR 255*/
  box-shadow: 0.5px 0.5px 0.5px 0.5px #C5C7CB; /*COLOR 200*/
}

#smInfoWindow ul {
  color: #A0A2A6; /*COLOR 160*/
  font-weight: 300;
  font-size: 8px;
  text-transform: uppercase;
  padding: 2px 5px;
  margin: 0;
}

/* the larger triangle */
#smInfoWindow::before {
  content: "";
  position: absolute;
  top: -4px; /* value = - border-top-width - border-bottom-width */
  left: 27px; /* controls horizontal position */
  border-width:  0 4px 4px;
  border-style: solid;
  border-color: #EAEBED transparent; /* COLOR 235 */
  /* reduce the damage in FF3.0 */
  display: block;
  width: 0;
}

/* the smaller triangle */
#smInfoWindow::after {
  content: "";
  position: absolute;
  top: -3px; /* value = - border-top-width - border-bottom-width */
  left: 27px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width: 0 4px 4px;
  border-style: solid;
  border-color: #FFF transparent;
  /* reduce the damage in FF3.0 */
  display: block;
  width: 0;
}

/*'i' icon thats contains the info about linings*/
.scene_mark_info::before {
  position: relative;
  left: 78px;
  content: ' ';
  cursor: pointer;
  float: right;
  padding: 2px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNSIgdmlld0JveD0iMCAwIDE0LjYgMTQuNyI+PHBhdGggZD0iTTcuMyAxNC43QzMuMyAxNC43IDAgMTEuNCAwIDcuNGMwLTQgMy4zLTcuMyA3LjMtNy4zIDQgMCA3LjMgMy4zIDcuMyA3LjNDMTQuNiAxMS40IDExLjMgMTQuNyA3LjMgMTQuN3pNNy4zIDEuMUMzLjggMS4xIDEgMy45IDEgNy40czIuOCA2LjMgNi4zIDYuM2MzLjUgMCA2LjMtMi44IDYuMy02LjNTMTAuOCAxLjEgNy4zIDEuMXpNOCA0LjZINi43VjMuNGgxLjNWNC42ek04IDExLjhINi43VjZoMS4zVjExLjh6IiBmaWxsPSIjODA4Mjg2Ii8+PC9zdmc+DQo=);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 50% 30%;
}

/*there is a space between the scene mark title and the previous
scene mark summary*/
div.withEpi + div.withAct .scene_mark_info::before,
div.withAct + div.withSeq .scene_mark_info::before,
div.withSeq + div.withSceneSynopsis .scene_mark_info::before {
  top: 20px;
}


/*
 [1] Only show the trash icon of highest level, i.e., do not show icon of act if it is
   preceded by an episode
 [2] Only show the trash icon of highest level, i.e., do not show icon of sequence if it is
   preceded by an act */
div.withEpi + div.withAct .scene_mark_trash--act::before, /*[1]*/
div.withAct + div.withSeq .scene_mark_trash--seq::before{ /*[2]*/
  background-image: none;
  border: none; /* fix to avoid show border */
}

/* Do not hide (display: none;) completely lines with act and seq, otherwise the icon will be
   hidden too */
div.withEpi.hidden,
div.withAct.hidden,
div.withSeq.hidden,
div.withSceneSynopsis.hidden {
  display: inherit;
  height: 0;
  padding: 0;
}

/* Hide elements inside the sm that should not be visible when line is hidden
  (basically everything except the icon and the pseudo element) */
div.hidden episode_name,
div.hidden episode_summary,
div.hidden act_name,
div.hidden act_summary,
div.hidden sequence_name,
div.hidden sequence_summary,
div.hidden synopsis_name,
div.hidden synopsis_summary,
div.hidden scene_border::before,
div.hidden sm_info,
div.hidden .scene_mark_trash_icon {
  display: none;
  visibility: hidden;
}

.sceneMark {
  padding-left: 56px !important;
}

/*keep the scene mark placeholder height the same as
of the scene mark with text. Avoid line jumping when user
types something in a line empty line*/
.empty-scene-mark {
  height: 16px;
}


.empty-scene-mark::after {
  font-size: 10px;
  font-weight: 300;
  font-style: italic;
  color: #C5C7CB; /*COLOR 200*/
  text-transform: lowercase;
  position: relative;
  top: -16px;
}

div.withEpi + div.withAct act_name,
div.withAct + div.withSeq sequence_name,
div.withSeq + div.withSceneSynopsis synopsis_name {
  padding-top: 20px;
}

/* when user begins to edit a line we hide the placeholder*/
.editing-scene-mark .empty-scene-mark::after {
  display: none;
}

/*posfix of the scene mark information*/
.act--info::after {
  content: 'ACT';
}

.seq--info::after {
  content: 'SEQ';
}

.sce--info::after {
  content: 'SCE';
}

/*scene mark information pt-br version*/
.pt-br.act--info::after {
  content: 'ATO';
}

.pt-br.sce--info::after {
  content: 'CEN';
}


/* default placeholders */
episode_name.empty-scene-mark::after {
  content: 'write here the episode title';
}

act_name.empty-scene-mark::after {
  content: 'write here the act title';
}

sequence_name.empty-scene-mark::after {
  content: 'write here the sequence title';
}

synopsis_name.empty-scene-mark::after {
  content: 'write here the scene title';
}

episode_summary.empty-scene-mark::after {
  content: 'write here the episode synopsis';
}

act_summary.empty-scene-mark::after {
  content: 'write here the act synopsis';
}

sequence_summary.empty-scene-mark::after {
  content: 'write here the sequence synopsis';
}

synopsis_summary.empty-scene-mark::after {
  content: 'write here the scene synopsis';
}

/*pt-Br placeholders*/
#innerdocbody[lang=pt-br] episode_name.empty-scene-mark::after {
  content: 'escreva aqui o título do episódio';
}

#innerdocbody[lang=pt-br] act_name.empty-scene-mark::after {
  content: 'escreva aqui o título do ato';
}

#innerdocbody[lang=pt-br] sequence_name.empty-scene-mark::after {
  content: 'escreva aqui o título da sequência';
}

#innerdocbody[lang=pt-br] synopsis_name.empty-scene-mark::after {
  content: 'escreva aqui o título da cena';
}

#innerdocbody[lang=pt-br] episode_summary.empty-scene-mark::after {
  content: 'escreva aqui o resumo do episódio';
}

#innerdocbody[lang=pt-br] act_summary.empty-scene-mark::after {
  content: 'escreva aqui o resumo do ato';
}

#innerdocbody[lang=pt-br] sequence_summary.empty-scene-mark::after {
  content: 'escreva aqui o resumo da sequência';
}

#innerdocbody[lang=pt-br] synopsis_summary.empty-scene-mark::after {
  content: 'escreva aqui o resumo da cena';
}


/*line separator between the heading and the last summary visible*/
.easc_mode--epi .headingWithEpisode::before,
.easc_mode--act .headingWithEpisode::before,
.easc_mode--act .headingWithAct::before,
.easc_mode--seq .headingWithEpisode::before,
.easc_mode--seq .headingWithAct::before,
.easc_mode--seq .headingWithSequence::before,
.easc_mode--syn .withHeading::before,
div.sceneMark:not(.hidden) + .withHeading::before {
  content: " ";
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMXB4IiBoZWlnaHQ9IjQyLjM1M3B4IiB2aWV3Qm94PSIwIDAgMSA0Mi4zNTMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEgNDIuMzUzIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxsaW5lIGZpbGw9IiNEQ0RFRTEiIHN0cm9rZT0iI0RDREVFMSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiB4MT0iMC41IiB5MT0iMCIgeDI9IjAuNSIgeTI9IjQyLjM1MyIvPg0KPC9zdmc+DQo=);
  position: relative;
  top: -1px;
  left: -61px;
  height: 27px;
  width: 1px;
  display: block;
}