mirror of
https://gitlab.constantvzw.org/osp/tools.cobbled-paths.git
synced 2024-12-23 04:51:25 +01:00
335 lines
5.3 KiB
CSS
335 lines
5.3 KiB
CSS
:root{
|
|
--bar-h: 3rem;
|
|
|
|
--c-default: black;
|
|
--c-contributed: palegreen;
|
|
--c-jave: mediumpurple;
|
|
|
|
--c-back: whitesmoke;
|
|
}
|
|
.default{
|
|
--c: var(--c-default);
|
|
}
|
|
.contributed{
|
|
--c: var(--c-contributed);
|
|
}
|
|
.jave{
|
|
--c: var(--c-jave);
|
|
}
|
|
|
|
body{
|
|
background-color: var(--c-back);
|
|
font-family: monospace;
|
|
font-size: 0.875rem;
|
|
line-height: 1.45;
|
|
}
|
|
a{
|
|
color: currentColor;
|
|
}
|
|
a:hover{
|
|
font-weight: bold;
|
|
}
|
|
|
|
ul.special{
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
align-items: baseline;
|
|
}
|
|
.special a{
|
|
display: block;
|
|
border: 1px solid black;
|
|
padding: 2rem 3rem;
|
|
border-radius: 2rem;
|
|
text-decoration: none;
|
|
}
|
|
ul.classic{
|
|
list-style: initial;
|
|
padding: 0 1rem;
|
|
}
|
|
|
|
/* BAR
|
|
================================================= */
|
|
|
|
body{
|
|
margin-top: calc(var(--bar-h) * 1);
|
|
}
|
|
body.catalogue,
|
|
body.draw{
|
|
margin-top: calc(var(--bar-h) * 2);
|
|
}
|
|
|
|
nav ul,
|
|
.controls{
|
|
box-sizing: border-box;
|
|
height: var(--bar-h);
|
|
position: fixed;
|
|
width: 100%;
|
|
z-index: 999;
|
|
gap: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
nav ul{
|
|
top: 0;
|
|
background: black;
|
|
color: white;
|
|
}
|
|
.controls{
|
|
top: var(--bar-h);
|
|
background-color: var(--c-back);
|
|
border-bottom: 1px solid black;
|
|
padding: 1rem 2rem;
|
|
}
|
|
nav ul li{
|
|
flex-grow: 1;
|
|
}
|
|
nav ul li:not(:last-child){
|
|
border-right: 1px solid var(--c-back);
|
|
}
|
|
nav ul a{
|
|
padding: 1rem 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* CONTROLS
|
|
================================================= */
|
|
|
|
h1,h2{
|
|
font-weight: bold;
|
|
}
|
|
input, button{
|
|
font-family: monospace;
|
|
}
|
|
strong{
|
|
font-weight: bold;
|
|
}
|
|
|
|
.controls hr{
|
|
display: block !important;
|
|
border: none;
|
|
margin: none;
|
|
margin-left: auto;
|
|
}
|
|
label{
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* BOXES
|
|
================================================= */
|
|
|
|
.box{
|
|
box-sizing: border-box;
|
|
padding: 1rem 2rem;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
|
|
.legend::before{
|
|
content: '';
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 50%;
|
|
background-color: var(--c);
|
|
margin-right: 0.5em;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* CATEGORIES
|
|
================================================= */
|
|
|
|
summary{
|
|
padding: 1rem 2rem;
|
|
background: black;
|
|
color: white;
|
|
border-bottom: whitesmoke solid 1px;
|
|
cursor: pointer;
|
|
position: sticky;
|
|
top: calc(var(--bar-h) * 2);
|
|
|
|
z-index: 99;
|
|
}
|
|
|
|
|
|
|
|
/* one font block */
|
|
|
|
.font{
|
|
display: grid;
|
|
grid-template-columns: repeat(2, calc(50% - 1rem));
|
|
gap: 0.5rem 2rem;
|
|
padding: 0.5rem 2rem 1rem;
|
|
|
|
position: relative;
|
|
}
|
|
.font aside{
|
|
position: absolute;
|
|
bottom: 0.5rem;
|
|
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
aside.right{
|
|
right: 2.5rem;
|
|
}
|
|
aside.left{
|
|
right: calc(50vw + 1.5rem);
|
|
}
|
|
|
|
.font aside button{
|
|
background-color: var(--c-back);
|
|
border: 1px solid black;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.font h2{
|
|
font-size: 0.75rem;
|
|
grid-column: 1 / -1;
|
|
font-weight: normal;
|
|
}
|
|
.f-ascii{
|
|
font-family: monospace;
|
|
font-size: 1rem;
|
|
padding: 1rem;
|
|
background-color: white;
|
|
overflow: auto;
|
|
|
|
line-height: 1;
|
|
|
|
grid-column: 1 / span 1;
|
|
grid-row: 2 / span 1;
|
|
}
|
|
.f-svg{
|
|
padding: 1rem;
|
|
background-color: white;
|
|
overflow: auto;
|
|
|
|
grid-column: 2 / span 1;
|
|
grid-row: 2 / span 1;
|
|
}
|
|
hr{
|
|
border: 0;
|
|
border-top: 1px solid black;
|
|
margin: 1rem 0 1rem;
|
|
}
|
|
.font:first-of-type{
|
|
margin-top: 1rem;
|
|
}
|
|
hr:last-of-type{
|
|
display: none;
|
|
}
|
|
summary + hr{
|
|
display: none;
|
|
}
|
|
svg{
|
|
overflow: visible;
|
|
}
|
|
|
|
/* catalogue colors */
|
|
.font h2::before{
|
|
content: '';
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 50%;
|
|
background-color: var(--c);
|
|
margin-right: 0.5em;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* autofix colors */
|
|
.fix-label{
|
|
border-bottom: solid limegreen 3px;
|
|
}
|
|
.fix{
|
|
outline: 1px solid limegreen;
|
|
}
|
|
span.fix{
|
|
outline: none;
|
|
color: limegreen;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.text-label{
|
|
border-bottom: solid red 3px;
|
|
}
|
|
.svgbob text {
|
|
font-family: monospace !important;
|
|
font-weight: bold !important;
|
|
fill: red !important;
|
|
}
|
|
|
|
/* font info */
|
|
.info-label{
|
|
border-bottom: solid mediumblue 3px;
|
|
}
|
|
|
|
/* body class checkboxes */
|
|
|
|
.font div.fix{
|
|
visibility: hidden;
|
|
}
|
|
body.check-fix .font div.fix{
|
|
visibility: visible;
|
|
}
|
|
.svgbob text{
|
|
visibility: hidden;
|
|
}
|
|
body.check-text .svgbob text{
|
|
visibility: visible;
|
|
}
|
|
/* .fix{
|
|
visibility: hidden;
|
|
}
|
|
body.check-fix .fix{
|
|
visibility: visible;
|
|
} */
|
|
|
|
/* TITLE
|
|
================================================= */
|
|
|
|
.title.font{
|
|
padding: 1rem 2rem;
|
|
}
|
|
.title .f-ascii{
|
|
margin-left: auto;
|
|
padding: 0;
|
|
background: initial;
|
|
}
|
|
.title .f-svg{
|
|
margin-right: auto;
|
|
padding: 0;
|
|
background: initial;
|
|
}
|
|
|
|
|
|
.draw .font{
|
|
height: calc(100vh - var(--bar-h) * 2);
|
|
grid-template-rows: 1fr;
|
|
box-sizing: border-box;
|
|
padding: 1rem 2rem;
|
|
}
|
|
.draw .f-ascii,
|
|
.draw .f-svg{
|
|
height: 100%;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
grid-row: 1 / span 1;
|
|
border: 1px solid black;
|
|
}
|
|
.draw .f-ascii{
|
|
padding: 0;
|
|
}
|
|
.draw .f-svg{
|
|
padding: 0;
|
|
}
|
|
.f-svg iframe{
|
|
border: none !important;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
} |