New page scheme

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

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

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

h1::first-letter,
h2::first-letter,
h3::first-letter,
h4::first-letter,
h5::first-letter,
h6::first-letter,
a::first-letter {
        color: #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;
        font-display: swap;
}

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

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

/* Default styling */
h1 {
        font-size: 2rem;
}

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

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

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

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

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

header {
        margin: 0 0 .5rem;
}

header h2 {
        margin: 0;
        padding: .5rem .5rem .3rem;
        border-bottom: 0 none;
}

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

h2, h3, h4, h5, header, nav strong {
        background-color: #cff;
        border-bottom: .1rem solid #00c3f9;
}

strong {
        font-weight: bold;
}

p {
        margin: 0 .5rem .3rem;
        font-size: .9rem;
}

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 {
        font-size: .9rem;
        font-weight: bold;
}

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

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

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

ul {
        display: grid;
        margin: 0 .5rem .3rem;
        font-size: .9rem;
        list-style: ' - ' inside none;
        gap: .3rem;
}

nav ul {
        list-style: none inside none;
        margin-bottom: .5rem;
        gap: .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;
        padding-right: 1rem;
        text-align: right;
}

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 */
.col label {
        width: 8rem;
        padding-right: 0;
        padding-bottom: .2rem;
        text-align: center;
        margin: 0 auto;
}

.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: transparent;
        border: .1rem solid #00c3f9;
        border-top: 0;
        border-radius: 0 0 .5rem .5rem;
        margin: 0 .5rem .5rem;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        line-height: 32px;
        font-size: 32px;
        padding: .5rem;
        gap: .5rem;
}

#header h1 {
        padding: 0;
        margin: 0;
        white-space: nowrap;
        width: 171px;
        height: 32px;
}

#header h2 {
        display: none;
}

#header nav {
        display: flex;
        flex: 1 1 auto;
        border-style: none;
        margin: 0;
}

#header ul {
        display: flex;
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0;
        gap: .5rem;
}

#header li {
        display: flex;
        flex: 1 1 auto;
        border-radius: .2rem;
        border: .1rem solid #00c3f9;
        background-color: #cff;
        justify-content: center;
}

#header ul a {
        text-align: center;
        font-weight: bold;
}

/* 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;
}

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

.grid h3 {
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}

.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 .1rem;
        flex-direction: row;
        justify-content: space-between;
}

.grid li a:first-letter {
        color: inherit;
}

/*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 {
        overflow-x: hidden;
        text-overflow: ellipsis;
}

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

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

.current,
.current h3 {
        background-color: #cfc;
        border-color: #008000;
        color: #008000;
}

.current h3:first-letter {
        color: #00b000;
}

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

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

.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 {
        border-color: #3333c3;
        background-color: #c3c3f9;
        color: #3333c3;
}

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

.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;
}

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

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

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

.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);
}

.location h3 {
        border-style: none;
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.location p {
        margin: 0 .5rem .5rem;
}

.location .grid article,
.location .grid section {
        min-height: auto;
}

.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;
        display: flex;
        justify-content: space-between;
        background-color: #cff;
}

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

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

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

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

@media ( max-width: 900px ) {
        .panel {
                flex-flow: column wrap;
        }

        .form {
                flex-direction: row;
        }

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

        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);
        }

        /*#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: 600px ) {
        form label {
                margin: 0 auto;
        }

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

        #header {
                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,
        .three {
                grid-template-columns: repeat(2, 1fr);
        }

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

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

@media ( max-width: 450px ) {
        form .row,
        .grid,
        .form,
        #footer {
                flex-direction: column;
        }

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

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

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

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

        .col button {
                width: 10rem;
        }
}