Download raw (40.6 KB)

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
    --text-color: rgb(255, 255, 255);
    --background-color: rgb(23, 58, 66);
    --background-color-button: rgb(25,79,95);
    --background-color-button--pressed: rgb(16,41,48); /* Lighten on press */
    --button-color-disabled: rgb(55,126,146);
    --field-border-color: rgb(39,124,149);

    --color-01: rgb(202, 20, 27);
    --color-02: rgb(59, 110, 144);
    --color-03: rgb(16, 171, 43);
    --color-04: rgb(144, 34, 121);
    --color-05: rgb(235, 101, 1);
    --color-06: rgb(5,92,189);
    --color-07: rgb(111, 68, 34);
    --color-08: rgb(226, 55, 146);
    --color-09: rgb(0, 144, 136);
    --color-10: rgb(250, 54, 0);
    --color-11: rgb(71, 201, 255);
    --color-12: rgb(171, 29, 255);

    --row-indent: 80px;
    --axis-line-offset: 40px;
    --axis-line-width: 2px;
    --axis-padding: 1em;
    --axis-tag-size: 1.8em;

    /**
     * positions of the vertical line connecting sub axes
     */
    --axis-vertical-line-middle: calc(var(--row-indent) - var(--axis-line-offset));
    --axis-vertical-line-start: calc(var(--axis-vertical-line-middle) - var(--axis-line-width) * .5);
    --axis-vertical-line-end: calc(var(--axis-vertical-line-middle) + var(--axis-line-width) * .5);

    --axis-horizontal-line-middle: 2.1em;
    --axis-horizontal-line-start: calc(var(--axis-horizontal-line-middle) - var(--axis-line-width) * .5);
    --axis-horizontal-line-end: calc(var(--axis-horizontal-line-middle) + var(--axis-line-width) * .5);

    /**
     * Position of the tag bubble. Relative to the position of the vertical line
     */
    --axis-metadata-offset: calc(var(--axis-vertical-line-middle) + var(--axis-tag-size) * .5);

    --font-size: 15px;
    --line-height: 21px;

    --font-size--bigger: 1.44rem;
    --font-size--small: 0.833rem;

    --dash-size: .3em;
}





/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
  font-family: 'GothicA1';
  src: url("../fonts/GothicA1/GothicA1-Bold.ttf");
  font-weight: bold;
}

@font-face {
  font-family: 'GothicA1';
  src: url("../fonts/GothicA1/GothicA1-Medium.ttf");
  font-weight: 500;
}

@font-face {
  font-family: 'GothicA1';
  src: url("../fonts/GothicA1/GothicA1-Organon-ttfautohinted.ttf");
  font-weight: lighter;
}

@font-face {
  font-family: 'GothicA1';
  src: url("../fonts/GothicA1/GothicA1-light.ttf");
  font-weight: light;
}





/* ==========================================================================
   Global
   ========================================================================== */

html { font-size: 0.813em; }

body {
  font-family: 'GothicA1', sans-serif;
  line-height: var(--line-height);
  font-weight: 500;
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover { 
    color: var(--background-color); 
    filter: brightness(200%); 
}

sub,
sup {
  /* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
  position: relative;
  /* Note that if you're using Eric Meyer's reset.css, this
     is already set and you can remove this rule */
  vertical-align: baseline;
  /* Specified in % so that the sup/sup is the
     right size relative to the surrounding text */
  font-size: 65%;
  /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
  line-height: 0;
}

sup {
  /* Move the superscripted text up */
  top: -0.5em;
}

sub {
  /* Move the subscripted text down, but only
     half as far down as the superscript moved up */
  bottom: -0.25em;
}





/* Forms
   ========================================================================== */

fieldset {
  margin-bottom: 2em;
  padding-left: 1em;
}

fieldset legend { margin-left: -1em; }

textarea {
  width: 20em;
  height: 5em;
  vertical-align: top;
}

button, input, select, option, textarea {
  font-family: 'GothicA1', sans-serif;
  /* font-size: inherit; */
  /* line-height: inherit; */
  font-weight: 500;
}

button, submit, reset {
  color: var(--text-color);
  border: none;
  padding: .3em 1em .2em 1em;
  background: transparent;
  margin-top: .15em;
}

select:disabled, input:disabled {
  color: var(--button-color-disabled) !important;
  border-color: var(--button-color-disabled) !important;
  opacity: .75;
}

button:hover, submit:hover, reset:hover { background: var(--background-color-button); }

button:active, submit:active, reset:active {
  outline: none;
  box-shadow: inset 0px 0px 2px rgb(4,13,16);
  background: var(--background-color-button--pressed);
}

button:disabled {
  color: var(--button-color-disabled);
}

button:disabled:hover {
  background: transparent;
}

label {
  display: block;
  margin-bottom: .5em;
}

.fieldgroup { display: block; }

label.inline,
section.inline { display: inline-block; }

label .label-text {
  display: inline-block;
  width: 9em;
  margin-right: .25em;
  text-align: left;
}

input[type="text"] { /* width: 20em; */ }

input.small-number { width: 4em; }

section.hidden { display: none; }

[name="extra-fields"] .fields { display: none; }

[name="extra-fields"].expanded .fields { display: block; }

[name="extra-fields"] legend:before { content: "▶"; }

[name="extra-fields"].expanded legend:before { content: "▼"; }





/* ==========================================================================
   Modal windows
   ========================================================================== */

.modal {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    transition: opacity 400ms ease-in;
    justify-content: center;
    align-items: center;
}

.modal__dialog {
  width: 400px;
  padding: 8px;
  background: #fff;
  color: black;
}

.modal__title { margin-bottom: 1em; }


/* TODO: Bemize */
.modal label { display: none; }

.modal input[type="email"],
.modal input[type="text"],
.modal input[type="password"],
.modal input[type="submit"] {
    padding: 0;
    margin: 0;
    /* font-size: inherit; */
    font-family: inherit;
    background: none;
    border: none;
}

.modal input[type="submit"] {
    text-decoration: underline;
}

.modal input[type="email"],
.modal input[type="text"],
.modal input[type="password"] {
    border-bottom: 2px solid;
    padding-bottom: 6px;
    margin-bottom: 18px;
}





/* ==========================================================================
   General layout
   ========================================================================== */

.page__wrapper {
  display: flex;
  box-sizing: border-box;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}





/* Main menu (sidebar)
   ========================================================================== */

.main-header { width: 260px; }

.main-header.is-collapsed { margin-left: -260px; }

.main-header__content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    box-sizing: border-box;
}

.main-header__create { flex-grow: 1; }

.main-header__logo {  margin-bottom: calc(var(--line-height) * 4); }

.logo__name {
  font-size: 3rem;
  /* line-height: .7; */
  /* margin-bottom: calc(var(--line-height) / 2); */
}

.logo_link { text-decoration: none; }

.panel-form { display: flex; } 

.panel-form__textfield,
.panel-form__submit {
    padding: 0;
    margin: 0;
    /* font-size: inherit; */
    font-family: inherit;
    background: none;
    border: none;
    color: inherit;
}

.panel-form__submit {
    margin-left: 10px;
    border: 2px solid white;
    padding: 0 4px;
    background-color: white;
    color: #183a42;
}

.panel-form__submit:hover {
    color: white;
    background-color: #183a42;
    cursor: pointer;
}

.panel-form__textfield {
    border-bottom: 2px solid;
    padding-bottom: 6px;
    flex: 1 1 100px;
    min-width: 0px; /* Fixes Firefox issue with flex-box */
}

.panel-form__textfield::placeholder { /* Most modern browsers support this now. */
   color:    #173a42;
   filter: brightness(200%);
}

.create__form--inactive { display: none; } 

.menu--primary .menu__item {
    margin-bottom: calc(var(--line-height) / 2);
}

.menu--primary .menu__item:before {
    content: "• ";
}

.menu--inline .menu__item {
    display: inline;
    margin-right: 1em;
    font-size: var(--font-size--small);
}




/* Main area (content)
   ========================================================================== */

.main-area {
  overflow: auto;
  margin-left: 0;
  transition: all .2s;
  flex: 1;
}





/* ==========================================================================
   About page
   ========================================================================== */

.body-text h1 {
    font-weight: bold; 
    font-size: var(--font-size--bigger);
    margin-bottom: var(--line-height);
}

.body-text h2 {
    font-weight: bold; 
    letter-spacing: 1px;
    font-size: 1.2rem;
    margin-top: var(--line-height);
    margin-bottom: var(--line-height);
}

.body-text h3 {
    font-size: 1.2rem;
    margin-top: var(--line-height);
    margin-bottom: var(--line-height);
}


.body-text strong { font-weight: bold; }

.body-text em { font-style: italic; }

/* .body-text :matches(p, ul, h2) + :matches(p, ul, h2) { margin-top: calc(var(--line-height) / 2); } */

.body-text :matches(p) + :matches(p) { text-indent: 2rem; }

.body-text ul li:before { content: "- "; }

.body-text ul { margin-left: 2em; margin-top: var(--line-height); margin-bottom: var(--line-height);}

.body-text--about { max-width: 45em; }





/* ==========================================================================
   Score page
   ========================================================================== */

.score {
  box-sizing: border-box;
  outline: 0;
  height: 100vh;
  display: flex;
}

.score::-moz-focus-inner { border: 0; }

/* firefox */

.score:focus { outline: none; }


.score article {
  /* padding: 0 30px; */
  flex: 1 0;
  overflow: auto;
}

.score.content {
  padding: 0;
}


/* Score metadata
   ========================================================================== */

.panel--score-meta .content {
  /* font-size: 85%; */
  padding: 90px 15px 30px 40px;
  width: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 90px);
}

.panel--score-meta {
  position: relative;
  flex: 0 0 335px;
  transition: flex-basis .2s;
  overflow-x: hidden;
  background: var(--background-color);
  z-index: 3;
}

.panel--score-meta.is-collapsed {
  flex: 0 0 30px;
}

.panel--score-meta.is-collapsed .content {
  display: none;
}

.panel__toggle__alt {
	box-sizing: border-box;
	line-height: 30px;
	position: absolute;
  transform: rotate(-90deg);
  transform-origin: bottom right;
	white-space: nowrap;
	right: calc(100% - 30px);
	top: 0;
}

.panel__toggle__alt:hover {
  color:    #173a42;
  filter: brightness(200%);
  cursor: pointer;
}

.panel--score-meta .score-edit {
  position: absolute;
  right: 30px;
  top: calc(30px + 0em);
}

.read-only .score-edit {
	display: none;
}

.score__header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  /* font-size: 85%; */
  background: var(--background-color);
  z-index: 999;
  width: 100%;
  display: flex;
  padding: 30px 30px 0 30px;
  box-sizing: border-box;
  height: 5.0rem;
}

.score__title {
  font-size: 2rem;
  line-height: 1em;
  flex: 1;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#permissions { margin-top: 1em; }

#permissions label {
  font-weight: bold; /* Uniform style with other metadata */
  display: inline; /* As to display button next field */
}

#permissions input {
  max-width: 75%;
}


/* Score actions
   ========================================================================== */


.score__actions { display: inline-block; }

.read-only .score__actions { display: none; }





/* Score form
   ========================================================================== */

.score-form {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 30px;
  padding: 1em;
  background: var(--background-color);
  color: white;
}

.score-form input, .score-form textarea {
  max-width: 90%;
}

.score-form .label-text { display: block; }





/* Score main area
   ========================================================================== */

.score__main { 
    position: relative; 
    padding: 0 30px; 
    box-sizing: border-box; 
}





/* Nesting level ruler
   ========================================================================== */

.score__slider {
  position: sticky;
  border-top: .45rem solid var(--background-color);
  top: 5.0rem;
  margin-bottom: 2rem;
  white-space: nowrap;
  z-index: 1;
  line-height: 0;
}

.slider__level {
  display: inline-block;
  width: var(--row-indent);
  height: calc(var(--axis-tag-size) / 2);
  position: relative;
}

.slider__level:nth-child(1) {
  background-color: var(--color-01);
  color: var(--color-01);
}

.slider__level:nth-child(2) {
  background-color: var(--color-02);
  color: var(--color-02);
}

.slider__level:nth-child(3) {
  background-color: var(--color-03);
  color: var(--color-03);
}

.slider__level:nth-child(4) {
  background-color: var(--color-04);
  color: var(--color-04);
}

.slider__level:nth-child(5) {
  background-color: var(--color-05);
  color: var(--color-05);
}

.slider__level:nth-child(6) {
  background-color: var(--color-06);
  color: var(--color-06);
}

.slider__level:nth-child(7) {
  background-color: var(--color-07);
  color: var(--color-07);
}

.slider__level:nth-child(8) {
  background-color: var(--color-08);
  color: var(--color-08);
}

.slider__level:nth-child(9) {
  background-color: var(--color-09);
  color: var(--color-09);
}

.slider__level:nth-child(10) {
  background-color: var(--color-10);
  color: var(--color-10);
}

.slider__level:nth-child(11) {
  background-color: var(--color-11);
  color: var(--color-11);
}

.slider__level:nth-child(12) {
  background-color: var(--color-12);
  color: var(--color-12);
}

.slider__level:nth-child(13) {
  background-color: var(--color-01);
  color: var(--color-01);
}

.slider__level:nth-child(14) {
  background-color: var(--color-02);
  color: var(--color-02);
}

.slider__level:nth-child(15) {
  background-color: var(--color-03);
  color: var(--color-03);
}

.slider__level:nth-child(16) {
  background-color: var(--color-04);
  color: var(--color-04);
}

.slider__label { display: none; }





/* Score axis
   ========================================================================== */

.score__mainline {
    position: relative;
    left: calc(var(--row-indent) * -.5);
}

.score__mainline { --row-color: var(--color-01); --row-color-next: var(--color-02); --indent: 0px; --form-indent: 40px; }

.score__mainline ol { --row-color: var(--color-02); --row-color-next: var(--color-03); --indent: calc(1 * var(--row-indent)); --form-indent: calc(-1 * var(--row-indent)); }

.score__mainline ol ol { --row-color: var(--color-03); --row-color-next: var(--color-04);  --indent: calc(2 * var(--row-indent));  --form-indent: calc(-2 * var(--row-indent)); }

.score__mainline ol ol ol { --row-color: var(--color-04); --row-color-next: var(--color-05);  --indent: calc(3 * var(--row-indent));  --form-indent: calc(-3 * var(--row-indent)); }

.score__mainline ol ol ol ol { --row-color: var(--color-05); --row-color-next: var(--color-06);  --indent: calc(4 * var(--row-indent));  --form-indent: calc(-4 * var(--row-indent)); }

.score__mainline ol ol ol ol ol { --row-color: var(--color-06); --row-color-next: var(--color-07);  --indent: calc(5 * var(--row-indent));  --form-indent: calc(-5 * var(--row-indent)); }

.score__mainline ol ol ol ol ol ol { --row-color: var(--color-07); --row-color-next: var(--color-08);  --indent: calc(6 * var(--row-indent));  --form-indent: calc(-6 * var(--row-indent)); }

.score__mainline ol ol ol ol ol ol ol { --row-color: var(--color-08); --row-color-next: var(--color-09);  --indent: calc(7 * var(--row-indent));  --form-indent: calc(-7 * var(--row-indent)); }

.score__mainline ol ol ol ol ol ol ol ol { --row-color: var(--color-09); --row-color-next: var(--color-10);  --indent: calc(8 * var(--row-indent));  --form-indent: calc(-8 * var(--row-indent)); }

.score__mainline ol ol ol ol ol ol ol ol ol { --row-color: var(--color-10); --row-color-next: var(--color-11);  --indent: calc(9 * var(--row-indent));  --form-indent: calc(-9 * var(--row-indent)); }

.score__mainline ol ol ol ol ol ol ol ol ol ol { --row-color: var(--color-11); --row-color-next: var(--color-12);  --indent: calc(10 * var(--row-indent));  --form-indent: calc(-10 * var(--row-indent)); }

.score__mainline ol ol ol ol ol ol ol ol ol ol ol { --row-color: var(--color-12); --row-color-next: var(--color-01);  --indent: calc(11 * var(--row-indent));  --form-indent: calc(-11 * var(--row-indent)); }

.score__mainline ol ol ol ol ol ol ol ol ol ol ol ol { --row-color: var(--color-01); --row-color-next: var(--color-02);  --indent: calc(12 * var(--row-indent));  --form-indent: calc(-12 * var(--row-indent)); }

.score__mainline ol ol ol ol ol ol ol ol ol ol ol ol ol { --row-color: var(--color-02); --row-color-next: var(--color-03);  --indent: calc(13 * var(--row-indent));  --form-indent: calc(-13 * var(--row-indent)); }

.score__mainline ol ol ol ol ol ol ol ol ol ol ol ol ol ol { --row-color: var(--color-03); --row-color-next: var(--color-04);  --indent: calc(14 * var(--row-indent));  --form-indent: calc(-14 * var(--row-indent)); }

.score__mainline ol ol ol ol ol ol ol ol ol ol ol ol ol ol ol { --row-color: var(--color-04); --row-color-next: var(--color-05);  --indent: calc(15 * var(--row-indent));  --form-indent: calc(-15 * var(--row-indent)); }


[data-collapsed="true"] .sublines { display: none; }

li.axis { position: relative; }

.move-not-allowed {
    outline-color: rgba(255,0,0,1);
    background-color: rgba(255, 0, 0, 0.25);
    cursor: not-allowed;
}

.score__mainline {
    top: calc(var(--axis-padding) * -1);
}

.score__mainline ol { padding-left: var(--row-indent); }

.score__line {
    padding-top: var(--axis-padding);
    /* padding-bottom: var(--axis-padding); */
}

.axis-row {
  /* position: relative; */
  padding: 0;
  border: none;
  /* padding-bottom: var(--axis-bottom-padding); */
  display: block;
}

.axis-row--background-wrapper {
  display: inline-block;
  position: relative;
}

.axis-row--background-wrapper::before {
    content: " ";
    display: block;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    right: 0;
    /* bottom: 13px; */
    border-top: 2px solid var(--row-color);
    box-sizing: border-box;
}

.score__mainline > .score__line > .axis-row > .axis-row--background-wrapper::before {
    left: calc(var(--row-indent) / 2);
}



[data-alternative] > li > .axis-row > .axis-row--background-wrapper::before {
  border-top-style: dotted;
}



[data-collapsed="false"]>.axis-row [name="toggle"]:before { content: "▼"; }

[data-collapsed="true"]>.axis-row [name="toggle"]:before { content: "◀"; }

[data-collapsed="true"][data-sublines="true"] > .axis-row > .axis-row--background-wrapper > .line__body {
	box-shadow: 1px 1px 0px var(--row-color-next);
	border-right: 1px solid;
	border-bottom: 1px solid;
	border-color: var(--background-color);
}

/* http://www.lessanvaezi.com/how-to-hide-the-dotted-border-outline-on-focused-elements-in-html-using-css/ */

/* hide the dotted lines around an element when it receives focus */

/* firefox */
.axis-row::-moz-focus-inner { border: 0; }

/* ie8, chrome, etc */
.axis-row:focus { outline: none; }

.axis-row section.attachment {
  display: inline-block;
}

.line__body, .axis-row--tail, .axis-row-actions {
  display: inline-block;
}

.axis-row,
.axis-row--header,
.line__body,
.axis-row--tail {
  white-space: nowrap;
}

/**
* Insert a block before the line without changing the position
* of the line.
*/
.axis-row--header {
  position: absolute;
  right: 100%;
  /* Position it before the line, irregardless of the header width */
  width: var(--row-indent);
  text-align: center;
  height: 100%;
}

.linked-node:hover > .axis-row > .axis-row--background-wrapper  > .axis-row--header:before {
  display: block;
  content: "";
  background: linear-gradient(to left,
  var(--background-color) 0px, var(--background-color) 4px,
    transparent 4px, transparent 8px,
  var(--background-color) 8px, var(--background-color) 12px,
    transparent 12px, transparent 16px,
  var(--background-color) 16px, var(--background-color) 20px,
    transparent 20px);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.linked-node:hover .line__actions {
  display: inline-block;
}

.linked-node:hover ol .line__actions,
.linked-node:hover ol .icon--handle {
  display: none;
}

.line__body, .line__actant, .line__adresse {
  display: inline-block;
  vertical-align: middle;
  background-color: var(--row-color);
  text-transform: lowercase;
  position: relative;
}

.line__actant,
.line__adresse {
  padding: 0 .25em;
  border-radius: 3px;
}

.line__body {
  position: relative;
  border-radius: 5px;
  padding: .25em .5em .25em .5em;
}

.line__body[data-aspect] {
  padding-right: .7em;
}

/* .line__body[data-aspect="itératif"]:before, */
/* .line__body[data-aspect="duratif"]:before { */
/*   content: ''; */
/*   position: absolute; */
/*   top: 0; right: 0; */
/*   border-right: .7em solid var(--background-color); */
/*   border-bottom: .7em solid var(--row-color); */
/*   width: 0; */
/* } */

/* .line__body[data-aspect="sémelfactif"]:after, */
/* .line__body[data-aspect="duratif"]:after { */
/*   content: ''; */
/*   position: absolute; */
/*   bottom: 0; right: 0; */
/*   border-right: .7em solid var(--background-color); */
/*   border-top: .7em solid var(--row-color); */
/*   width: 0; */
/* } */

.alt-symbol {
  color: var(--row-color);
}

.icon--handle:before { 
  font-weight: lighter;
  content: "\f80e";
  display: block;
  position: absolute;
  left: 15px;
  top: .75em;
}

.icon--handle {
  cursor: ns-resize; /* move; */
  visibility: hidden;
  position: absolute;
  font-size: var(--font-size--bigger);
  left: -45px;
  top: 0px;
  bottom: 0;
  width: 60px;
  z-index: 2;
}

.sublines {
  position: relative;
}

.axis-row:hover .icon--handle { visibility: visible; }

.icon--tag:before {
  position: relative;
  bottom: -.15em;
}

.sublines__metadata__wrapper {
  position: absolute;
  top: 4.5em;
  bottom: .5em;
  left: calc(var(--row-indent) - 20px); /* indent - (width / 2) */
  width: 40px;
  display: none;
}

/* .score__line:only-child > .axis-row > .sublines__metadata__wrapper { */
.score__line[data-len="1"] > .axis-row > .sublines__metadata__wrapper .tag:before {
    content: ""!important;
}






[data-sublines="true"][data-collapsed="false"] > .axis-row > .sublines__metadata__wrapper {
  display: block;
}


.sublines__metadata {
  position: sticky;
  top: 5.0rem;
  z-index: 1;
  text-align: center;
}


.tag[data-tag] {
  display: block;
  margin: 0 auto;
  margin-bottom: 4px;
  background: var(--row-color-next);
  width: var(--axis-tag-size);
  height: calc(var(--axis-tag-size) - 4px);
  padding-top: 4px;
  border-radius: calc(var(--axis-tag-size) / 2);
  text-align: center;
  z-index: 1;
  font-weight: lighter;
  position: relative;
}


.tag[data-tag=""]:before,
.tag[data-tag=">"]:before { content: "\f8b3"; }

.tag[data-tag="|"]:before { content: "\f8b4"; }
.tag[data-tag="||"]:before { content: "\f8b5"; }
.tag[data-tag="≥"]:before { content: "\f8b6"; }
.tag[data-tag="//"]:before { content: "\f8b7"; }

.alternative {
  display: block;
  margin: 0 auto;
  font-size: var(--font-size--small);
  /* line-height: 1.5; */
  border: 2px solid var(--row-color-next);
  background-color: var(--background-color);
  font-weight: bold;
  padding: 0em .8em 0 .8em;
  color: white;
  border-radius: .8em/50%;
  z-index: 1;
  position: relative;
  top: 11px;
}


.icon--ol:before { content: "\f801"; }
.icon--ul:before { content: "\f807"; }
.icon--par:before { content: "\f809"; }
.icon--cum:before { content: "\f804"; }
.icon--mys:before { content: "\f807\f807"; }

.icon--condition:before { content: "\f80c"; }

.icon--rarr:before { content: "\f813"; }
.icon--darr:before { content: "\f818"; }
.icon--dashed:before { content: "\f857"; }
/*.icon--indications:before { content: "\f831"; }*/
.icon--indications:before { content: "*"; }
.icon--repeat:before { content: "\f8b2"; }
.icon--stop:before { content: "\f812"; }

.icon--dur:before { content: "\f850"; }
.icon--iter:before { content:"\f85a"; }
.icon--semel:before { content:"???"; }


li + li .alt-symbol { display: none; }



.axis--lign-vertical {
  position: absolute;
  top: 0;
  left: -10px;
  bottom: 0;
  width: var(--axis-line-width);
  background: var(--row-color);
}

.sublines__metadata[data-alternative="1"] > .tag, 
.sublines__metadata[data-show-tag="false"] > .tag {
    visibility: hidden;
}

.line__title {
  position: relative;
  font-size: 1.2rem;
  cursor: move;
}

.line__title, .attachment--view {
  text-transform: lowercase;
}

.axis-title-view {
    margin: 0 !important;

    border: none !important;
}

@keyframes pulse {
	0% { opacity: 1; }
	100% { opacity: .5; }
}

[data-module="true"] > .axis-row > .axis-row--background-wrapper > .line__body > .line__title {
  animation: pulse 500ms infinite alternate;
}


[data-contingent="true"] > .axis-row > .axis-row--background-wrapper > .line__actant,
[data-contingent="true"] > .axis-row > .axis-row--background-wrapper > .line__adresse,
[data-contingent="true"] > .axis-row > .axis-row--background-wrapper > .line__body {
    background: repeating-linear-gradient(-45deg, var(--background-color) 0px, var(--background-color) 1px, transparent 1px, transparent 5px), var(--row-color);
}

.axis-inline-title-form {
  display: inline-block;
  margin-top: -5px; /* Negative top padding line__body */
}


.axis-inline-title-form input {
  background: var(--row-color);
  border: none;
  color: var(--text-color);
  /* font-size: 150%; */
  text-transform: lowercase;
  width: 15em;
}

.axis-inline-title-form button {
  margin-top: -2px;
  vertical-align: top;
  padding-bottom: 0;
  padding-top: 4px;
}

.axis-inline-title-form [data-name="close"] {
  margin-left: 1em;
  cursor: pointer;
}

/**
 * Boucle
 */
.boucle {
    border: 2px solid var(--row-color);
    background-color: var(--background-color);
    position: relative;
    height: 17.5px;
    font-size: var(--font-size--small);
    display: inline-block;
    border-radius: 8px;
    vertical-align: middle;
    padding-left: .5em;
    padding-right: .5em;
    min-width: 1em;
    text-align: center;
}

.boucle::before {
    content: "<";
    position: absolute;
    top: -11px;
    left: 5px;
    color: var(--row-color);
    font-weight: bold;
    font-size: 17px;
}

/* .line__terme { font-size: 75%; } */

/* .line__terme .full { font-size: 133%; } */



.line__indications,
.line__condition,
.boucle,
.line__terme,
.line__actant,
.line__adresse,
.line__body {
    margin-left: .5rem;
}

.line__condition {
    margin-left: 1.93rem;
}


.line__indications,
.line__condition,
.line__terme {
    cursor: default;
    position: relative;
}


.line__indications::before {
    content: "*";
    position: relative;
}

.line__condition::before,
.line__terme::before {
    content: " ";
    position: relative;
    display: inline-block;
    background-color: var(--row-color);
    height: 8px;
    width: 8px;
    border-radius: 50%;
}

.line__condition--hidden {
    visibility: hidden;
}

.line__indications .label {
    width: calc(30vw - var(--indent));
    max-width: 500px;
    min-width: 200px;
    white-space: normal;
    line-height: var(--font-size);
}

.line__indications .label,
.line__condition .label,
.line__terme .label {
    font-weight: 500;
    box-shadow: 2px 2px 0 var(--background-color);
  display: none;
  position: absolute;
  color: var(--row-color);
  background-color: white;
  padding: 7px 8px 6px 8px;
  left: 0;
  z-index: 2;
    line-height: var(--font-size);
}

.line__indications p + p {
    margin-top: calc(var(--line-height) / 2);
}

.indications-label {
  font-weight: 400;
}

.indications-label:nth-child(n+2) { margin-top: 1em; }

.line__condition .label,
.line__terme .label { top: -7px; }

.line__indications .label { top: -8px; }

.line__indications:hover .label,
.line__condition:hover .label,
.line__terme:hover .label {
  display: block;
}

.line__actions {
    vertical-align: middle;
    display: none;
    margin-left: .5rem;
}

.axis-row:hover .line__actions { display: inline-block; }
.read-only .axis-row:hover .line__actions { display: none; }

.axis-actions [name="toggle"] {
  position: absolute;
  top: 0px;
  right: 0;
}

/**
 * Attachment
 */
.attachment--view {
  display: inline-block;
  font-size: 1.2rem;
}

.attachment--view a {
  text-decoration: none;
}

.attachment--view--audio .audio--timecode {
  /* font-size: 80%; */
}

.attachment--view--audio button {
  padding: 0 .75em;
  /* font-size: 60%; */
  vertical-align: top;
}

.attachment--view--audio audio,
.attachment--view--audio button,
.attachment--view--audio .audio--timecode {
  display: none
}

.attachment--view--audio[data-playing="true"] .button--pause,
.attachment--view--audio[data-playing="false"] .button--play,
.attachment--view--audio[data-playing="true"] .audio--timecode {
  display: inline-block;
}


.attachment--view--vimeo .attachment--vimeo--full,
.attachment--view--pdf .attachment--pdf--full,
.attachment--view--image .attachment--image--full {
  position: absolute;
  top: 2em;
  left: 0;
  display: none;
  z-index: 4;
}

.attachment--view--vimeo[data-opened="true"] .attachment--vimeo--full,
.attachment--view--pdf[data-opened="true"] .attachment--pdf--full,
.attachment--view--image[data-opened="true"] .attachment--image--full {
  display: block;
}

.attachment--image--full img {
  max-width: calc(70vw - var(--indent));
  max-height: 80vh;
}

.attachment--pdf--full iframe {
  width: calc(70vw - var(--indent));
  height: 80vh;
}


.attachment--vimeo--full iframe {
  width: 640px;
  height: 360px;
}

.attachment--vimeo--full .btn--close,
.attachment--pdf--full .btn--close,
.attachment--image--full .btn--close {
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: 0;
}


/* Exemptions for the first axis 
  ========================================================================== */

#axis-wrapper > ol {
  background: none;
}


#axis-wrapper > ol > li.axis > .axis-row >  .axis-row--background-wrapper > .axis-row--header {
  display: none;
}


/* Axis edit form
   ========================================================================== */

.axis-edit-form {
  position: absolute;
  top: 3.5em;
  left: 39px;
  border-width: 3px;
  border-style: solid;
  background: var(--background-color);
  box-shadow: 8px 8px 1px var(--background-color);
  margin-bottom: 1em;
  margin-top: .75em;
  padding: .5em;
  min-width: 550px;
  z-index: 3;
}

/* subaxis colors, according to the level of nesting */

.attachment-upload {
  margin-top: 1.5em;
}

.attachment-field.removed {
  display: none;
}

.score-form, .axis-edit-form {
  /* font-size: 110%; */
}

#permissions input,
.score-form input,
.score-form select,
.score-form textarea,
.axis-edit-form input,
.axis-edit-form select,
.axis-edit-form textarea {
  background: var(--background-color);
  border: 1px solid white;
  color: var(--text-color);
  padding: .4em .5em .3em .5em;
}

/* Lines connection the axis
   ==========================================================================
   The lines are drawn using background gradients.
   The li's draw the vertical line, the last li draws it only partly: 1em.

   The axis-row headers drow the horizontal lines.
   The axis-row header in the first and last li also block the vertical line
   partially.
   */

/**
 * Normal axis, draw horizontal line
 */
.axis > header .axis-row--header {
  /* background: */
  /* linear-gradient(to right, var(--background-color) var(--axis-vertical-line-start), transparent var(--axis-vertical-line-start)), */
  /* linear-gradient(to bottom, */
  /*   transparent var(--axis-horizontal-line-start), */
  /*   var(--row-color) var(--axis-horizontal-line-start), */
  /*   var(--row-color) var(--axis-horizontal-line-end), */
  /*   transparent var(--axis-horizontal-line-end)); */
}

/**
 * First axis, top of vertical line covered
 */
.axis:first-child > header .axis-row--header {
  background:
    linear-gradient(to right, var(--background-color) var(--axis-vertical-line-start), transparent var(--axis-vertical-line-start)),
    linear-gradient(to bottom,
      var(--background-color) var(--axis-horizontal-line-start),
      var(--row-color) var(--axis-horizontal-line-start),
      var(--row-color) var(--axis-horizontal-line-end),
      transparent var(--axis-horizontal-line-end));
}
/**
 * Last axis, bottom of vertical line covered
 */
.axis:last-child > header .axis-row--header {
  background:
    linear-gradient(to right, var(--background-color) var(--axis-vertical-line-start), transparent var(--axis-vertical-line-start)),
    linear-gradient(to bottom,
      transparent var(--axis-horizontal-line-start),
      var(--row-color) var(--axis-horizontal-line-start),
      var(--row-color) var(--axis-horizontal-line-end),
      var(--background-color) var(--axis-horizontal-line-end));
}

/**
 * Single axis draw a horizontal line, cover the vertical line
 */
.axis:only-child > header .axis-row--header, .axis.ui-sortable-helper > header .axis-row--header {
  background:
    linear-gradient(to right, var(--background-color) var(--axis-vertical-line-start), transparent var(--axis-vertical-line-start)),
    linear-gradient(to bottom,
      var(--background-color) var(--axis-horizontal-line-start),
      var(--row-color) var(--axis-horizontal-line-start),
      var(--row-color) var(--axis-horizontal-line-end),
      var(--background-color) var(--axis-horizontal-line-end));
}

.axis:last-child {
  background: linear-gradient(to bottom,
    transparent var(--axis-horizontal-line-middle),
    var(--background-color) var(--axis-horizontal-line-middle)
  );
}

ol::before {
  content: " ";
  display: block;
  position: absolute;
  top: var(--axis-horizontal-line-end);
  bottom: 1px;
  border-left: 2px solid var(--row-color);
}

ol[data-alternative]:before {
  border-left-style: dotted;
}

#axis-wrapper > ol > li > header .axis-row--header{
  background: none;
}

.axis.placeholder:before {
  content: "▶";
  color: var(--row-color);
  position: absolute;
  left: -25px;
}

.permission-list label { display: inline; }

.errors {
    color: rgb(202, 027, 027);
}






/* ==========================================================================
   Help
   ========================================================================== */

.page__help { width: 500px; }
.page__help.is-collapsed { margin-right: -500px; }

.help__frame {
    width: 100%;
    height: 100%;
}

.help__content {
    color: #173a42;
    background-color: white;
    line-height: var(--line-height);
}

.help__content h2 {
    /* letter-spacing: 1px; */
    /* text-transform: uppercase; */
}

.help__content h2,
.help__content h3 { 
    font-weight: bold;
    padding-top: 14pt; 
    padding-bottom: 14pt; 
}

.help__content h4 {
    font-weight: bold;
}

.help__content p + h4 { margin-top: 14pt; }

.help__content h2:first-of-type { padding-top: 0; }

.help__content :matches(p, ul, ol, pre) + :matches(p, ul, ol, pre) { margin-top: calc(var(--line-height) / 2); }

.help__content :matches(ul, ol) { margin-left: 2em; text-indent: -.75em; }

.help__content li:before { content: "– "; }

.help__content code { 
    color: darkgrey; 
    margin-left: 1.25em; 
    /* font-size: 75% */
}

.help__section::before { content: "▼ "; }

.help__section--closed::before { content: "▶ "; }

.help__section--closed + .help__inner { display: none; }

.help__content h2 .permalink,
.help__content h3 .permalink,
.help__content h4 .permalink {
    display: none;
}

.help__content h2:hover .permalink,
.help__content h3:hover .permalink,
.help__content h4:hover .permalink {
    display: inline;
}

.help__content img,
.help__content pre { 
    overflow: hidden;
    max-width: 100%;
}

.help__inner h3,
.help__inner .help__inner { margin-left: 1.5em; }

.help__toc {
    border-bottom: 2px solid;
    margin-left: 84pt!important;
    padding-bottom: 14pt;
    margin-bottom: 28pt;
    text-indent: 0!important;
    font-weight: bold;
}

.help__toc li {
    display: inline-block;
    margin-right: 1em;
}

.help__toc li::before {
    content: "";
}





/* ==========================================================================
   Filters
   ========================================================================== */

.btn-filter {
    font-weight: 500;
    color: var(--text-color);
    border: none;
    padding: .3em .3em .3em .3em;
    margin-top: .15em;
    background: var(--background-color-button);
    cursor: pointer;
}

.filters__filter + .filters__filter {
    margin-top: 1em;
}

.filters__filter li {
    cursor: pointer;
}

.filters__filter li:hover {
    color: var(--button-color-disabled);
}

.filter--tags .filter__item:before {
    content: "#";
}

.filter__item {
    display: inline-block;
    margin-right: 14px;
}

.filter__item:hover {
    cursor: pointer;
}

#tag-filter .filter__item + .filter__item:before {
    content: ", ";
}

.search__heading { font-weight: bold; }





/* ==========================================================================
   Panels
   ========================================================================== */

.panel {
    position: relative; 
    transition: all .2s;
}

.panel--right {
    right: 0;
    padding-left: 30px;
}

.panel--left {
    left: 0;
    padding-right: 30px;
}

.panel__toggle {
    box-sizing: border-box;
    /* line-height: 30px; */
    padding-right: 30px;
    position: absolute;
    text-align: right;
    transform: rotate(-90deg);
    width: 100vh;

}

.panel--left .panel__toggle {
    bottom: 0;
    left: 100%;
    transform-origin: bottom left;
}

.panel--right .panel__toggle {
    left: 0;
    top: 100%;
    transform-origin: top left;
}

.panel__toggle:hover {
    cursor: pointer;
    color:    #173a42;
    filter: brightness(200%);
}

.panel__content {}





/* ==========================================================================
   Misc
   ========================================================================== */

.content {
    padding: 30px;
}

.scores { display: flex; overflow-x: hidden; }

.scores__content { flex: 1; overflow: auto; }

.scores__heading { 
    font-weight: bold; 
    font-size: 1.2rem;
}

.scores__filters { 
    height: 100vh; 
}


.scores__filters .content {
    width: 300px;
    transition: all .2s;
    
}

.scores__filters.is-collapsed .content {
    margin-right: -360px;
    
}

.scores__search {
    margin-bottom: 28px;
}

.scores__filter {
    margin-bottom: 14px;
}

.filter__heading {
    font-weight: bold;
}


.btn {
    /* font-size: 85% !important; */
    color: var(--text-color);
    border: none;
    padding: .3em 1em .2em 1em;
    background: transparent;
    margin-top: .15em;
    font-family: 'GothicA1', sans-serif;
    /* font-size: inherit; */
    /* line-height: 21px; */
    font-weight: 500;
}

.btn:hover {
    background-color: var(--background-color-button);
}


.scores__item {
    margin-top: 10.5px;
}

.item__title {
    font-weight: bold;
}

.item__meta { 
    font-size: var(--font-size--small);
}

.js-help {
    text-decoration: underline dotted;
}

/* inline metadata */
/* publié le */
/* modifié le */
.score-meta__term {
    display: inline-block;
    margin-top: .5em;
    font-weight: bold;
    break-after: avoid;
}

.score-meta__term::after {
    content: " :";
}

.score-meta__term--tag {
    display: none;
}
.score-meta__def {
    display: inline;
    margin: 0;
    margin-left: 0em;
    break-before: avoid;
}


.score-meta__def:after{
    display: block;
    content: '';
}

.score-meta__term--inline { font-weight: inherit; }

.score-meta__term--inline::after { content: " "; }

.tags__item { 
    display: inline; 
    margin-right: 1em; 
}

.tags,
#permissions,
.score-meta {
    margin-bottom: 1.4em;
}


::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* Track */
::-webkit-scrollbar-track {
  /* box-shadow: inset 0 0 0 white; */ 
  /* border-radius: 10px; */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: white; 
  border-radius: 6px;
}

.intro {
    margin-bottom: calc(var(--line-height) * 2);
    font-size: 1.2rem;
}

.last-updated {
    margin-bottom: calc(var(--line-height) * 2);
}

.scores-list {
    column-count: 2;
}

.scores-list > div {
    break-inside: avoid;
}

.appliedfilters {
    margin-top: var(--line-height);
    margin-bottom: var(--line-height);
}



.autocomplete-suggestions { background: #FFF; overflow: auto; }
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; color: var(--background-color); cursor: default; }
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; }
/* .autocomplete-group { padding: 2px 5px; } */
/* .autocomplete-group strong { display: block; border-bottom: 1px solid #000; } */