680 lines
15 KiB
CSS
680 lines
15 KiB
CSS
/* __SDEFILE__ - This file is a dependency for the stand-alone environment */
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@import './code.css';
|
|
|
|
@layer components {
|
|
/* Applied styles for common HTML tags */
|
|
h1 {
|
|
@apply text-base-content text-4xl py-5 font-bold lg:text-6xl;
|
|
}
|
|
h2 {
|
|
@apply text-base-content text-3xl pt-4 pb-3 m-0 font-medium lg:text-4xl;
|
|
}
|
|
h3 {
|
|
@apply text-base-content text-2xl pt-3 pb-2 m-0 font-medium lg:text-3xl;
|
|
}
|
|
h4 {
|
|
@apply text-base-content text-xl pt-2 pb-1 m-0 font-medium lg:text-2xl;
|
|
}
|
|
h5 {
|
|
@apply text-base-content text-lg py-1 m-0 font-medium lg:text-xl;
|
|
}
|
|
h6 {
|
|
@apply text-base-content text-base py-0 m-0 font-medium lg:text-lg;
|
|
}
|
|
p {
|
|
@apply text-base-content my-1 py-2 text-base leading-6;
|
|
}
|
|
.btn {
|
|
@apply normal-case;
|
|
}
|
|
|
|
/* Dropdowns */
|
|
.navdrop {
|
|
max-height: 80vh;
|
|
}
|
|
|
|
/* Keep spacing after headings between p and non-p consistent */
|
|
h1 + p,
|
|
h2 + p,
|
|
h3 + p,
|
|
h4 + p,
|
|
h5 + p,
|
|
h6 + p {
|
|
padding-top: 0;
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* mdx styles */
|
|
.md a:not(.btn),
|
|
.mdx a:not(.btn) {
|
|
@apply underline decoration-2 text-secondary;
|
|
}
|
|
.md a:hover,
|
|
.mdx a:hover {
|
|
@apply decoration-4;
|
|
}
|
|
.mdx ul {
|
|
@apply pl-0 lg:pl-4 list-disc list-inside text-base-content;
|
|
}
|
|
.mdx ol ul,
|
|
.mdx ul ul {
|
|
@apply pl-2 lg:pl-4 list-disc list-inside text-base-content;
|
|
}
|
|
.mdx ol {
|
|
@apply pl-0 lg:pl-4 list-decimal list-inside text-base-content;
|
|
}
|
|
.mdx ul ol,
|
|
.mdx ol ol {
|
|
@apply pl-2 lg:pl-4 list-decimal list-inside text-base-content;
|
|
}
|
|
.mdx code {
|
|
@apply bg-base-300 px-1.5 text-base-content font-mono font-medium bg-opacity-10 py-0.5 border-base-content rounded border;
|
|
}
|
|
.mdx pre code {
|
|
@apply bg-inherit border-0;
|
|
}
|
|
.mdx a.heading-autolink {
|
|
color: currentColor;
|
|
text-decoration: none;
|
|
}
|
|
.mdx a.heading-autolink:after {
|
|
content: '';
|
|
color: hsl(var(--s));
|
|
font-size: 75%;
|
|
padding-left: 0.5rem;
|
|
}
|
|
.mdx a.heading-autolink:hover:after {
|
|
content: '#';
|
|
}
|
|
/* Watch out of P tags in the toc list */
|
|
.mdx-toc ul li p {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline;
|
|
}
|
|
/* Keep p tags in lists inline */
|
|
.mdx ul li p,
|
|
.mdx ol li p {
|
|
margin: 0;
|
|
padding: 0;
|
|
display: inline;
|
|
}
|
|
/* Prevent inline code style from applying to code blocks */
|
|
.mdx code.hljs {
|
|
color: inherit;
|
|
background-color: inherit;
|
|
background-opacity: inherit;
|
|
}
|
|
.mdx table.mdx-table {
|
|
margin: 2rem auto;
|
|
}
|
|
.mdx table.mdx-table tr td {
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
.mdx table.mdx-table thead th {
|
|
padding: 8px;
|
|
font-size: 110%;
|
|
border-bottom: 2px solid hsl(var(--b3));
|
|
}
|
|
|
|
/* Padding on markdown paragraphs in flags */
|
|
.flag p {
|
|
padding: 0.25rem 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* FreeSewing SVG output styles */
|
|
.fs-stroke-fabric {
|
|
stroke: var(--pattern-fabric);
|
|
}
|
|
.fs-stroke-lining {
|
|
stroke: var(--pattern-lining);
|
|
}
|
|
.fs-stroke-interfacing {
|
|
stroke: var(--pattern-interfacing);
|
|
}
|
|
.fs-stroke-canvas {
|
|
stroke: var(--pattern-canvas);
|
|
}
|
|
.fs-stroke-various {
|
|
stroke: var(--pattern-various);
|
|
}
|
|
.fs-stroke-mark {
|
|
stroke: var(--pattern-mark);
|
|
}
|
|
.fs-stroke-contrast {
|
|
stroke: var(--pattern-contrast);
|
|
}
|
|
.fs-stroke-note {
|
|
stroke: var(--pattern-note);
|
|
}
|
|
svg.freesewing.pattern rect.fabric,
|
|
svg.freesewing.pattern rect.stroke-fabric,
|
|
svg.freesewing.pattern path.fabric,
|
|
svg.freesewing.pattern path.stroke-fabric,
|
|
svg.freesewing.pattern tspan.stroke-fabric,
|
|
svg.freesewing.pattern text.stroke-fabric,
|
|
svg.freesewing.pattern circle.fabric,
|
|
svg.freesewing.pattern circle.stroke-fabric {
|
|
@apply fs-stroke-fabric;
|
|
}
|
|
svg.freesewing.pattern rect.lining,
|
|
svg.freesewing.pattern rect.stroke-lining,
|
|
svg.freesewing.pattern path.lining,
|
|
svg.freesewing.pattern path.stroke-lining,
|
|
svg.freesewing.pattern tspan.stroke-lining,
|
|
svg.freesewing.pattern text.stroke-lining,
|
|
svg.freesewing.pattern circle.lining,
|
|
svg.freesewing.pattern circle.stroke-lining {
|
|
@apply fs-stroke-lining;
|
|
}
|
|
svg.freesewing.pattern rect.interfacing,
|
|
svg.freesewing.pattern rect.stroke-interfacing,
|
|
svg.freesewing.pattern path.interfacing,
|
|
svg.freesewing.pattern path.stroke-interfacing,
|
|
svg.freesewing.pattern text.stroke-interfacing,
|
|
svg.freesewing.pattern tspan.stroke-interfacing,
|
|
svg.freesewing.pattern circle.interfacing,
|
|
svg.freesewing.pattern circle.stroke-interfacing {
|
|
@apply fs-stroke-interfacing;
|
|
}
|
|
svg.freesewing.pattern rect.canvas,
|
|
svg.freesewing.pattern rect.stroke-canvas,
|
|
svg.freesewing.pattern path.canvas,
|
|
svg.freesewing.pattern path.stroke-canvas,
|
|
svg.freesewing.pattern text.stroke-canvas,
|
|
svg.freesewing.pattern tspan.stroke-canvas,
|
|
svg.freesewing.pattern circle.canvas,
|
|
svg.freesewing.pattern circle.stroke-canvas {
|
|
@apply fs-stroke-canvas;
|
|
}
|
|
svg.freesewing.pattern rect.various,
|
|
svg.freesewing.pattern rect.stroke-various,
|
|
svg.freesewing.pattern path.various,
|
|
svg.freesewing.pattern path.stroke-various,
|
|
svg.freesewing.pattern text.stroke-various,
|
|
svg.freesewing.pattern tspan.stroke-various,
|
|
svg.freesewing.pattern circle.various,
|
|
svg.freesewing.pattern circle.stroke-various {
|
|
@apply fs-stroke-various;
|
|
}
|
|
svg.freesewing.pattern rect.mark,
|
|
svg.freesewing.pattern rect.stroke-mark,
|
|
svg.freesewing.pattern path.mark,
|
|
svg.freesewing.pattern path.stroke-mark,
|
|
svg.freesewing.pattern text.stroke-mark,
|
|
svg.freesewing.pattern tspan.stroke-mark,
|
|
svg.freesewing.pattern circle.mark,
|
|
svg.freesewing.pattern circle.stroke-mark {
|
|
@apply fs-stroke-mark;
|
|
}
|
|
svg.freesewing.pattern rect.contrast,
|
|
svg.freesewing.pattern rect.stroke-contrast,
|
|
svg.freesewing.pattern path.contrast,
|
|
svg.freesewing.pattern path.stroke-contrast,
|
|
svg.freesewing.pattern text.stroke-contrast,
|
|
svg.freesewing.pattern tspan.stroke-contrast,
|
|
svg.freesewing.pattern circle.contrast,
|
|
svg.freesewing.pattern circle.stroke-contrast {
|
|
@apply fs-stroke-contrast;
|
|
}
|
|
svg.freesewing.pattern rect.note,
|
|
svg.freesewing.pattern rect.stroke-note,
|
|
svg.freesewing.pattern path.note,
|
|
svg.freesewing.pattern path.stroke-note,
|
|
svg.freesewing.pattern text.stroke-note,
|
|
svg.freesewing.pattern tspan.stroke-note,
|
|
svg.freesewing.pattern circle.note,
|
|
svg.freesewing.pattern circle.stroke-note {
|
|
@apply fs-stroke-note;
|
|
}
|
|
.fs-fill-fabric {
|
|
fill: var(--pattern-fabric);
|
|
}
|
|
.fs-fill-lining {
|
|
fill: var(--pattern-lining);
|
|
}
|
|
.fs-fill-interfacing {
|
|
fill: var(--pattern-interfacing);
|
|
}
|
|
.fs-fill-canvas {
|
|
fill: var(--pattern-canvas);
|
|
}
|
|
.fs-fill-various {
|
|
fill: var(--pattern-various);
|
|
}
|
|
.fs-fill-mark {
|
|
fill: var(--pattern-mark);
|
|
}
|
|
.fs-fill-contrast {
|
|
fill: var(--pattern-contrast);
|
|
}
|
|
.fs-fill-note {
|
|
fill: var(--pattern-note);
|
|
}
|
|
svg.freesewing.pattern rect.fill-fabric,
|
|
svg.freesewing.pattern path.fill-fabric,
|
|
svg.freesewing.pattern text.fill-fabric,
|
|
svg.freesewing.pattern tspan.fill-fabric,
|
|
svg.freesewing.pattern text.fabric,
|
|
svg.freesewing.pattern tspan.fabric,
|
|
svg.freesewing.pattern circle.fill-fabric {
|
|
@apply fs-fill-fabric;
|
|
}
|
|
svg.freesewing.pattern rect.fill-lining,
|
|
svg.freesewing.pattern text.fill-lining,
|
|
svg.freesewing.pattern tspan.fill-lining,
|
|
svg.freesewing.pattern text.lining,
|
|
svg.freesewing.pattern tspan.lining,
|
|
svg.freesewing.pattern path.fill-lining,
|
|
svg.freesewing.pattern circle.fill-lining {
|
|
@apply fs-fill-lining;
|
|
}
|
|
svg.freesewing.pattern rect.fill-interfacing,
|
|
svg.freesewing.pattern text.fill-interfacing,
|
|
svg.freesewing.pattern tspan.fill-interfacing,
|
|
svg.freesewing.pattern text.interfacing,
|
|
svg.freesewing.pattern tspan.interfacing,
|
|
svg.freesewing.pattern path.fill-interfacing,
|
|
svg.freesewing.pattern circle.fill-interfacing {
|
|
@apply fs-fill-interfacing;
|
|
}
|
|
svg.freesewing.pattern rect.fill-canvas,
|
|
svg.freesewing.pattern text.fill-canvas,
|
|
svg.freesewing.pattern tspan.fill-canvas,
|
|
svg.freesewing.pattern text.canvas,
|
|
svg.freesewing.pattern tspan.canvas,
|
|
svg.freesewing.pattern path.fill-canvas,
|
|
svg.freesewing.pattern circle.fill-canvas {
|
|
@apply fs-fill-canvas;
|
|
}
|
|
svg.freesewing.pattern rect.fill-various,
|
|
svg.freesewing.pattern text.fill-various,
|
|
svg.freesewing.pattern tspan.fill-various,
|
|
svg.freesewing.pattern text.various,
|
|
svg.freesewing.pattern tspan.various,
|
|
svg.freesewing.pattern path.fill-various,
|
|
svg.freesewing.pattern circle.fill-various {
|
|
@apply fs-fill-various;
|
|
}
|
|
svg.freesewing.pattern rect.fill-mark,
|
|
svg.freesewing.pattern path.fill-mark,
|
|
svg.freesewing.pattern text.fill-mark,
|
|
svg.freesewing.pattern tspan.fill-mark,
|
|
svg.freesewing.pattern text.mark,
|
|
svg.freesewing.pattern tspan.mark,
|
|
svg.freesewing.pattern circle.fill-mark {
|
|
@apply fs-fill-mark;
|
|
}
|
|
svg.freesewing.pattern rect.fill-contrast,
|
|
svg.freesewing.pattern text.fill-contrast,
|
|
svg.freesewing.pattern tspan.fill-contrast,
|
|
svg.freesewing.pattern text.contrast,
|
|
svg.freesewing.pattern tspan.contrast,
|
|
svg.freesewing.pattern path.fill-contrast,
|
|
svg.freesewing.pattern circle.fill-contrast {
|
|
@apply fs-fill-contrast;
|
|
}
|
|
svg.freesewing.pattern rect.fill-note,
|
|
svg.freesewing.pattern text.fill-note,
|
|
svg.freesewing.pattern tspan.fill-note,
|
|
svg.freesewing.pattern text.note,
|
|
svg.freesewing.pattern tspan.note,
|
|
svg.freesewing.pattern path.fill-note,
|
|
svg.freesewing.pattern circle.fill-note {
|
|
@apply fs-fill-note;
|
|
}
|
|
|
|
.fs-fill-bg {
|
|
fill: var(--pattern-bg);
|
|
}
|
|
.fs-fill-current {
|
|
fill: currentColor;
|
|
}
|
|
svg.freesewing.pattern .fill-bg {
|
|
@apply fs-fill-bg;
|
|
}
|
|
svg.freesewing.pattern .fill-current {
|
|
@apply fs-fill-current;
|
|
}
|
|
.fill-opacity-25 {
|
|
fill-opacity: 0.25;
|
|
}
|
|
.fill-opacity-50 {
|
|
fill-opacity: 0.5;
|
|
}
|
|
.pulse-fill {
|
|
fill: currentColor;
|
|
animation: pulsefill 3s infinite;
|
|
}
|
|
.pulse-stroke {
|
|
stroke: currentColor;
|
|
animation: pulsestroke 3s infinite;
|
|
}
|
|
.stroko-0 {
|
|
stroke-opacity: 0;
|
|
}
|
|
.stroko-5 {
|
|
stroke-opacity: 0.05;
|
|
}
|
|
.stroko-10 {
|
|
stroke-opacity: 0.1;
|
|
}
|
|
.stroko-20 {
|
|
stroke-opacity: 0.2;
|
|
}
|
|
.stroko-30 {
|
|
stroke-opacity: 0.3;
|
|
}
|
|
.stroko-40 {
|
|
stroke-opacity: 0.4;
|
|
}
|
|
.stroko-50 {
|
|
stroke-opacity: 0.5;
|
|
}
|
|
.stroko-60 {
|
|
stroke-opacity: 0.6;
|
|
}
|
|
.stroko-70 {
|
|
stroke-opacity: 0.7;
|
|
}
|
|
.stroko-80 {
|
|
stroke-opacity: 0.8;
|
|
}
|
|
.stroko-90 {
|
|
stroke-opacity: 0.9;
|
|
}
|
|
.stroko-100 {
|
|
stroke-opacity: 1;
|
|
}
|
|
.filo-0 {
|
|
fill-opacity: 0;
|
|
}
|
|
.filo-5 {
|
|
fill-opacity: 0.05;
|
|
}
|
|
.filo-10 {
|
|
fill-opacity: 0.1;
|
|
}
|
|
.filo-20 {
|
|
fill-opacity: 0.2;
|
|
}
|
|
.filo-30 {
|
|
fill-opacity: 0.3;
|
|
}
|
|
.filo-40 {
|
|
fill-opacity: 0.4;
|
|
}
|
|
.filo-50 {
|
|
fill-opacity: 0.5;
|
|
}
|
|
.filo-60 {
|
|
fill-opacity: 0.6;
|
|
}
|
|
.filo-70 {
|
|
fill-opacity: 0.7;
|
|
}
|
|
.filo-80 {
|
|
fill-opacity: 0.8;
|
|
}
|
|
.filo-90 {
|
|
fill-opacity: 0.9;
|
|
}
|
|
.filo-100 {
|
|
fill-opacity: 1;
|
|
}
|
|
|
|
/*
|
|
* Deal with markdown formatting in pattern logs
|
|
*/
|
|
.pattern-logs p {
|
|
@apply p-0 m-0 inline;
|
|
}
|
|
.pattern-logs a {
|
|
@apply underline decoration-2;
|
|
}
|
|
.pattern-logs a:hover {
|
|
@apply cursor-pointer decoration-4;
|
|
}
|
|
.pattern-logs code {
|
|
@apply px-1 rounded font-bold bg-neutral bg-opacity-10 font-mono;
|
|
}
|
|
}
|
|
|
|
progress.progress-white {
|
|
background-color: #fff3;
|
|
}
|
|
progress.progress-white::-moz-progress-bar {
|
|
background-color: #fffb;
|
|
transition: width 0.5s;
|
|
}
|
|
|
|
@keyframes pulsefill {
|
|
0% {
|
|
fill-opacity: 0;
|
|
}
|
|
50% {
|
|
fill-opacity: 0.1;
|
|
}
|
|
100% {
|
|
fill-opacity: 0;
|
|
}
|
|
}
|
|
@keyframes pulsestroke {
|
|
0% {
|
|
stroke-opacity: 0;
|
|
}
|
|
50% {
|
|
stroke-opacity: 0.3;
|
|
}
|
|
100% {
|
|
stroke-opacity: 0;
|
|
}
|
|
}
|
|
|
|
.animate-bounce-right {
|
|
animation: bounceright 1s infinite;
|
|
}
|
|
|
|
@keyframes bounceright {
|
|
0%,
|
|
100% {
|
|
transform: translateX(-12.5%);
|
|
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
}
|
|
50% {
|
|
transform: translateX(12.5%);
|
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
}
|
|
}
|
|
/* Override DaisyUI button text color */
|
|
.btn-info {
|
|
color: var(--btn-info-content);
|
|
}
|
|
.btn-success {
|
|
color: var(--btn-success-content);
|
|
}
|
|
.btn-warning {
|
|
color: var(--btn-warning-content);
|
|
}
|
|
.btn-error {
|
|
color: var(--btn-error-content);
|
|
}
|
|
|
|
/* Theme gradient */
|
|
.theme-gradient {
|
|
background-image: var(--theme-gradient);
|
|
}
|
|
.theme-gradient.loading {
|
|
animation-name: MOVE-BG;
|
|
animation-duration: 4s;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
margin-top: 0;
|
|
transition: margin-top 0.2s ease-out;
|
|
}
|
|
@keyframes MOVE-BG {
|
|
from {
|
|
background-position-x: 0;
|
|
}
|
|
to {
|
|
background-position-x: -200vw;
|
|
}
|
|
}
|
|
|
|
/* Lightbox */
|
|
.lightbox img {
|
|
max-width: calc(100vw - 6rem);
|
|
max-height: calc(100vh - 6rem);
|
|
}
|
|
|
|
/* Style for navigation */
|
|
details {
|
|
user-select: none;
|
|
}
|
|
details > summary > div > svg.details-toggle {
|
|
}
|
|
details[open] > summary > div > svg.details-toggle {
|
|
transform: rotate(90deg);
|
|
}
|
|
details[open] summary ~ * {
|
|
animation: ease-opacity-t-b 0.5s ease;
|
|
}
|
|
summary {
|
|
cursor: pointer;
|
|
}
|
|
svg.details-toggle {
|
|
transition: all 0.2s ease-out;
|
|
}
|
|
|
|
/* TO JE TO - TO JE TAJ */
|
|
summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
input[type='range']::-moz-range-track {
|
|
background: #3071a9;
|
|
}
|
|
|
|
input[type='range']::-ms-track {
|
|
background: transparent;
|
|
}
|
|
input[type='range']::-ms-fill-lower {
|
|
background: #2a6495;
|
|
}
|
|
input[type='range']:focus::-ms-fill-lower {
|
|
background: #3071a9;
|
|
}
|
|
input[type='range']::-ms-fill-upper {
|
|
background: #3071a9;
|
|
}
|
|
input[type='range']:focus::-ms-fill-upper {
|
|
background: #367ebd;
|
|
}
|
|
/* Style for patterns */
|
|
@import './svg-freesewing-draft.css';
|
|
|
|
/* Style for jargon terms */
|
|
.jargon-term {
|
|
text-decoration: underline 3px dotted hsl(var(--s));
|
|
font-weight: 500;
|
|
}
|
|
summary.jargon-term {
|
|
list-style: none;
|
|
}
|
|
.jargon-term::after {
|
|
content: '?';
|
|
font-weight: bold;
|
|
display: inline-block;
|
|
transform: translate(0, -0.5em);
|
|
font-size: 75%;
|
|
color: hsl(var(--s));
|
|
margin-left: -0.1rem;
|
|
}
|
|
.jargon-term:hover {
|
|
position: relative;
|
|
text-decoration: underline 3px solid hsl(var(--s));
|
|
cursor: pointer;
|
|
}
|
|
details.jargon-details[open] {
|
|
border: 1px solid hsl(var(--s));
|
|
background: hsl(var(--s) / 0.05);
|
|
padding: 1rem 2rem;
|
|
margin: 1rem auto;
|
|
border-radius: 4px;
|
|
}
|
|
details.jargon-details[open] summary {
|
|
font-size: 200%;
|
|
padding: 0.5rem 0 1rem;
|
|
font-style: normal;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
details.jargon-details[open] summary::after {
|
|
display: none;
|
|
}
|
|
details.jargon-details[open] .jargon-term,
|
|
details.jargon-details[open] .jargon-term:hover {
|
|
text-decoration: none;
|
|
}
|
|
details svg.jargon-close {
|
|
display: none;
|
|
}
|
|
details.jargon-details[open] svg.jargon-close {
|
|
display: inline;
|
|
border-radius: 50%;
|
|
padding: 0.1rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/*
|
|
* Fix slider styles that for some reason are ugly
|
|
*/
|
|
.range::-moz-range-thumb {
|
|
border-radius: 100%;
|
|
}
|
|
input[type='range']::-moz-range-track {
|
|
background-color: hsla(var(--bc) / 0.1);
|
|
}
|
|
.range {
|
|
border-radius: 1rem;
|
|
}
|
|
|
|
/*
|
|
* Smooth scrolling
|
|
*/
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/*
|
|
* This should be possible with Tailwind's named groups but it does not seem to work
|
|
*/
|
|
details[open] > summary > svg.summary-chevron {
|
|
transform: rotate(90deg);
|
|
}
|
|
details > summary:hover > svg.summary-chevron {
|
|
stroke-width: 5;
|
|
}
|
|
|
|
svg.svg-world path {
|
|
fill: currentColor;
|
|
fill: theme('colors.primary');
|
|
fill-opacity: 0.2;
|
|
stroke: theme('colors.primary');
|
|
stroke-opacity: 0.666;
|
|
}
|
|
|
|
svg.svg-world circle.user,
|
|
svg.svg-world path.connection {
|
|
fill: none;
|
|
stroke: theme('colors.accent');
|
|
stroke-opacity: 0.666;
|
|
}
|