tweaking css, move device/profile to left menu

This commit is contained in:
Stewart Allen 2026-02-23 00:46:00 -05:00
commit 4a343c7e5a
7 changed files with 64 additions and 136 deletions

View file

@ -36,42 +36,6 @@
font-family: 'Russo One';
src: url('../moto/russo-one.ttf');
}
@media only screen and (max-width : 1000px) {
.top-menu > span > label {
display: none;
}
}
@media only screen and (max-width : 1200px) {
body {
font-size: smaller;
}
}
@media only screen and (max-width : 900px) {
body {
font-size: x-small;
}
}
@media only screen and (max-height : 1024px) {
body {
font-size: smaller;
}
}
@media only screen and (max-height : 750px) {
.lt-menu, .pop-lcol {
font-size: 16px !important;
}
.lt-menu svg {
font-size: 30px !important;
}
.pop-lcol svg {
font-size: 20px !important;
}
.mod-x {
position: absolute;
font-size: 30px;
top: 8px;
}
}
html, body {
position: relative;
@ -231,6 +195,7 @@ details[open] summary::after {
/* container for entire page / app */
#app {
position: fixed;
font-size: 14px;
font-weight: normal;
font-family: sans-serif;
top: 0;
@ -248,19 +213,7 @@ details[open] summary::after {
background-color: rgba(255,255,255,0.7);
}
:root[data-theme="dark"] #mesh-info label,
:root[data-theme="dark"] #mode-info label
{
color: #fff;
border-color: #888;
background-color: var(--blue-0);
}
:root[data-theme="dark"] #mesh-info span,
:root[data-theme="dark"] #mode-info span
{
color: #fff;
border-color: #888;
background-color: #333;
}
:root[data-theme="dark"] #oplist div .del {
color: #aaa;
}
@ -310,9 +263,6 @@ details[open] summary::after {
background-color: var(--blue-1);
}
:root[data-theme="dark"] .t-body,
:root[data-theme="dark"] .set2-group {
border: 1px solid #444 !important;
}
:root[data-theme="dark"] .set2-group .var-row:hover,
:root[data-theme="dark"] .var-row:hover
{
@ -377,12 +327,6 @@ details[open] summary::after {
:root[data-theme="dark"] #rnfo label {
color: #ada;
}
:root[data-theme="dark"] #slider-center {
/* background-color: rgba(255,255,255,0.15); */
}
#slider-center {
/* background-color: rgba(255,255,255,0.5); */
}
:root[data-theme="dark"] #slider-hold .handle {
background-color: #999;
}
@ -836,56 +780,6 @@ details[open] summary::after {
min-width: 100px;
background-color: var(--bg-gray-lt);
}
#mode-info {
white-space: nowrap;
font-size: smaller;
font-family: sans-serif;
align-items: stretch;
justify-content: center;
padding: 2px 0 2px 0;
display: grid !important;
margin-right: 0 !important;
margin-bottom: 2px !important;
grid-template-columns: auto 1fr;
row-gap: 1px;
}
#mode-info > div {
display: contents;
}
#mode-info label, #mesh-info label {
font-size: smaller;
font-weight: bold;
align-self: right;
margin: 0 0 0 5px;
padding: 3px 5px 3px 5px;
color: var(--fg-gray);
background-color: var(--blue-4);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top: 1px solid var(--blue-3);
border-left: 1px solid var(--blue-3);
border-right: 0;
border-bottom: 1px solid var(--blue-3);
}
#mode-info span, #mesh-info span {
font-size: smaller;
margin: 0 5px 0 0;
padding: 3px 5px 3px 5px;
color: var(--fg-gray);
background-color: white;
border-top-left-radius: 0;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 5px;
border-top: 1px solid var(--blue-3);
border-left: 0;
border-right: 1px solid var(--blue-3);
border-bottom: 1px solid var(--blue-3);
}
#mode-device, #mode-profile {
max-width: 100px;
overflow: hidden;
}
#doit {
display: none;
@ -1599,9 +1493,6 @@ details[open] summary::after {
border-top: 1px solid black;
overflow: hidden;
}
#modal button, #modal select {
/* color: black !important; */
}
#modal > div {
position: absolute;
transform: translateX(50%) translateY(-50%);
@ -2321,6 +2212,7 @@ details[open] summary::after {
}
.settings {
gap: 3px;
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
@ -2341,12 +2233,9 @@ details[open] summary::after {
background-color: var(--blue-4);
}
.set2-group {
border-radius: 3px;
border: 1px solid #ddd !important;
background-color: #fff;
flex-flow: column;
padding: 4px;
margin: 2px;
padding: 0 0 2px 0;
}
.set2-group .var-row, .var-row {
background: #fff;
@ -2379,12 +2268,11 @@ details[open] summary::after {
background-color: #bbb !important;
}
.set-header {
overflow: hidden;
white-space: nowrap;
border-radius: 2px;
justify-content: left;
background-color: var(--blue-3);
border-left: 3px solid transparent;
border-right: 3px solid var(--main-color-hover);
border-bottom: 0.5px solid var(--main-color-hover);
padding: 4px;
margin: 0 0 4px 0;
@ -2415,7 +2303,7 @@ details[open] summary::after {
}
.settings .ext-buttons {
margin: 0 4px 0 4px;
gap: 3px;
gap: 2px;
}
#layers .var-row {
border-radius: 10px;
@ -2436,7 +2324,14 @@ details[open] summary::after {
#layers button:hover {
background-color: var(--main-color);
}
.tiny.var-row select {
width: 10em;
max-width: 10em;
font-size: smaller;
}
.var-row {
font-size: 13px;
white-space: nowrap;
align-items: center;
gap: 4px;
@ -2461,6 +2356,13 @@ details[open] summary::after {
margin-bottom: 1px;
padding-bottom: 1px;
padding-top: 1px;
border: 0;
border-bottom: 1px solid;
}
.var-row select {
border: 0;
border-bottom: 1px solid;
border-radius: 0;
}
.var-row #tool-name {
max-width: 15ch;
@ -2612,3 +2514,7 @@ details[open] summary::after {
.devel #code-preview-textarea {
height: 100%;
}
.em20 {
max-width: 20em;
}