Commit 9f86bfbb authored by alexandre's avatar alexandre

Final css adjustements before today's presentation

parent 626626d4
@font-face {
font-family: 'TsukurimashouMaruPS';
src: url("../fonts/TsukurimashouMaruPS.otf");
}
a {
color: inherit;
/* text-decoration: inherit; */
/* text-decoration: underline; */
text-decoration-skip: ink;
}
body {
font-family: 'TsukurimashouMaruPS', sans-serif;
font-size: 22px;
line-height: 24px;
font-size: 19px;
line-height: 21px;
}
.outer-wrapper {
display: flex;
box-sizing: border-box;
width: 100vw;
height: 100vh;
box-sizing: border-box;
display: flex;
}
.main-header {
color: white;
background-color: darkgray;
width: 300px;
/* border-right: 3px solid black; */
padding: 30px;
.main-header {
position: relative;
left: 0;
box-sizing: border-box;
width: 300px;
padding: 30px;
transition: all .2s;
left: 0;
}
.main-header--collapsed {
left: -300px;
color: white;
background-color: darkgray;
}
.main-header--collapsed + .main-area {
margin-left: -300px;
}
.main-header--collapsed { left: -300px; }
.main-area {
flex: 1;
padding: 30px 30px;
.main-header--collapsed + .main-area { margin-left: -300px; }
.main-area {
overflow: auto;
transition: all .2s;
margin-left: 0;
padding: 30px 30px;
transition: all .2s;
flex: 1;
}
.btn-hamburger {
font-family: Sans-Serif;
font-size: 16px;
font-weight: bold;
position: absolute;
right: 10px;
top: 10px;
right: 10px;
color: grey;
font-family: Sans-Serif;
font-size: 16px;
font-weight: bold;
}
.btn-hamburger:hover {
cursor: pointer;
color: black;
cursor:pointer;
}
.main-header--collapsed .btn-hamburger {
......@@ -70,241 +77,279 @@ body {
right: -26px;
}
.logo h1 {
font-size: 3em;
line-height: 1em;
}
.logo a {
text-decoration: none;
}
.logo { margin: 21px 0 42px 0; }
/* about */
.body-text p + p,
.body-text p + ul,
.body-text ul + p {
margin-top: 21px;
}
.body-text li:before {
content: "- ";
}
.body-text ul {
margin-left: 2em;
}
.body-text--about {
max-width: 35em;
}
/* Score */
#score {
box-sizing: border-box;
display: flex;
flex-direction: row;
box-sizing: border-box;
outline: 0;
}
#score::-moz-focus-inner { border: 0; } /* firefox */
#score:focus { outline: none; }
#sidebar {
position: relative;
flex: auto 0 0;
padding: 2em;
width: 300px;
overflow-y: auto;
width: 300px;
padding-left: 2em;
font-size: 85%;
flex: auto 0 0;
}
#main-area {
flex: auto 1 1;
position: relative;
display: flex;
flex-direction: column;
position: relative
flex: auto 1 1;
}
#axis-wrapper {
overflow: auto;
padding: 2em;
flex: 1;
overflow: auto;
}
#score h1 {
font-size: 2em;
line-height: 1em;
margin-bottom: 0.5em;
border-bottom: 2px solid;
padding-bottom: 0.5em;
}
li.axis {
position: relative;
}
border-bottom: 2px solid;
li li {
margin-left: 3em;
font-size: 2em;
line-height: 1em;
}
li.axis { position: relative; }
li li { margin-left: 3em; }
fieldset {
margin-bottom: 2em;
padding-left: 1em;
}
fieldset legend {
margin-left: -1em;
}
fieldset legend { margin-left: -1em; }
.fieldgroup {
display: block;
}
.fieldgroup { display: block; }
label {
display: block;
margin-bottom: .5em;
}
label.inline,
section.inline {
display: inline-block;
}
section.inline { display: inline-block; }
label .label-text {
display: inline-block;
width: 9em;
margin-right: .25em;
text-align: left;
display: inline-block;
}
.axis-edit-form {
/* display: none; */
position: fixed;
left: 50px;
top: 30px;
background: white;
z-index: 2;
border-width: 2px 2px 2px 2px;
border-style: solid;
top: 30px;
left: 50px;
width: calc(70vw - 50px - 2em);
margin-left: calc(-.25em - 2px);
padding: .25em;
padding-top: 1.25em;
}
.alt-infos{
background: white;
border: 1px solid blue;
display: none;
padding: 5px;
position:absolute;
/*width: 450px;*/
}
#alt_mode{
display:none;
border-width: 2px 2px 2px 2px;
border-style: solid;
background: white;
}
#alt_n, #alt_p, #boucle_n, #boucle_p{
width: 10px;
.alt-infos {
position: absolute;
display: none;
padding: 5px;
border: 1px solid blue;
background: white;
/*width: 450px;*/
}
.axis-infos{
background: white;
border: 1px solid blue;
display: none;
padding: 5px;
position:absolute;
width: 450px;
#alt_mode { display: none; }
#alt_n,
#alt_p,
#boucle_n,
#boucle_p { width: 10px; }
.axis-infos {
position: absolute;
display: none;
width: 450px;
padding: 5px;
border: 1px solid blue;
background: white;
}
.axis-infos-vue{
.axis-infos-vue {
z-index: 1000;
color: black;
border: 1px solid black !important;
z-index:1000;
}
.axis-title {
position: relative;
margin: 0.25em;
padding: 0.25em;
border: 2px solid;
position: relative;
outline: 0;
}
/* 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 */
.axis-title::-moz-focus-inner {border:0;} /* firefox */
.axis-title:focus { outline:none; } /* ie8, chrome, etc */
#score { outline: 0; }
#score::-moz-focus-inner {border:0;} /* firefox */
#score:focus { outline:none; }
.axis-title::-moz-focus-inner { border: 0; } /* firefox */
.axis-title:focus { outline: none; } /* ie8, chrome, etc */
.axis-title .options,
.axis-title .handle {
/*display: none; */
color:black;
display: inline-block;
padding-left: 10px;
}
.axis-title-edit{
text-transform: uppercase;
display: inline-block;
padding-left: 10px;
/*display: none; */
color: black;
}
.axis-title-view{
border: none !important;
.axis-title-edit { text-transform: uppercase; }
.axis-title-view {
margin: 0 !important;
border: none !important;
}
/*.axis-title:hover .options,
.axis-title:hover .handle { display: inline-block; }*/
.axis-focus { display: inline-block !important; }
/*.axis-title:focus .options,
.axis-title:focus .handle { display: inline-block; }*/
.axis-focus{
display: inline-block !important;
}
.boucle-infos {
position: absolute;
.boucle-infos{
background: white;
border: 1px solid blue;
display: none;
padding: 5px;
position:absolute;
/*width: 450px;*/
}
display: none;
.terme {
font-size: 75%;
}
padding: 5px;
.terme .full {
font-size: 133%;
border: 1px solid blue;
background: white;
}
.terme { font-size: 75%; }
.terme .full { font-size: 133%; }
.condition,
.indications,
.terme {
position: relative;
}
.terme { position: relative; }
.condition .full,
.indications .full,
.terme .full {
background: white;
border: 1px solid black;
color: black;
display: none;
padding: 5px;
position: absolute;
z-index: 2;
top: .5em;
left: .5em;
z-index: 2;
display: none;
max-width: 500px;
padding: 5px;
color: black;
border: 1px solid black;
background: white;
}
.condition:hover .full,
.indications:hover .full,
.terme:hover .full {
display: inline-block;
}
.terme:hover .full { display: inline-block; }
.el_tag{
/*display:none;*/
}
.handle {
height: 1em;
width: 1em;
height: 1em;
cursor: move;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
}
.axis-title-view .handle {
visibility: hidden;
}
.axis-title-view .handle { visibility: hidden; }
.axis-title-view:hover .handle {
visibility: visible;
}
.axis-title-view:hover .handle { visibility: visible; }
.invis_root, .invis {
display: none;
}
.prefix{
/* margin-right: 10px; */
text-decoration: none !important;
.invis_root,
.invis { display: none; }
.prefix {
position: relative;
text-decoration: none !important;
}
/**
......@@ -313,95 +358,94 @@ label .label-text {
*/
.header {
position: absolute;
white-space: nowrap;
right: 100%; /* Position it before the line, irregardless of the header width */
white-space: nowrap;
font-size: 80%;
}
.header .handle,
.header .prefix,
.header .condition,
.header .tag {
color: black;
}
sub, sup {
/* 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;
.header .tag { color: black; }
/* Where the magic happens: makes all browsers position
sub,
sup {
/* Where the magic happens: makes all browsers position
the sup/sup properly, relative to the surrounding text */
position: relative;
position: relative;
/* Note that if you're using Eric Meyer's reset.css, this
/* Note that if you're using Eric Meyer's reset.css, this
is already set and you can remove this rule */
vertical-align: baseline;
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;
/* Move the superscripted text up */
top: -0.5em;
}
sub {
/* Move the subscripted text down, but only
/* Move the subscripted text down, but only
half as far down as the superscript moved up */
bottom: -0.25em;
}
.view_tag{
color:black;
/*font-size: 24px;*/
}
.trigger_infos{
background: white;
border: 0;
/*color:blue;*/
cursor: pointer;
}
.trigger_infos_vue{
background: white;
border: 0;
color: black;
/*color:blue;*/
cursor: pointer;
font-size:85%;
/*font-size: 65%;*/
/* Zero out the line-height so that it doesn't
interfere with the positioning that follows */
line-height: 0;
bottom: -0.25em;
}
.view_tag { color: black; }
.trigger_infos {
cursor: pointer;
border: 0;
background: white;
}
.trigger_infos_vue {
/* 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;
/* Move the superscripted text up */
top: -0.5em;
}
.trigger_conditions_vue, .trigger_terme_vue{
cursor: pointer;
/* Note that if you're using Eric Meyer's reset.css, this
is already set and you can remove this rule */
vertical-align: baseline;
color: black;
border: 0;
background: white;
font-size: 85%;
/* Zero out the line-height so that it doesn't
interfere with the positioning that follows */
line-height: 0;
}
.vis{
/* display: inline; */
}
.vis_box{
display: block;
}
.trigger_conditions_vue,
.trigger_terme_vue { cursor: pointer; }
.vis { /* display: inline; */ }
.vis_box { display: block; }
/* subaxis colors, according to the level of nesting */
li .axis-title { color: rgb(114,147,203); }
li li .axis-title { color: rgb(225,151, 76); }
li li li .axis-title { color: rgb(132,186, 91); }
li .axis-title { color: rgb(114, 147, 203); }
li li .axis-title { color: rgb(225, 151, 76); }
li li li .axis-title { color: rgb(