margin: 1.561rem 0;
}
-p {
+p,
+dt {
+ font-size: 1rem;
+}
+
+dd {
+ font-size: .9rem;
}
body {
/* Message */
.notice::before,
.notice::after,
+.warning::before,
+.warning::after,
.error::before,
.error::after {
content: "⚠";
}
.notice,
+.warning,
.error {
display: flex;
flex-direction: row;
color: #3333c3;
}
+.warning::before,
+.warning::after {
+ /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
+ * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
+ content: "?";
+ /*content: "⌘";*/
+}
+
+.warning {
+ border-color: #c39333;
+ background-color: #f9c333;
+ color: #936333;
+}
+
.flash {
margin: 0 .5rem .5rem;
}
p.notice,
+p.warning,
p.error {
margin-bottom: .5rem;
}
#form,
#content,
#regulation,
-#dashboard {
+#location,
+#session {
border: .1rem solid #00c3f9;
border-radius: .5rem;
margin: .5rem;
border-radius: .2rem;
font-size: .8rem;
color: #066;
+ background-color: transparent;
}
button.submit {
/* Vertical form */
form.col {
- margin-left: .5rem;
- width: 10rem;
}
form.col div {
form.col label {
text-align: center;
- padding-top: 0;
+ padding-right: 0;
}
form.col section {
flex-direction: row;
flex-wrap: wrap;
place-content: space-between;
+ border: 0;
+ margin: 0;
+ padding: 0;
}
#dashboard .grid {
flex-grow: 1;
border-radius: .2rem; /* marche pas sur chrome */
table-layout: fixed;
- width: calc(100% - 12rem);
- border-collapse: collapse;
+ /*width: calc(100% - 12rem);
+ border-collapse: collapse;*/
}
#dashboard .cell {
text-align: center;
}
-#dashboard .seventh {
+#location .seventh {
width: calc(100% / 7);
}
-#dashboard .disabled {
+#location .disabled {
color: #acc;
background-color: #bee;
}
-#dashboard .current {
+#location .current {
background-color: #cff;
}
-#dashboard .next {
+#location .next {
background-color: #eff;
}
-#dashboard .session {
+#location .session {
border-radius: .2rem;
border: .1rem solid #00c3f9;
font-size: .8rem;
text-overflow: ellipsis;
}
-#dashboard .pending {
+#location .pending {
background-color: #ccc;
}
-#dashboard .granted {
+#location .granted {
background-color: #cff;
/*background-color: #33b679;
border-color: #33b679;*/
}
-#dashboard .disputed {
+#location .disputed {
background-color: #fcc;
}
-#dashboard .orphaned {
+#location .orphaned {
background-color: #fc9;
}
+/* Session */
+#session {
+}
+
+#session h2 a::after {
+ content: " >";
+}
+
+#session h2 a:last-child::after {
+ content: none;
+}
+
+#location .panel,
+#session .panel {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ place-content: space-between;
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+#location .grid,
+#session .grid {
+ display: table;
+ line-height: normal;
+ padding: 0;
+ flex-grow: 1;
+ table-layout: fixed;
+ border: 0 none;
+ /*width: calc(100% - 12rem);
+ border-collapse: collapse;*/
+}
+
+#location .grid {
+ width: calc(100% - 12rem);
+ border-collapse: collapse;
+}
+
+#session .row {
+ display: flex;
+ flex-wrap: wrap;
+ margin-bottom: .5rem;
+ border: .1rem solid #00c3f9;
+ border-radius: .2rem;
+}
+
+#location .cell,
+#session .cell {
+ display: table-cell;
+ text-align: left;
+ padding: .5rem;
+ flex-grow: 1;
+ border: 0;
+}
+
+#location .cell {
+ border: .05rem solid #00c3f9;
+ Height: 6rem;
+}
+
+#session .sub {
+ display: flex;
+ flex-direction: column;
+ line-height: normal;
+ margin-bottom: .5rem;
+ margin-top: .5rem;
+ padding: .5rem;
+ border: .1rem solid #00c3f9;
+ border-radius: .2rem;
+}
+
+#session .grid dd dd {
+ text-indent: .5rem;
+}
+
+#location .form,
+#session .form {
+ border: .1rem solid #00c3f9;
+ border-radius: .2rem;
+ padding: .5rem;
+ margin-left: .5rem;
+ width: 10rem;
+}
+
+#location .form label,
+#location .form input,
+#location .form button,
+#session .form label,
+#session .form input,
+#session .form button {
+ text-align: center;
+ min-width: 6rem;
+}
/* Regulation */
#regulation {
/* Footer */
#footer {
border: .1rem solid #00c3f9;
- border-radius: .5rem;
+ Border-radius: .5rem;
margin: .5rem;
margin-top: 0;
padding: .5rem;
}
/* viewport responsive hack */
-@media ( max-width: 650px ) {
+@media ( max-width: 850px ) {
#header {
flex-wrap: wrap;
}
- #dashboard .panel {
+ #location .panel,
+ #session .panel {
place-content: center;
flex-direction: column;
+ flex-wrap: wrap;
}
- #dashboard .grid {
- width: 100%;
- }
-
- #dashboard div.grid {
- display: grid;
+ #location .grid,
+ #location .form,
+ #session .grid,
+ #session .form {
+ width: auto;
}
- .form_col {
+ #location .form,
+ #session .form {
margin: .5rem auto 0 auto;
}
}