diff --git a/emhttp/plugins/dynamix.plugin.manager/sheets/Plugins.css b/emhttp/plugins/dynamix.plugin.manager/sheets/Plugins.css index f49d79aa6..dd3d30489 100644 --- a/emhttp/plugins/dynamix.plugin.manager/sheets/Plugins.css +++ b/emhttp/plugins/dynamix.plugin.manager/sheets/Plugins.css @@ -12,7 +12,4 @@ table tbody td { span.status.vhshift { margin-top: 8px !important; } - table#plugin_table { - margin-top: -43px !important; - } } \ No newline at end of file diff --git a/emhttp/plugins/dynamix/styles/default-base.css b/emhttp/plugins/dynamix/styles/default-base.css index 4dfc9c2f3..0fb7a996e 100644 --- a/emhttp/plugins/dynamix/styles/default-base.css +++ b/emhttp/plugins/dynamix/styles/default-base.css @@ -1151,65 +1151,70 @@ a.list { text-decoration: none; color: inherit; } -div.content { +.content { position: relative; width: 100%; - padding-bottom: 3rem; - clear: both; + box-sizing: border-box; } -div.content.shift { - margin-top: 1px; +.tabs, +.tabs-container { + display: flex; + flex-direction: row; + align-items: center; } -label + .content { - margin-top: 86px; + +.tabs { + justify-content: space-between; } -div.tabs { - display: flex !important; - flex-direction: row !important; - align-items: stretch !important; -} -div.tab { - float: left; - margin-top: 30px; -} -div.tab input[id^="tab"] { - display: none; -} -div.tab [type="radio"] + label:hover { - background-color: transparent; - border: 1px solid var(--brand-orange); - border-bottom: none; - cursor: pointer; - opacity: 1; -} -div.tab [type="radio"]:checked + label { - cursor: default; - background-color: transparent; - border: 1px solid var(--brand-orange); - border-bottom: none; - opacity: 1; -} -div.tab [type="radio"] + label ~ .content { - display: none; -} -div.tab [type="radio"]:checked + label ~ .content { - display: inline; -} -div.tab [type="radio"] + label { - position: relative; - font-size: 1.4rem; - letter-spacing: 1.8px; - padding: 4px 10px; - margin-right: 2px; + +.tabs button[role="tab"] { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + background-color: var(--radio-background-color); + border: 1px solid var(--disabled-input-border-color); + border-radius: 0; border-top-left-radius: 6px; border-top-right-radius: 6px; - border: 1px solid var(--disabled-input-border-color); - border-bottom: none; - background-color: var(--radio-background-color); - opacity: 0.5; + border-bottom: 1px solid transparent; + color: var(--gray-300); + font-weight: normal; + font-family: inherit; + font-size: 1.4rem; + letter-spacing: 1.8px; + margin-right: 4px; + margin-bottom: 0; + padding: .75rem 1rem; + min-width: 0; + box-shadow: none; + outline: none; + display: flex; + align-items: center; + justify-content: center; + vertical-align: middle; + line-height: 1.0; + cursor: pointer; + transition: border-color 0.2s, color 0.2s, background 0.2s, opacity 0.2s; + text-transform: none; + background-image: none; + opacity: .75; } -div.tab [type="radio"] + label img { - padding-right: 4px; +.tabs button[role="tab"] > .tab-icon { + margin-right: 8px; + display: inline-flex; + align-items: center; +} +.tabs button[role="tab"]:focus, +.tabs button[role="tab"]:hover, +.tabs button[role="tab"][aria-selected="true"] { + background: transparent; + color: var(--text-color); + border-color: var(--brand-orange); + border-bottom: 1px solid transparent; + opacity: 1; +} +.tabs button[role="tab"]:last-child { + margin-right: 0; } div.Panel { text-align: center; @@ -2251,6 +2256,10 @@ span#wlan0 { } } +#displaybox { + padding: 0 1rem 4rem; +} + /* Theme width styles */ .Theme--width-boxed #displaybox { min-width: 1280px; @@ -2310,67 +2319,3 @@ span#wlan0 { margin: 0 20px; } } - -.tabs, -.tabs-container { - display: flex; - flex-direction: row; - align-items: center; -} - -.tabs { - justify-content: space-between; -} - -.tabs button[role="tab"] { - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - background-color: var(--radio-background-color); - border: 1px solid var(--disabled-input-border-color); - border-radius: 0; - border-top-left-radius: 6px; - border-top-right-radius: 6px; - border-bottom: 1px solid transparent; - color: var(--gray-300); - font-weight: normal; - font-family: inherit; - font-size: 1.4rem; - letter-spacing: 1.8px; - margin-right: 4px; - margin-bottom: 0; - padding: .75rem 1rem; - min-width: 0; - box-shadow: none; - outline: none; - display: flex; - align-items: center; - justify-content: center; - vertical-align: middle; - line-height: 1.0; - cursor: pointer; - transition: border-color 0.2s, color 0.2s, background 0.2s, opacity 0.2s; - text-transform: none; - background-image: none; - opacity: .75; -} -.tabs button[role="tab"] > .tab-icon { - margin-right: 8px; - display: inline-flex; - align-items: center; -} -.tabs button[role="tab"]:focus, -.tabs button[role="tab"]:hover, -.tabs button[role="tab"][aria-selected="true"] { - background: transparent; - color: var(--text-color); - border-color: var(--brand-orange); - border-bottom: 1px solid transparent; - opacity: 1; -} -/* .tabs button[role="tab"]:focus { - outline: 1px solid var(--brand-orange); -} */ -.tabs button[role="tab"]:last-child { - margin-right: 0; -}