diff --git a/public_html/css/container.scss b/public_html/css/container.scss index f32f542..7d1ca32 100755 --- a/public_html/css/container.scss +++ b/public_html/css/container.scss @@ -292,18 +292,19 @@ /* [2-2] INLINE-ROW pour afficher des lignes =========================================================*/ & > section.fstart{ - flex-direction: column; - flex-wrap: nowrap; + flex-direction: row; + flex-wrap: wrap; justify-content: flex-start; align-items: center; .searchbar{ - flex: 1em 0 0; - width: calc( 100% - 3em - 2*2em ); + flex: auto 1 1; } } + & > section.active > .inline-row{ flex: auto 1 1; } + & > section > .inline-row{ width: calc( 100% - 4em - 2*1em ); diff --git a/public_html/css/min/container.css b/public_html/css/min/container.css index 881c609..436a5a2 100755 --- a/public_html/css/min/container.css +++ b/public_html/css/min/container.css @@ -14,492 +14,424 @@ /* [3] Formulaires =========================================================*/ /* (1) Champs de texte */ - /* (2) Boutons */ -} -#WRAPPER > #CONTAINER > section { - display: none; - flex-grow: 1; -} -#WRAPPER > #CONTAINER > section.active { - display: flex; - flex-direction: row; - align-items: flex-start; - justify-content: flex-start; - flex-wrap: wrap; -} -#WRAPPER > #CONTAINER > section.active .inline-box { - flex: 0 0 1; -} -#WRAPPER > #CONTAINER > section.active .inline-row { - flex: 3em 0 1; -} -#WRAPPER > #CONTAINER > section.active .searchbar { - display: inline-block; - position: relative; - flex: calc( 100% - 2*1em - 2*1em ); - margin: 1em; - padding: .5em 1em; - padding-left: 2em; - border-radius: 3px; - border: 1px solid #b1b1b1; - background: #fff url("/src/static/sub-menu-side/search@b1b1b1.svg") 0.5em center no-repeat; - background-size: 1em; - transition: border .4s ease-in-out; -} -#WRAPPER > #CONTAINER > section.active .searchbar:hover, #WRAPPER > #CONTAINER > section.active .searchbar:focus { - border-color: #5630ed; -} -#WRAPPER > #CONTAINER > section.active .error { - display: inline-block; - position: relative; - width: calc( 100% - 2*1em - 2*1em ); - height: 1em; - margin: 1em; - padding: 1em; - border-radius: 3px; - border: 1px solid #d52918; - background: #d52918; - color: #fff; - text-shadow: 1px 1px #a72013; -} -#WRAPPER > #CONTAINER > section > .inline-box, #WRAPPER > #CONTAINER > section > .inline-row { - display: inline-block; - position: relative; - flex: calc( 50% - 2*1em - 2*1em ); - margin: 1em; - padding: 1em; - border-radius: 3px; - box-shadow: 0 0 1px #b7b7b7; - background-color: #fff; - /* (1) Titre de l'element */ - /* (2) Code RFID */ - /* (3) Adresse mail */ - /* (4) Groupes */ - /* (5) Lien vers la modification */ - /* (6) Lien vers la suppression */ -} -#WRAPPER > #CONTAINER > section > .inline-box.hidden, #WRAPPER > #CONTAINER > section > .inline-row.hidden { - display: none; -} -#WRAPPER > #CONTAINER > section > .inline-box a, #WRAPPER > #CONTAINER > section > .inline-row a { - text-decoration: none; - color: inherit; -} -#WRAPPER > #CONTAINER > section > .inline-box.selected, #WRAPPER > #CONTAINER > section > .inline-row.selected { - border: 1px solid #7362ff; - transition: box-shadow .2s ease-in-out; -} -#WRAPPER > #CONTAINER > section > .inline-box.selected:hover, #WRAPPER > #CONTAINER > section > .inline-row.selected:hover { - box-shadow: 2px 2px 7px #aaa; -} -#WRAPPER > #CONTAINER > section > .inline-box .title, #WRAPPER > #CONTAINER > section > .inline-row .title { - display: inline-block; - font-size: 1.15em; - font-weight: bold; - color: #ea4c06; - white-space: nowrap; -} -#WRAPPER > #CONTAINER > section > .inline-box .title > span, #WRAPPER > #CONTAINER > section > .inline-row .title > span { - font-size: .8em; - color: #333; -} -#WRAPPER > #CONTAINER > section > .inline-box .code, -#WRAPPER > #CONTAINER > section > .inline-box .mail, #WRAPPER > #CONTAINER > section > .inline-row .code, -#WRAPPER > #CONTAINER > section > .inline-row .mail { - display: block; - margin: 1em; - color: #333; - white-space: nowrap; -} -#WRAPPER > #CONTAINER > section > .inline-box .code svg, -#WRAPPER > #CONTAINER > section > .inline-box .mail svg, #WRAPPER > #CONTAINER > section > .inline-row .code svg, -#WRAPPER > #CONTAINER > section > .inline-row .mail svg { - display: inline-block; - position: relative; - margin-left: .5em; - margin-right: .5em; - margin-bottom: -.6em; - width: 1.5em; - height: 2em; - pointer-events: none; -} -#WRAPPER > #CONTAINER > section > .inline-box .code svg path#stylisable, -#WRAPPER > #CONTAINER > section > .inline-box .mail svg path#stylisable, #WRAPPER > #CONTAINER > section > .inline-row .code svg path#stylisable, -#WRAPPER > #CONTAINER > section > .inline-row .mail svg path#stylisable { - fill: #333 !important; - pointer-events: none; -} -#WRAPPER > #CONTAINER > section > .inline-box .code svg path#stroke-stylisable, -#WRAPPER > #CONTAINER > section > .inline-box .mail svg path#stroke-stylisable, #WRAPPER > #CONTAINER > section > .inline-row .code svg path#stroke-stylisable, -#WRAPPER > #CONTAINER > section > .inline-row .mail svg path#stroke-stylisable { - stroke: #333 !important; - pointer-events: none; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups, #WRAPPER > #CONTAINER > section > .inline-row .groups { - display: block; - margin: 1em; - color: #333; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups svg, #WRAPPER > #CONTAINER > section > .inline-row .groups svg { - display: inline-block; - position: relative; - margin-left: .5em; - margin-right: .5em; - margin-bottom: -.6em; - width: 1.5em; - height: 2em; - pointer-events: none; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups svg path, #WRAPPER > #CONTAINER > section > .inline-row .groups svg path { - fill: #333 !important; - pointer-events: none; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span { - display: inline-block; - position: relative; - padding: .1em .5em; - margin-right: calc( .4em + 2em ); - margin-bottom: .5em; - border-radius: 3px 0 0 3px; - border: 1px solid #bdbdbd; - box-shadow: inset 0 0 2px #fafafa; - background-color: #f9f9f9; - color: #333; - cursor: default; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups > span.add-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.add-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.add-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.add-member { - border-radius: 3px; - cursor: pointer; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-member { - display: block; - position: absolute; - top: -1px; - left: 100%; - width: 1em; - height: calc( 100% - .1em - 2px ); - padding: .12em .5em; - border-radius: 0 3px 3px 0; - border: 1px solid #bdbdbd; - box-shadow: inset 0 0 2px #fafafa; - background: url("/src/static/sub-menu-side/remove.svg") center center no-repeat; - background-size: auto 70%; - background-color: #f9f9f9; - color: inherit; - cursor: pointer; -} -#WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-member:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-member:hover { - background-image: url("/src/static/sub-menu-side/remove@d52918.svg"); -} -#WRAPPER > #CONTAINER > section > .inline-box .link_edit, -#WRAPPER > #CONTAINER > section > .inline-box .link_remove, #WRAPPER > #CONTAINER > section > .inline-row .link_edit, -#WRAPPER > #CONTAINER > section > .inline-row .link_remove { - display: inline-block; - float: right; - position: relative; - width: 1em; - height: 1em; - margin-left: 1em; - cursor: pointer; -} -#WRAPPER > #CONTAINER > section > .inline-box .link_edit > svg, -#WRAPPER > #CONTAINER > section > .inline-box .link_remove > svg, #WRAPPER > #CONTAINER > section > .inline-row .link_edit > svg, -#WRAPPER > #CONTAINER > section > .inline-row .link_remove > svg { - width: 100%; - height: 100%; - fill: #ddd !important; - transition: fill .4s ease-in-out; - pointer-events: none; -} -#WRAPPER > #CONTAINER > section > .inline-box .link_edit:hover > svg, -#WRAPPER > #CONTAINER > section > .inline-box .link_remove:hover > svg, #WRAPPER > #CONTAINER > section > .inline-row .link_edit:hover > svg, -#WRAPPER > #CONTAINER > section > .inline-row .link_remove:hover > svg { - fill: #2193e6 !important; -} -#WRAPPER > #CONTAINER > section > .inline-box .link_remove:hover > svg, #WRAPPER > #CONTAINER > section > .inline-row .link_remove:hover > svg { - fill: #d52918 !important; -} -#WRAPPER > #CONTAINER > section.fstart { - flex-direction: column; - flex-wrap: nowrap; - justify-content: flex-start; - align-items: center; -} -#WRAPPER > #CONTAINER > section.fstart .searchbar { - flex: 1em 0 0; - width: calc( 100% - 3em - 2*2em ); -} -#WRAPPER > #CONTAINER > section > .inline-row { - width: calc( 100% - 4em - 2*1em ); - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; - overflow: hidden; -} -#WRAPPER > #CONTAINER > section > .inline-row > span { - display: flex; - flex-direction: column; - justify-content: space-around; - flex: 100% 1 1; - border-left: 1px solid #ddd; - text-align: center; -} -#WRAPPER > #CONTAINER > section > .inline-row > span:first-child { - border-left: 0; -} -#WRAPPER > #CONTAINER > section > .inline-row button { - flex: auto; - width: 5em; -} -#WRAPPER > #CONTAINER > section > form, #WRAPPER > #CONTAINER .form { - display: inline-block; - position: relative; - left: 50%; - margin: .3em 0; - padding: 1em; - border-radius: 3px; - border-color: #d52918; - box-shadow: 0 0 1px #b7b7b7; - background-color: #fff; - transform: translateX(-50%); -} -#WRAPPER > #CONTAINER > section > form.valid, #WRAPPER > #CONTAINER .form.valid { - border-color: #27a560; -} -#WRAPPER > #CONTAINER > section > form.neutral, #WRAPPER > #CONTAINER .form.neutral { - border-color: #2193e6; -} -#WRAPPER > #CONTAINER > section > form.search, #WRAPPER > #CONTAINER .form.search { - border-color: #2193e6; -} -#WRAPPER > #CONTAINER > section > form .edit_search_view, -#WRAPPER > #CONTAINER > section > form .remove_search_view, #WRAPPER > #CONTAINER .form .edit_search_view, -#WRAPPER > #CONTAINER .form .remove_search_view { - display: inline-block; - width: 100%; - text-align: center; - color: #aaaaaa; -} -#WRAPPER > #CONTAINER > section > form .edit_search_view span, -#WRAPPER > #CONTAINER > section > form .remove_search_view span, #WRAPPER > #CONTAINER .form .edit_search_view span, -#WRAPPER > #CONTAINER .form .remove_search_view span { - color: #888888; -} -#WRAPPER > #CONTAINER input[type=text], -#WRAPPER > #CONTAINER input[type=mail], -#WRAPPER > #CONTAINER input[type=password], -#WRAPPER > #CONTAINER select, #WRAPPER > #CONTAINER.invalid > input[type=text], #WRAPPER > #CONTAINER.invalid > input[type=mail], #WRAPPER > #CONTAINER.invalid > input[type=password], #WRAPPER > #CONTAINER.invalid > select, -#WRAPPER > #CONTAINER input.invalid[type=text], -#WRAPPER > #CONTAINER input.invalid[type=mail], -#WRAPPER > #CONTAINER input.invalid[type=password], -#WRAPPER > #CONTAINER select.invalid { - display: inline-block; - margin: 1em 0; - padding: .7em 1em; - border-radius: 3px; - border: 1px solid #d7dde8; - color: #2f3033; - transition: border .4s ease-in-out; -} -#WRAPPER > #CONTAINER input[type=text]:focus, #WRAPPER > #CONTAINER input[type=text]:hover, -#WRAPPER > #CONTAINER input[type=mail]:focus, -#WRAPPER > #CONTAINER input[type=mail]:hover, -#WRAPPER > #CONTAINER input[type=password]:focus, -#WRAPPER > #CONTAINER input[type=password]:hover, -#WRAPPER > #CONTAINER select:focus, -#WRAPPER > #CONTAINER select:hover, #WRAPPER > #CONTAINER.invalid > input[type=text]:focus, #WRAPPER > #CONTAINER.invalid > input[type=text]:hover, #WRAPPER > #CONTAINER.invalid > input[type=mail]:focus, #WRAPPER > #CONTAINER.invalid > input[type=mail]:hover, #WRAPPER > #CONTAINER.invalid > input[type=password]:focus, #WRAPPER > #CONTAINER.invalid > input[type=password]:hover, #WRAPPER > #CONTAINER.invalid > select:focus, #WRAPPER > #CONTAINER.invalid > select:hover, -#WRAPPER > #CONTAINER input.invalid[type=text]:focus, -#WRAPPER > #CONTAINER input.invalid[type=text]:hover, -#WRAPPER > #CONTAINER input.invalid[type=mail]:focus, -#WRAPPER > #CONTAINER input.invalid[type=mail]:hover, -#WRAPPER > #CONTAINER input.invalid[type=password]:focus, -#WRAPPER > #CONTAINER input.invalid[type=password]:hover, -#WRAPPER > #CONTAINER select.invalid:focus, -#WRAPPER > #CONTAINER select.invalid:hover { - border-color: #d52918; -} -#WRAPPER > #CONTAINER select { - width: 100%; - display: block; - background: #fff; -} -#WRAPPER > #CONTAINER select option { - padding: .5em; -} -#WRAPPER > #CONTAINER .valid > input[type=text]:focus, #WRAPPER > #CONTAINER .valid > input[type=text]:hover, -#WRAPPER > #CONTAINER .valid > input[type=mail]:focus, -#WRAPPER > #CONTAINER .valid > input[type=mail]:hover, -#WRAPPER > #CONTAINER .valid > input[type=password]:focus, -#WRAPPER > #CONTAINER .valid > input[type=password]:hover, -#WRAPPER > #CONTAINER .valid > select:focus, -#WRAPPER > #CONTAINER .valid > select:hover, -#WRAPPER > #CONTAINER input.valid[type=text]:focus, -#WRAPPER > #CONTAINER input.valid[type=text]:hover, -#WRAPPER > #CONTAINER input.valid[type=mail]:focus, -#WRAPPER > #CONTAINER input.valid[type=mail]:hover, -#WRAPPER > #CONTAINER input.valid[type=password]:focus, -#WRAPPER > #CONTAINER input.valid[type=password]:hover, -#WRAPPER > #CONTAINER select.valid:focus, -#WRAPPER > #CONTAINER select.valid:hover { - border-color: #27a560; -} -#WRAPPER > #CONTAINER .neutral > input[type=text]:focus, #WRAPPER > #CONTAINER .neutral > input[type=text]:hover, -#WRAPPER > #CONTAINER .neutral > input[type=mail]:focus, -#WRAPPER > #CONTAINER .neutral > input[type=mail]:hover, -#WRAPPER > #CONTAINER .neutral > input[type=password]:focus, -#WRAPPER > #CONTAINER .neutral > input[type=password]:hover, -#WRAPPER > #CONTAINER .neutral > select:focus, -#WRAPPER > #CONTAINER .neutral > select:hover, -#WRAPPER > #CONTAINER input.neutral[type=text]:focus, -#WRAPPER > #CONTAINER input.neutral[type=text]:hover, -#WRAPPER > #CONTAINER input.neutral[type=mail]:focus, -#WRAPPER > #CONTAINER input.neutral[type=mail]:hover, -#WRAPPER > #CONTAINER input.neutral[type=password]:focus, -#WRAPPER > #CONTAINER input.neutral[type=password]:hover, -#WRAPPER > #CONTAINER select.neutral:focus, -#WRAPPER > #CONTAINER select.neutral:hover { - border-color: #2193e6; -} -#WRAPPER > #CONTAINER .search > input[type=text]:focus, #WRAPPER > #CONTAINER .search > input[type=text]:hover, -#WRAPPER > #CONTAINER .search > input[type=mail]:focus, -#WRAPPER > #CONTAINER .search > input[type=mail]:hover, -#WRAPPER > #CONTAINER .search > input[type=password]:focus, -#WRAPPER > #CONTAINER .search > input[type=password]:hover, -#WRAPPER > #CONTAINER .search > select:focus, -#WRAPPER > #CONTAINER .search > select:hover, -#WRAPPER > #CONTAINER input.search[type=text]:focus, -#WRAPPER > #CONTAINER input.search[type=text]:hover, -#WRAPPER > #CONTAINER input.search[type=mail]:focus, -#WRAPPER > #CONTAINER input.search[type=mail]:hover, -#WRAPPER > #CONTAINER input.search[type=password]:focus, -#WRAPPER > #CONTAINER input.search[type=password]:hover { - border-color: #5630ed; -} -#WRAPPER > #CONTAINER button, -#WRAPPER > #CONTAINER button.invalid, -#WRAPPER > #CONTAINER .invalid > button { - display: inline-block; - position: relative; - left: 50%; - padding: .7em 1em; - border-radius: 3px; - border: 1px solid #d52918; - background: #d52918 center center no-repeat; - color: #fff; - transition: background .4s ease-in-out; - transform: translateX(-50%); -} -#WRAPPER > #CONTAINER button:hover, #WRAPPER > #CONTAINER button:focus, #WRAPPER > #CONTAINER button:disabled, -#WRAPPER > #CONTAINER button.invalid:hover, -#WRAPPER > #CONTAINER button.invalid:focus, -#WRAPPER > #CONTAINER button.invalid:disabled, -#WRAPPER > #CONTAINER .invalid > button:hover, -#WRAPPER > #CONTAINER .invalid > button:focus, -#WRAPPER > #CONTAINER .invalid > button:disabled { - background-color: #fff; - color: #d52918; -} -#WRAPPER > #CONTAINER button.valid, -#WRAPPER > #CONTAINER .valid > button { - border-color: #27a560; - background-color: #27a560; -} -#WRAPPER > #CONTAINER button.valid:hover, #WRAPPER > #CONTAINER button.valid:focus, #WRAPPER > #CONTAINER button.valid:disabled, -#WRAPPER > #CONTAINER .valid > button:hover, -#WRAPPER > #CONTAINER .valid > button:focus, -#WRAPPER > #CONTAINER .valid > button:disabled { - background-color: #fff; - color: #27a560; -} -#WRAPPER > #CONTAINER button.neutral, -#WRAPPER > #CONTAINER .neutral > button { - border-color: #2193e6; - background-color: #2193e6; -} -#WRAPPER > #CONTAINER button.neutral:hover, #WRAPPER > #CONTAINER button.neutral:focus, #WRAPPER > #CONTAINER button.neutral:disabled, -#WRAPPER > #CONTAINER .neutral > button:hover, -#WRAPPER > #CONTAINER .neutral > button:focus, -#WRAPPER > #CONTAINER .neutral > button:disabled { - background-color: #fff; - color: #2193e6; -} -#WRAPPER > #CONTAINER button.search, -#WRAPPER > #CONTAINER .search > button { - border-color: #5630ed; - background-color: #5630ed; -} -#WRAPPER > #CONTAINER button.search:hover, #WRAPPER > #CONTAINER button.search:focus, #WRAPPER > #CONTAINER button.search:disabled, -#WRAPPER > #CONTAINER .search > button:hover, -#WRAPPER > #CONTAINER .search > button:focus, -#WRAPPER > #CONTAINER .search > button:disabled { - background-color: #fff; - color: #5630ed; -} -#WRAPPER > #CONTAINER .invalid > button.active, -#WRAPPER > #CONTAINER button.invalid.active, -#WRAPPER > #CONTAINER button.active { - background-color: #fff; - background-image: url("/src/static/container/active@d52918.svg") !important; - background-size: 1em auto; - color: transparent !important; -} -#WRAPPER > #CONTAINER button.valid.active, -#WRAPPER > #CONTAINER .valid > button.active { - background-image: url("/src/static/container/active@27a560.svg") !important; -} -#WRAPPER > #CONTAINER button.neutral.active, -#WRAPPER > #CONTAINER .neutral > button.active { - background-image: url("/src/static/container/active@2193e6.svg") !important; -} -#WRAPPER > #CONTAINER button.search.active, -#WRAPPER > #CONTAINER .search > button.active { - background-image: url("/src/static/container/active@5630ed.svg") !important; -} -#WRAPPER > #CONTAINER hr.OR[data-label] { - display: block; - position: relative; - width: 100%; - height: 0; - border: 0; - border-bottom: 1px dashed #d52918; -} -#WRAPPER > #CONTAINER hr.OR[data-label]:before { - content: attr(data-label); - display: inline-block; - position: relative; - top: 50%; - left: 50%; - padding: 0 1em; - background-color: #fff; - color: #d52918; - transform: translateX(-50%) translatey(-50%); -} -#WRAPPER > #CONTAINER .valid > hr.OR, -#WRAPPER > #CONTAINER hr.OR.valid { - border-bottom: 1px dashed #27a560; -} -#WRAPPER > #CONTAINER .valid > hr.OR:before, -#WRAPPER > #CONTAINER hr.OR.valid:before { - color: #27a560; -} -#WRAPPER > #CONTAINER .neutral > hr.OR, -#WRAPPER > #CONTAINER hr.OR.neutral { - border-bottom: 1px dashed #2193e6; -} -#WRAPPER > #CONTAINER .neutral > hr.OR:before, -#WRAPPER > #CONTAINER hr.OR.neutral:before { - color: #2193e6; -} -#WRAPPER > #CONTAINER .search > hr.OR, -#WRAPPER > #CONTAINER hr.OR.search { - border-bottom: 1px dashed #5630ed; -} -#WRAPPER > #CONTAINER .search > hr.OR:before, -#WRAPPER > #CONTAINER hr.OR.search:before { - color: #5630ed; -} + /* (2) Boutons */ } + #WRAPPER > #CONTAINER > section { + display: none; + flex-grow: 1; } + #WRAPPER > #CONTAINER > section.active { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: flex-start; + flex-wrap: wrap; } + #WRAPPER > #CONTAINER > section.active .inline-box { + flex: 0 0 1; } + #WRAPPER > #CONTAINER > section.active .inline-row { + flex: 3em 0 1; } + #WRAPPER > #CONTAINER > section.active .searchbar { + display: inline-block; + position: relative; + flex: calc( 100% - 2*1em - 2*1em ); + margin: 1em; + padding: .5em 1em; + padding-left: 2em; + border-radius: 3px; + border: 1px solid #b1b1b1; + background: #fff url("/src/static/sub-menu-side/search@b1b1b1.svg") 0.5em center no-repeat; + background-size: 1em; + transition: border .4s ease-in-out; } + #WRAPPER > #CONTAINER > section.active .searchbar:hover, #WRAPPER > #CONTAINER > section.active .searchbar:focus { + border-color: #5630ed; } + #WRAPPER > #CONTAINER > section.active .error { + display: inline-block; + position: relative; + width: calc( 100% - 2*1em - 2*1em ); + height: 1em; + margin: 1em; + padding: 1em; + border-radius: 3px; + border: 1px solid #d52918; + background: #d52918; + color: #fff; + text-shadow: 1px 1px #a72013; } + #WRAPPER > #CONTAINER > section > .inline-box, #WRAPPER > #CONTAINER > section > .inline-row { + display: inline-block; + position: relative; + flex: calc( 50% - 2*1em - 2*1em ); + margin: 1em; + padding: 1em; + border-radius: 3px; + box-shadow: 0 0 1px #b7b7b7; + background-color: #fff; + /* (1) Titre de l'element */ + /* (2) Code RFID */ + /* (3) Adresse mail */ + /* (4) Groupes */ + /* (5) Lien vers la modification */ + /* (6) Lien vers la suppression */ } + #WRAPPER > #CONTAINER > section > .inline-box.hidden, #WRAPPER > #CONTAINER > section > .inline-row.hidden { + display: none; } + #WRAPPER > #CONTAINER > section > .inline-box a, #WRAPPER > #CONTAINER > section > .inline-row a { + text-decoration: none; + color: inherit; } + #WRAPPER > #CONTAINER > section > .inline-box.selected, #WRAPPER > #CONTAINER > section > .inline-row.selected { + border: 1px solid #7362ff; + transition: box-shadow .2s ease-in-out; } + #WRAPPER > #CONTAINER > section > .inline-box.selected:hover, #WRAPPER > #CONTAINER > section > .inline-row.selected:hover { + box-shadow: 2px 2px 7px #aaa; } + #WRAPPER > #CONTAINER > section > .inline-box .title, #WRAPPER > #CONTAINER > section > .inline-row .title { + display: inline-block; + font-size: 1.15em; + font-weight: bold; + color: #ea4c06; + white-space: nowrap; } + #WRAPPER > #CONTAINER > section > .inline-box .title > span, #WRAPPER > #CONTAINER > section > .inline-row .title > span { + font-size: .8em; + color: #333; } + #WRAPPER > #CONTAINER > section > .inline-box .code, + #WRAPPER > #CONTAINER > section > .inline-box .mail, #WRAPPER > #CONTAINER > section > .inline-row .code, + #WRAPPER > #CONTAINER > section > .inline-row .mail { + display: block; + margin: 1em; + color: #333; + white-space: nowrap; } + #WRAPPER > #CONTAINER > section > .inline-box .code svg, + #WRAPPER > #CONTAINER > section > .inline-box .mail svg, #WRAPPER > #CONTAINER > section > .inline-row .code svg, + #WRAPPER > #CONTAINER > section > .inline-row .mail svg { + display: inline-block; + position: relative; + margin-left: .5em; + margin-right: .5em; + margin-bottom: -.6em; + width: 1.5em; + height: 2em; + pointer-events: none; } + #WRAPPER > #CONTAINER > section > .inline-box .code svg path#stylisable, + #WRAPPER > #CONTAINER > section > .inline-box .mail svg path#stylisable, #WRAPPER > #CONTAINER > section > .inline-row .code svg path#stylisable, + #WRAPPER > #CONTAINER > section > .inline-row .mail svg path#stylisable { + fill: #333 !important; + pointer-events: none; } + #WRAPPER > #CONTAINER > section > .inline-box .code svg path#stroke-stylisable, + #WRAPPER > #CONTAINER > section > .inline-box .mail svg path#stroke-stylisable, #WRAPPER > #CONTAINER > section > .inline-row .code svg path#stroke-stylisable, + #WRAPPER > #CONTAINER > section > .inline-row .mail svg path#stroke-stylisable { + stroke: #333 !important; + pointer-events: none; } + #WRAPPER > #CONTAINER > section > .inline-box .groups, #WRAPPER > #CONTAINER > section > .inline-row .groups { + display: block; + margin: 1em; + color: #333; } + #WRAPPER > #CONTAINER > section > .inline-box .groups svg, #WRAPPER > #CONTAINER > section > .inline-row .groups svg { + display: inline-block; + position: relative; + margin-left: .5em; + margin-right: .5em; + margin-bottom: -.6em; + width: 1.5em; + height: 2em; + pointer-events: none; } + #WRAPPER > #CONTAINER > section > .inline-box .groups svg path, #WRAPPER > #CONTAINER > section > .inline-row .groups svg path { + fill: #333 !important; + pointer-events: none; } + #WRAPPER > #CONTAINER > section > .inline-box .groups > span, #WRAPPER > #CONTAINER > section > .inline-row .groups > span { + display: inline-block; + position: relative; + padding: .1em .5em; + margin-right: calc( .4em + 2em ); + margin-bottom: .5em; + border-radius: 3px 0 0 3px; + border: 1px solid #bdbdbd; + box-shadow: inset 0 0 2px #fafafa; + background-color: #f9f9f9; + color: #333; + cursor: default; } + #WRAPPER > #CONTAINER > section > .inline-box .groups > span.add-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span.add-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.add-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span.add-member { + border-radius: 3px; + cursor: pointer; } + #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-member, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-group, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-member { + display: block; + position: absolute; + top: -1px; + left: 100%; + width: 1em; + height: calc( 100% - .1em - 2px ); + padding: .12em .5em; + border-radius: 0 3px 3px 0; + border: 1px solid #bdbdbd; + box-shadow: inset 0 0 2px #fafafa; + background: url("/src/static/sub-menu-side/remove.svg") center center no-repeat; + background-size: auto 70%; + background-color: #f9f9f9; + color: inherit; + cursor: pointer; } + #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-box .groups > span > span.rem-member:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-group:hover, #WRAPPER > #CONTAINER > section > .inline-row .groups > span > span.rem-member:hover { + background-image: url("/src/static/sub-menu-side/remove@d52918.svg"); } + #WRAPPER > #CONTAINER > section > .inline-box .link_edit, + #WRAPPER > #CONTAINER > section > .inline-box .link_remove, #WRAPPER > #CONTAINER > section > .inline-row .link_edit, + #WRAPPER > #CONTAINER > section > .inline-row .link_remove { + display: inline-block; + float: right; + position: relative; + width: 1em; + height: 1em; + margin-left: 1em; + cursor: pointer; } + #WRAPPER > #CONTAINER > section > .inline-box .link_edit > svg, + #WRAPPER > #CONTAINER > section > .inline-box .link_remove > svg, #WRAPPER > #CONTAINER > section > .inline-row .link_edit > svg, + #WRAPPER > #CONTAINER > section > .inline-row .link_remove > svg { + width: 100%; + height: 100%; + fill: #ddd !important; + transition: fill .4s ease-in-out; + pointer-events: none; } + #WRAPPER > #CONTAINER > section > .inline-box .link_edit:hover > svg, + #WRAPPER > #CONTAINER > section > .inline-box .link_remove:hover > svg, #WRAPPER > #CONTAINER > section > .inline-row .link_edit:hover > svg, + #WRAPPER > #CONTAINER > section > .inline-row .link_remove:hover > svg { + fill: #2193e6 !important; } + #WRAPPER > #CONTAINER > section > .inline-box .link_remove:hover > svg, #WRAPPER > #CONTAINER > section > .inline-row .link_remove:hover > svg { + fill: #d52918 !important; } + #WRAPPER > #CONTAINER > section.fstart { + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; } + #WRAPPER > #CONTAINER > section.fstart .searchbar { + flex: auto 1 1; } + #WRAPPER > #CONTAINER > section.active > .inline-row { + flex: auto 1 1; } + #WRAPPER > #CONTAINER > section > .inline-row { + width: calc( 100% - 4em - 2*1em ); + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + align-items: center; + overflow: hidden; } + #WRAPPER > #CONTAINER > section > .inline-row > span { + display: flex; + flex-direction: column; + justify-content: space-around; + flex: 100% 1 1; + border-left: 1px solid #ddd; + text-align: center; } + #WRAPPER > #CONTAINER > section > .inline-row > span:first-child { + border-left: 0; } + #WRAPPER > #CONTAINER > section > .inline-row button { + flex: auto; + width: 5em; } + #WRAPPER > #CONTAINER > section > form, #WRAPPER > #CONTAINER .form { + display: inline-block; + position: relative; + left: 50%; + margin: .3em 0; + padding: 1em; + border-radius: 3px; + border-color: #d52918; + box-shadow: 0 0 1px #b7b7b7; + background-color: #fff; + transform: translateX(-50%); } + #WRAPPER > #CONTAINER > section > form.valid, #WRAPPER > #CONTAINER .form.valid { + border-color: #27a560; } + #WRAPPER > #CONTAINER > section > form.neutral, #WRAPPER > #CONTAINER .form.neutral { + border-color: #2193e6; } + #WRAPPER > #CONTAINER > section > form.search, #WRAPPER > #CONTAINER .form.search { + border-color: #2193e6; } + #WRAPPER > #CONTAINER > section > form .edit_search_view, + #WRAPPER > #CONTAINER > section > form .remove_search_view, #WRAPPER > #CONTAINER .form .edit_search_view, + #WRAPPER > #CONTAINER .form .remove_search_view { + display: inline-block; + width: 100%; + text-align: center; + color: #aaaaaa; } + #WRAPPER > #CONTAINER > section > form .edit_search_view span, + #WRAPPER > #CONTAINER > section > form .remove_search_view span, #WRAPPER > #CONTAINER .form .edit_search_view span, + #WRAPPER > #CONTAINER .form .remove_search_view span { + color: #888888; } + #WRAPPER > #CONTAINER input[type=text], + #WRAPPER > #CONTAINER input[type=mail], + #WRAPPER > #CONTAINER input[type=password], + #WRAPPER > #CONTAINER select, #WRAPPER > #CONTAINER.invalid > input[type=text], #WRAPPER > #CONTAINER.invalid > input[type=mail], #WRAPPER > #CONTAINER.invalid > input[type=password], #WRAPPER > #CONTAINER.invalid > select, + #WRAPPER > #CONTAINER input.invalid[type=text], + #WRAPPER > #CONTAINER input.invalid[type=mail], + #WRAPPER > #CONTAINER input.invalid[type=password], + #WRAPPER > #CONTAINER select.invalid { + display: inline-block; + margin: 1em 0; + padding: .7em 1em; + border-radius: 3px; + border: 1px solid #d7dde8; + color: #2f3033; + transition: border .4s ease-in-out; } + #WRAPPER > #CONTAINER input[type=text]:focus, #WRAPPER > #CONTAINER input[type=text]:hover, + #WRAPPER > #CONTAINER input[type=mail]:focus, + #WRAPPER > #CONTAINER input[type=mail]:hover, + #WRAPPER > #CONTAINER input[type=password]:focus, + #WRAPPER > #CONTAINER input[type=password]:hover, + #WRAPPER > #CONTAINER select:focus, + #WRAPPER > #CONTAINER select:hover, #WRAPPER > #CONTAINER.invalid > input[type=text]:focus, #WRAPPER > #CONTAINER.invalid > input[type=text]:hover, #WRAPPER > #CONTAINER.invalid > input[type=mail]:focus, #WRAPPER > #CONTAINER.invalid > input[type=mail]:hover, #WRAPPER > #CONTAINER.invalid > input[type=password]:focus, #WRAPPER > #CONTAINER.invalid > input[type=password]:hover, #WRAPPER > #CONTAINER.invalid > select:focus, #WRAPPER > #CONTAINER.invalid > select:hover, + #WRAPPER > #CONTAINER input.invalid[type=text]:focus, + #WRAPPER > #CONTAINER input.invalid[type=text]:hover, + #WRAPPER > #CONTAINER input.invalid[type=mail]:focus, + #WRAPPER > #CONTAINER input.invalid[type=mail]:hover, + #WRAPPER > #CONTAINER input.invalid[type=password]:focus, + #WRAPPER > #CONTAINER input.invalid[type=password]:hover, + #WRAPPER > #CONTAINER select.invalid:focus, + #WRAPPER > #CONTAINER select.invalid:hover { + border-color: #d52918; } + #WRAPPER > #CONTAINER select { + width: 100%; + display: block; + background: #fff; } + #WRAPPER > #CONTAINER select option { + padding: .5em; } + #WRAPPER > #CONTAINER .valid > input[type=text]:focus, #WRAPPER > #CONTAINER .valid > input[type=text]:hover, + #WRAPPER > #CONTAINER .valid > input[type=mail]:focus, + #WRAPPER > #CONTAINER .valid > input[type=mail]:hover, + #WRAPPER > #CONTAINER .valid > input[type=password]:focus, + #WRAPPER > #CONTAINER .valid > input[type=password]:hover, + #WRAPPER > #CONTAINER .valid > select:focus, + #WRAPPER > #CONTAINER .valid > select:hover, + #WRAPPER > #CONTAINER input.valid[type=text]:focus, + #WRAPPER > #CONTAINER input.valid[type=text]:hover, + #WRAPPER > #CONTAINER input.valid[type=mail]:focus, + #WRAPPER > #CONTAINER input.valid[type=mail]:hover, + #WRAPPER > #CONTAINER input.valid[type=password]:focus, + #WRAPPER > #CONTAINER input.valid[type=password]:hover, + #WRAPPER > #CONTAINER select.valid:focus, + #WRAPPER > #CONTAINER select.valid:hover { + border-color: #27a560; } + #WRAPPER > #CONTAINER .neutral > input[type=text]:focus, #WRAPPER > #CONTAINER .neutral > input[type=text]:hover, + #WRAPPER > #CONTAINER .neutral > input[type=mail]:focus, + #WRAPPER > #CONTAINER .neutral > input[type=mail]:hover, + #WRAPPER > #CONTAINER .neutral > input[type=password]:focus, + #WRAPPER > #CONTAINER .neutral > input[type=password]:hover, + #WRAPPER > #CONTAINER .neutral > select:focus, + #WRAPPER > #CONTAINER .neutral > select:hover, + #WRAPPER > #CONTAINER input.neutral[type=text]:focus, + #WRAPPER > #CONTAINER input.neutral[type=text]:hover, + #WRAPPER > #CONTAINER input.neutral[type=mail]:focus, + #WRAPPER > #CONTAINER input.neutral[type=mail]:hover, + #WRAPPER > #CONTAINER input.neutral[type=password]:focus, + #WRAPPER > #CONTAINER input.neutral[type=password]:hover, + #WRAPPER > #CONTAINER select.neutral:focus, + #WRAPPER > #CONTAINER select.neutral:hover { + border-color: #2193e6; } + #WRAPPER > #CONTAINER .search > input[type=text]:focus, #WRAPPER > #CONTAINER .search > input[type=text]:hover, + #WRAPPER > #CONTAINER .search > input[type=mail]:focus, + #WRAPPER > #CONTAINER .search > input[type=mail]:hover, + #WRAPPER > #CONTAINER .search > input[type=password]:focus, + #WRAPPER > #CONTAINER .search > input[type=password]:hover, + #WRAPPER > #CONTAINER .search > select:focus, + #WRAPPER > #CONTAINER .search > select:hover, + #WRAPPER > #CONTAINER input.search[type=text]:focus, + #WRAPPER > #CONTAINER input.search[type=text]:hover, + #WRAPPER > #CONTAINER input.search[type=mail]:focus, + #WRAPPER > #CONTAINER input.search[type=mail]:hover, + #WRAPPER > #CONTAINER input.search[type=password]:focus, + #WRAPPER > #CONTAINER input.search[type=password]:hover { + border-color: #5630ed; } + #WRAPPER > #CONTAINER button, + #WRAPPER > #CONTAINER button.invalid, + #WRAPPER > #CONTAINER .invalid > button { + display: inline-block; + position: relative; + left: 50%; + padding: .7em 1em; + border-radius: 3px; + border: 1px solid #d52918; + background: #d52918 center center no-repeat; + color: #fff; + transition: background .4s ease-in-out; + transform: translateX(-50%); } + #WRAPPER > #CONTAINER button:hover, #WRAPPER > #CONTAINER button:focus, #WRAPPER > #CONTAINER button:disabled, + #WRAPPER > #CONTAINER button.invalid:hover, + #WRAPPER > #CONTAINER button.invalid:focus, + #WRAPPER > #CONTAINER button.invalid:disabled, + #WRAPPER > #CONTAINER .invalid > button:hover, + #WRAPPER > #CONTAINER .invalid > button:focus, + #WRAPPER > #CONTAINER .invalid > button:disabled { + background-color: #fff; + color: #d52918; } + #WRAPPER > #CONTAINER button.valid, + #WRAPPER > #CONTAINER .valid > button { + border-color: #27a560; + background-color: #27a560; } + #WRAPPER > #CONTAINER button.valid:hover, #WRAPPER > #CONTAINER button.valid:focus, #WRAPPER > #CONTAINER button.valid:disabled, + #WRAPPER > #CONTAINER .valid > button:hover, + #WRAPPER > #CONTAINER .valid > button:focus, + #WRAPPER > #CONTAINER .valid > button:disabled { + background-color: #fff; + color: #27a560; } + #WRAPPER > #CONTAINER button.neutral, + #WRAPPER > #CONTAINER .neutral > button { + border-color: #2193e6; + background-color: #2193e6; } + #WRAPPER > #CONTAINER button.neutral:hover, #WRAPPER > #CONTAINER button.neutral:focus, #WRAPPER > #CONTAINER button.neutral:disabled, + #WRAPPER > #CONTAINER .neutral > button:hover, + #WRAPPER > #CONTAINER .neutral > button:focus, + #WRAPPER > #CONTAINER .neutral > button:disabled { + background-color: #fff; + color: #2193e6; } + #WRAPPER > #CONTAINER button.search, + #WRAPPER > #CONTAINER .search > button { + border-color: #5630ed; + background-color: #5630ed; } + #WRAPPER > #CONTAINER button.search:hover, #WRAPPER > #CONTAINER button.search:focus, #WRAPPER > #CONTAINER button.search:disabled, + #WRAPPER > #CONTAINER .search > button:hover, + #WRAPPER > #CONTAINER .search > button:focus, + #WRAPPER > #CONTAINER .search > button:disabled { + background-color: #fff; + color: #5630ed; } + #WRAPPER > #CONTAINER .invalid > button.active, + #WRAPPER > #CONTAINER button.invalid.active, + #WRAPPER > #CONTAINER button.active { + background-color: #fff; + background-image: url("/src/static/container/active@d52918.svg") !important; + background-size: 1em auto; + color: transparent !important; } + #WRAPPER > #CONTAINER button.valid.active, + #WRAPPER > #CONTAINER .valid > button.active { + background-image: url("/src/static/container/active@27a560.svg") !important; } + #WRAPPER > #CONTAINER button.neutral.active, + #WRAPPER > #CONTAINER .neutral > button.active { + background-image: url("/src/static/container/active@2193e6.svg") !important; } + #WRAPPER > #CONTAINER button.search.active, + #WRAPPER > #CONTAINER .search > button.active { + background-image: url("/src/static/container/active@5630ed.svg") !important; } + #WRAPPER > #CONTAINER hr.OR[data-label] { + display: block; + position: relative; + width: 100%; + height: 0; + border: 0; + border-bottom: 1px dashed #d52918; } + #WRAPPER > #CONTAINER hr.OR[data-label]:before { + content: attr(data-label); + display: inline-block; + position: relative; + top: 50%; + left: 50%; + padding: 0 1em; + background-color: #fff; + color: #d52918; + transform: translateX(-50%) translatey(-50%); } + #WRAPPER > #CONTAINER .valid > hr.OR, + #WRAPPER > #CONTAINER hr.OR.valid { + border-bottom: 1px dashed #27a560; } + #WRAPPER > #CONTAINER .valid > hr.OR:before, + #WRAPPER > #CONTAINER hr.OR.valid:before { + color: #27a560; } + #WRAPPER > #CONTAINER .neutral > hr.OR, + #WRAPPER > #CONTAINER hr.OR.neutral { + border-bottom: 1px dashed #2193e6; } + #WRAPPER > #CONTAINER .neutral > hr.OR:before, + #WRAPPER > #CONTAINER hr.OR.neutral:before { + color: #2193e6; } + #WRAPPER > #CONTAINER .search > hr.OR, + #WRAPPER > #CONTAINER hr.OR.search { + border-bottom: 1px dashed #5630ed; } + #WRAPPER > #CONTAINER .search > hr.OR:before, + #WRAPPER > #CONTAINER hr.OR.search:before { + color: #5630ed; } /* [4] Tableau à cocher =========================================================*/ @@ -509,47 +441,40 @@ article.check-table { flex-wrap: wrap; justify-content: space-between; border-radius: 3px; - border: 1px solid #ddd; -} -article.check-table > div { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - flex: 100%; - padding: .8em 0; - color: #333; - background: #f8f8f8; - border-bottom: 1px solid #eee; - transition: background .2s ease-in-out; - overflow: hidden; -} -article.check-table > div:nth-child(2n) { - background: #fdfdfd; -} -article.check-table > div > span { - flex: 100%; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: center; - /* (1) Gestion du checkbox hack */ -} -article.check-table > div > span input[type='checkbox'] { - display: none; -} -article.check-table > div > span input[type='checkbox'] + label[for] { - display: inline-block; - position: absolute; - width: 1.2em; - height: 1.2em; - background: url("/src/static/container/checkbox.svg") center center no-repeat; - background-size: 100% auto; - transition: box-shadow .2s ease-in-out; - cursor: pointer; -} -article.check-table > div > span input[type='checkbox']:checked + label[for] { - background-image: url("/src/static/container/checkbox@checked.svg"); -} + border: 1px solid #ddd; } + article.check-table > div { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-between; + flex: 100%; + padding: .8em 0; + color: #333; + background: #f8f8f8; + border-bottom: 1px solid #eee; + transition: background .2s ease-in-out; + overflow: hidden; } + article.check-table > div:nth-child(2n) { + background: #fdfdfd; } + article.check-table > div > span { + flex: 100%; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: center; + /* (1) Gestion du checkbox hack */ } + article.check-table > div > span input[type='checkbox'] { + display: none; } + article.check-table > div > span input[type='checkbox'] + label[for] { + display: inline-block; + position: absolute; + width: 1.2em; + height: 1.2em; + background: url("/src/static/container/checkbox.svg") center center no-repeat; + background-size: 100% auto; + transition: box-shadow .2s ease-in-out; + cursor: pointer; } + article.check-table > div > span input[type='checkbox']:checked + label[for] { + background-image: url("/src/static/container/checkbox@checked.svg"); } /*# sourceMappingURL=container.css.map */ diff --git a/public_html/view/history.php b/public_html/view/history.php index a9e4385..85673a8 100755 --- a/public_html/view/history.php +++ b/public_html/view/history.php @@ -63,7 +63,7 @@ $selected = Table::get('history') ->join('id_machine', $mac) ->select('timestamp', Rows::SEL_MAX) - ->select('id_history', Rows::SEL_COUNT, Rows::SEL_DISTINCT) + ->select('id_history') ->fetch(); @@ -76,12 +76,12 @@ foreach($selected as $m=>$mac){ - echo "
"; + echo "
"; echo "#".$mac['name'].""; echo ""; - echo "".date('d/m/Y H:i:s', $mac['last']).""; + echo "".date('d/m/Y H:i:s', $mac['timestamp']).""; echo "Il y a xx jours et yy heures"; echo ""; diff --git a/public_html/view/view.php b/public_html/view/view.php index 844757a..e941c7e 100755 --- a/public_html/view/view.php +++ b/public_html/view/view.php @@ -47,16 +47,15 @@