[airbundle] / Resources / public / css / screen.css

/* Reset link */
a {
        /*text-decoration: none;*/
        color: #136;
}

a:hover {
        text-decoration: underline solid #00c3f9;
}

/* Font styling */
html, body, dd, li, p, td {
        /* DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
        font-family: 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif;
}

button, code, input, option, optgroup, pre, select, textarea {
        font-family: 'Droid Sans Mono', monospace;
}

dt, h1, h2, h3, h4, h5, h6, label, legend, th, details {
        font-family: 'Droid Serif', serif;
}

/* Default styling */
h1 {
        font-size: 1.5rem;
        margin: 0 0 .5rem;
        padding: .5rem;
}

h2 {
        font-size: 1.17rem;
        margin: 0 0 .5rem;
        padding: .4rem;
}

h3 {
        font-size: 1rem;
        margin: 0 0 .5rem;
        padding: .4rem;
}

h4 {
        font-size: .85rem;
        margin: 0 0 .5rem;
        padding: .3rem;
}

h5 {
        font-size: .67rem;
        margin: 0 0 .5rem;
        padding: .2rem;
}

h6 {
        font-size: .5rem;
        margin: 0 0 .5rem;
        padding: .1rem;
}

p {
        font-size: .9rem;
        margin: 0 0 .4rem;
        padding: .4rem;
}

article,
section,
nav {
        margin: 0 .5rem .5rem;
        border: .1rem solid #00c3f9;
        border-top: 0;
        border-left: 0;
        border-radius: .5rem;
}

article article {
        border-radius: .4rem;
}

article article article {
        border-radius: .3rem;
}

section {
        border-radius: .4rem;
}

/*article {
        background-color: #cff;
}

article article {
        background-color: white;
}

article article article {
        border-radius: .3rem;
        background-color: #cff;
}*/

header {
        margin: 0;
        padding-bottom: .5rem;
        /*background-color: #369;
        border-radius: inherit;*/
        background-color: #00c3f9;
        color: #136;
        border-radius: .4rem .4rem 0 0;
}

article header {
        border-radius: .4rem .4rem 0 0;
        margin-bottom: .5rem;
}

article article header {
        border-radius: .3rem .3rem 0 0;
        margin-bottom: .3rem;
}

article article article header {
        border-radius: .2rem .2rem 0 0;
        margin-bottom: .2rem;
}

header h1,
header h2,
header h3,
header h4,
header h5,
header h6,
header p {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0 none;
}

/*nav strong {
        display: block;
        font-size: 1.17rem;
        margin: 0 0 .5rem;
        padding: .4rem;
}*/

strong {
        font-weight: bold;
}

pre {
        margin: 0 .5rem .3rem;
        font-size: .8rem;
}

dl {
        margin: 0 .5rem .5rem;
}

dl:first-child,
dl:only-child,
dl:first-of-type {
        margin-top: .5rem;
}

dt {
        color: #369;
        font-size: .9rem;
        font-weight: bold;
}

dd {
        font-size: .9rem;
        margin-left: 1rem;
}

.map figure,
.multimap figure,
.thumb figure {
        text-align: center;
}

.map img,
.multimap img,
.thumb img {
        border-radius: .2rem;
        border: .1rem solid #00c3f9;
        aspect-ratio: 1;
}

.map dd {
        margin: 0;
}

.map dd img {
        width: 100%;
        width: calc(100% - .2rem);
        height: auto;
}

.thumb img {
        width: 100%;
        width: calc(100% - 1.2rem);
}

.four .multimap {
        grid-column: span 4;
}

.three .multimap {
        grid-column: span 3;
}

.two .multimap {
        grid-column: span 2;
}

body {
        display: flex;
        flex-flow: column wrap;
        color: #036;
}

ul {
        font-size: .9rem;
        list-style: ' - ' inside none;
        padding: .5rem;
        margin: 0 0 .5rem 0;
}

nav ul {
        list-style: none inside none;
        gap: .5rem;
        /*margin: .5rem;*/
}

/*nav ul ul {
        margin-top: .5rem;
        margin-bottom: 0;
}*/

/* Form */
label {
        font-size: .8rem;
        white-space: nowrap;
}

button,
input,
select,
option,
optgroup,
textarea {
        border: .05rem solid #00c3f9;
        border-radius: .2rem;
        font-size: .75rem;
        color: #066;
        background-color: transparent;
        box-sizing: border-box;
}

form {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        margin: 0 .5rem .5rem;
        text-align: center;
}

form .row {
        flex-direction: row;
}

form div {
        display: flex;
        align-content: space-around;
        justify-content: center;
        flex-direction: column;
        margin-bottom: .5rem;
}

form div:only-child,
form div:last-child,
form div:last-of-type {
        margin-bottom: 0;
}

form label {
        width: 12rem;
        line-height: 1.3rem;
        padding-right: 1rem;
        text-align: right;
}

form label.captcha {
        line-height: normal;
}

form label.captcha img {
        height: 1.325rem;
}

form input,
form option,
form optgroup,
form select,
form textarea,
form section section {
        width: 24rem;
        padding: .1rem;
        margin: 0 auto;
}

form select {
        padding: 0 .1rem .1rem .1rem;
}

form button {
        width: 10rem;
        /*margin: .5rem auto 0 auto;*/
        margin: 0 auto;
        padding: 0 .1rem .2rem .1rem;
}

form .message {
        margin: 0 0 .5rem 0;
}

form div .message {
        margin: .25rem 0 0 0;
}

/* Vertical form */
.location .col label,
.col label {
        width: 8rem;
        padding-right: 0;
        padding-bottom: .2rem;
        text-align: center;
        margin: 0 auto;
}

.location .col input,
.location .col textarea,
.col input,
.col option,
.col optgroup,
.col select,
.col textarea {
        width: 8rem;
}

.col button {
        width: 8rem;
}

.col .row {
        flex-direction: column;
}

.col div.date {
        flex-direction: row;
        justify-content: space-between;
}

/* Header */
#header {
        background-color: #cff;
        border: .1rem solid #136;
        border-top: 0;
        border-left: 0;
        border-radius: 0 0 .5rem .5rem;
        margin: 0 .5rem .5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-weight: bold;
        line-height: 45px;
        padding: .5rem;
        gap: .5rem;
}

#header div {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: .5rem;
}

#logo {
        padding: 0;
        white-space: nowrap;
        color: #09c;
        text-shadow: 1.5px 1.5px 3px #136;
        text-decoration: none;
        display: flex;
        font-family: 'Lemon', sans-serif;
        font-size: 2rem;
        line-height: 45px;
        gap: .5rem;
}

#logo img,
#logo span {
        margin: 0 auto;
}

#title {
        margin: .25rem 0 0;
        padding: 0;
        border-bottom: 0 none;
        text-align: right;
        display: inline-grid;
        flex: 1 1 auto;
        font-family: 'Lemon', sans-serif;
        font-weight: normal;
        /*white-space: nowrap;*/
}

#title a {
        text-decoration: none;
        color: #09c;
        text-shadow: 1.5px 1.5px 3px #136;
        /*overflow-x: hidden;
        text-overflow: ellipsis;*/
}

#nav {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        line-height: 2.5rem;
        margin: 0;
        border: 0 none;
}

#nav a {
        flex: 1 1 auto;
        border: .1rem solid #136;
        border-top: 0;
        border-left: 0;
        border-radius: .2rem;
        background-color: #00c3f9;
        color: #136;
        text-align: center;
        padding: 0 .25rem;
}

/* Message */
.message {
        margin: 0 .5rem .5rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-size: .9rem;
        padding: .2rem;
        border-radius: .2rem;
        text-align: center;
        border: .05rem solid transparent;
}

.message::before,
.message::after {
        margin: auto 0;
        padding: 0 .25rem;
}

.message ul {
        margin: 0;
        list-style: none inside none;
        gap: .1rem;
}

.mortal,
.mortal button,
.mortal select {
        /*border-color: #c33333;
        color: #c33333;*/
        border-color: #930;
        background-color: #f9c3c3;
        color: #930;
}

.dangerous,
.mortal {
        border-radius: .2rem;
        padding: .5rem 0;
}

.error {
        border-color: #c33333;
        background-color: #f9c3c3;
        color: #c33333;
}

.error::before,
.error::after {
        /*XXX: display /!\ symbol */
        content: "⚠";
}

.notice {
        border-color: #3333c3;
        background-color: #c3c3f9;
        color: #3333c3;
}

.notice::before,
.notice::after {
        /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
         * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
        /*XXX: display i symbol */
        content: "ℹ";
        /*XXX: display # symbol */
        /*content: "⌘";*/
}

.dangerous,
.dangerous button,
.dangerous select {
        /*border-color: #c39333;
        background-color: #f9c333;
        color: #936333;*/
        border-color: #930;
        background-color: #fc9;
        color: #930;
}

.warning {
        border-color: #c39333;
        background-color: #f9c333;
        color: #936333;
}

.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: "?";
        /*XXX: display # symbol */
        /*content: "⌘";*/
}

/* Dashboard */
#dashboard,
#form,
#recover,
#regulation {
        /*border-radius: .5rem;*/
        /*border: .1rem solid #00c3f9;
        margin: .5rem;
        margin-top: 0;
        display: flex;
        flex-direction: column;*/
}

.panel {
        display: flex;
        flex-direction: row;
        margin: 0 .5rem .5rem;
        gap: .5rem;
}

.grid {
        display: grid;
        border-style: solid;
        border-color: #00c3f9;
        border-radius: .2rem;
        box-sizing: border-box;
        border-collapse: collapse;
        grid-gap: .1rem;
        flex: 1 1 auto;
        margin: 0 0 auto 0;
        padding: 0;
}

.grid article,
.grid section {
        border-collapse: inherit;
        /*border-radius: inherit;*/
        border-style: inherit;
        /*border-width: .1rem;
        border-width: inherit;*/
        box-sizing: inherit;
        flex-grow: inherit;
        margin: 0;
        min-height: 5rem;
        overflow: hidden;
}

.grid header {
        border-radius: .2rem .2rem 0 0;
        margin-bottom: 0;
}

.grid ul {
        /*margin: .1rem;*/
        padding: .1rem;
        margin: 0;
}

/*.grid section {
        border-color: inherit;
}*/

/*.grid ul {
        display: block;
        margin: .1rem;
        font-size: .8rem;
        list-style: none inside none;
}*/

.grid li {
        border-width: .1rem;
        border-style: solid;
        border-radius: .2rem;
        white-space: nowrap;
        padding: .1rem;
        display: flex;
        margin: 0 0 auto;
        flex-direction: row;
        justify-content: space-between;
        overflow-x: hidden;
        text-overflow: ellipsis;
}

/*XXX: required by ul display:block for overflow:hidden*/
/*.grid li:only-child,
.grid li:last-child,
.grid li:last-of-type {
        margin: 0;
}*/

.grid a {
        /*TODO: voir pourquoi on a besoin d'un overflow-y de merde, sans une putain de scrollbar s'affiche dans certaines conditions sur chrome, depuis le passage de deux lignes de grid à 3 !!!*/
        /*Est-ce parce que le city est pas expanded ???*/
        overflow-y: clip;
        overflow-x: hidden;
        text-overflow: ellipsis;
}

.grid p {
        padding: 0 0 .3rem;
        margin: 0;
}

.grid p:only-child,
.grid p:last-child,
.grid p:last-of-type {
        padding: 0;
}

.current {
        filter: hue-rotate(-90deg) saturate(2);
}

.granted {
        background-color: #cff;
        border-color: #00c3f9;
}

/*.granted,
.granted a {
        background-color: #cff;
        border-color: #00c3f9;
}

.disputed,
.disputed a {
        border-color: #930;
        background-color: #fc9;
        color: #930;
}*/

.highlight {
        filter: hue-rotate(90deg);
}

.canceled {
        filter: hue-rotate(180deg) grayscale(33%);
}

.locked {
        filter: hue-rotate(180deg);
}

.pending {
        filter: grayscale(33%);
}

.disabled {
        filter: grayscale(66%);
}

/*.canceled,
.canceled a,
.canceled h2,
.canceled header {
        color: #963;
        background-color: #fddddd;
        border-color: #963;
}

.locked,
.locked a {
        border-color: #930;
        background-color: #f9c3c3;
        color: #930;
}

.pending,
.pending a {
        background-color: #ccc;
        border-color: #066;
}

.highlight,
.highlight a,
.highlight h3,
.highlight h3 a {
        border-color: #3333c3;
        background-color: #c3c3f9;
        color: #606;
}*/

.calendar a {
        display: grid;
        /*grid-template-columns: 1fr auto fit-content(1fr);*/
        grid-template-columns: max-content 1fr max-content;
        flex: 1 1 auto;
        grid-gap: .1rem;
        /*XXX: reset to visible to prevent scroll*/
        overflow-x: visible;
}

.calendar .reducible {
        overflow-x: hidden;
        text-overflow: ellipsis;
        text-align: center;
}

.calendar .glyph {
        font-family: 'Noto Emoji', 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif;
}

.calendar .temperature,
.calendar .rain,
.calendar .rate {
        line-height: 1rem;
        text-align: right;
}

.calendar .rate {
        text-align: center;
}

.calendar .info {
        line-height: 1rem;
        text-align: right;
}

.calendar .pseudonym {
        grid-column: span 2;
}

.seven {
        grid-template-columns: repeat(7, 1fr);
}

.four {
        grid-template-columns: repeat(4, 1fr);
}

.three {
        grid-template-columns: repeat(3, 1fr);
}

.two {
        grid-template-columns: repeat(2, 1fr);
}

/*.city .grid h3,
.location .grid h3,
.city .grid h4,
.location .grid h4 {
        border-style: none;
        margin: 0;
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.city .grid article,
.location .grid article {
        min-height: auto;
        height: fit-content;
}

.city .grid {
        gap: .5rem;
}*/

.location form {
        margin: .5rem auto;
}

.location form .row {
        flex-direction: column;
}

.location form div {
        margin-left: auto;
        margin-right: auto;
}

.location label {
        width: 20rem;
        padding-right: 0;
        text-align: center;
}

.location input,
.location textarea {
        width: 20rem;
        margin: 0 .1rem;
}

.form {
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: .5rem;
}

.form h2 {
        font-size: 1.17rem;
        padding: .4rem;
}

.form a {
        white-space: nowrap;
}

.form section {
        margin: 0;
        border: .05rem solid #00c3f9;
        border-radius: .2rem;
        width: 100%;
}

.form form {
        gap: .5rem;
}

/* Footer */
#footer {
        border: .1rem solid #00c3f9;
        border-radius: .5rem;
        margin: .5rem;
        margin-top: 0;
        padding: .5rem;
        text-align: center;
        font-size: .8rem;
        line-height: 2.5rem;
        display: flex;
        justify-content: space-between;
        background-color: #cff;
        gap: .5rem;
}

#footer summary::after {
        display: none;
}

#footer summary::-webkit-details-marker {
        display: none;
}

#footer ul {
        list-style: none inside none;
        margin: 0;
}

#footer a,
#footer details {
        padding: 0 .5rem;
        border: .1rem solid #136;
    border-top: 0;
    border-left: 0;
    border-radius: .2rem;
        background-color: #00c3f9;
        color: #136;
        justify-content: center;
}

#footer details a {
        padding: 0;
        border: 0 none;
}

/* viewport responsive hack */
@media ( max-width: 1400px ) {
        .location label,
        .location input,
        .location textarea {
                width: 12rem;
        }

        .session .three {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media ( max-width: 1000px ) {
        .panel {
                /*flex-flow: column-reverse wrap;*/
                flex-flow: column wrap;
        }

        .location .two {
                grid-template-columns: repeat(2, 1fr);
        }
}

@media ( max-width: 900px ) {
        .form {
                flex-direction: row;
        }

        form label {
                width: 6rem;
                line-height: 2rem;
        }

        form label.captcha img {
                height: auto;
                width: 6rem;
                padding: .25rem 0;
        }

        form input,
        form option,
        form optgroup,
        form select,
        form textarea,
        form section section {
                width: 20rem;
                line-height: 2rem;
        }

        form button {
                width: 6rem;
                line-height: 2rem;
        }

        .col label,
        .col input,
        .col option,
        .col optgroup,
        .col select,
        .col textarea {
                width: 12rem;
        }

        .col button {
                width: 12rem;
        }

        .seven {
                grid-template-columns: repeat(4, 1fr);
        }

        .calendar .sunday {
                grid-column: span 2;
        }

        /*.grid section:nth-child(7n) {
                grid-column: span 2;
        }*/

        .four {
                grid-template-columns: repeat(3, 1fr);
        }

        .three {
                grid-template-columns: repeat(2, 1fr);
        }

        .two {
                grid-template-columns: repeat(1, 1fr);
        }

        .four .multimap {
                grid-column: span 3;
        }

        .three .multimap {
                grid-column: span 2;
        }

        .two .multimap {
                grid-column: span 1;
        }

        /*#dashboard .seventh:nth-child(7n+1),
        #dashboard .seventh:nth-child(7n+2),
        #dashboard .seventh:nth-child(7n+3),
        #dashboard .seventh:nth-child(7n+4) {
                width: calc(100% / 4 - (3/4*.1rem));
        }

        #dashboard .seventh:nth-child(7n+5),
        #dashboard .seventh:nth-child(7n+6),
        #dashboard .seventh:nth-child(7n+7) {
                width: calc(100% / 3 - (2/3*.1rem));
        }*/
}

@media ( max-width: 700px ) {
        .session .three {
                grid-template-columns: repeat(1, 1fr);
        }

        .multimap img {
                width: 100%;
                width: calc(100% - .2rem);
                height: auto;
        }
}

@media ( max-width: 600px ) {
        form label {
                margin: 0 auto;
        }

        form input,
        form option,
        form optgroup,
        form select,
        form textarea,
        form section section {
                width: 14rem;
                margin: 0 auto;
        }

        #logo {
                flex-direction: column;
        }

        .seven {
                grid-template-columns: repeat(2, 1fr);
        }

        /*.grid section:nth-child(7n) {
                grid-column: span 2;
                margin-bottom: .5rem;
        }

        .grid section:only-child,
        .grid section:last-child,
        .grid section:last-of-type {
                margin-bottom: 0;
        }*/

        .calendar .sunday {
                margin-bottom: .5rem;
        }

        .calendar .sunday:only-child,
        .calendar .sunday:last-child {
                margin-bottom: 0;
        }

        .four {
                grid-template-columns: repeat(2, 1fr);
        }

        .three {
                grid-template-columns: repeat(1, 1fr);
        }

        .four .multimap {
                grid-column: span 2;
        }

        .three .multimap {
                grid-column: span 1;
        }

        .location .two {
                grid-template-columns: repeat(1, 1fr);
        }

        /*#dashboard .seventh:nth-child(n) {
                width: calc(100% / 2 - .1rem);
        }

        #dashboard .seventh:nth-child(7n) {
                width: calc(100%);
        }*/

        /*.city .two,
        .location .two {
                grid-template-columns: 1fr;
        }

        .city .grid article,
        .location .grid article {
                overflow: hidden;
        }*/
}

@media ( max-width: 450px ) {
        #header div {
                flex-direction: column;
        }

        #title {
                text-align: center;
        }

        #logo {
                flex-direction: row;
        }

        dd, p, #footer {
                font-size: 110%;
        }

        a, dd, figcaption, #footer {
                /*XXX: required to validate Tap targets are sized appropriately*/
                line-height: 3rem;
        }

        figure,
        .calendar a {
                line-height: normal;
        }

        form .row,
        .grid,
        .form,
        #footer {
                flex-direction: column;
        }

        form label {
                text-align: center;
        }

        .seven {
                grid-template-columns: repeat(1, 1fr);
        }

        /*.grid section:nth-child(n) {
                grid-column: auto;
        }*/
        .calendar .sunday {
                grid-column: auto;
        }

        .four {
                grid-template-columns: repeat(1, 1fr);
        }

        .four .multimap {
                grid-column: span 1;
        }
}

@media ( max-width: 320px ) {
        #logo {
                flex-direction: column;
        }

        #title {
                white-space: normal;
        }
}

@media ( max-width: 260px ) {
        .col label,
        .col input,
        .col option,
        .col optgroup,
        .col select,
        .col textarea {
                width: 10rem;
        }

        .col button {
                width: 10rem;
        }
}