From cb54a1785d99f7cfe6bc282f0b6eece83e379b8e Mon Sep 17 00:00:00 2001 From: Benjamin Renard Date: Wed, 27 May 2020 15:16:02 +0200 Subject: [PATCH] Rework on CSS and specialy on ligth-blue.css to make it easily customizable --- src/css/default/LSform.css | 7 +- src/css/default/LSrelation.css | 1 + src/css/default/LSselect.css | 1 + src/css/default/base.css | 26 +++-- src/css/light-blue.css | 199 +++++++++++++++++++++++++++------ src/css/light-green.css | 164 +-------------------------- src/css/light-grey.css | 160 +------------------------- src/css/light-red.css | 171 +--------------------------- src/css/light-turquoise.css | 168 +--------------------------- src/css/std-grey.css | 2 +- 10 files changed, 208 insertions(+), 691 deletions(-) diff --git a/src/css/default/LSform.css b/src/css/default/LSform.css index e4ba6828..53d1947e 100644 --- a/src/css/default/LSform.css +++ b/src/css/default/LSform.css @@ -102,10 +102,15 @@ ul.LSform li { /* * Champs du formulaire */ -.LSform input[type=text], .LSform input[type=file], .LSform input[type=submit], .LSform input[type=password], .LSform select, .LSform textarea { +.LSform input[type=text], .LSform input[type=submit], .LSform input[type=password], .LSform select, .LSform textarea { border: 1px solid #ccc; width: 200px; background-color: #b5e4f6; + box-sizing: border-box; +} + +.LSform input[type=file] { + background: transparent; } .LSform input[type=radio] { diff --git a/src/css/default/LSrelation.css b/src/css/default/LSrelation.css index b7aecf64..9ecb917d 100644 --- a/src/css/default/LSrelation.css +++ b/src/css/default/LSrelation.css @@ -5,6 +5,7 @@ */ h1.LSrelation { font-size: 1.4em; + margin-bottom: 0; } img.LSrelation-btn { diff --git a/src/css/default/LSselect.css b/src/css/default/LSselect.css index 4c977dba..3130e015 100644 --- a/src/css/default/LSselect.css +++ b/src/css/default/LSselect.css @@ -37,6 +37,7 @@ form.LSselect_search { div.LSselect_search { float: right; + margin-bottom: 0.5em; } div.LSobject-select { diff --git a/src/css/default/base.css b/src/css/default/base.css index 208f435f..866e83a5 100644 --- a/src/css/default/base.css +++ b/src/css/default/base.css @@ -272,6 +272,11 @@ strong.LSobject-list-page, strong.LSobject-list-nb-by-page { * LSview-actions ******************* */ +#LSview_title, #LSform_title { + clear: both; + margin-bottom: 0; +} + a.LSview-actions { text-decoration: none; color: #000; @@ -279,12 +284,12 @@ a.LSview-actions { ul.LSview-actions { clear: both; + float: right; text-align: right; font-size: 0.8em; margin: 0; - margin-top: 0.4em; - margin-right: 3em; - margin-bottom: 0.8em; + margin-right: 3rem; + margin-bottom: 0.8rem; color: #0072b8; } @@ -293,9 +298,9 @@ li.LSview-actions { color: #000; border: 1px solid #0072b8; border-top: 0; - padding: 0.4em; - display: inline; - margin-right: 1px; + padding: 0.4rem; + display: inline-block; + margin-right: 0.1rem; } /* @@ -321,8 +326,9 @@ a.question { div.LSview_search { float: right; margin: 0; - margin-top: -0.5em; + margin-top: 0.5rem; margin-right: 2em; + margin-bottom: -2rem; } #LSview_search_param { @@ -341,16 +347,16 @@ input[type='text'].LSview_search { input[type='submit'].LSview_search { border: 1px solid #0072b8; - width: 8em; + width: 8rem; background-color: #0072b8; color: #fff; } #LSview_search_predefinedFilter { float: left; - margin-top: -1.8em; + margin-top: 0.2rem; margin-bottom: 0; - margin-left: 1.2em; + margin-left: 1.2rem; } /* diff --git a/src/css/light-blue.css b/src/css/light-blue.css index 8565c5a3..e8a9f120 100644 --- a/src/css/light-blue.css +++ b/src/css/light-blue.css @@ -1,3 +1,15 @@ +/* ---- Colors ---- */ +:root { + --light-color: #d6edf6; + --medium-color: #7fcadb; + --dark-color: #0097c4; + --light-grey: #ccc; + --medium-grey: #999; + --dark-grey: #4d4d4d; + --error-color: #f59a67; + --contrasted-text-color: #fff; +} + /* ---- Main interface elements ---- */ #main { width: 98%; @@ -26,7 +38,7 @@ ul.menu { padding: 0; list-style-type: none; - border-top: 1px dotted #7fcadb; + border-top: 1px dotted var(--medium-color); } li.menu { @@ -35,7 +47,7 @@ li.menu { } li.menu { - border-bottom: 1px dotted #7fcadb; + border-bottom: 1px dotted var(--medium-color); line-height: 20px; padding: 2px 0 3px 0; } @@ -57,6 +69,7 @@ th.LSobject-list { font-weight: bold; font-size: 0.9em; border: none; + background-color: transparent; } td.LSobject-list, tr.LSobject-list { @@ -64,7 +77,7 @@ td.LSobject-list, tr.LSobject-list { transition: all 0.25s linear; } -/* ---- LSsmoothbox ---- */ +/* ---- LSsmoothbox / LSconfirmbox ---- */ #frame-LSsmoothbox .LSform dt { width: 11em; } @@ -73,6 +86,69 @@ td.LSobject-list, tr.LSobject-list { margin-left: 11em; } +#win-LSsmoothbox, #box-LSconfirmBox { + border: 1px solid var(--dark-grey); + border-radius: 0px; +} + +#box-LSconfirmBox { + background-color: white; + padding: 0.5em; +} + +#title-LSconfirmBox, #text-LSconfirmBox { + color: var(--dark-grey); +} + +#btnsBox-LSconfirmBox { + margin: 0.3em; +} + +#closeBtn-LSsmoothbox, #closeBtn-LSconfirmBox { + background: transparent; + top: 0.3em; + right: 0.3em; +} + +#closeBtn-LSsmoothbox:after, #closeBtn-LSconfirmBox:after { + background: rgba(255, 255, 255, 0.8);; + position: relative; + top: 0; + left: -0.2em; + font-size: 1.2em; + content: '🗙'; + height: 1em; + width: 1em; + color: var(--medium-grey); + padding: 0 0.2em; +} +#closeBtn-LSsmoothbox:hover:before, #closeBtn-LSsmoothbox:hover:after, #closeBtn-LSconfirmBox:hover:before, #closeBtn-LSconfirmBox:hover:after { + color: var(--dark-grey); +} + +#closeBtn-LSconfirmBox { + top: 0; + right: 0; +} + +#validBtn-LSsmoothbox, .btn-LSconfirmBox { + border-radius: 0px; + background-color: var(--medium-grey); + border-radius: 0; + color: var(--contrasted-text-color); + padding: 2px 15px; + font-weight: normal; +} + +#validBtn-LSsmoothbox { + bottom: 0.5em; + right: 0.5em; +} + +#validBtn-LSsmoothbox:hover, .btn-LSconfirmBox:hover { + background-color: var(--dark-grey); +} + /* ---- LSform ---- */ .LSform dt { @@ -83,78 +159,129 @@ dd.LSform { margin-left: 24em; } -li.LSform_layout_current { - color: #fff; - background-color: #ccc; -} - li.LSform_layout_active { border-radius: 0px; border: none; } +.LSform input[type=submit] { + border: none; + width: 12em; +} + +div.LSformElement_image { + background: white; + border: 1px solid; + padding: 0; + border-radius: 0; + -moz-border-radius: 0; +} + +.LSform input[type=text], .LSform input[type=submit], .LSform input[type=password], .LSform select, .LSform textarea, ul.LSformElement_mail_autocomplete, ul.LSformElement_select_object_edit { + width: 32rem; +} /* * Colors */ -/* ---- Moyen ---- */ -li.LSform_layout_active, tr.LSobject-list:hover, div.LSformElement_image { - background-color: #7fcadb; +/* ---- Medium ---- */ +li.LSform_layout_active, tr.LSobject-list:hover { + background-color: var(--medium-color); } -li.LSview-actions, div.LSform_layout, h1 { - border-color: #7fcadb; +li.LSview-actions, div.LSform_layout, h1, form.LSglobal_search, div.LSformElement_image { + border-color: var(--medium-color); } h1, li.LSview-actions, li.menu a:hover { - color: #7fcadb; + color: var(--medium-color); } -/* ---- Clair ---- */ -ul.LSformElement_select_object_edit, li.LSformElement_select_object, table.LSobject-list, td.LSobject-list, div.LSinfosBox { - border-color: #d6edf6; +/* ---- Light ---- */ +ul.LSformElement_select_object_edit, li.LSformElement_select_object, table.LSobject-list, td.LSobject-list, div.LSinfosBox, .LSform select, select#LSview_search_predefinedFilter { + border-color: var(--light-color); } -tr.LSobject-list-bis, .LSform input[type=text], .LSform input[type=file], .LSform input[type=password], .LSform select, .LSform textarea, li.LSformElement_select_object_addBtn, div.LSinfosBox { - background-color: #d6edf6; +tr.LSobject-list-bis, .LSform input[type=text], .LSform input[type=password], .LSform textarea, li.LSformElement_select_object_addBtn, div.LSinfosBox { + background-color: var(--light-color); +} + +.LSform select, select#LSview_search_predefinedFilter { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background: var(--light-color) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 5px center/8px 10px; + border: 1px solid var(--medium-color); } -/* ---- Fonce ---- */ +/* ---- Dark ---- */ li.LSform_layout_current, .LSform input[type=submit], input[type='submit'].LSview_search { - background-color: #0097c4; + background-color: var(--dark-color); } li.menu a, a.menu, h1 { - color: #0097c4; + color: var(--dark-color); } input[type='submit'].LSview_search, input[type='text'].LSview_search { - border-color: #0097c4; + border-color: var(--dark-color); } -/* ---- Gris clair ---- */ +/* ---- Light grey ---- */ a.LSsession_recoverPassword, a.LSobject-list-page, a.LSobject-list-nb-by-page, h2 { - color: #999; + color: var(--medium-grey); } -/* ---- Gris fonce ---- */ +/* ---- Dark grey ---- */ #status, th.LSobject-list, input[type='text'].LSview_search, th.LSobject-list a, .LSform dt, a, div.LSinfosBox, strong.LSobject-list-page, strong.LSobject-list-nb-by-page, a.LSobject-list-page:hover, a.LSobject-list-nb-by-page:hover { - color: #4d4d4d; + color: var(--dark-grey); } -/* ---- Blanc ---- */ -tr.LSobject-list:hover, .LSform input[type=submit], input[type='submit'].LSview_search { - color: #fff; +/* ---- Contrasted grey ---- */ +tr.LSobject-list:hover, .LSform input[type=submit], input[type='submit'].LSview_search, li.LSform_layout_current { + color: var(--contrasted-text-color); } -th.LSobject-list { - background-color: transparent; -} - -/* ---- Autre ---- */ +/* ---- Errors ---- */ li.LSform_layout_errors { - background-color: #f59a67; + background-color: var(--error-color); +} + +/* ---- Custom checkbox/radiobox ---- */ +input[type=checkbox], input[type=radio] { + background-color: white; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + border: 1px solid var(--dark-color); + width: 1em; + height: 1em; + font-size: 1em; + display: inline-block; +} + +input[type=radio] { + border-radius: 0.5em; +} + +input[type=checkbox]:before { + display: block; + width: 100%; + height: 100%; + font-size: 0.8em; + text-align: center; + color: var(--dark-color); + content: "\2713"; + visibility: hidden; +} + +input[type=checkbox]:checked:before { + visibility: visible; +} + +input[type=radio]:checked { + background-color: var(--dark-color); } diff --git a/src/css/light-green.css b/src/css/light-green.css index 05472593..cfa6d6e0 100644 --- a/src/css/light-green.css +++ b/src/css/light-green.css @@ -1,160 +1,6 @@ -/* ---- Main interface elements ---- */ -#main { - width: 98%; - font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; - border: none; -} - -#left { - width: 165px; - background-color: transparent; -} - -#logo { - padding: 32px 5px 15px 5px; - border: none; - margin-top: 6px; - margin-left: 3px; -} - -#status { - background-color: transparent; - vertical-align: baseline; -} - -/* ---- Menu ---- */ -ul.menu { - padding: 0; - list-style-type: none; - border-top: 1px dotted #61c3cc; -} - -li.menu { - font-weight: bold; - font-size: 0.9em; -} - -li.menu { - border-bottom: 1px dotted #61c3cc; - line-height: 20px; - padding: 2px 0 3px 0; -} - -li.menu a { - transition: all 0.15s linear; -} - -/* ---- Objects list ---- */ - -table.LSobject-list { - width: 98%; - border: none; - margin-top: 1.8em; -} - - -th.LSobject-list { - font-weight: bold; - font-size: 0.9em; - border: none; -} - -td.LSobject-list, tr.LSobject-list { - border: none; - transition: all 0.25s linear; -} - -/* ---- LSsmoothbox ---- */ -#frame-LSsmoothbox .LSform dt { - width: 11em; -} - -#frame-LSsmoothbox .LSform dd { - margin-left: 11em; -} - -/* ---- LSform ---- */ - -.LSform dt { - width: 24em; -} - -dd.LSform { - margin-left: 24em; -} - -li.LSform_layout_current { - color: #fff; - background-color: #ccc; -} - -li.LSform_layout_active { - border-radius: 0px; - border: none; -} - - -/* - * Colors - */ - - -/* ---- Moyen ---- */ -li.LSform_layout_active, tr.LSobject-list:hover, div.LSformElement_image { - background-color: #61c3cc; -} - -li.LSview-actions, div.LSform_layout, h1 { - border-color: #61c3cc; -} - -h1, li.LSview-actions, li.menu a:hover { - color: #61c3cc; -} - -/* ---- Clair ---- */ -ul.LSformElement_select_object_edit, li.LSformElement_select_object, table.LSobject-list, td.LSobject-list, div.LSinfosBox { - border-color: #defcff; -} - -tr.LSobject-list-bis, .LSform input[type=text], .LSform input[type=file], .LSform input[type=password], .LSform select, .LSform textarea, li.LSformElement_select_object_addBtn, div.LSinfosBox { - background-color: #defcff; -} - - -/* ---- Fonce ---- */ -li.LSform_layout_current, .LSform input[type=submit], input[type='submit'].LSview_search { - background-color: #388c94; -} - -li.menu a, a.menu, h1 { - color: #388c94; -} - -input[type='submit'].LSview_search, input[type='text'].LSview_search { - border-color: #388c94; -} - -/* ---- Gris clair ---- */ -a.LSsession_recoverPassword, a.LSobject-list-page, a.LSobject-list-nb-by-page, h2 { - color: #999; -} - -/* ---- Gris fonce ---- */ -#status, th.LSobject-list, input[type='text'].LSview_search, th.LSobject-list a, .LSform dt, a, div.LSinfosBox, strong.LSobject-list-page, strong.LSobject-list-nb-by-page, a.LSobject-list-page:hover, a.LSobject-list-nb-by-page:hover { - color: #4d4d4d; -} - -/* ---- Blanc ---- */ -tr.LSobject-list:hover, .LSform input[type=submit], input[type='submit'].LSview_search { - color: #fff; -} - -th.LSobject-list { - background-color: transparent; -} - -/* ---- Autre ---- */ -li.LSform_layout_errors { - background-color: #f59a67; +/* ---- Colors ---- */ +:root { + --light-color: #d8ecee; + --medium-color: #61c3cc; + --dark-color: #388c94; } diff --git a/src/css/light-grey.css b/src/css/light-grey.css index 54937c41..673b2f13 100644 --- a/src/css/light-grey.css +++ b/src/css/light-grey.css @@ -1,156 +1,6 @@ -/* ---- Main interface elements ---- */ -#main { - width: 98%; - font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; - border: none; -} - -#left { - width: 165px; - background-color: transparent; -} - -#logo { - padding: 32px 5px 15px 5px; - border: none; - margin-top: 6px; - margin-left: 3px; -} - -#status { - background-color: transparent; - vertical-align: baseline; -} - -/* ---- Login form ---- */ - -div.loginform { - border: none; - background: none; -} - -/* ---- Menu ---- */ -ul.menu { - padding: 0; - list-style-type: none; - border-top: 1px dotted #999; -} - -li.menu { - font-weight: bold; - font-size: 0.9em; -} - -li.menu { - border-bottom: 1px dotted #999; - line-height: 20px; - padding: 2px 0 3px 0; -} - -li.menu a { - transition: all 0.15s linear; -} - -/* ---- Objects list ---- */ - -table.LSobject-list { - width: 98%; - border: none; - margin-top: 1.8em; -} - - -th.LSobject-list { - font-weight: bold; - font-size: 0.9em; - border: none; -} - -td.LSobject-list, tr.LSobject-list { - border: none; - transition: all 0.25s linear; -} - -/* ---- LSsmoothbox ---- */ -#frame-LSsmoothbox .LSform dt { - width: 11em; -} - -#frame-LSsmoothbox .LSform dd { - margin-left: 11em; -} - -/* ---- LSform ---- */ - -.LSform dt { - width: 24em; -} - -dd.LSform { - margin-left: 24em; -} - -li.LSform_layout_current { - color: #fff; - background-color: #ccc; -} - -li.LSform_layout_active { - border-radius: 0px; - border: none; -} - - -/* - * Colors - */ - -/* ---- Gris ---- */ -li.LSform_layout_active, input[type='submit'].LSview_search, tr.LSobject-list:hover, th.LSobject-list, div.LSformElement_image { - background-color: #ccc; -} - -li.LSview-actions, div.LSform_layout, h1, input[type='submit'].LSview_search, input[type='text'].LSview_search { - border-color: #ccc; -} - -h1, li.LSview-actions, li.menu a:hover { - color: #ccc; -} - -/* ---- Gris clair ---- */ -ul.LSformElement_select_object_edit, li.LSformElement_select_object, table.LSobject-list, td.LSobject-list, div.LSinfosBox { - border-color: #ddd; -} - -tr.LSobject-list-bis, .LSform input[type=text], .LSform input[type=file], .LSform input[type=submit], .LSform input[type=password], .LSform select, .LSform textarea, li.LSformElement_select_object_addBtn, div.LSinfosBox { - background-color: #ddd; -} - -/* ---- Noir ---- */ -li.LSform_layout_current { - background-color: #4d4d4d; -} - -form.LSglobal_search { - border-color: #4d4d4d; -} - -li.menu a, a.menu, h1, #status, input[type='submit'].LSview_search, input[type='text'].LSview_search, th.LSobject-list, th.LSobject-list a, .LSform dt, a, div.LSinfosBox, strong.LSobject-list-page, strong.LSobject-list-nb-by-page, a.LSobject-list-page:hover, a.LSobject-list-nb-by-page:hover { - color: #4d4d4d; -} - -/* ---- Gris clair ---- */ -a.LSsession_recoverPassword, a.LSobject-list-page, a.LSobject-list-nb-by-page, h2 { - color: #999; -} - -/* ---- Blanc ---- */ -th.LSobject-list, tr.LSobject-list:hover, th.LSobject-list a { - color: #fff; -} - -/* ---- Autre ---- */ -li.LSform_layout_errors { - background-color: #f59a67; +/* ---- Colors ---- */ +:root { + --light-color: #ddd; + --medium-color: #ccc; + --dark-color: #4d4d4d; } diff --git a/src/css/light-red.css b/src/css/light-red.css index 8b235052..683d53b5 100644 --- a/src/css/light-red.css +++ b/src/css/light-red.css @@ -1,167 +1,6 @@ -/* ---- Main interface elements ---- */ -#main { - width: 98%; - font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; - border: none; -} - -#left { - width: 165px; - background-color: transparent; -} - -#logo { - padding: 32px 5px 15px 5px; - border: none; - margin-top: 6px; - margin-left: 3px; -} - -#status { - background-color: transparent; - vertical-align: baseline; -} - -/* ---- Login form ---- */ - -div.loginform { - border: none; - background: none; -} - -/* ---- Menu ---- */ -ul.menu { - padding: 0; - list-style-type: none; - border-top: 1px dotted #999; -} - -li.menu { - font-weight: bold; - font-size: 0.9em; -} - -li.menu { - border-bottom: 1px dotted #999; - line-height: 20px; - padding: 2px 0 3px 0; -} - -li.menu a { - transition: all 0.15s linear; -} - -/* ---- Objects list ---- */ - -table.LSobject-list { - width: 98%; - border: none; - margin-top: 1.8em; -} - - -th.LSobject-list { - font-weight: bold; - font-size: 0.9em; - border: none; -} - -td.LSobject-list, tr.LSobject-list { - border: none; - transition: all 0.25s linear; -} - -/* ---- LSsmoothbox ---- */ -#frame-LSsmoothbox .LSform dt { - width: 11em; -} - -#frame-LSsmoothbox .LSform dd { - margin-left: 11em; -} - -/* ---- LSform ---- */ - -.LSform dt { - width: 24em; -} - -dd.LSform { - margin-left: 24em; -} - -li.LSform_layout_current { - color: #fff; - background-color: #ccc; -} - -li.LSform_layout_active { - border-radius: 0px; - border: none; -} - - -/* - * Colors - */ - - -/* ---- Moyen ---- */ -li.LSform_layout_active, input[type='submit'].LSview_search, tr.LSobject-list:hover, div.LSformElement_image { - background-color: #d86165; -} - -li.LSview-actions, div.LSform_layout, h1, input[type='submit'].LSview_search, input[type='text'].LSview_search { - border-color: #d86165; -} - -h1, li.LSview-actions, li.menu a:hover { - color: #d86165; -} - -/* ---- Clair ---- */ -ul.LSformElement_select_object_edit, li.LSformElement_select_object, table.LSobject-list, td.LSobject-list, div.LSinfosBox { - border-color: #ffe9e5; -} - -tr.LSobject-list-bis, .LSform input[type=text], .LSform input[type=file], .LSform input[type=submit], .LSform input[type=password], .LSform select, .LSform textarea, li.LSformElement_select_object_addBtn, div.LSinfosBox { - background-color: #ffe9e5; -} - - -/* ---- Fonce ---- */ -li.LSform_layout_current { - background-color: #a53248; -} - -form.LSglobal_search { - border-color: #a53248; -} - -li.menu a, a.menu, h1 { - color: #a53248; -} - -/* ---- Gris clair ---- */ -a.LSsession_recoverPassword, a.LSobject-list-page, a.LSobject-list-nb-by-page, h2 { - color: #999; -} - -/* ---- Gris fonce ---- */ -#status, input[type='submit'].LSview_search, input[type='text'].LSview_search, th.LSobject-list, th.LSobject-list a, .LSform dt, a, div.LSinfosBox, strong.LSobject-list-page, strong.LSobject-list-nb-by-page, a.LSobject-list-page:hover, a.LSobject-list-nb-by-page:hover { - color: #4d4d4d; -} - -/* ---- Blanc ---- */ -tr.LSobject-list:hover { - color: #fff; -} - -th.LSobject-list { - background-color: transparent; -} - -/* ---- Autre ---- */ -li.LSform_layout_errors { - background-color: #f59a67; +/* ---- Colors ---- */ +:root { + --light-color: #ffe9e5; + --medium-color: #d86165; + --dark-color: #a53248; } diff --git a/src/css/light-turquoise.css b/src/css/light-turquoise.css index 35fefbc8..c116b9c4 100644 --- a/src/css/light-turquoise.css +++ b/src/css/light-turquoise.css @@ -1,164 +1,6 @@ -/* ---- Main interface elements ---- */ -#main { - width: 98%; - font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; - border: none; -} - -#left { - width: 165px; - background-color: transparent; -} - -#logo { - padding: 32px 5px 15px 5px; - border: none; - margin-top: 6px; - margin-left: 3px; -} - -#status { - background-color: transparent; - vertical-align: baseline; -} - -/* ---- Login form ---- */ - -div.loginform { - border: none; - background: none; -} - -/* ---- Menu ---- */ -ul.menu { - padding: 0; - list-style-type: none; - border-top: 1px dotted #999; -} - -li.menu { - font-weight: bold; - font-size: 0.9em; -} - -li.menu { - border-bottom: 1px dotted #999; - line-height: 20px; - padding: 2px 0 3px 0; -} - -li.menu a { - transition: all 0.15s linear; -} - -/* ---- Objects list ---- */ - -table.LSobject-list { - width: 98%; - border: none; - margin-top: 1.8em; -} - - -th.LSobject-list { - font-weight: bold; - font-size: 0.9em; - border: none; -} - -td.LSobject-list, tr.LSobject-list { - border: none; - transition: all 0.25s linear; -} - -/* ---- LSsmoothbox ---- */ -#frame-LSsmoothbox .LSform dt { - width: 11em; -} - -#frame-LSsmoothbox .LSform dd { - margin-left: 11em; -} - -p.LSobject-list-page { - clear: both; -} - -/* ---- LSform ---- */ - -.LSform dt { - width: 24em; -} - -dd.LSform { - margin-left: 24em; -} - -li.LSform_layout_current { - color: #fff; - background-color: #ccc; -} - -li.LSform_layout_active { - border-radius: 0px; - border: none; -} - - -/* - * Colors - */ - -/* ---- Gris ---- */ -li.LSform_layout_active, input[type='submit'].LSview_search, tr.LSobject-list:hover, div.LSformElement_image { - background-color: #61c3cc; -} - -li.LSview-actions, div.LSform_layout, h1, input[type='submit'].LSview_search, input[type='text'].LSview_search { - border-color: #61c3cc; -} - -h1, li.LSview-actions, li.menu a:hover { - color: #61c3cc; -} - -/* ---- Gris clair ---- */ -ul.LSformElement_select_object_edit, li.LSformElement_select_object, table.LSobject-list, td.LSobject-list, div.LSinfosBox { - border-color: #bee1e2; -} - -tr.LSobject-list-bis, .LSform input[type=text], .LSform input[type=file], .LSform input[type=submit], .LSform input[type=password], .LSform select, .LSform textarea, li.LSformElement_select_object_addBtn, div.LSinfosBox { - background-color: #bee1e2; -} - -/* ---- Noir ---- */ -li.LSform_layout_current { - background-color: #00939f; -} - -li.menu a, a.menu, h1 { - color: #00939f; -} - -#status, input[type='submit'].LSview_search, input[type='text'].LSview_search, th.LSobject-list, th.LSobject-list a, .LSform dt, a, div.LSinfosBox, strong.LSobject-list-page, a.LSobject-list-page:hover { - color: #4d4d4d; -} - -/* ---- Gris clair ---- */ -a.LSsession_recoverPassword, a.LSobject-list-page, h2 { - color: #999; -} - -/* ---- Blanc ---- */ -tr.LSobject-list:hover { - color: #fff; -} - -th.LSobject-list { - background-color: transparent; -} - -/* ---- Autre ---- */ -li.LSform_layout_errors { - background-color: #f59a67; +/* ---- Colors ---- */ +:root { + --light-color: #bee1e2; + --medium-color: #61c3cc; + --dark-color: #00939f; } diff --git a/src/css/std-grey.css b/src/css/std-grey.css index 764fbc91..5b913687 100644 --- a/src/css/std-grey.css +++ b/src/css/std-grey.css @@ -33,7 +33,7 @@ ul.LSformElement_select_object_edit, li.LSformElement_select_object, table.LSobj border-color: #ddd; } -tr.LSobject-list-bis, .LSform input[type=text], .LSform input[type=file], .LSform input[type=submit], .LSform input[type=password], .LSform select, .LSform textarea, li.LSformElement_select_object_addBtn, div.LSinfosBox { +tr.LSobject-list-bis, .LSform input[type=text], .LSform input[type=submit], .LSform input[type=password], .LSform select, .LSform textarea, li.LSformElement_select_object_addBtn, div.LSinfosBox { background-color: #ddd; }