Commit f9c5a1e9 authored by alexandre's avatar alexandre

Css cleaning

parent ba849bfe
......@@ -3,50 +3,31 @@
========================================================================== */
:root {
--background-color: rgb(23, 58, 66);
--text-color: rgb(255, 255, 255);
--color-01: #353df6;/* rgb(235, 53, 1); */
--color-02: #006ae2;/* rgb(255, 109, 35); */
--color-03: #008890;/* rgb(160, 168, 13); */
--color-04: #159e2b;/* rgb(74, 158, 21); */
--color-05: #63b808;/* rgb(0, 136, 144); */
--color-06: #a5ae07;/* rgb(43, 95, 227); */
--color-07: #ff8803;/* rgb(124, 59, 225); */
--color-08: #eb6501;/* rgb(200, 41, 107); */
--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);
--color-01: #353df6; /* rgb(235, 53, 1); */
--color-02: #006ae2; /* rgb(255, 109, 35); */
--color-03: #008890; /* rgb(160, 168, 13); */
--color-04: #159e2b; /* rgb( 74, 158, 21); */
--color-05: #63b808; /* rgb( 0, 136, 144); */
--color-06: #a5ae07; /* rgb( 43, 95, 227); */
--color-07: #ff8803; /* rgb(124, 59, 225); */
--color-08: #eb6501; /* rgb(200, 41, 107); */
--color-09: #e22f20;
--color-10: #c8296b;
--color-11: #b026bc;
--color-12: #871dff;
--background-color-button: rgb(25,79,95);
/* Lighten on press */
/* --background-color-button--pressed: rgb(41,93,107); */
/* Lighten on press */
--background-color-button--pressed: rgb(16,41,48);
--button-color-disabled: rgb(55,126,146);
--row-indent: 36pt;
--axis-line-width: 2px;
--axis-bottom-padding: .4em;
--axis-tag-size: 1.8em;
}
ol { position: relative; }
ol { --row-color: var(--color-01); --row-color-next: var(--color-02); --indent: 0; --form-indent: 40px; }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
......@@ -82,6 +63,7 @@ ol ol ol ol ol ol ol ol ol ol ol ol ol ol ol ol { --row-color: var(--color-04);
/* ==========================================================================
Global
========================================================================== */
......@@ -215,8 +197,6 @@ section.hidden { display: none; }
/* ==========================================================================
Modal windows
========================================================================== */
......@@ -240,26 +220,8 @@ section.hidden { display: none; }
padding: 8px;
background: #fff;
color: black;
}
/* .close { */
/* background: #606061; */
/* color: #ffffff; */
/* line-height: 25px; */
/* position: absolute; */
/* right: -12px; */
/* text-align: center; */
/* top: -10px; */
/* width: 24px; */
/* text-decoration: none; */
/* font-weight: bold; */
/* border-radius: 12px; */
/* box-shadow: 1px 1px 3px #000; */
/* } */
/* .close:hover { background: #00d9ff; } */
.modal-dialog label { display: none; }
.modal-dialog input[type="email"],
......@@ -294,7 +256,6 @@ section.hidden { display: none; }
/* ==========================================================================
General layout
========================================================================== */
......@@ -323,14 +284,6 @@ section.hidden { display: none; }
.main-header.is-collapsed .content { margin-left: -330px; }
.axis-title-edit { text-transform: uppercase; }
.axis-title-view {
margin: 0 !important;
border: none !important;
}
.logo { margin: 21px 0 42px 0; }
.logo h1 {
......@@ -345,16 +298,12 @@ section.hidden { display: none; }
/* Main area (content)
========================================================================== */
/* .main-header.is-collapsed + .main-area { margin-left: -300px; } */
.main-area {
overflow: auto;
margin-left: 0;
/* padding: 30px 60px; */
transition: all .2s;
flex: 1;
}
......@@ -482,9 +431,10 @@ section.hidden { display: none; }
background: transparent;
border: 1px solid transparent;
}
*/
*/
/* Score form
......@@ -629,9 +579,32 @@ section.hidden { display: none; }
font-size: 11pt;
}
/* Score axis
========================================================================== */
ol { position: relative; }
ol { --row-color: var(--color-01); --row-color-next: var(--color-02); --indent: 0; --form-indent: 40px; }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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)); }
ol 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"] ol { display: none; }
li.axis { position: relative; }
......@@ -863,6 +836,15 @@ li + li .alt-symbol { display: none; }
position: relative;
}
.axis-title-edit { text-transform: uppercase; }
.axis-title-view {
margin: 0 !important;
border: none !important;
}
.attachment--view {
position: absolute;
z-index: 3;
......@@ -967,6 +949,8 @@ li + li .alt-symbol { display: none; }
/* Axis edit form
========================================================================== */
......@@ -995,28 +979,6 @@ li form { color: var(--row-color); } */
}
.help__frame {
overflow: auto;
width: 500px;
height: 100%;
transition: all .2s;
}
#help.is-collapsed .help__frame { margin-right: -530px; }
.help__content {
color: #173a42;
background-color: white;
padding: 30px;
}
.help__content h2 { margin-top: 28pt; text-align: center; margin-bottom: 14pt; }
.help__content p + p { margin-top: 14pt; }
.help__content li:before { content: "– "; }
/* option colored background */
/* .axis-title { color: white; background-color: var(--row-color); display: inline-block; background-clip: content-box; } */
/* .axis-title {color: var(--row-color); } */
......@@ -1183,6 +1145,38 @@ li .icon--tag { color: white } */
/* ==========================================================================
Help
========================================================================== */
.help__frame {
overflow: auto;
width: 500px;
height: 100%;
transition: all .2s;
}
.help.is-collapsed .help__frame { margin-right: -530px; }
.help__content {
color: #173a42;
background-color: white;
padding: 30px;
}
.help__content h2 { margin-top: 28pt; text-align: center; margin-bottom: 14pt; }
.help__content p + p { margin-top: 14pt; }
.help__content li:before { content: "– "; }
/* ==========================================================================
Filters
========================================================================== */
.btn-filter {
font-family: 'GothicA1', sans-serif;
......@@ -1200,30 +1194,10 @@ li .icon--tag { color: white } */
.btn-filter { background: var(--background-color-button); }
.filters {
/* display: flex; */
}
.filters__filter + .filters__filter {
margin-top: 1em;
}
/* .filters__filter li:nth-of-type(n+3){ */
/* display: none */
/* } */
/* .filters__filter:hover li:nth-of-type(n+3){ */
/* display: list-item; */
/* } */
/* .filters__filter:hover ol:after { */
/* content: "" */
/* } */
/* .filters__filter ol:after { */
/* content: "..." */
/* } */
.filters__filter li {
cursor: pointer;
}
......@@ -1232,16 +1206,13 @@ li .icon--tag { color: white } */
color: var(--button-color-disabled);
}
/* #tag-filter li { display: inline; text-overflow: ellipsis } */
.score-list { display: flex; }
.scores { flex: 1; overflow: auto; }
.score-filters {
height: 100vh;
}
/* ==========================================================================
Panels
========================================================================== */
.panel {
position: relative;
......@@ -1288,14 +1259,28 @@ li .icon--tag { color: white } */
filter: brightness(200%);
}
.panel__content {
.panel__content {}
}
/* ==========================================================================
Misc
========================================================================== */
.content {
padding: 30px;
}
.score-list { display: flex; }
.scores { flex: 1; overflow: auto; }
.score-filters {
height: 100vh;
}
.score-filters .content {
width: 300px;
transition: all .2s;
......@@ -1306,3 +1291,8 @@ li .icon--tag { color: white } */
margin-right: -360px;
}
......@@ -2509,8 +2509,7 @@ window.W = window.W || {};
template: '#help-template',
attributes: {
id: 'help',
class: 'is-collapsed panel panel--right'
class: 'help is-collapsed panel panel--right'
},
ui: {
......@@ -2588,7 +2587,7 @@ window.W = window.W || {};
// replaceElement: true
},
help: {
el: '#help',
el: '.help',
replaceElement: true
},
modal: {
......
......@@ -11,6 +11,3 @@
</ul>
<p>Une partition W est un système ouvert, qui peut tout à fait contenir des morceaux d’autres systèmes notationnels (la partition d’une fugue de Bach, une chorégraphie de Merce Cunningham générée par LifeForms, le texte de <em>Richard III</em>, un plan de scène). Il ne s’agit donc pas de se substituer à un système de notation existant (la danse ou la musique, par exemple, disposent de systèmes notationnels complets et rigoureux) mais de créer une structure multidimensionnelle permettant d’intégrer leurs partitions (et d’autres : texte, conduites lumière, son enregistré...) dans un ensemble plus vaste et articulé.</p>
<%- t('Welcome') %>
......@@ -3,11 +3,9 @@ Résultats pour: <%- search %>
<% } %>
<% if (language) { %>
<span class="btn-filter" data-filter="language" data-value="<%- language %>"><span class="btn-filter__label"><%- ('langue') %></span>:<%- language %> [x]</span>
<% } %>
<% if (score_type) { %>
<span class="btn-filter" data-filter="score_type" data-value="<%- score_type %>"><span class="btn-filter__label"><%- ('type de partition') %></span>:
<span class="btn-filter" data-filter="language" data-value="<%- language %>"><span class="btn-filter__label"><%- ('Langue') %></span>:<%- language %> [x]</span>
<% } else if (score_type) { %>
<span class="btn-filter" data-filter="score_type" data-value="<%- score_type %>"><span class="btn-filter__label"><%- ('Type de partition') %></span>:
<% if (score_type === 1) { %>
<%- t('Transcription') %>
<% } else if (score_type === 2) { %>
......@@ -17,8 +15,6 @@ Résultats pour: <%- search %>
<% } %>
[x]
</span>
<% } %>
<% if (tags) { %>
<span class="btn-filter" data-filter="tags" data-value="<%- tags %>"><span class="btn-filter__label"><%- ('tags') %></span>:<%- tags %> [x]</span>
<% } else if (tags) { %>
<span class="btn-filter" data-filter="tags" data-value="<%- tags %>"><span class="btn-filter__label"><%- ('Tags') %></span>:<%- tags %> [x]</span>
<% } %>
<header class="main-header"></header>
<main class="main-area"></main>
<div id="help"></div>
<div class="help"></div>
<div class="modal"></div>
......@@ -8,9 +8,9 @@
<ul>
<% if (username) { %>
<li><a href="#" class="btn-logout"><%- t('se déconnecter') %></a></li>
<li><a href="#" class="btn-logout"><%- t('Se déconnecter') %></a></li>
<% } else { %>
<li><a href="#" class="btn-login"><%- t('se connecter') %></a> <a href="#" class="btn-register"><%- t('s\'inscrire') %></a></li>
<li><a href="#" class="btn-login"><%- t('Se connecter') %></a> <a href="#" class="btn-register"><%- t('S’inscrire') %></a></li>
<% } %>
<!-- <li><a href="#" class="btn-lang" data-lang="en">en</a> <a href="#" class="btn-lang" data-lang="fr">fr</a></li> -->
</ul>
......@@ -18,7 +18,7 @@
<div class="logo">
<h1><a href="/">Organon</a></h1>
<h2><%- t('Un logiciel pour noter l’action performée, développé par W') %></h2>
<h2><%- t('Un logiciel pour noter l’action performée, développé par W.') %></h2>
</div>
<div id="create"></div>
......
<div id="intro" class="body-text body-text--about">
<p>La notation W est un système de notation de l’action performée. La notation W permet aussi bien de transcrire une performance qui a déjà eu lieu (dans le cas d’une passation de rôle, par exemple, ou de la constitution d’un répertoire) que d’élaborer la partition générale d’un spectacle à venir. Dans tous les cas, elle se veut un instrument de partage et de clarification des enjeux d’un travail collectif, matérialisés et objectivés par la partition.</p>
<p><a href="/apropos/"><%- t('En savoir plus') %></a></p>
<div class="body-text body-text--about">
<p>La notation W est un système de notation de l’action performée. La notation W permet aussi bien de transcrire une performance qui a déjà eu lieu (dans le cas d’une passation de rôle, par exemple, ou de la constitution d’un répertoire) que d’élaborer la partition générale d’un spectacle à venir. Dans tous les cas, elle se veut un instrument de partage et de clarification des enjeux d’un travail collectif, matérialisés et objectivés par la partition.</p>
<p><a href="/apropos/"><%- t('En savoir plus') %></a></p>
</div>
<br>
<br>
<section>
<h1><%- t('Sélection de partitions') %></h1>
<div id="latest_updated"></div>
<h1><%- t('Sélection de partitions') %></h1>
<div id="latest_updated"></div>
</section>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment