X-Git-Url: https://git.rapsys.eu/.gitweb.cgi/airbundle/blobdiff_plain/e6039e8c535ff6f2af67921be15a58c35b039575..b2c7d928f8301c6741d319b190f6dc885d6faa46:/Resources/public/css/screen.css diff --git a/Resources/public/css/screen.css b/Resources/public/css/screen.css index 271e7d6..feb1460 100644 --- a/Resources/public/css/screen.css +++ b/Resources/public/css/screen.css @@ -63,7 +63,13 @@ h6 { margin: 1.561rem 0; } -p { +p, +dt { + font-size: 1rem; +} + +dd { + font-size: .9rem; } body { @@ -137,6 +143,8 @@ body { /* Message */ .notice::before, .notice::after, +.warning::before, +.warning::after, .error::before, .error::after { content: "⚠"; @@ -146,6 +154,7 @@ body { } .notice, +.warning, .error { display: flex; flex-direction: row; @@ -173,11 +182,26 @@ body { 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; } @@ -256,10 +280,13 @@ ul.error { }*/ /* Content */ +#dashboard, #form, #content, #regulation, -#dashboard { +#location, +#session, +#user { border: .1rem solid #00c3f9; border-radius: .5rem; margin: .5rem; @@ -420,6 +447,7 @@ textarea { border-radius: .2rem; font-size: .8rem; color: #066; + background-color: transparent; } button.submit { @@ -431,8 +459,6 @@ button.submit { /* Vertical form */ form.col { - margin-left: .5rem; - width: 10rem; } form.col div { @@ -445,7 +471,7 @@ form.col div.error { form.col label { text-align: center; - padding-top: 0; + padding-right: 0; } form.col section { @@ -462,63 +488,131 @@ form.col div.date { } /* Dashboard */ -#dashboard .panel { +#dashboard .panel, +#location .panel, +#session .panel, +#user .panel { display: flex; flex-direction: row; - flex-wrap: wrap; + flex-wrap: nowrap; place-content: space-between; + border: 0; + margin: 0 0 .5rem 0; + padding: 0; } -#dashboard .grid { +#dashboard .panel:only-child, +#dashboard .panel:last-child, +#dashboard .panel:last-of-type, +#location .panel:only-child, +#location .panel:last-child, +#location .panel:last-of-type, +#session .panel:only-child, +#session .panel:last-child, +#session .panel:last-of-type, +#user .panel:only-child, +#user .panel:last-child, +#user .panel:last-of-type { + margin-bottom: 0; +} + +#dashboard .grid, +#location .grid, +#session .grid, +#user .grid { display: table; - border: .05rem solid #00c3f9; + line-height: normal; + padding: 0; flex-grow: 1; - border-radius: .2rem; /* marche pas sur chrome */ table-layout: fixed; + border: 0 none; + /*width: calc(100% - 12rem); + border-collapse: collapse;*/ width: calc(100% - 12rem); border-collapse: collapse; } -#dashboard .cell { +#dashboard .cell, +#location .cell, +#session .cell, +#user .cell { display: table-cell; text-align: left; + padding: .5rem; + flex-grow: 1; border: .05rem solid #00c3f9; - font-size: initial; - height: 8rem; -} - -#dashboard dl.cell { - height: 3rem; + height: 6rem; } -#dashboard .cell h3 { - font-size: 1rem; - padding: .25rem; - margin: 0; +#dashboard .form, +#location .form, +#session .form, +#user .form { + border: .1rem solid #00c3f9; + border-radius: .2rem; + padding: .5rem; + margin-left: .5rem; + width: 10rem; } -#dashboard .cell dd { +#dashboard .form label, +#dashboard .form input, +#dashboard .form button, +#location .form label, +#location .form input, +#location .form button, +#session .form label, +#session .form input, +#session .form button, +#user .form label, +#user .form input, +#user .form button { text-align: center; + min-width: 6rem; } -#dashboard .seventh { + +#dashboard .seventh, +#location .seventh, +#session .seventh, +#user .seventh { width: calc(100% / 7); } -#dashboard .disabled { +#dashboard .third, +#location .third, +#session .third, +#user .third { + width: calc(100% / 3); + height: auto; +} + +#dashboard .disabled, +#location .disabled, +#session .disabled, +#user .disabled { color: #acc; background-color: #bee; } -#dashboard .current { +#dashboard .current, +#location .current, +#session .current, +#user .current { background-color: #cff; } -#dashboard .next { +#dashboard .next, +#location .next, +#session .next, +#user .next { background-color: #eff; } -#dashboard .session { +#dashboard .session, +#location .session, +#session .session, +#user .session { border-radius: .2rem; border: .1rem solid #00c3f9; font-size: .8rem; @@ -526,27 +620,82 @@ form.col div.date { margin: 0 .1rem .1rem .1rem; overflow-x: hidden; white-space: nowrap; - text-overflow: ellipsis; + Text-overflow: ellipsis; } -#dashboard .pending { +#dashboard .pending, +#location .pending, +#session .pending, +#user .pending { background-color: #ccc; } -#dashboard .granted { +#dashboard .granted, +#location .granted, +#session .granted, +#user .granted { background-color: #cff; /*background-color: #33b679; border-color: #33b679;*/ } -#dashboard .disputed { +#dashboard .disputed, +#location .disputed, +#session .disputed, +#user .disputed { background-color: #fcc; } -#dashboard .orphaned { +#dashboard .orphaned, +#location .orphaned, +#session .orphaned, +#user .orphaned { background-color: #fc9; } +#dashboard .highlight, +#location .highlight, +#session .highlight, +#user .highlight { + border-color: #3333c3; + background-color: #c3c3f9; + color: #3333c3; +} + +/* Session */ +#session { +} + +#session h2 a::after { + content: " >"; +} + +#session h2 a:last-child::after { + content: none; +} + +#session .row { + display: flex; + flex-wrap: wrap; + margin-bottom: .5rem; + border: .1rem solid #00c3f9; + border-radius: .2rem; +} + +#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; +} /* Regulation */ #regulation { @@ -615,7 +764,7 @@ form.col div.date { /* Footer */ #footer { border: .1rem solid #00c3f9; - border-radius: .5rem; + Border-radius: .5rem; margin: .5rem; margin-top: 0; padding: .5rem; @@ -639,25 +788,41 @@ form.col div.date { } /* viewport responsive hack */ -@media ( max-width: 650px ) { +@media ( max-width: 850px ) { #header { flex-wrap: wrap; } - #dashboard .panel { + #location .panel, + #session .panel, + #user .panel { place-content: center; flex-direction: column; + flex-wrap: wrap; } - #dashboard .grid { - width: 100%; + #location .panel:only-child, + #location .panel:last-child, + #location .panel:last-of-type, + #session .panel:only-child, + #session .panel:last-child, + #session .panel:last-of-type, + #user .panel:only-child, + #user .panel:last-child, + #user .panel:last-of-type { + margin-bottom: .5rem; } - #dashboard div.grid { - display: grid; + #location .form, + #session .form, + #user .form { + width: auto; + margin: .5rem auto 0 auto; } - .form_col { - margin: .5rem auto 0 auto; + #location .grid, + #session .grid, + #user .grid { + width: calc(100%); } }