You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
370 lines
6.7 KiB
CSS
370 lines
6.7 KiB
CSS
@font-face {
|
|
font-family: "FA5";
|
|
font-style: normal;
|
|
font-weight: 900;
|
|
font-display: block;
|
|
/*@[if_target:host]*/
|
|
/*@![add_file_to:inc/style/fonts/fa-solid-900.woff2, @fonts/fa-solid-900.woff2]*/
|
|
src: url(fonts/fa-solid-900.woff2) format("woff2");
|
|
/*@/[if_target:host]*/
|
|
/*@[if_target:esp]*/
|
|
src: url(data:font/woff2;charset=utf-8;base64,/*@![include:inc/style/fonts/fa-solid-900.min.woff2,base64]*/) format("woff2");
|
|
/*@/[if_target:esp]*/
|
|
/*@[if_not_target:host,esp]*/
|
|
src: url(data:font/woff2;charset=utf-8;base64,/*@![include:inc/style/fonts/fa-solid-900.woff2,base64]*/) format("woff2");
|
|
/*@/[if_not_target:host,esp]*/
|
|
|
|
/*@[if_target:none]*/
|
|
src: url(fonts/fa-solid-900.woff2) format("woff2");
|
|
/*@/[if_target:none]*/
|
|
}
|
|
|
|
:root {
|
|
--prim: #37a93c;
|
|
--err: #8e1414;
|
|
--font3: #919191;
|
|
--scheme: light;
|
|
--font_f: monospace;
|
|
--menu_h: 120px;
|
|
--ui_width: 500px;
|
|
}
|
|
|
|
body {
|
|
color-scheme: light;
|
|
--back: #eeeeee;
|
|
--tab: #ffffff;
|
|
--font: #111111;
|
|
--font2: #333333;
|
|
--dark: #ddd;
|
|
--thumb: #999999;
|
|
--black: #bdbdbd;
|
|
--font_inv: #ffffff;
|
|
--shad: #000000a3;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
body.theme-auto {
|
|
color-scheme: dark;
|
|
--back: #1b1c20;
|
|
--tab: #26272c;
|
|
--font: #eeeeee;
|
|
--font2: #cccccc;
|
|
--dark: #141516;
|
|
--thumb: #444444;
|
|
--black: #0e0e0e;
|
|
--font_inv: #222222;
|
|
--shad: #000;
|
|
}
|
|
}
|
|
|
|
body.theme-dark {
|
|
color-scheme: dark;
|
|
--back: #1b1c20;
|
|
--tab: #26272c;
|
|
--font: #eeeeee;
|
|
--font2: #cccccc;
|
|
--dark: #141516;
|
|
--thumb: #444444;
|
|
--black: #0e0e0e;
|
|
--font_inv: #222222;
|
|
--shad: #000;
|
|
}
|
|
|
|
body,
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
-webkit-tap-highlight-color: transparent;
|
|
background: var(--back);
|
|
font-family: var(--font_f);
|
|
font-size: 17px;
|
|
cursor: default;
|
|
}
|
|
|
|
body::-webkit-scrollbar {
|
|
width: 7px;
|
|
height: 7px;
|
|
}
|
|
|
|
body::-webkit-scrollbar-track {
|
|
background: #0000;
|
|
}
|
|
|
|
body::-webkit-scrollbar-thumb {
|
|
background: var(--thumb);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.version {
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 2px solid var(--back) !important;
|
|
}
|
|
|
|
/* HEADER */
|
|
|
|
.header-row {
|
|
width: 100%;
|
|
height: 50px;
|
|
background: var(--prim);
|
|
position: fixed;
|
|
z-index: 4;
|
|
box-shadow: 0px 0px 7px 0px var(--shad);
|
|
padding: 0 7px;
|
|
box-sizing: border-box;
|
|
}
|
|
body.connection-error .header-row {
|
|
background: var(--err);
|
|
}
|
|
|
|
.header {
|
|
max-width: var(--ui_width);
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0 auto;
|
|
|
|
user-select: none;
|
|
color: white;
|
|
font-size: 21px;
|
|
font-weight: bold;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.header-back {
|
|
cursor: pointer;
|
|
font-size: 22px !important;
|
|
width: 12px;
|
|
display: block;
|
|
}
|
|
.header-back:hover {
|
|
filter: brightness(0.9);
|
|
}
|
|
.header-back:active {
|
|
filter: brightness(0.8);
|
|
}
|
|
body[data-screen=main] .header-back {
|
|
display: none;
|
|
}
|
|
|
|
.header-title {
|
|
cursor: pointer;
|
|
}
|
|
body[data-screen=main] .header-title {
|
|
cursor: unset;
|
|
}
|
|
|
|
.header-connection {
|
|
align-self: stretch;
|
|
padding-top: 8px;
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
display: none;
|
|
margin-left: -5px;
|
|
}
|
|
body[data-screen=ota] .header-connection,
|
|
body[data-screen=dev_config] .header-connection,
|
|
body[data-screen=fsbr_edit] .header-connection,
|
|
body[data-screen=files] .header-connection,
|
|
body[data-screen=info] .header-connection,
|
|
body[data-screen=ui] .header-connection {
|
|
display: block;
|
|
}
|
|
|
|
.header-connection-icon {
|
|
align-self: stretch;
|
|
padding-top: 8px;
|
|
font-size: 12px !important;
|
|
display: none;
|
|
margin-left: -4px;
|
|
}
|
|
body[data-screen=ota] .header-connection-icon,
|
|
body[data-screen=dev_config] .header-connection-icon,
|
|
body[data-screen=fsbr_edit] .header-connection-icon,
|
|
body[data-screen=files] .header-connection-icon,
|
|
body[data-screen=info] .header-connection-icon,
|
|
body[data-screen=ui] .header-connection-icon
|
|
{
|
|
display: none !important;
|
|
}
|
|
|
|
.header-connections {
|
|
flex: 1;
|
|
}
|
|
|
|
.header-icon {
|
|
cursor: pointer;
|
|
width: 27px;
|
|
display: none;
|
|
}
|
|
.header-icon:hover {
|
|
filter: brightness(0.9);
|
|
}
|
|
.header-icon:active {
|
|
filter: brightness(0.8);
|
|
}
|
|
|
|
body[data-screen=ui] .icon_menu,
|
|
body[data-screen=ota] .icon_menu,
|
|
body[data-screen=dev_config] .icon_menu,
|
|
body[data-screen=fsbr_edit] .icon_menu,
|
|
body[data-screen=files] .icon_menu,
|
|
body[data-screen=info] .icon_menu,
|
|
|
|
body[data-screen=main] .icon_refresh,
|
|
body[data-screen=ui] .icon_refresh,
|
|
body[data-screen=info] .icon_refresh,
|
|
body[data-screen=files] .icon_refresh,
|
|
body[data-screen=fsbr_edit] .icon_refresh,
|
|
|
|
body[data-screen=config] .icon_cfg,
|
|
body[data-screen=main] .icon_cfg
|
|
{
|
|
display: block;
|
|
}
|
|
|
|
|
|
|
|
/* MAIN */
|
|
.main {
|
|
margin: auto;
|
|
min-height: 100%;
|
|
background: var(--back);
|
|
}
|
|
|
|
.main_inn {
|
|
padding-top: 65px;
|
|
padding-bottom: 50px;
|
|
margin: 0px 5px;
|
|
}
|
|
|
|
body.show-cli .main_inn {
|
|
padding-bottom: 170px;
|
|
}
|
|
|
|
.cli {
|
|
display: none;
|
|
}
|
|
|
|
body.show-cli .cli {
|
|
display: block;
|
|
}
|
|
|
|
.main_col {
|
|
width: 100%;
|
|
color: var(--font);
|
|
display: none;
|
|
max-width: var(--ui_width);
|
|
margin: auto;
|
|
}
|
|
|
|
/* FOOTER */
|
|
.footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 28px;
|
|
background: var(--tab);
|
|
box-shadow: 0px 1px var(--tab);
|
|
gap: 12px;
|
|
}
|
|
|
|
body[data-screen=main] .footer {
|
|
display: flex;
|
|
}
|
|
|
|
.footer a {
|
|
color: var(--font2);
|
|
text-decoration: none;
|
|
font-size: 15px !important;
|
|
}
|
|
|
|
.footer a:hover {
|
|
color: var(--font);
|
|
}
|
|
|
|
.i_footer {
|
|
font-size: 16px !important;
|
|
padding-right: 0 !important;
|
|
}
|
|
|
|
/* MOZ */
|
|
input[type=number]::-webkit-outer-spin-button,
|
|
input[type=number]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance:textfield;
|
|
}
|
|
|
|
/*@[if_not_target:esp]*/
|
|
/* ====================================================================== */
|
|
/* ================================ PROJ ================================ */
|
|
/* ====================================================================== */
|
|
|
|
body[data-screen=projects] .screen-projects {
|
|
display: block;
|
|
}
|
|
|
|
.proj {
|
|
background: var(--tab);
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 10px 0px #00000020;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 7px;
|
|
margin: 5px auto 10px;
|
|
max-width: 740px;
|
|
}
|
|
|
|
.proj_name {
|
|
display: flex;
|
|
}
|
|
|
|
.proj_name a {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
color: var(--prim);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.proj_name a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.proj_about {
|
|
color: var(--font2);
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* ====================================================================== */
|
|
/* ================================ TEST ================================ */
|
|
/* ====================================================================== */
|
|
|
|
body[data-screen=test] .screen-test {
|
|
display: block;
|
|
}
|
|
|
|
.test_text {
|
|
color: var(--font);
|
|
}
|
|
|
|
/*@/[if_not_target:esp]*/ |