добавил кучу всего в вебе

static/fields.css

@@ -0,0 +1,124 @@
+.tabs-header {
+    margin: 0.5em 0;
+    background: var(--brand-bg);
+}
+.tabs-header > * {
+    display: inline-block;
+}
+.tabs-btn {
+    text-decoration: none;
+    font-size: 18px;
+    border: none;
+    padding: 10px 25px;
+    text-align: center;
+    cursor: pointer;
+    margin-bottom: -3px;
+    border-bottom: 3px solid #eee;
+}
+.tabs-btn.active {
+    color: var(--brand-text);
+    border-bottom: 3px solid var(--brand-text);
+}
+.tabs-body-item {
+    padding: 20px 0;
+}
+
+.indicator_bad {
+    background: var(--text-bad);
+}
+.indicator_good {
+    background: var(--text-good);
+}
+.indicator {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border: solid 1px var(--text-color2);
+    border-radius: 0.5em;
+}
+
+.nav-bar-element {
+    margin: 0.5em;
+    border-bottom: 2px solid var(--text-color2);
+}
+
+.tabs-item-flex-container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.tabs-item-flex-container > *, .settings-set-container {
+    padding: 1em;
+    margin: 1em;
+    border: 1px solid var(--text-color2);
+    border-radius: 0.2em;
+}
+
+.tabs-item-flex-container th {
+    text-align: left;
+}
+.tabs-item-flex-container h2 {
+    margin-top: 0;
+}
+
+form label * {
+    display: block;
+}
+form label {
+    margin: 1em 0;
+    display: block;
+    background: var(--bg-selected);
+    color: var(--text-color2);
+}
+form input {
+    margin-top: 0.5em;
+    border: none;
+    border-bottom: solid 2px var(--text-color);
+    width: 100%;
+    box-sizing: border-box;
+}
+
+form input:focus {
+    outline: none;
+    border: none;
+    border-bottom: solid 2px var(--brand-text);
+}
+
+/*********************** Стили для красивых 'switch' ***********************/
+
+.toggle-input {
+    display: inline-block;
+    position: relative;
+    margin: 5px 10px;
+    width: 50px;
+    height: 16px;
+    background-color: var(--bg-element);
+    border-radius: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.toggle-input input[type="checkbox"] {
+    display: none;
+}
+
+.toggle-input .slider {
+    position: absolute;
+    top: -4px;
+    left: 0;
+    width: 25px;
+    height: 25px;
+    background-color: var(--text-color);
+    border-radius: 50%;
+    transition: left 0.3s;
+}
+
+.toggle-input input[type="checkbox"]:checked + .slider {
+    left: 25px;
+    background-color: var(--brand-text);
+}
+
+.toggle-input input[type="checkbox"]:checked + .slider:before {
+    left: 10px;
+}