Commit da549cba authored by alexandre's avatar alexandre

Harmonization font size, and css naming

parent ca3ab581
......@@ -23,8 +23,8 @@
--color-11: rgb(200,41,107);/*#b026bc;*/
--color-12: rgb(171,29,255);/*#871dff;*/
--row-indent: 70px;
--axis-line-offset: 35px;
--row-indent: 80px;
--axis-line-offset: 40px;
--axis-line-width: 2px;
--axis-bottom-padding: 1em;
--axis-tag-size: 1.8em;
......@@ -45,10 +45,11 @@
*/
--axis-metadata-offset: calc(var(--axis-vertical-line-middle) + var(--axis-tag-size) * .5);
--font-size: 12pt;
--line-height: 18pt;
--font-size: 15px;
--line-height: 1.4;
--font-size--small: 75%;
--font-size--bigger: 1.44rem;
--font-size--small: 0.833rem;
--dash-size: .3em;
}
......@@ -93,9 +94,11 @@
Global
========================================================================== */
html { font-size: 0.938em; }
body {
font-family: 'GothicA1', sans-serif;
font-size: var(--font-size);
/* font-size: var(--font-size); */
line-height: var(--line-height);
font-weight: 500;
background-color: var(--background-color);
......@@ -161,8 +164,8 @@ textarea {
button, input, select, option, textarea {
font-family: 'GothicA1', sans-serif;
font-size: inherit;
line-height: inherit;
/* font-size: inherit; */
/* line-height: inherit; */
font-weight: 500;
}
......@@ -262,7 +265,7 @@ section.hidden { display: none; }
.modal input[type="submit"] {
padding: 0;
margin: 0;
font-size: inherit;
/* font-size: inherit; */
font-family: inherit;
background: none;
border: none;
......@@ -303,9 +306,9 @@ section.hidden { display: none; }
/* Main menu (sidebar)
========================================================================== */
.main-header { width: 300px; }
.main-header { width: 260px; }
.main-header.is-collapsed { margin-left: -300px; }
.main-header.is-collapsed { margin-left: -260px; }
.main-header__content {
display: flex;
......@@ -319,9 +322,9 @@ section.hidden { display: none; }
.main-header__logo { margin-bottom: 42px; }
.logo__name {
font-size: 3em;
line-height: 1em;
margin-bottom: 10px;
font-size: 3rem;
/* line-height: .7; */
/* margin-bottom: calc(var(--line-height) / 2); */
}
.logo_link { text-decoration: none; }
......@@ -332,7 +335,7 @@ section.hidden { display: none; }
.panel-form__submit {
padding: 0;
margin: 0;
font-size: inherit;
/* font-size: inherit; */
font-family: inherit;
background: none;
border: none;
......@@ -370,6 +373,7 @@ section.hidden { display: none; }
.menu--inline .menu__item {
display: inline;
margin-right: 1em;
font-size: var(--font-size--small);
}
......@@ -440,7 +444,7 @@ section.hidden { display: none; }
========================================================================== */
.panel--score-meta .content {
font-size: 85%;
/* font-size: 85%; */
padding: 90px 15px 30px 40px;
width: 280px;
overflow-y: auto;
......@@ -492,12 +496,12 @@ section.hidden { display: none; }
display: none;
}
#sidebar {
.score__header {
position: sticky;
top: 0;
left: 0;
width: 100%;
font-size: 85%;
/* font-size: 85%; */
/* background: linear-gradient(to bottom, var(--background-color) 90%, transparent 100%); */
background: var(--background-color);
/* background-color: red; */
......@@ -506,13 +510,13 @@ section.hidden { display: none; }
display: flex;
padding: 30px;
box-sizing: border-box;
height: 5.6rem;
height: 6.2rem;
}
#score h1 {
font-size: 2em;
.score__title {
font-size: 2rem;
line-height: 1em;
min-height: 1.5em;
/* min-height: 1.5em; */
flex: 1;
overflow: hidden;
......@@ -520,16 +524,7 @@ section.hidden { display: none; }
white-space: nowrap;
}
/*
#permissions { display: none; }
#sidebar[data-expanded="true"] .score-meta { display: block; }
#sidebar[data-expanded="true"] #permissions { display: block; }
*/
#permissions {
margin-top: 1em;
}
#permissions { margin-top: 1em; }
#permissions label {
font-weight: bold; /* Uniform style with other metadata */
......@@ -545,40 +540,9 @@ section.hidden { display: none; }
========================================================================== */
.score-actions {
display: inline-block;
}
.read-only .score-actions { display: none; }
/* .score-actions { */
/* position: absolute; */
/* top: 1.25em; */
/* right: 0; */
/* z-index: 3; */
/* } */
/*
.score-actions button {
background: none;
text-decoration: underline;
border: 1px solid transparent;
font-weight: bold;
padding: .3em .75em .3em .75em;
}
.score__actions { display: inline-block; }
.score-actions button:hover { border: 1px solid lightgray; }
.score-actions button:active {
border: 1px solid lightgray;
box-shadow: inset 0px 0px 1px lightgray;
background: rgb(240, 240, 240);
}
.score-actions button:disabled:hover {
background: transparent;
border: 1px solid transparent;
}
*/
.read-only .score__actions { display: none; }
......@@ -611,7 +575,11 @@ section.hidden { display: none; }
/* Score main area
========================================================================== */
#main-area { position: relative; padding: 0 30px; box-sizing: border-box; }
.score__main {
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
......@@ -620,103 +588,103 @@ section.hidden { display: none; }
/* Nesting level ruler
========================================================================== */
.expand-level {
.score__slider {
position: sticky;
top: 5.6rem;
margin-bottom: 1em;
top: 6.2rem;
margin-bottom: 2rem;
white-space: nowrap;
z-index: 1;
line-height: 0;
}
.expand-level-option {
.slider__level {
display: inline-block;
width: var(--row-indent);
height: 2em;
height: var(--axis-tag-size);
position: relative;
}
.expand-level-option:nth-child(1) {
.slider__level:nth-child(1) {
background-color: var(--color-01);
color: var(--color-01);
}
.expand-level-option:nth-child(2) {
.slider__level:nth-child(2) {
background-color: var(--color-02);
color: var(--color-02);
}
.expand-level-option:nth-child(3) {
.slider__level:nth-child(3) {
background-color: var(--color-03);
color: var(--color-03);
}
.expand-level-option:nth-child(4) {
.slider__level:nth-child(4) {
background-color: var(--color-04);
color: var(--color-04);
}
.expand-level-option:nth-child(5) {
.slider__level:nth-child(5) {
background-color: var(--color-05);
color: var(--color-05);
}
.expand-level-option:nth-child(6) {
.slider__level:nth-child(6) {
background-color: var(--color-06);
color: var(--color-06);
}
.expand-level-option:nth-child(7) {
.slider__level:nth-child(7) {
background-color: var(--color-07);
color: var(--color-07);
}
.expand-level-option:nth-child(8) {
.slider__level:nth-child(8) {
background-color: var(--color-08);
color: var(--color-08);
}
.expand-level-option:nth-child(9) {
.slider__level:nth-child(9) {
background-color: var(--color-09);
color: var(--color-09);
}
.expand-level-option:nth-child(10) {
.slider__level:nth-child(10) {
background-color: var(--color-10);
color: var(--color-10);
}
.expand-level-option:nth-child(11) {
.slider__level:nth-child(11) {
background-color: var(--color-11);
color: var(--color-11);
}
.expand-level-option:nth-child(12) {
.slider__level:nth-child(12) {
background-color: var(--color-12);
color: var(--color-12);
}
.expand-level-option:nth-child(13) {
.slider__level:nth-child(13) {
background-color: var(--color-01);
color: var(--color-01);
}
.expand-level-option:nth-child(14) {
.slider__level:nth-child(14) {
background-color: var(--color-02);
color: var(--color-02);
}
.expand-level-option:nth-child(15) {
.slider__level:nth-child(15) {
background-color: var(--color-03);
color: var(--color-03);
}
.expand-level-option:nth-child(16) {
.slider__level:nth-child(16) {
background-color: var(--color-04);
color: var(--color-04);
}
.expand-level-option span { display: none; }
.slider__label { display: none; }
......@@ -725,11 +693,7 @@ section.hidden { display: none; }
/* Score axis collection
========================================================================== */
#axis-wrapper {
/* overflow: auto; */
flex: 1;
font-size: var(--font-size);
}
/* #axis-wrapper { flex: 1; } */
......@@ -739,22 +703,43 @@ section.hidden { display: none; }
========================================================================== */
ol { position: relative; }
/* .sublines */ #axis-wrapper { --row-color: var(--color-01); --row-color-next: var(--color-02); --indent: 0px; --form-indent: 40px; }
/* .sublines */ .sublines { --row-color: var(--color-02); --row-color-next: var(--color-03); --indent: calc(1 * var(--row-indent)); --form-indent: calc(-1 * var(--row-indent)); }
/* .sublines */ .sublines .sublines { --row-color: var(--color-03); --row-color-next: var(--color-04); --indent: calc(2 * var(--row-indent)); --form-indent: calc(-2 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines { --row-color: var(--color-04); --row-color-next: var(--color-05); --indent: calc(3 * var(--row-indent)); --form-indent: calc(-3 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines .sublines { --row-color: var(--color-05); --row-color-next: var(--color-06); --indent: calc(4 * var(--row-indent)); --form-indent: calc(-4 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-06); --row-color-next: var(--color-07); --indent: calc(5 * var(--row-indent)); --form-indent: calc(-5 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-07); --row-color-next: var(--color-08); --indent: calc(6 * var(--row-indent)); --form-indent: calc(-6 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-08); --row-color-next: var(--color-09); --indent: calc(7 * var(--row-indent)); --form-indent: calc(-7 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-09); --row-color-next: var(--color-10); --indent: calc(8 * var(--row-indent)); --form-indent: calc(-8 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-10); --row-color-next: var(--color-11); --indent: calc(9 * var(--row-indent)); --form-indent: calc(-9 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-11); --row-color-next: var(--color-12); --indent: calc(10 * var(--row-indent)); --form-indent: calc(-10 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-12); --row-color-next: var(--color-01); --indent: calc(11 * var(--row-indent)); --form-indent: calc(-11 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-01); --row-color-next: var(--color-02); --indent: calc(12 * var(--row-indent)); --form-indent: calc(-12 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-02); --row-color-next: var(--color-03); --indent: calc(13 * var(--row-indent)); --form-indent: calc(-13 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-03); --row-color-next: var(--color-04); --indent: calc(14 * var(--row-indent)); --form-indent: calc(-14 * var(--row-indent)); }
/* .sublines */ .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-04); --row-color-next: var(--color-05); --indent: calc(15 * var(--row-indent)); --form-indent: calc(-15 * var(--row-indent)); }
.score__mainline {
position: relative;
left: calc(-1.9rem - 8px);
}
.score__mainline { --row-color: var(--color-01); --row-color-next: var(--color-02); --indent: 0px; --form-indent: 40px; }
.sublines { --row-color: var(--color-02); --row-color-next: var(--color-03); --indent: calc(1 * var(--row-indent)); --form-indent: calc(-1 * var(--row-indent)); }
.sublines .sublines { --row-color: var(--color-03); --row-color-next: var(--color-04); --indent: calc(2 * var(--row-indent)); --form-indent: calc(-2 * var(--row-indent)); }
.sublines .sublines .sublines { --row-color: var(--color-04); --row-color-next: var(--color-05); --indent: calc(3 * var(--row-indent)); --form-indent: calc(-3 * var(--row-indent)); }
.sublines .sublines .sublines .sublines { --row-color: var(--color-05); --row-color-next: var(--color-06); --indent: calc(4 * var(--row-indent)); --form-indent: calc(-4 * var(--row-indent)); }
.sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-06); --row-color-next: var(--color-07); --indent: calc(5 * var(--row-indent)); --form-indent: calc(-5 * var(--row-indent)); }
.sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-07); --row-color-next: var(--color-08); --indent: calc(6 * var(--row-indent)); --form-indent: calc(-6 * var(--row-indent)); }
.sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-08); --row-color-next: var(--color-09); --indent: calc(7 * var(--row-indent)); --form-indent: calc(-7 * var(--row-indent)); }
.sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-09); --row-color-next: var(--color-10); --indent: calc(8 * var(--row-indent)); --form-indent: calc(-8 * var(--row-indent)); }
.sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-10); --row-color-next: var(--color-11); --indent: calc(9 * var(--row-indent)); --form-indent: calc(-9 * var(--row-indent)); }
.sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-11); --row-color-next: var(--color-12); --indent: calc(10 * var(--row-indent)); --form-indent: calc(-10 * var(--row-indent)); }
.sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-12); --row-color-next: var(--color-01); --indent: calc(11 * var(--row-indent)); --form-indent: calc(-11 * var(--row-indent)); }
.sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-01); --row-color-next: var(--color-02); --indent: calc(12 * var(--row-indent)); --form-indent: calc(-12 * var(--row-indent)); }
.sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-02); --row-color-next: var(--color-03); --indent: calc(13 * var(--row-indent)); --form-indent: calc(-13 * var(--row-indent)); }
.sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --row-color: var(--color-03); --row-color-next: var(--color-04); --indent: calc(14 * var(--row-indent)); --form-indent: calc(-14 * var(--row-indent)); }
.sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines .sublines { --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; }
......@@ -766,30 +751,55 @@ li.axis { position: relative; }
cursor: not-allowed;
}
li li { padding-left: var(--row-indent); }
.score__mainline ol { padding-left: var(--row-indent); }
.score__line {
margin-top: var(--axis-bottom-padding);
margin-bottom: var(--axis-bottom-padding);
}
.axis-row {
position: relative;
/* z-index: 0; */
padding: 0;
border: none;
padding-bottom: var(--axis-bottom-padding);
/* padding-bottom: var(--axis-bottom-padding); */
display: block;
}
.axis-row--background-wrapper {
display: inline-block;
background: 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))
},
position: relative;
/* background: 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)) */
}
.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;
}
[data-alternative]:not([data-alternative=""]) > ol > 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 > .axis-row--body {
[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;
......@@ -819,23 +829,17 @@ ol ol::after {
/* ie8, chrome, etc */
.axis-row:focus { outline: none; }
/* .axis-row .actant, */
/* .axis-row .adresse { */
/* text-transform: lowercase; */
/* font-size: 80%; */
/* } */
.axis-row section.attachment {
display: inline-block;
}
.axis-row--body, .axis-row--tail, .axis-row-actions {
.line__body, .axis-row--tail, .axis-row-actions {
display: inline-block;
}
.axis-row,
.axis-row--header,
.axis-row--body,
.line__body,
.axis-row--tail {
white-space: nowrap;
}
......@@ -870,33 +874,40 @@ ol ol::after {
left: 0;
}
.linked-node:hover .axis-row--actions {
.linked-node:hover .line__actions {
display: inline-block;
}
.linked-node:hover ol .axis-row--actions,
.linked-node:hover ol .line__actions,
.linked-node:hover ol .icon--handle {
display: none;
}
.axis-row--body, .axis-row--actant, .axis-row--adresse {
.line__body, .line__actant, .line__adresse {
display: inline-block;
vertical-align: middle;
background-color: var(--row-color);
padding: .35em .5em .15em .5em;
text-transform: lowercase;
position: relative;
}
.line__actant,
.line__adresse {
padding: 0 .25em;
}
.axis-row--body {
.line__body {
position: relative;
border-radius: 5px;
padding: .35em .5em .15em .5em;
}
.axis-row--body[data-aspect] {
.line__body[data-aspect] {
padding-right: .7em;
}
.axis-row--body[data-aspect="itératif"]:before,
.axis-row--body[data-aspect="duratif"]:before {
.line__body[data-aspect="itératif"]:before,
.line__body[data-aspect="duratif"]:before {
content: '';
position: absolute;
top: 0; right: 0;
......@@ -905,8 +916,8 @@ ol ol::after {
width: 0;
}
.axis-row--body[data-aspect="sémelfactif"]:after,
.axis-row--body[data-aspect="duratif"]:after {
.line__body[data-aspect="sémelfactif"]:after,
.line__body[data-aspect="duratif"]:after {
content: '';
position: absolute;
bottom: 0; right: 0;
......@@ -919,18 +930,6 @@ ol ol::after {
color: var(--row-color);
}
.actant {
margin-right: .25em;
}
.axis-row--actant {
margin-right: .5em;
}
.axis-row--adresse {
margin-left: .5em;
}
/* [1] Makes sure we load the font with the glyphs */
.icon--handle:before {
/* font-weight: 500; /1* [1] *1/ */
......@@ -939,19 +938,24 @@ ol ol::after {
/* content: "\2593"; */
}
.axis-row .icon--handle {
.icon--handle {
cursor: ns-resize; /* move; */
visibility: hidden;
/* background-color: pink; */
position: absolute;
font-size: var(--font-size--bigger);
left: -34px;
top: 2px;
width: 90px;
/* Make handle artificially big to make it easy to grab */
left: -20%;
top: 0px;
bottom: 0px;
right: 0;
font-size: 120%;
text-align: center;
padding-right: 70%;
padding-top: .35em;
/* left: -20%; */
/* top: 0px; */
/* bottom: 0px; */
/* right: 0; */
/* font-size: 120%; */
/* text-align: center; */
/* padding-right: 70%; */
/* padding-top: .35em; */
/* Keep visible while it crosses the metadata, z-index 1 */
z-index: 2;
}
......@@ -967,84 +971,37 @@ ol ol::after {
bottom: -.15em;
}
/* .metadata {
position: absolute;
top: .2em;
right : calc(100% - (var(--axis-metadata-offset)));
bottom: .5em;
white-space: nowrap;
} */
.metadata {
position: absolute;
top: .2em;
left: calc(var(--row-indent) - var(--axis-line-offset));
bottom: .5em;
}