web_server/vue/src/assets/styles.css

@import "tailwindcss";

/* Route transitions */
.slide-enter-active,
.slide-leave-active {
    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}
.slide-enter-from {
    transform: translateX(30px);
    opacity: 0;
}
.slide-leave-to {
    transform: translateX(-30px);
    opacity: 0;
}

/* PRINTING */
@media print {
    .no-print,
    .no-print * {
        display: none !important;
        margin: 0px;
        padding: 0px;
        width: 0x;
        height: 0px;
    }
}

/* END OF PRINTING */

/* FONTS */
@font-face {
    font-family: "big_noodle_titling";
    src: url("/fonts/big_noodle_titling.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CreatoDisplay";
    src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* END OF FONTS */

/* VARIABLES */
:root {
    /* RED, WHITE, BLACK are standard*/
    --portal_grey: #dddddd;
    --portal_orange: #ff9a00;
    --portal_light_orange: #ff5d00;
    --portal_blue: #0065ff;
    --portal_light_blue: #00a2ff;

    /* MAIN COLORS */
    --primary: #55ffbb;
    --secondary: #62ff57;
    --tertiary: #ff579a;
    --quaternary: #024942;

    /* BACKGROUND COLORS */
    --bg_primary: #1b110e;
    --bg_secondary: #000;
    --link: #222;

    --bdr: 2px;

    --spacing: 3px;

    /* FONTS USED */
    --font_heading: big_noodle_titling;
    --font_default: CreatoDisplay;
}

@theme {
    --color-primary: var(--primary);
    --color-secondary: var(--secondary);
    --color-tertiary: var(--tertiary);
    --color-quaternary: var(--quaternary);

    --color-bg_primary: var(--bg_primary);
    --color-bg_secondary: var(--bg_secondary);
    --color-link: var(--link);

    --borderWidth-primary: var(--primary);
    --borderWidth-secondary: var(--secondary);
    --borderWidth-tertiary: var(--tertiary);

    --font-heading: var(--font_heading);
    --default-font-family: var(--font_default);
}

/* END OF VARIABLES */
/* ELEMENTS */
body {
    margin: 0 auto;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg_secondary);
}

input {
    @apply text-secondary border-primary border;
}

small {
    @apply text-tertiary;
}

code {
    @apply text-tertiary;
}

ul {
    @apply text-tertiary;
}

li {
    @apply text-tertiary;
}

h1,
h2,
h3,
h4 {
    @apply m-1 font-heading text-primary;
}

h3,
h4 {
    @apply text-lg;
}

h1 {
    @apply text-2xl;
}

h2 {
    @apply text-xl;
}

p {
    @apply text-secondary;
}

a {
    @apply text-primary bg-link text-center font-heading tracking-wide;
}

input,
textarea {
    @apply text-primary border p-2 w-full;
}

input::placeholder,
textarea::placeholder {
    @apply text-secondary opacity-50;
}

table {
    @apply border-primary border text-primary;
}

td {
    @apply gap-1;
}

tr {
    @apply border-primary border-b text-primary;
}

th {
    @apply pr-3 pl-3 border-r border-dotted border-tertiary;
}

td {
    @apply pr-3 pl-3;
}

/* END OF ELEMENTS */

/* CLASSES */

.img-stamp {
    width: 99px;
    height: 55px;
}

/* BORDERS */
.bdr-1 {
    @apply border-30;
    border-image: url("/img/borders/border1.gif") 30 round;
}

.bdr-1-inv {
    @apply border-30;
    border-image: url("/img/borders/border1inv.gif") 30 round;
}

.bdr-2 {
    @apply border-5;
    border-image: url("/img/borders/border4.gif") 7 round;
}

.bdr-cv {
    @apply border-30;
    border-image: url("/img/borders/bordercv.png") 30 round;
}

/* A5 Page */
.a5page-landscape {
    @apply m-0 box-content;
    height: 148mm;
    width: 210mm;
}

.a5page-portrait {
    @apply m-0 box-content;
    width: 148mm;
    height: 210mm;
}

/* A4 Page */
.a4page-portrait {
    @apply m-0 box-content;
    width: 210mm;
    height: 297mm;
}

.a4page-landscape {
    @apply m-0 box-content;
    height: 210mm;
    width: 297mm;
}

/* END OF CLASSES */

/* PHONE */
@media (max-width: 850px) {
    .a4page-portrait {
        width: 100%;
        /* fill mobile width */
        height: fit-content;
        margin: 0 auto;
        /* center horizontally */
        box-sizing: border-box;
    }

    .a4page-landscape {
        width: 100%;
        /* fill mobile width */
        height: fit-content;
        margin: 0 auto;
        /* center horizontally */
        box-sizing: border-box;
    }
}

@media (max-width: 600px) {
    .a5page-portrait {
        width: 100%;
        height: fit-content;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .a5page-landscape {
        width: 100%;
        height: fit-content;
        margin: 0 auto;
        box-sizing: border-box;
    }
}

.tl {
    @apply absolute top-0 left-0;
}

.tr {
    @apply absolute top-0 right-0;
}

.bl {
    @apply absolute bottom-0 left-0;
}

.br {
    @apply absolute bottom-0 right-0;
}

.background {
    @apply fixed;
}

.halftone {
    --dot_size: 1px;
    --bg_size: 3px;
    --bg_pos: calc(var(--bg_size) / 2);
    --blur: 0%;

    background-color: var(--bg_secondary);
    background-image: radial-gradient(
        circle at center,
        var(--bg_primary) var(--dot_size),
        transparent var(--blur)
    );
    background-size: var(--bg_size) var(--bg_size);
    background-position: 0 0;
}