- 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.
201 lines
5.0 KiB
SCSS
201 lines
5.0 KiB
SCSS
.admfrm {
|
|
padding: 1.5rem;
|
|
|
|
.adm_sec {
|
|
font-size: 1.2rem;
|
|
font-weight: bold;
|
|
color: $fuchs_blau;
|
|
margin: 1.5rem 0 0.75rem;
|
|
border-bottom: 2px solid $fuchs_blau;
|
|
padding-bottom: 0.25rem;
|
|
|
|
&:first-child { margin-top: 0; }
|
|
}
|
|
|
|
.adm_err {
|
|
padding: 1rem;
|
|
color: #b00020;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.adm_grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
|
|
gap: 1rem;
|
|
align-items: start;
|
|
}
|
|
|
|
.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;
|
|
|
|
&.adm_card_wide { grid-column: 1 / -1; }
|
|
}
|
|
|
|
.adm_card_hd {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.6rem 0.85rem;
|
|
background: $fuchs_blau;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
|
|
> span:first-child { flex: 1 1 auto; }
|
|
}
|
|
|
|
.adm_card_bd {
|
|
padding: 0.6rem 0.85rem;
|
|
}
|
|
|
|
.adm_card_ft {
|
|
padding: 0.5rem 0.85rem 0.75rem;
|
|
text-align: right;
|
|
}
|
|
|
|
table.adm_kv {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
|
|
td {
|
|
padding: 0.25rem 0.35rem;
|
|
border-bottom: 1px solid #eee;
|
|
vertical-align: top;
|
|
font-size: 0.92rem;
|
|
|
|
&.k { color: #666; white-space: nowrap; width: 40%; }
|
|
&.v { word-break: break-word; }
|
|
}
|
|
|
|
tr:last-child td { border-bottom: none; }
|
|
}
|
|
|
|
.adm_probe {
|
|
margin-top: 0.6rem;
|
|
padding-top: 0.5rem;
|
|
border-top: 1px dashed #ddd;
|
|
font-size: 0.88rem;
|
|
|
|
.adm_probe_msg { font-weight: 600; }
|
|
.adm_probe_det { color: #555; word-break: break-word; margin-top: 0.15rem; }
|
|
.adm_probe_dur { color: #999; margin-top: 0.15rem; font-size: 0.8rem; }
|
|
|
|
.adm_probe_metrics {
|
|
margin-top: 0.35rem;
|
|
|
|
.adm_metric {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
padding: 0.1rem 0;
|
|
border-bottom: 1px dotted #eee;
|
|
|
|
&:last-child { border-bottom: none; }
|
|
|
|
.adm_metric_k { color: #555; word-break: break-word; }
|
|
.adm_metric_v { font-weight: 600; white-space: nowrap; }
|
|
}
|
|
}
|
|
}
|
|
|
|
/* startup checks list */
|
|
.adm_checks {
|
|
margin-top: 0.5rem;
|
|
|
|
.adm_check {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.25rem 0;
|
|
border-bottom: 1px solid #eee;
|
|
|
|
&:last-child { border-bottom: none; }
|
|
|
|
.adm_check_k { color: #333; }
|
|
.adm_check_v {
|
|
font-weight: bold;
|
|
font-size: 0.8rem;
|
|
padding: 0.05rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
white-space: nowrap;
|
|
}
|
|
.adm_check_ok { background: #e2f3da; color: #2f6d18; }
|
|
.adm_check_fail { background: #f3ded9; color: #c0341d; }
|
|
.adm_check_skipped { background: #ececec; color: #777; }
|
|
}
|
|
}
|
|
|
|
/* status pill */
|
|
.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;
|
|
}
|
|
.adm_pill_ok { background: $fuchs_akzent; }
|
|
.adm_pill_error { background: #c0341d; }
|
|
.adm_pill_disabled { background: #888; }
|
|
.adm_pill_unconfigured { background: #d69100; }
|
|
.adm_pill_checking { background: #2a72c4; }
|
|
|
|
/* boolean chips */
|
|
.adm_bool {
|
|
display: inline-block;
|
|
padding: 0 0.4rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
}
|
|
.adm_bool_y { background: #e2f3da; color: #2f6d18; }
|
|
.adm_bool_n { background: #f3e0dd; color: #9c2a17; }
|
|
|
|
.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);
|
|
|
|
&.adm_env_test { background: #13a143; }
|
|
}
|
|
|
|
.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;
|
|
|
|
&.adm_btn_primary {
|
|
background-color: $fuchs_akzent;
|
|
border-color: darken($fuchs_akzent, 8%);
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.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 $fuchs_blau;
|
|
font-size: 0.85rem;
|
|
color: #444;
|
|
}
|