242 lines
6.1 KiB
CSS
242 lines
6.1 KiB
CSS
svg.freesewing.pattern {
|
|
|
|
/* Don't let the SVG surpass the parent container */
|
|
max-width: 100%;
|
|
|
|
/* Reset */
|
|
path, circle { fill: none; stroke: none; }
|
|
|
|
/* Defaults */
|
|
path,
|
|
circle {
|
|
stroke-opacity: 1;
|
|
stroke-width: calc(var(--pattern-stroke) * var(--pattern-scale));
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke: currentColor;
|
|
}
|
|
|
|
/* Stroke width utility classes */
|
|
.stroke-xs { stroke-width: calc(var(--pattern-stroke-xs) * var(--pattern-scale)); }
|
|
.stroke-sm { stroke-width: calc(var(--pattern-stroke-sm) * var(--pattern-scale)); }
|
|
.stroke-lg { stroke-width: calc(var(--pattern-stroke-lg) * var(--pattern-scale)); }
|
|
.stroke-xl { stroke-width: calc(var(--pattern-stroke-xl) * var(--pattern-scale)); }
|
|
.stroke-2xl { stroke-width: calc(var(--pattern-stroke-2xl) * var(--pattern-scale)); }
|
|
.stroke-3xl { stroke-width: calc(var(--pattern-stroke-3xl) * var(--pattern-scale)); }
|
|
.stroke-4xl { stroke-width: calc(var(--pattern-stroke-4xl) * var(--pattern-scale)); }
|
|
.stroke-5xl { stroke-width: calc(var(--pattern-stroke-5xl) * var(--pattern-scale)); }
|
|
|
|
/* Stroke dasharray utility classes */
|
|
.sa { stroke-dasharray: 1, 3; }
|
|
.help { stroke-dasharray: 15, 5, 2, 5; }
|
|
.dotted { stroke-dasharray: 0.5, 1; }
|
|
.dashed { stroke-dasharray: 2, 2; }
|
|
.lashed { stroke-dasharray: 8, 3; }
|
|
|
|
/* Hidden */
|
|
.hidden { stroke: none !important; fill: none !important; }
|
|
|
|
/* Text */
|
|
text {
|
|
font-size: calc(var(--pattern-text) * var(--pattern-scale));
|
|
text-anchor: start;
|
|
font-weight: normal;
|
|
fill: currentColor;
|
|
dominant-baseline: ideographic;
|
|
}
|
|
.text-xs { font-size: calc(var(--pattern-text-xs) * var(--pattern-scale)); }
|
|
.text-sm { font-size: calc(var(--pattern-text-sm) * var(--pattern-scale)); }
|
|
.text-lg { font-size: calc(var(--pattern-text-lg) * var(--pattern-scale)); }
|
|
.text-xl { font-size: calc(var(--pattern-text-xl) * var(--pattern-scale)); }
|
|
.text-2xl { font-size: calc(var(--pattern-text-2xl) * var(--pattern-scale)); }
|
|
.text-3xl { font-size: calc(var(--pattern-text-3xl) * var(--pattern-scale)); }
|
|
.text-4xl { font-size: calc(var(--pattern-text-4xl) * var(--pattern-scale)); }
|
|
.text-5xl { font-size: calc(var(--pattern-text-5xl) * var(--pattern-scale)); }
|
|
.bold { font-weight: bold; }
|
|
|
|
.center { text-anchor: middle; }
|
|
.right { text-anchor: end; }
|
|
|
|
/* muted page numbers */
|
|
.muted {
|
|
opacity: 0.15;
|
|
}
|
|
/* layout rectangles */
|
|
.layout-rect {
|
|
fill: var(--pattern-canvas);
|
|
fill-opacity: 0.05;
|
|
}
|
|
.layout-rect:hover {
|
|
fill: var(--pattern-lining);
|
|
fill-opacity: 0.15;
|
|
}
|
|
.layout-rect.move:hover {
|
|
cursor: move;
|
|
}
|
|
.layout-rect.rotate:hover {
|
|
cursor: crosshair;
|
|
}
|
|
.svg-layout-button > rect.button {
|
|
fill: var(--pattern-note);
|
|
fill-opacity: 0.3;
|
|
stroke: none;
|
|
}
|
|
.svg-layout-button:hover > rect {
|
|
fill: var(--pattern-lining);
|
|
stroke: none;
|
|
fill-opacity: 1;
|
|
}
|
|
.svg-layout-button:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Developer view */
|
|
g.develop.point {
|
|
circle.center {
|
|
stroke: var(--pattern-contrast);
|
|
stroke-width: calc(var(--pattern-stroke) * var(--pattern-scale) / 2);
|
|
fill: transparent;
|
|
}
|
|
circle.hovertrap {
|
|
fill: var(--pattern-contrast);
|
|
stroke: var(--pattern-contrast);
|
|
stroke-width: calc(var(--pattern-stroke) * var(--pattern-scale) / 2);
|
|
fill-opacity: 0;
|
|
stroke-opacity: 0;
|
|
transform: all 0.5s ease-out;
|
|
}
|
|
circle.hovertrap:hover {
|
|
fill-opacity: 0.2;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
circle.develop.path.cp {
|
|
stroke: none;
|
|
fill: var(--pattern-lining);
|
|
fill-opacity: 0.4;
|
|
}
|
|
path.develop.path.cp {
|
|
stroke: var(--pattern-lining);
|
|
stroke-width: calc(var(--pattern-stroke) * var(--pattern-scale) / 2);
|
|
}
|
|
path.develop.hovertrap {
|
|
stroke: var(--pattern-lining);
|
|
stroke-width: calc(var(--pattern-stroke) * var(--pattern-scale) * 4);
|
|
stroke-opacity: 0;
|
|
}
|
|
path.develop.hovertrap:hover {
|
|
stroke: var(--pattern-contrast);
|
|
stroke-width: calc(var(--pattern-stroke) * var(--pattern-scale) * 4);
|
|
stroke-opacity: 0.2;
|
|
stroke-dasharray: 5 3;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* New style for sampled sizes */
|
|
path.size-3XS,
|
|
path.size-2XS,
|
|
path.size-XS,
|
|
path.size-S,
|
|
path.size-M {
|
|
stroke-width: 0.5;
|
|
stroke-dasharray: 0.25 0.75;
|
|
}
|
|
path.made-to-measure,
|
|
path.size-L,
|
|
path.size-XL,
|
|
path.size-2XL,
|
|
path.size-3XL,
|
|
path.size-4XL {
|
|
stroke-width: 0.5;
|
|
}
|
|
}
|
|
|
|
/* Styling the shadow DOM is hard to do
|
|
* This is for styling FreeSewing snippets
|
|
* TODO: Update snippets to use inline styles with CSS vars
|
|
*/
|
|
g#buttonhole path.note,
|
|
g#notch circle.note,
|
|
g#bnotch path.note,
|
|
g#bnotch circle.note {
|
|
stroke: var(--pattern-note);
|
|
fill: none;
|
|
}
|
|
g#notch circle.fill-note,
|
|
g#bnotch circle.fill-note { fill: var(--pattern-note); }
|
|
|
|
/* Same for paperless grid, also in shadow DOM */
|
|
rect.grid {
|
|
stroke-width: 1;
|
|
stroke: currentColor;
|
|
}
|
|
path.gridline {
|
|
stroke-linecap: butt;
|
|
stroke-width: 0.3 !important;
|
|
stroke-dasharray: none;
|
|
}
|
|
path.gridline.sm {
|
|
stroke-width: 0.15 !important;
|
|
}
|
|
path.gridline.xs {
|
|
stroke-width: 0.1 !important;
|
|
}
|
|
path.gridline.metric.sm {
|
|
stroke-dasharray: 3 1;
|
|
}
|
|
path.gridline.metric.xs {
|
|
stroke-dasharray: 1 1;
|
|
}
|
|
path.gridline.imperial {
|
|
stroke-dasharray: 5 5;
|
|
}
|
|
path.gridline.imperial.sm {
|
|
stroke-dasharray: 2 2;
|
|
}
|
|
|
|
|
|
figure.develop.example div.develop {
|
|
.path,
|
|
.point {
|
|
border-left: 0.25rem solid transparent;
|
|
padding-left: 0.25rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
.path {
|
|
border-left: 3px dotted transparent;
|
|
padding-left: 4px;
|
|
}
|
|
.path.c0,
|
|
.point.c0 {
|
|
border-color: var(--pattern-dev-0);
|
|
}
|
|
.path.c1,
|
|
.point.c1 {
|
|
border-color: var(--pattern-dev-1);
|
|
}
|
|
.path.c2,
|
|
.point.c2 {
|
|
border-color: var(--pattern-dev-2);
|
|
}
|
|
.path.c3,
|
|
.point.c3 {
|
|
border-color: var(--pattern-dev-3);
|
|
}
|
|
.path.c4,
|
|
.point.c4 {
|
|
border-color: var(--pattern-dev-4);
|
|
}
|
|
.path.c5,
|
|
.point.c5 {
|
|
border-color: var(--pattern-dev-5);
|
|
}
|
|
.path.c6,
|
|
.point.c6 {
|
|
border-color: var(--pattern-dev-6);
|
|
}
|
|
.path.c7,
|
|
.point.c7 {
|
|
border-color: var(--pattern-dev-7);
|
|
}
|
|
}
|
|
|