web_server/nginx/vue/src/assets/styles.css

@import "tailwindcss";

/* 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.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "CreatoDisplay";
    src: url("/fonts/CreatoDisplay-Bold.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
/* 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: #57d2ff;
    --quaternary: #400;

    /* 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);

    --font-heading: var(--font_heading);
    --default-font-family: var(--font_default);
}
/* END OF VARIABLES */
/* ELEMENTS */
body {
    margin: 0 auto;
    width: 100vw;
    height: 100vh;
}

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

small {
    @apply text-tertiary;
}

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

h3,
h4 {
    @apply text-base;
}
h2 {
    @apply text-lg;
}
h1 {
    @apply text-xl;
}

p {
    @apply text-secondary;
}

button {
    @apply text-primary bg-link text-center border;
}

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

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: auto; /* adjust height automatically */
        margin: 0 auto; /* center horizontally */
        box-sizing: border-box;
    }
    .a4page-landscape {
        width: 100%; /* fill mobile width */
        height: auto; /* adjust height automatically */
        margin: 0 auto; /* center horizontally */
        box-sizing: border-box;
    }
}
@media (max-width: 600px) {
    .a5page-portrait {
        width: 100%; /* fill mobile width */
        height: auto; /* adjust height automatically */
        margin: 0 auto; /* center horizontally */
        box-sizing: border-box;
    }
    .a5page-landscape {
        width: 100%; /* fill mobile width */
        height: auto; /* adjust height automatically */
        margin: 0 auto; /* center horizontally */
        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 inset-0 -z-10 pointer-events-none;
}

.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;

    mask-image: linear-gradient(
        30deg,
        rgba(1, 1, 1, 1) 0%,
        rgba(1, 1, 1, 0.9) 100%
    );
}