Add German localization and styling for administration module
- Introduced new JavaScript file `fis.admin_txt_de.js` for German translations of administration-related terms and messages. - Created `fis.admin.css` for styling the administration interface, including layout, cards, and buttons. - Added `fis.admin.de.js` for the main functionality of the administration module, implementing features such as system status checks and email testing. - Minified version of the German JavaScript file created as `fis.admin.de.min.js`. - Minified CSS file created as `fis.admin.min.css` for optimized loading.
This commit is contained in:
Stefan
@@ -0,0 +1,256 @@
|
||||
/* basics */
|
||||
/* Color SCHEME */
|
||||
/* #8396bd */
|
||||
/* #e3e6e6 */
|
||||
/* #ffffff */
|
||||
/* #262626 */
|
||||
/* #262626 */
|
||||
/* #e3e6e6 */
|
||||
/* #FFC801 */
|
||||
/* #ffff4a */
|
||||
/* media breaks */
|
||||
/* other */
|
||||
/* mixin */
|
||||
/* basics */
|
||||
/* Color SCHEME */
|
||||
/* #1b4379 #0033b3 */
|
||||
/*neu: #56a532 ; alt: rgb(32,144,119);*/
|
||||
/* 10% sw */
|
||||
.admfrm {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
.admfrm .adm_sec {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: rgb(27, 67, 121);
|
||||
margin: 1.5rem 0 0.75rem;
|
||||
border-bottom: 2px solid rgb(27, 67, 121);
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
.admfrm .adm_sec:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.admfrm .adm_err {
|
||||
padding: 1rem;
|
||||
color: #b00020;
|
||||
font-weight: bold;
|
||||
}
|
||||
.admfrm .adm_grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
|
||||
gap: 1rem;
|
||||
align-items: start;
|
||||
}
|
||||
.admfrm .adm_card {
|
||||
border: 1px solid #d5d5d5;
|
||||
border-radius: 0.4rem;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 3px rgba(50, 50, 50, 0.12);
|
||||
overflow: hidden;
|
||||
}
|
||||
.admfrm .adm_card.adm_card_wide {
|
||||
grid-column: 1/-1;
|
||||
}
|
||||
.admfrm .adm_card_hd {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.6rem 0.85rem;
|
||||
background: rgb(27, 67, 121);
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.admfrm .adm_card_hd > span:first-child {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.admfrm .adm_card_bd {
|
||||
padding: 0.6rem 0.85rem;
|
||||
}
|
||||
.admfrm .adm_card_ft {
|
||||
padding: 0.5rem 0.85rem 0.75rem;
|
||||
text-align: right;
|
||||
}
|
||||
.admfrm table.adm_kv {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
}
|
||||
.admfrm table.adm_kv td {
|
||||
padding: 0.25rem 0.35rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
vertical-align: top;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
.admfrm table.adm_kv td.k {
|
||||
color: #666;
|
||||
white-space: nowrap;
|
||||
width: 40%;
|
||||
}
|
||||
.admfrm table.adm_kv td.v {
|
||||
word-break: break-word;
|
||||
}
|
||||
.admfrm table.adm_kv tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.admfrm .adm_probe {
|
||||
margin-top: 0.6rem;
|
||||
padding-top: 0.5rem;
|
||||
border-top: 1px dashed #ddd;
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
.admfrm .adm_probe .adm_probe_msg {
|
||||
font-weight: 600;
|
||||
}
|
||||
.admfrm .adm_probe .adm_probe_det {
|
||||
color: #555;
|
||||
word-break: break-word;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
.admfrm .adm_probe .adm_probe_dur {
|
||||
color: #999;
|
||||
margin-top: 0.15rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.admfrm .adm_probe .adm_probe_metrics {
|
||||
margin-top: 0.35rem;
|
||||
}
|
||||
.admfrm .adm_probe .adm_probe_metrics .adm_metric {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.1rem 0;
|
||||
border-bottom: 1px dotted #eee;
|
||||
}
|
||||
.admfrm .adm_probe .adm_probe_metrics .adm_metric:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.admfrm .adm_probe .adm_probe_metrics .adm_metric .adm_metric_k {
|
||||
color: #555;
|
||||
word-break: break-word;
|
||||
}
|
||||
.admfrm .adm_probe .adm_probe_metrics .adm_metric .adm_metric_v {
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.admfrm {
|
||||
/* startup checks list */
|
||||
}
|
||||
.admfrm .adm_checks {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.admfrm .adm_checks .adm_check {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.25rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
.admfrm .adm_checks .adm_check:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.admfrm .adm_checks .adm_check .adm_check_k {
|
||||
color: #333;
|
||||
}
|
||||
.admfrm .adm_checks .adm_check .adm_check_v {
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
padding: 0.05rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.admfrm .adm_checks .adm_check .adm_check_ok {
|
||||
background: #e2f3da;
|
||||
color: #2f6d18;
|
||||
}
|
||||
.admfrm .adm_checks .adm_check .adm_check_fail {
|
||||
background: #f3ded9;
|
||||
color: #c0341d;
|
||||
}
|
||||
.admfrm .adm_checks .adm_check .adm_check_skipped {
|
||||
background: #ececec;
|
||||
color: #777;
|
||||
}
|
||||
.admfrm {
|
||||
/* status pill */
|
||||
}
|
||||
.admfrm .adm_pill {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 0.55rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.78rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
background: #999;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.admfrm .adm_pill_ok {
|
||||
background: rgb(86, 165, 50);
|
||||
}
|
||||
.admfrm .adm_pill_error {
|
||||
background: #c0341d;
|
||||
}
|
||||
.admfrm .adm_pill_disabled {
|
||||
background: #888;
|
||||
}
|
||||
.admfrm .adm_pill_unconfigured {
|
||||
background: #d69100;
|
||||
}
|
||||
.admfrm .adm_pill_checking {
|
||||
background: #2a72c4;
|
||||
}
|
||||
.admfrm {
|
||||
/* boolean chips */
|
||||
}
|
||||
.admfrm .adm_bool {
|
||||
display: inline-block;
|
||||
padding: 0 0.4rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
.admfrm .adm_bool_y {
|
||||
background: #e2f3da;
|
||||
color: #2f6d18;
|
||||
}
|
||||
.admfrm .adm_bool_n {
|
||||
background: #f3e0dd;
|
||||
color: #9c2a17;
|
||||
}
|
||||
.admfrm .adm_env {
|
||||
font-size: 0.8rem;
|
||||
font-weight: normal;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
.admfrm .adm_env.adm_env_test {
|
||||
background: #13a143;
|
||||
}
|
||||
.admfrm .adm_btn {
|
||||
cursor: pointer;
|
||||
border-radius: 0.28rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
font-size: 0.85rem;
|
||||
border: 1px solid #ababab;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
}
|
||||
.admfrm .adm_btn.adm_btn_primary {
|
||||
background-color: rgb(86, 165, 50);
|
||||
border-color: rgb(69.68, 133.688372093, 40.511627907);
|
||||
color: #fff;
|
||||
}
|
||||
.admfrm .adm_card_hd .adm_btn {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
border-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.adm_note {
|
||||
margin-top: 0.75rem;
|
||||
padding: 0.5rem 0.6rem;
|
||||
background: #f3f6fb;
|
||||
border-left: 3px solid rgb(27, 67, 121);
|
||||
font-size: 0.85rem;
|
||||
color: #444;
|
||||
}
|
||||
Reference in New Issue
Block a user