564 lines
13 KiB
CSS
564 lines
13 KiB
CSS
@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 font-light;
|
|
}
|
|
h2 {
|
|
@apply text-base-content text-3xl py-4 pb-2 mb-1 font-light lg:text-4xl border-b-2 border-base-200;
|
|
}
|
|
h3 {
|
|
@apply text-base-content text-2xl py-3 font-light lg:text-3xl;
|
|
}
|
|
h4 {
|
|
@apply text-base-content text-xl py-2 font-medium lg:text-2xl;
|
|
}
|
|
h5 {
|
|
@apply text-base-content text-lg py-1 font-medium lg:text-xl;
|
|
}
|
|
h6 {
|
|
@apply text-base-content text-base 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;
|
|
}
|
|
|
|
/* mdx styles */
|
|
.mdx a {
|
|
@apply text-secondary underline decoration-1;
|
|
}
|
|
.mdx a:hover {
|
|
@apply text-secondary-focus decoration-2 decoration-current;
|
|
}
|
|
.mdx ul {
|
|
@apply pl-4 list-disc list-inside text-base-content;
|
|
}
|
|
.mdx ol {
|
|
@apply pl-4 list-decimal list-inside text-base-content;
|
|
}
|
|
.mdx code {
|
|
@apply bg-accent bg-opacity-10 px-2 rounded text-accent;
|
|
}
|
|
.mdx pre code {
|
|
@apply bg-inherit;
|
|
}
|
|
.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));
|
|
}
|
|
|
|
/* 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 path.fabric,
|
|
svg.freesewing.pattern path.stroke-fabric,
|
|
svg.freesewing.pattern circle.fabric,
|
|
svg.freesewing.pattern circle.stroke-fabric {
|
|
@apply fs-stroke-fabric;
|
|
}
|
|
svg.freesewing.pattern path.lining,
|
|
svg.freesewing.pattern path.stroke-lining,
|
|
svg.freesewing.pattern circle.lining,
|
|
svg.freesewing.pattern circle.stroke-lining {
|
|
@apply fs-stroke-lining;
|
|
}
|
|
svg.freesewing.pattern path.interfacing,
|
|
svg.freesewing.pattern path.stroke-interfacing,
|
|
svg.freesewing.pattern circle.interfacing,
|
|
svg.freesewing.pattern circle.stroke-interfacing {
|
|
@apply fs-stroke-interfacing;
|
|
}
|
|
svg.freesewing.pattern path.canvas,
|
|
svg.freesewing.pattern path.stroke-canvas,
|
|
svg.freesewing.pattern circle.canvas,
|
|
svg.freesewing.pattern circle.stroke-canvas {
|
|
@apply fs-stroke-canvas;
|
|
}
|
|
svg.freesewing.pattern path.various,
|
|
svg.freesewing.pattern path.stroke-various,
|
|
svg.freesewing.pattern circle.various,
|
|
svg.freesewing.pattern circle.stroke-various {
|
|
@apply fs-stroke-various;
|
|
}
|
|
svg.freesewing.pattern path.mark,
|
|
svg.freesewing.pattern path.stroke-mark,
|
|
svg.freesewing.pattern circle.mark,
|
|
svg.freesewing.pattern circle.stroke-mark {
|
|
@apply fs-stroke-mark;
|
|
}
|
|
svg.freesewing.pattern path.contrast,
|
|
svg.freesewing.pattern path.stroke-contrast,
|
|
svg.freesewing.pattern circle.contrast,
|
|
svg.freesewing.pattern circle.stroke-contrast {
|
|
@apply fs-stroke-contrast;
|
|
}
|
|
svg.freesewing.pattern path.note,
|
|
svg.freesewing.pattern path.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 path.fill-fabric,
|
|
svg.freesewing.pattern text.fill-fabric,
|
|
svg.freesewing.pattern tspan.fill-fabric,
|
|
svg.freesewing.pattern circle.fill-fabric {
|
|
@apply fs-fill-fabric;
|
|
}
|
|
svg.freesewing.pattern text.fill-lining,
|
|
svg.freesewing.pattern tspan.fill-lining,
|
|
svg.freesewing.pattern path.fill-lining,
|
|
svg.freesewing.pattern circle.fill-lining {
|
|
@apply fs-fill-lining;
|
|
}
|
|
svg.freesewing.pattern text.fill-interfacing,
|
|
svg.freesewing.pattern tspan.fill-interfacing,
|
|
svg.freesewing.pattern path.fill-interfacing,
|
|
svg.freesewing.pattern circle.fill-interfacing {
|
|
@apply fs-fill-interfacing;
|
|
}
|
|
svg.freesewing.pattern text.fill-canvas,
|
|
svg.freesewing.pattern tspan.fill-canvas,
|
|
svg.freesewing.pattern path.fill-canvas,
|
|
svg.freesewing.pattern circle.fill-canvas {
|
|
@apply fs-fill-canvas;
|
|
}
|
|
svg.freesewing.pattern text.fill-various,
|
|
svg.freesewing.pattern tspan.fill-various,
|
|
svg.freesewing.pattern path.fill-various,
|
|
svg.freesewing.pattern circle.fill-various {
|
|
@apply fs-fill-various;
|
|
}
|
|
svg.freesewing.pattern path.fill-mark,
|
|
svg.freesewing.pattern text.fill-mark,
|
|
svg.freesewing.pattern tspan.fill-mark,
|
|
svg.freesewing.pattern circle.fill-mark {
|
|
@apply fs-fill-mark;
|
|
}
|
|
svg.freesewing.pattern text.fill-contrast,
|
|
svg.freesewing.pattern tspan.fill-contrast,
|
|
svg.freesewing.pattern path.fill-contrast,
|
|
svg.freesewing.pattern circle.fill-contrast {
|
|
@apply fs-fill-contrast;
|
|
}
|
|
svg.freesewing.pattern text.fill-note,
|
|
svg.freesewing.pattern tspan.fill-note,
|
|
svg.freesewing.pattern path.fill-note,
|
|
svg.freesewing.pattern circle.fill-note {
|
|
@apply fs-fill-note;
|
|
}
|
|
.fs-stroke-color-0 {
|
|
stroke: var(--pattern-color-0);
|
|
}
|
|
.fs-stroke-color-1 {
|
|
stroke: var(--pattern-color-1);
|
|
}
|
|
.fs-stroke-color-2 {
|
|
stroke: var(--pattern-color-2);
|
|
}
|
|
.fs-stroke-color-3 {
|
|
stroke: var(--pattern-color-3);
|
|
}
|
|
.fs-stroke-color-4 {
|
|
stroke: var(--pattern-color-4);
|
|
}
|
|
.fs-stroke-color-5 {
|
|
stroke: var(--pattern-color-5);
|
|
}
|
|
.fs-stroke-color-6 {
|
|
stroke: var(--pattern-color-6);
|
|
}
|
|
.fs-stroke-color-7 {
|
|
stroke: var(--pattern-color-7);
|
|
}
|
|
.fs-stroke-color-8 {
|
|
stroke: var(--pattern-color-8);
|
|
}
|
|
.fs-stroke-color-9 {
|
|
stroke: var(--pattern-color-9);
|
|
}
|
|
svg.freesewing.pattern circle.stroke-color-0,
|
|
svg.freesewing.pattern path.stroke-color-0 {
|
|
@apply fs-stroke-color-0;
|
|
}
|
|
svg.freesewing.pattern circle.stroke-color-1,
|
|
svg.freesewing.pattern path.stroke-color-1 {
|
|
@apply fs-stroke-color-1;
|
|
}
|
|
svg.freesewing.pattern circle.stroke-color-2,
|
|
svg.freesewing.pattern path.stroke-color-2 {
|
|
@apply fs-stroke-color-2;
|
|
}
|
|
svg.freesewing.pattern circle.stroke-color-3,
|
|
svg.freesewing.pattern path.stroke-color-3 {
|
|
@apply fs-stroke-color-3;
|
|
}
|
|
svg.freesewing.pattern circle.stroke-color-4,
|
|
svg.freesewing.pattern path.stroke-color-4 {
|
|
@apply fs-stroke-color-4;
|
|
}
|
|
svg.freesewing.pattern circle.stroke-color-5,
|
|
svg.freesewing.pattern path.stroke-color-5 {
|
|
@apply fs-stroke-color-5;
|
|
}
|
|
svg.freesewing.pattern circle.stroke-color-6,
|
|
svg.freesewing.pattern path.stroke-color-6 {
|
|
@apply fs-stroke-color-6;
|
|
}
|
|
svg.freesewing.pattern circle.stroke-color-7,
|
|
svg.freesewing.pattern path.stroke-color-7 {
|
|
@apply fs-stroke-color-7;
|
|
}
|
|
svg.freesewing.pattern circle.stroke-color-8,
|
|
svg.freesewing.pattern path.stroke-color-8 {
|
|
@apply fs-stroke-color-8;
|
|
}
|
|
svg.freesewing.pattern circle.stroke-color-9,
|
|
svg.freesewing.pattern path.stroke-color-9 {
|
|
@apply fs-stroke-color-9;
|
|
}
|
|
.fs-fill-color-0 {
|
|
fill: var(--pattern-color-0);
|
|
}
|
|
.fs-fill-color-1 {
|
|
fill: var(--pattern-color-1);
|
|
}
|
|
.fs-fill-color-2 {
|
|
fill: var(--pattern-color-2);
|
|
}
|
|
.fs-fill-color-3 {
|
|
fill: var(--pattern-color-3);
|
|
}
|
|
.fs-fill-color-4 {
|
|
fill: var(--pattern-color-4);
|
|
}
|
|
.fs-fill-color-5 {
|
|
fill: var(--pattern-color-5);
|
|
}
|
|
.fs-fill-color-6 {
|
|
fill: var(--pattern-color-6);
|
|
}
|
|
.fs-fill-color-7 {
|
|
fill: var(--pattern-color-7);
|
|
}
|
|
.fs-fill-color-8 {
|
|
fill: var(--pattern-color-8);
|
|
}
|
|
.fs-fill-color-9 {
|
|
fill: var(--pattern-color-9);
|
|
}
|
|
svg.freesewing.pattern circle.fill-color-0,
|
|
svg.freesewing.pattern path.fill-color-0 {
|
|
@apply fs-fill-color-0;
|
|
}
|
|
svg.freesewing.pattern circle.fill-color-1,
|
|
svg.freesewing.pattern path.fill-color-1 {
|
|
@apply fs-fill-color-1;
|
|
}
|
|
svg.freesewing.pattern circle.fill-color-2,
|
|
svg.freesewing.pattern path.fill-color-2 {
|
|
@apply fs-fill-color-2;
|
|
}
|
|
svg.freesewing.pattern circle.fill-color-3,
|
|
svg.freesewing.pattern path.fill-color-3 {
|
|
@apply fs-fill-color-3;
|
|
}
|
|
svg.freesewing.pattern circle.fill-color-4,
|
|
svg.freesewing.pattern path.fill-color-4 {
|
|
@apply fs-fill-color-4;
|
|
}
|
|
svg.freesewing.pattern circle.fill-color-5,
|
|
svg.freesewing.pattern path.fill-color-5 {
|
|
@apply fs-fill-color-5;
|
|
}
|
|
svg.freesewing.pattern circle.fill-color-6,
|
|
svg.freesewing.pattern path.fill-color-6 {
|
|
@apply fs-fill-color-6;
|
|
}
|
|
svg.freesewing.pattern circle.fill-color-7,
|
|
svg.freesewing.pattern path.fill-color-7 {
|
|
@apply fs-fill-color-7;
|
|
}
|
|
svg.freesewing.pattern circle.fill-color-8,
|
|
svg.freesewing.pattern path.fill-color-8 {
|
|
@apply fs-fill-color-8;
|
|
}
|
|
svg.freesewing.pattern circle.fill-color-9,
|
|
svg.freesewing.pattern path.fill-color-9 {
|
|
@apply fs-fill-color-9;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
/* 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 > svg.details-toggle {
|
|
transform: rotate(90deg);
|
|
opacity: 0.4;
|
|
}
|
|
details[open] > summary > svg.details-toggle {
|
|
transform: rotate(-90deg);
|
|
opacity: 0.8;
|
|
}
|
|
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;
|
|
}
|