/* * {
box-sizing: border-box;
} */
:root {
color-scheme: light dark;
--colors-hover: lightcyan;
--colors-hover-text: light-dark(#000, #000);
--colors-button-hover: #a0f0a0;
--colors-button-hover-text: light-dark(#000, #000);
--colors-input-focus: color-mix(in srgb, Field, lightcyan);
--colors-header: orange;
--colros-footer: orange;
--colors-tab-select-back: #20b0aa;
--colors-tab-select-color: white;
--colros-popup-Normal-back: green;
--colors-popup-Normal-color: white;
--colors-popup-Warn-back: red;
--colors-popup-Warn-color: white;
--FILTER-RED: invert(16%) sepia(91%) saturate(7486%) hue-rotate(360deg) brightness(111%) contrast(107%);
--FILTER-BLUE: invert(35%) sepia(83%) saturate(7465%) hue-rotate(218deg) brightness(103%) contrast(106%);
--FILTER-GREEN: invert(62%) sepia(80%) saturate(3244%) hue-rotate(80deg) brightness(105%) contrast(77%);
--icon-radio: url('data:image/svg+xml,');
--icon-sibata: url('data:image/svg+xml,');
--icon-pause: url('data:image/svg+xml, ');
--icon-dropdown: url("data:image/svg+xml,");
/*--VS2022ImageLib --*/
/* --icon-OpenA:url('data:image/svg+xml,');
--icon-Open:url('data:image/svg+xml,'); */
--icon-Open:url('data:image/svg+xml,');
--icon-New:url('data:image/svg+xml,');
--icon-Save:url('data:image/svg+xml,');
--icon-Spinner: url('data:image/svg+xml,');
/* --icon-Search:url('data:image/svg+xml,') */
--icon-Search:url('data:image/svg+xml,');
--icon-UnLink:url('data:image/svg+xml,')
}
@media (prefers-color-scheme: dark) {
:root {
/*-- --*/
}
}
/* *{
padding: 0;
margin: 0;
} */
@media (prefers-color-scheme: dark) {
canvas {
filter: invert(1);
}
}
body {
margin: 0;
/* overflow: hidden; */
width: 100dvw;
height: 100dvh;
display: flex;
flex-direction: column;
font-size: max(2.5dvh, 2.5dvw);
/* font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
font-family: 'BIZ UDGothic', system-ui;
/*Pull-to-Refreshを無効に*/
overscroll-behavior-y: none;
overscroll-behavior-y: contain;
}
input,
textarea,
select {
font-family: 'BIZ UGPothic', system-ui;
/* フォントが継承されない要素の*/
}
/* body::before{
content: "";
width: 10em;
height: 10em;
background: var(--icon-Open) no-repeat;
} */
.overlay {
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
z-index: 1000;
background-color: #00000050;
justify-content: center;
align-items: center;
display: flex;
& svg {
vertical-align: middle;
}
/* &.hidden {
display: none;
} */
}
.hidden {
display: none
}
.inline-block {
display: inline-block;
}
.spinner {
background-repeat: no-repeat;
background-image: var(--icon-Spinner);
border: none;
min-width: 100px;
min-height: 100px;
width: 20dvw;
height: 20dvh;
}
/* .scroll-box::-webkit-scrollbar {
background: #000;
} */
.trimtext {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
header {
/* width: 100dvw; */
/* background-color: chartreuse; */
left: 0;
right: 0;
background-color: var(--colors-header);
}
main {
flex: 1;
height: 100%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
/* overflow-y: scroll;
overflow-x: hidden; */
}
/* footer{
background-color: var(--colros-footer);
font-size: 1.1em;
& .dock{
justify-content: space-between;
width: 100dvw;
}
& .buttons{
display: flex;
max-height: 15dvh;
& >.contentcenter{
height: 100%;
display: flex;
align-items: center;
}
& label{
display: inline-block;
}
& .footer-center{
width: calc(100dvw - 4em );
display: flex;
}
& .pointName{
width: 100%;
left: 0;
display: inline-block;
}
& .pointIcon{
font-size: 1em;
border: 1px solid transparent;
margin-right: -7px;
}
& .toggleShow{
display: inline;
}
& .pointIcon:has(:checked){
border: 1px solid gray;
background-color: $0000003F;
}
& .toggleShow+.toggleLabel{
display: none;
}
& .toggleShow:has(:checked)+ .toggleLabel{
display: inline;
}
.fitHeight{
height: 100%;
margin: 0;
display: block;
}
& button{
border-radius:2px;
border: 1px solid black;
align-content: center;
text-align: center;
font-size: inherit;
}
& button.wide{
border-radius:0px !important;
padding-left: 3dvw;
padding-right: 3dvw;
}
& button.movePoint{
min-width: 2em;
}
& button.movePoint:disabled{
opacity: 0.2;
}
}
} */
footer {
background-color: var(--colros-footer);
margin-top: auto;
& .toolbar-container {
display: flex;
justify-content: center;
}
& .toolbar {
display: none;
visibility: collapse;
}
& .footer-place {
display: block;
& .first {
float: left;
}
& .end {
float: right;
}
}
.movePoint {
min-width: 5rem;
}
}
footer.footer-main {
@media (orientation: landscape) and (width >=200dvh) {
display: inline-grid;
grid-template-columns: 1fr 1fr;
&>* {
max-width: 49dvw;
}
}
}
textarea {
font: inherit;
padding: 0em 0.2em;
}
/* ********************************************************************* */
fieldset {
border: 1px solid #AAA;
border-radius: 5px;
background-color: color-mix(in srgb, Canvas, #FFFFC04F);
}
/* ********************************************************************* */
.wrappanel {
display: flex;
flex-wrap: wrap;
gap: 2px;
}
.wrappanel>* {
background-color: palegoldenrod;
width: 300px;
}
.template {
display: none;
}
input {
font-size: inherit;
box-sizing: border-box;
}
.btn,
button {
display: inline-block;
border: 1px solid darkgray;
border-radius: 3pt;
padding: 1px 5px;
/* float: left; */
user-select: none;
cursor: pointer;
font-family: inherit;
/* webview2でリセットされてしまう */
/* & *{
cursor: pointer;
} */
margin: 1px;
/* color: gray; */
/* background-color: lightgray; */
font-size: max(2.5dvh, 2.5dvw);
/* &.enabled {
color: black;
background-color: lightcyan;
} */
& span {
line-height: 1;
}
&:disabled {
opacity: 0.3;
cursor: default;
}
&:hover:not(:disabled) {
transition: background-color 0.2s;
background-color: var(--colors-hover);
color: var(--colors-hover-text);
}
&.hidden {
display: none
}
/* & > label{
display: inline-block;
} */
&.btn-primary {
background-color: #007bff;
color: white;
}
&.btn-select {
background-color: #e0d5fc;
color: black;
}
&.btn-success {
background-color: #0c7926;
color: white;
}
}
/* header nav{
display: flex;
flex-wrap: wrap;
} */
nav.tabHeaderPlace {
/* display: flex;
flex-direction: row;
flex-wrap: wrap; */
/* position: sticky;
top: 0; */
order: 0;
z-index: 10;
top: 0;
max-width: calc(100% - 0.2em);
box-sizing: border-box;
display: flex;
flex-direction: row;
align-items: center;
border: 0pt;
border-bottom: 2px solid var(--colors-tab-select-back);
height: calc(1.5em + 2px);
}
.tabPanel {
display: block;
flex-wrap: wrap;
height: calc(100% - 1.5em - 2px);
overflow-y: scroll;
overflow-x: hidden;
/* & .tabHeaderPlace {
display: block;
position: fixed;
height: calc(1.5em + 0.1em);
min-height: 1em;
width: 100%;
border: 0em solid green;
border-bottom-width: 0.2em;
border-bottom-color: var(--colors-tab-select-back);
margin: -0.05em;
z-index: 1;
background-color: #EEE;
background-color: white;
} */
padding-left: 5px;
padding-right: 5px;
& .tabContent {
width: 100%;
padding: 0px;
display: none;
/* visibility: collapse; */
box-sizing: border-box;
overflow: hidden;
position: relative;
}
/* & label:has(input.tabInput[type="radio"])+.tabContent {
display: none;
} */
/* & label:has(input.tabInput[type="radio"]:checked)+.tabContent {
display: block;
} */
& .tabInput[type="radio"] {
display: none;
}
& .tabInput[type="radio"]:checked+.tabContent {
display: block;
}
}
@media (orientation: landscape) and (width >=200dvh) {
/* body{
display: flex;
flex-direction: row;
} */
nav.tabHeaderPlace {
/* position: sticky;
top:0;
left: 0; */
float: left;
margin-right: 5px;
display: flex;
flex-direction: column;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
border: none;
border-right: 3px solid var(--colors-tab-select-back) !important;
}
.tabPanel {
height: 100%;
}
.tabItem {
min-width: 4em !important;
border: none !important;
box-sizing: border-box;
transform: none !important;
margin: 0 !important;
}
.tabItem.end {
margin-left: initial;
}
}
@media (orientation: landscape) and (height < 600px) {
.dataValue {
font-size: 1.5rem !important;
}
}
.tabItem {
display: block;
/* position: sticky;
top: 0px; */
min-width: 15dvw;
max-width: 33dvw;
text-align: center;
box-sizing: border-box;
margin: 0pt;
order: -2;
/*background-color: #FFF;*/
border: 0.1em solid #CCC;
border-bottom: 0;
border-radius: 0em;
height: 1.5em;
z-index: 100;
transform: translate(0.1em, 0);
margin-left: -0.1em;
cursor: pointer;
& input.tabInput[type="radio"] {
display: none;
}
&.end {
margin-left: auto;
}
&:hover {
background-color: var(--colors-button-hover);
color: var(--colors-button-hover-text);
}
&:has(input.tabInput[type="radio"]:checked) {
color: var(--colors-tab-select-color);
background-color: var(--colors-tab-select-back);
text-decoration: underline;
}
}
body:has(#selFiles:checked) {
& #filesSection,
#toolReport {
display: initial;
visibility: initial;
}
}
body:has(#selReport:checked) {
& #reportSection,
#toolReport {
display: initial;
visibility: initial;
}
}
body:has(#selPoint:checked) {
& #pointSection,
#toolPoint {
display: initial;
visibility: initial;
}
}
body:has(#selMeasure:checked) {
& #measureSection,
#toolMeasure {
display: initial;
visibility: initial;
}
}
body:has(#selDebug:checked) {
& #debugSection {
display: initial;
visibility: initial;
}
}
body:has(#selSetting:checked) {
& #settingSection,
#toolSetting {
display: initial;
visibility: initial;
}
}
body:has(#selDevSetting:checked) {
& #devSettingSection,
#toolSetting {
display: initial;
visibility: initial;
}
}
.tabContainer:has(input.tabInput.tab0:checked) {
& .tabContent.tab0 {
display: initial;
visibility: initial;
}
}
.tabContainer:has(input.tabInput.tab1:checked) {
& .tabContent.tab1 {
display: initial;
visibility: initial;
}
}
.tabContainer:has(input.tabInput.tab2:checked) {
& .tabContent.tab2 {
display: initial;
visibility: initial;
}
}
.tabContainer:has(input.tabInput.tab3:checked) {
& .tabContent.tab3 {
display: initial;
visibility: initial;
}
}
.tabContainer:has(input.tabInput.tab4:checked) {
& .tabContent.tab4 {
display: initial;
visibility: initial;
}
}
.tabContainer:has(input.tabInput.tab5:checked) {
& .tabContent.tab5 {
display: initial;
visibility: initial;
}
}
.tabContainer:has(input.tabInput.tab6:checked) {
& .tabContent.tab6 {
display: initial;
visibility: initial;
}
}
.tabContainer:has(input.tabInput.tab7:checked) {
& .tabContent.tab7 {
display: initial;
visibility: initial;
}
}
.tabContainer:has(input.tabInput.tab8:checked) {
& .tabContent.tab8 {
display: initial;
visibility: initial;
}
}
.tabContainer:has(input.tabInput.tab9:checked) {
& .tabContent.tab9 {
display: initial;
visibility: initial;
}
}
table {
border-collapse: collapse;
}
table.wrap {
display: block;
& tbody {
display: flex;
flex-wrap: wrap;
gap: 2px;
column-gap: 10px;
font-weight: bold;
font-size: min(9dvw, max(4dvw, 4dvh));
}
& tbody>* {
width: 10em;
}
& tbody td:nth-of-type(1) {
text-align: right;
width: 6em;
white-space: nowrap;
}
& tbody td:nth-of-type(2) {
text-align: right;
width: 4em;
}
}
tr {
border-bottom: 1px lightgray solid;
}
.label.right {
text-align: right;
}
.value.right {
text-align: right;
}
.measureTable {
/* float: unset; */
border-collapse: collapse;
/* & td:nth-of-type(1) {
text-align: right;
} */
/* & td:nth-of-type(2) {
text-align: right;
min-width: 80px;
} */
& td.label {
text-align: right;
}
& td.value {
text-align: right;
min-width: 90px;
}
}
.dataValue:not(.enabled) {
/* color: lightgray;
opacity: 0.3; */
display: none;
}
.dataValue.allowhide:not(.enabled) {
visibility: collapse;
}
.dataValue.enabled {
color: inherit;
}
.dataValue.hold .value,
#measureDateTime.hold {
text-decoration: underline;
/* text-decoration-color: green; */
text-underline-offset: 0.2em;
}
.number.measureTable .dataValue.fail .value {
color: red !important;
&::before {
font-size: 80%;
content: "⚠";
color: red;
}
}
.graph.measureTable .dataValue.fail .label {
color: red !important;
&::before {
font-size: 80%;
content: "⚠";
color: red;
}
}
/* table tr:nth-child(3n+2) {11
background-color: #FFF0F0;
}
table tr:nth-child(3n+1) {
background-color: #F0FFF0;
}
table tr:nth-child(3n) {
background-color: #FFFFF0;
} */
input[type='file'] {
display: none;
}
input[type='text'] {
font-size: max(2.5dvh, 2.5dvw);
}
input[type='text']:read-only {
/* border: initial; */
border-color: transparent;
background: transparent;
}
input[type='text']:focus,
input[type='number']:focus,
textarea:focus {
background-color: var(--colors-input-focus);
}
input[type='text']:not([readonly]):hover,
input[type='number']:not([readonly]):hover,
textarea:not([readonly]):hover {
background-color: var(--colors-hover);
color: var(--colors-hover-text);
}
.numberPlace {
display: flex;
flex-direction: row;
align-items: stretch;
/* background-color: #a0f0a0; */
& .spin-minus,
.spin-plus,
.spin-clear {
display: none;
/* display: flex; */
justify-content: center;
align-items: center;
/* all: none; */
border: 1px solid darkgray;
margin: 0;
width: 2em;
font-weight: bold;
color: black;
background-color: #DDD;
& :hover {
background-color: var(--colors-hover);
pointer-events: all;
}
}
& .spin-minus {
order: -1;
&::before {
position: relative;
width: 1.1em;
height: 1.1em;
content: "-";
}
}
& .spin-plus {
order: +1;
&::before {
position: relative;
width: 1.1em;
height: 1.1em;
content: "+";
}
}
& .spin-clear {
order: -2;
margin-right: 1em;
&::before {
position: relative;
width: 1.1em;
height: 1.1em;
content: "×";
}
}
& input {
text-align: right;
width: calc(100% - 1em);
padding: 0em 0.3em 0px 0em;
}
& input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
.numberPlace.hideClear)>.spin-clear {
visibility: hidden;
}
.numberPlace:focus-within {
position: relative;
& .spin-minus,
.spin-plus,
.spin-clear {
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
& .spin-minus {
left: -2em;
}
& .spin-plus {
left: calc(100% - 1em)
}
& .spin-clear {
left: -5em;
}
}
.inputContainer {
/* z-index: 1; */
/* container-type: inline-size; */
display: block;
div.dialogButton+input {
padding-right: 1.7em;
/* background-color: aqua; */
}
/* &.dialogButton {
position: absolute;
font-size: 0.8em;
padding: 0em 0.3em;
right: 0px;
top: 2px;
cursor: default;
border: 1px solid transparent;
&:hover {
background-color: var(--colors-hover);
}
} */
&>.combobox {
width: 100%;
}
}
.listtable {
margin: 2px 2px;
margin-left: 2px;
padding-right: 5px;
--label-width: max(13dvh, 13dvw);
/* --scrollbar-width: 10px; */
& .reportValue {
padding: 1px 0px;
border-bottom: 1px solid #CCCCCC;
&:nth-of-type(2n) {
width: auto;
background-color: #FFFFAF20;
}
&:nth-of-type(2n+1) {
background-color: #FFAFFF20;
}
}
& .reportValue input[type="number"] {
border: 1px solid transparent;
text-align: left;
}
/* container-type: inline-size; */
& .labeledvalue {
display: grid;
grid-template-columns: max(13dvh, 13dvw);
margin: 2px;
/*var(--label-width);*/
& .label {
grid-column: 1;
text-align: right;
margin-right: 5px;
white-space: nowrap;
display: flex;
align-items: center;
}
& .value {
grid-column: 2;
margin-right: 0.5em;
/* & input[type="text"] {
width: 100%;
} */
& textarea {
width: calc(100% - 5px);
}
}
&.block {
display: block;
& .value {
margin-right: 5px;
height: 5em
}
& textarea {
height: 100%;
}
}
}
/* @containerはどうも想定している挙動にするのが難しすぎてダメ */
@media (width < max(40dvh, 40dvw)) {
& .labeledvalue {
display: block;
& .label {
color: green;
font-size: 0.66em;
text-align: left;
}
}
}
& #reportTableBody.noData .inputContainer {
display: none;
}
}
.filesTable {
& thead {
& tr.noData {
display: none;
}
& tr.hasData {
display: table-row;
}
}
&.noData thead {
& tr.hasData {
display: none;
}
& tr.noData {
display: table-row;
color: red;
}
}
& tbody tr:has(input:checked) {
background-color: var(--colors-hover);
color: var(--colors-hover-text);
}
& th,
td {
padding: 0.5em 1px;
}
& td {
border: 1px solid rgba(128, 128, 128, 0.2);
}
& td:nth-child(1) {
border-right: 1px solid transparent;
}
}
:has(> .filesTable) .nodatalabel {
margin: 10pt;
color: black;
visibility: initial;
}
:has(> .filesTable.noData) .nodatalabel {
visibility: visible;
}
.reportValue .focusdropdown {
align-content: center;
display: none;
}
.reportValue:focus-within .focusdropdown {
display: flex;
justify-content: center;
}
dialog {
padding: 0px;
background-color: color-mix(in srgb, Canvas, whitesmoke);
max-width: 90%;
min-width: 150px;
& .dialogTitleBar {
min-height: 1.5em;
display: flex;
align-items: center;
color: white;
background-color: blue;
& .dialogButton {
margin-left: auto;
/* position: absolute;
right: 0px;
top: 0px; */
}
}
&.error .dialogTitleBar {
background-color: red;
}
&.canDragMove .dialogTitleBar {
cursor: move;
}
& .dialogContent {
padding: 2px;
& label {
/* width: 50%; */
text-wrap: wrap;
}
}
.labeledValue {
margin: 5px 2px 5px 10px;
}
}
datalist option {
font-size: 5em;
}
input[type="number"] {
font-size: inherit;
text-align: right;
/* input[type="number"]::after {
border: 1px solid black;
content: "+";
} */
}
.warning {
color: red;
}
header>div {
display: flex;
}
@keyframes blinkRadio {
0% {
opacity: 0.3;
filter: var(--FILTER-RED);
}
50% {
opacity: 1;
filter: var(--FILTER-GREEN);
}
100% {
opacity: 1;
filter: var(--FILTER-GREEN);
}
}
.icon {
width: 1.0em;
height: 1.0em;
align-self: center;
vertical-align: middle;
display: inline;
background-repeat: no-repeat;
&.open {
display: inline-block;
background-image: var(--icon-Open);
}
&.new {
display: inline-block;
background-image: var(--icon-New);
}
&.save {
display: inline-block;
background-image: var(--icon-Save);
}
&.search {
display: inline-block;
background-image: var(--icon-Search);
size: 1em 1em;
}
&.unlink {
display: inline-block;
background-image: var(--icon-UnLink);
size: 1em 1em;
}
}
@media (prefers-color-scheme: dark) {
.icon.new,
.icon.save,
.icon.unlink {
filter: invert(1);
}
}
header .icon {
width: 1.0em;
height: 1.0em;
border: 0.1em solid transparent;
border-radius: 0.5em;
align-self: center;
/* & svg {
filter: var(--FILTER-BLUE);
} */
&:not(.enabled) {
/* fill: #005AFF0F; */
/* opacity: 0.1; */
}
/* &.enabled.try {
filter: var(--FILTER-RED);
} */
&.icoRadio {
background: var(--icon-radio);
background-repeat: no-repeat;
background-position: center;
width: 1.2em;
height: 1.2em;
margin: 0px 2px 0px 2px;
}
&.icoRadio.try {
filter: var(--FILTER-RED);
}
&.icoRadio.connected {
filter: var(--FILTER-GREEN);
animation: blinkRadio 1s infinite;
}
&.icoSibata {
background: var(--icon-sibata);
background-repeat: no-repeat;
background-position: center;
}
}
#settingSection fieldset {
& input {
width: 100%;
}
& label {
display: inline-block;
}
& .label {
margin-right: 0.3em;
}
& .labeledValue {
margin-bottom: 0.1em;
}
& .labeledValue:has(input[type='checkbox']) {
display: flex;
& label {
margin-left: 0.3em;
order: 10;
}
}
& input[type="number"] {
width: 6em;
}
& .inputContainer {
display: inline-block;
}
}
.saveButtonContainer {
display: flex;
justify-content: flex-end;
margin: 0;
padding: 0;
& button {
order: 100;
}
}
table.pointTable {
display: block;
width: 90vw;
/* max-height: 80vh; */
font-size: 1rem;
/* & thead{
position: sticky;
top: 0;
left: 0;
background-color: white;
} */
& th,
td {
display: inline-block;
width: 5em;
margin: 1px 1px;
white-space: nowrap;
overflow: hidden;
border: 1px solid gray;
height: 1.1em;
}
& th {
border: 1px solid lightgray;
}
& td.fail {
color: red;
&::before {
content: "⚠ ";
line-height: 1;
}
}
& td[data-itemtype='DateTime'].otherDate {
border: 1px solid red;
&::before {
content: "📅 ";
line-height: 1;
}
}
& tbody td:not(.groupRow) {
text-align: right;
}
/* & tr.groupRow>td::after{
content: "AAA"attr(data-templatetype);
} */
& tr.not-yet td {
background-color: #EEE;
color: red;
}
/* & tr.not-yet td[data-itemtype='DateTime']{
&::before {
content: "未測定";
}
} */
& tr.cancel {
background-color: color-mix(in srgb, Canvas, #FFF0FF);
& * {
text-decoration: line-through;
/* text-decoration-color:red; */
/* text-decoration-style: double; */
text-decoration-skip-ink: none;
text-decoration-thickness: 0.1em;
text-decoration-style: double;
}
}
& tr.groupRow td {
width: 95vw;
border-color: transparent;
text-align: initial;
font-weight: bold;
}
& tr.groupRow {
background-color: color-mix(in srgb, Canvas, wheat);
}
& tr.groupRow:has(input[type="radio"]:checked) {
background-color: color-mix(in srgb, Canvas, orange);
}
& tr:not(.groupRow, .cancel):nth-child(even) {
background-color: color-mix(in srgb, Canvas, #FFFFE04F);
}
& tr.isEditing {
background-color: greenyellow !important;
color: black;
}
& tbody tr:hover,
tbody tr:hover td {
background-color: var(--colors-hover) !important;
color: var(--colors-hover-text) !important;
}
/* & tr:not(:has(.groupRow)){
} */
/* & tr {
display: inline-block;
border: 1px solid ;
width: 100px;
} */
/* & th {
display: inline-block;
border: 1px solid red;
width: 100px;
}
& td {
display: inline;
text-align: right;
border: 1px solid;
width: 100px;
} */
& label:has(input[type="radio"]:checked) {
text-decoration: underline;
text-underline-offset: 3px;
}
}
.rowDialog {
min-height: 50vh;
min-width: 200px;
& .inputBlock,
.valueBlock {
margin-left: 40px;
}
& .numberPlace {
/* width: 5em; */
/* margin-left: 5em; */
}
& .labeledValue:has(input[type='number']) {
display: flex !important;
}
}
#settingSection {
& textarea {
height: 5em;
width: 100%;
}
}
#PWAInstallButton {
font-size: 1vh;
}
.version {
font-size: initial;
font-size: 0.7em;
}
.toggleSwitch {
display: flex;
align-items: center;
cursor: pointer;
& input[type="checkbox"] {
display: none;
}
& .toggleSlider {
margin: 2px;
background-color: lightgrey;
border: 2px solid darkgray;
border-radius: 1em;
width: 2.5em;
height: 1.2em;
min-width: 2.5em;
}
&:has(:checked) .toggleSlider {
background-color: #4fd870;
border-color: #4fd870;
}
& .toggleSlider::before {
content: "";
position: absolute;
margin-top: 0.1em;
margin-left: 0.1em;
width: 1em;
height: 1em;
border-radius: 100%;
background: #FFFFFF;
transition: 0.2s;
}
&:has(:checked)>.toggleSlider {
&::before {
translate: 1.3em 0em;
}
}
& *.toggleLabel {
user-select: none;
/* visibility:collapse; */
}
& .toggleLabel.check {
display: none;
/* visibility:collapse; */
}
& .toggleLabel.uncheck {
display: initial;
}
&:has(:checked) .toggleLabel.check {
display: initial;
}
&:has(:checked) .toggleLabel.uncheck {
display: none;
/* visibility:collapse; */
}
}
.btn.toggle {
/* background-color: #006600; */
/* color: white; */
/* border-width: 1px; */
/* border-color: black; */
/* border-radius: 10%; */
/* padding: 0px; */
/* user-select :none; */
& input[type="checkbox"] {
display: none;
}
& label {
display: inline-flex;
cursor: pointer;
}
& label::before {
content: ' ';
background-position: center;
filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(244deg) brightness(113%) contrast(100%);
}
&:has(:checked) {
border: 1px solid red;
}
&:has(:checked) label {
color: red;
&::before {
filter: invert(54%) sepia(86%) saturate(6733%) hue-rotate(356deg) brightness(95%) contrast(120%);
}
}
&:has(:disabled) {
opacity: 0.3;
}
&:hover:not(:disabled) {
color: black;
background-color: var(--colors-hover);
transition: 0s;
}
}
.btn.toggle.hold label::before {
background: var(--icon-pause) no-repeat;
background-size: 0.8em 0.8em;
background-position: center;
}
.btn.toggle.hold label::after {
content: attr(data-label);
}
/* .combobox2:read-only select{
opacity: 0.2;
color: red;
} */
.combobox {
display: block;
position: relative;
border: 1px solid grey;
/* width:100%; */
height: calc(1em + 2px);
/* font-size: max(2.5dvh, 2.5dvw); */
font-size: inherit;
margin: 1px;
& select,
.combobox-select {
position: absolute;
top: 0px;
left: 0px;
border: none;
width: 100% !important;
margin: 0;
height: calc(1em + 2px) !important;
/* font-size: max(2.5dvh, 2.5dvw); */
font-size: inherit;
cursor: pointer;
/* &:not(:has(option)){
pointer-events: none;
} */
appearance: none;
background: ButtonFace;
background-repeat: no-repeat;
background-position: right 0.3em center;
background-image: var(--icon-dropdown);
}
& select:focus {
outline: none;
}
& select:has(+ input:read-only) {
display: none;
}
& ::placeholder {
color: light-dark(#0000003F, #FFFFFF3F);
}
& :focus-within::placeholder {
color: transparent;
}
& input[type='text'] {
position: absolute;
top: 0px;
left: 0px;
width: calc(100% - 2em);
height: calc(1em + 2px);
padding: 1px;
border: none;
font-size: inherit;
/* font-size: max(2.5dvh, 2.5dvw); */
background-color: Field;
color: FieldText;
&:read-only {
width: 100%;
&::placeholder {
color: transparent
}
}
&:focus {
outline: none;
background-color: var(--colors-input-focus) !important;
}
&:hover {
background-color: var(--colors-hover) !important;
color: var(--colors-hover-text);
}
}
}
.progressBarX {
height: 0px;
width: 99.8%;
margin: 0px;
top: 1.8em;
z-index: 1000;
background-color: red;
border: lightgray 1px solid;
--border-radius: 0px;
box-sizing: border-box;
}
.progressBar {
display: none;
/* height: 0px; */
/* position: sticky; */
width: 99.8%;
margin: 0px;
/* bottom: 0px; */
top: 1.8em;
z-index: 1000;
background-color: red;
height: 1dvh;
min-height: 8px;
/* visibility: collapse; */
box-sizing: border-box;
border: lightgray 1px solid;
border-radius: 0px;
&.animating {
display: flex;
visibility: initial;
}
& .bar {
width: 0%;
height: 100%;
border-radius: 0px;
background-color: green;
}
& .label {
color: white;
text-align: center;
}
& .bar::before {
position: absolute;
top: 0;
left: 0;
/* content: attr(class); */
width: 100%;
height: 100%;
font-size: 1dvh;
color: white;
}
}
.counterLabel {
white-space: pre;
text-wrap: wrap;
min-width: 4em;
font-size: 0.7em;
}
/* --------------------- */
#debugSection {
& ul {
list-style-type: square;
border: 1px solid gray;
&::before {
content: " " attr(data-title) " ";
white-space: pre;
position: relative;
top: -0.8em;
left: 0px;
background: Canvas;
}
}
& li.end {
text-decoration: line-through;
opacity: 0.2;
list-style-type: circle;
}
& li.high {
color: red;
}
& li.low {
color: lightskyblue;
}
}
.tabContent:not(.nofile) {
& .nofile {
display: none;
}
}
.tabContent.nofile {
& .nofile {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
z-index: 1000;
background-color: #00000020;
justify-content: center;
align-items: center;
display: flex;
margin: 0px;
color: red;
font-size: 2em;
}
& .listtable {
opacity: 0.2;
}
}
[popover] {
inset: 0px 0px 0px 0px;
margin: 0px;
/* width: fit-content; */
color: var(--colors-popup-Normal-color);
background-color: var(--colros-popup-Normal-back);
font-size: 1.5em;
display: none;
}
.pop-comment.pop-loc-top[popover] {
/* position-area: top span-all; */
position-area: block-start span-all;
padding: 10px;
padding-bottom: calc(0.5em + 10px);
border: 0px;
--margin-bottom: calc(100% - 0.5em);
clip-path: polygon(0% 0%,
0% var(--margin-bottom),
30% var(--margin-bottom),
50% 100%,
45% var(--margin-bottom),
100% var(--margin-bottom),
100% 0%)
}
.pop-comment.pop-loc-bottom[popover] {
position-area: bottom;
padding: 10px;
padding-top: calc(0.5em + 10px);
border: 0px;
--margin-top: calc(0.5em);
clip-path: polygon(0% 100%,
0% var(--margin-top),
30% var(--margin-top),
50% 0%,
45% var(--margin-top),
100% var(--margin-top),
100% 100%)
}
:popover-open::backdrop {
backdrop-filter: grayscale(0%) contrast(100%);
}
:popover-open {
display: initial;
}
/* チェック可能な項目がある行 */
.linkableRow- a {
color: LinkText;
}
/* チェックされた項目がある行に含まれるaタグをリンクが無いように見せる */
.linkableRow-:has(:checked) {
& a {
text-decoration: none;
color: inherit;
cursor: default;
}
}
/* ============= */
#reportTableBody {
& input[type='text'],
textarea {
width: 100%;
}
}
aside{
background: light-dark(#FFF, #000);
}
aside.right {
display: flex;
flex-direction: column;
/*Pull-to-Refreshを無効に*/
overscroll-behavior-y: none;
overscroll-behavior-y: contain;
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: min(100vw, 800px);
box-shadow: -4px 0 15px rgba(0, 0, 0, 0.5);
& *.top-right {
display: block;
text-align: right;
color: black;
}
& header,
& footer {
background: #ffce46;
color: light-dark(#000, #000);
}
}
aside main {
overflow-y: auto;
}
.list-group {
display: flex;
flex-direction: column;
}
.list-group-item {
border: 1px solid rgba(0, 0, 0, 0.1);
margin: 1px;
text-align: left;
}