476 lines
6.8 KiB
CSS
476 lines
6.8 KiB
CSS
html {
|
|
color-scheme: light only;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
/*max-width: 45rem;
|
|
margin: 0 auto;*/
|
|
padding: 15px;
|
|
margin: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.supermesh-indicator {
|
|
border-top-left-radius: 15px;
|
|
background-color: greenyellow;
|
|
border-top: 5px solid green;
|
|
border-left: 5px solid green;
|
|
padding: 15px;
|
|
max-width: 30rem;
|
|
position: fixed;
|
|
right: 0;
|
|
bottom: 0;
|
|
color: black;
|
|
display: none;
|
|
}
|
|
|
|
.supermesh-indicator a {
|
|
color: blue;
|
|
}
|
|
|
|
details.supermesh-indicator summary {
|
|
font-size: unset;
|
|
}
|
|
|
|
.link,
|
|
a {
|
|
color: blue;
|
|
text-decoration: underline;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.link:hover,
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#articleID {
|
|
font-family: monospace;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
.link,
|
|
a {
|
|
color: lightblue;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
.supermesh-indicator,
|
|
.no_print,
|
|
.no_print *,
|
|
.saveico, .delico, .opicon {
|
|
display: none !important;
|
|
}
|
|
main {padding: 0;}
|
|
}
|
|
|
|
button,
|
|
.button {
|
|
display: inline-block;
|
|
padding: 5px 10px;
|
|
background-color: beige;
|
|
border: 2px solid black;
|
|
font-size: 20px;
|
|
margin: 3px;
|
|
text-decoration: none;
|
|
color: black;
|
|
}
|
|
|
|
button:hover,
|
|
.button:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* https://coolors.co/palette/ff0000-ff8700-ffd300-deff0a-a1ff0a-0aff99-0aefff-147df5-580aff-be0aff */
|
|
.rojo {
|
|
background: #ff0000;
|
|
color: white;
|
|
}
|
|
|
|
.btn1 {
|
|
background: #ff0000;
|
|
color: white;
|
|
}
|
|
|
|
.btn2 {
|
|
background: #ff8700;
|
|
color: white;
|
|
}
|
|
|
|
.btn3 {
|
|
background: #ffd300;
|
|
color: black;
|
|
}
|
|
|
|
.btn4 {
|
|
background: #deff0a;
|
|
color: black;
|
|
}
|
|
|
|
.btn5 {
|
|
background: #a1ff0a;
|
|
color: black;
|
|
}
|
|
|
|
.btn6 {
|
|
background: #0aff99;
|
|
color: black;
|
|
}
|
|
|
|
.btn7 {
|
|
background: #0aefff;
|
|
color: black;
|
|
}
|
|
|
|
.btn8 {
|
|
background: #147df5;
|
|
color: white;
|
|
}
|
|
|
|
.nav-disabled {
|
|
background: black !important;
|
|
color: grey !important;
|
|
}
|
|
|
|
.nav-disabled:hover {
|
|
text-decoration: unset !important;
|
|
}
|
|
|
|
input,
|
|
select,
|
|
textarea {
|
|
font-size: 18px;
|
|
padding: 5px;
|
|
width: calc(100% - 11px);
|
|
}
|
|
|
|
input[type="checkbox"]{
|
|
padding: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
select {
|
|
width: 100%;
|
|
}
|
|
|
|
details input,
|
|
details select,
|
|
details textarea {
|
|
font-size: 18px;
|
|
padding: 5px;
|
|
width: calc(100% - 15px);
|
|
}
|
|
|
|
input[type="color"] {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
textarea {
|
|
height: 150px;
|
|
}
|
|
|
|
details summary {
|
|
font-size: 20px;
|
|
}
|
|
|
|
thead tr {
|
|
background-color: black;
|
|
color: white;
|
|
}
|
|
|
|
table {
|
|
display: block;
|
|
line-break: loose;
|
|
width: fit-content;
|
|
min-width: 750px;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
table tr th {
|
|
line-break: auto;
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
table tr td {
|
|
border-bottom: 3px solid black !important;
|
|
padding: 5px;
|
|
}
|
|
|
|
.scase {
|
|
text-transform: lowercase;
|
|
}
|
|
|
|
.scase:first-letter {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
table tr:hover td {
|
|
text-decoration: underline;
|
|
background: rgba(200, 200, 200, 0.5);
|
|
/* color: black; */
|
|
}
|
|
|
|
table tr:hover td.TextBorder {
|
|
background: inherit;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
fieldset {
|
|
max-width: 25rem;
|
|
}
|
|
|
|
.TextBorder {
|
|
color: black;
|
|
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
|
|
1px 1px 0 #fff;
|
|
-webkit-text-stroke: 0.25px #fff;
|
|
}
|
|
|
|
code {
|
|
font-size: x-small;
|
|
color: gray;
|
|
}
|
|
|
|
.activeSCButton {
|
|
border: 7px dashed beige;
|
|
color: beige;
|
|
background: black !important;
|
|
}
|
|
|
|
.btn1.activeSCButton {
|
|
border-color: #ff0000;
|
|
color: #ff0000;
|
|
}
|
|
|
|
.btn2.activeSCButton {
|
|
border-color: #ff8700;
|
|
color: #ff8700;
|
|
}
|
|
|
|
.btn3.activeSCButton {
|
|
border-color: #ffd300;
|
|
color: #ffd300;
|
|
}
|
|
|
|
.btn4.activeSCButton {
|
|
border-color: #deff0a;
|
|
color: #deff0a;
|
|
}
|
|
|
|
.btn5.activeSCButton {
|
|
border-color: #a1ff0a;
|
|
color: #a1ff0a;
|
|
}
|
|
|
|
.btn6.activeSCButton {
|
|
border-color: #0aff99;
|
|
color: #0aff99;
|
|
}
|
|
|
|
.btn7.activeSCButton {
|
|
border-color: #0aefff;
|
|
color: #0aefff;
|
|
}
|
|
|
|
.btn8.activeSCButton {
|
|
border-color: #147df5;
|
|
color: #147df5;
|
|
}
|
|
|
|
hr {
|
|
border-color: black;
|
|
border-style: solid;
|
|
}
|
|
|
|
#snackbar {
|
|
visibility: hidden;
|
|
/* min-width: 250px; */
|
|
background-color: #333;
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 2px;
|
|
padding: 16px;
|
|
position: fixed;
|
|
z-index: 1;
|
|
right: 70px;
|
|
bottom: 25px;
|
|
}
|
|
|
|
#snackbar a {
|
|
color: lightblue;
|
|
}
|
|
|
|
#snackbar.show {
|
|
visibility: visible;
|
|
}
|
|
|
|
.ribbon {
|
|
display: flex;
|
|
background: linear-gradient(to bottom, #d0d8ec, #eef2fa);
|
|
border-bottom: 1px solid #a2a9b9;
|
|
padding: 10px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.ribbon-orb {
|
|
width: 50px !important;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
/* background: url(/icon512_maskable.png); */
|
|
background-size: 50px 50px;
|
|
background-position: center middle;
|
|
border: 1px solid #a2a9b9;
|
|
margin-right: 10px;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.ribbon-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
margin-top: 1px;
|
|
width: calc(100% - 60px);
|
|
}
|
|
|
|
.ribbon-tabs {
|
|
display: flex;
|
|
background: #c8d4eb;
|
|
border: 1px solid #a2a9b9;
|
|
height: 26px;
|
|
align-items: center;
|
|
padding: 0 5px;
|
|
border-radius: 3px 3px 0 0;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.ribbon-tab {
|
|
padding: 4px 9px;
|
|
cursor: pointer;
|
|
border-right: 1px solid #a2a9b9;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.ribbon-tab.active {
|
|
background-color: #eaf0fb;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ribbon-panel {
|
|
display: flex;
|
|
gap: 3px;
|
|
background-color: #c8d4eb;
|
|
border: 1px solid #a2a9b9;
|
|
overflow-x: auto;
|
|
padding: 5px;
|
|
}
|
|
|
|
.ribbon-button {
|
|
width: auto;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
background: none;
|
|
border: none;
|
|
color: black;
|
|
white-space: nowrap;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 1px solid lightskyblue;
|
|
background: white;
|
|
padding: 4px;
|
|
display: inline-block;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.ribbon-button img {
|
|
height: 60px;
|
|
display: block;
|
|
margin: auto;
|
|
}
|
|
|
|
.ribbon-button .label {
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.ribbon-button.orange {
|
|
background-color: orange;
|
|
border-radius: 3px;
|
|
padding: 2px;
|
|
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
|
|
details {
|
|
margin: 0;
|
|
}
|
|
|
|
details[open] .ribbon-panel {
|
|
display: flex;
|
|
}
|
|
|
|
details:not([open]) .ribbon-panel {
|
|
display: none;
|
|
}
|
|
|
|
fieldset legend {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
pre {
|
|
font-size: 15px;
|
|
}
|
|
.picto {
|
|
min-height: 125px;
|
|
width: 100px;
|
|
border: 2.5px solid black;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
background: white;
|
|
margin-bottom: 20px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.picto b {
|
|
padding-top: 40px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.panel-option input {
|
|
display: none;
|
|
}
|
|
.panel-option:has(input:checked) {
|
|
background-color: #ccc;
|
|
outline: 5px solid blue;
|
|
}
|
|
|
|
.saveico {
|
|
border-color: green !important;
|
|
}
|
|
.delico {
|
|
border-color: red !important;
|
|
}
|
|
.opicon {
|
|
border-color: blue !important;
|
|
}
|
|
.saveico img, .delico img, .opicon img {
|
|
height: 52px;
|
|
vertical-align: middle;
|
|
}
|
|
.saveico, .delico, .opicon {
|
|
padding: 2.5px 7.5px;
|
|
background: transparent;
|
|
border-radius: 10px;
|
|
border: 4px solid;
|
|
} |