/* * Project: DGTH Web Application * Initial Data: 2025-09-16 * Version: 1.2 * * Design Concepts: * This stylesheet provides common, site-wide styles. The core layout uses a CSS Grid * with a base vertical rhythm of 10vh per row. Rows can expand beyond this minimum * to accommodate content, preventing overflow while maintaining a structured grid. */ :root { --dgth-opacity: 1; --dgth-orange-primary-rgba: rgba(255, 90, 19, var(--dgth-opacity)); --dgth-orange-primary: #ff5a13; --dgth-orange-secondary: #ed701b; --odgth-orange-secondary: rgba(237, 112, 27, var(--dgth-opacity)); --dgth-blu-rgba: rgba(1, 77, 145, var(--dgth-opacity)); --dgth-blu: #014d91; --dgth-nero-rgba: rgba(0, 0, 0, var(--dgth-opacity)); --dgth-nero: #000000; --dgth-bianco-rgba: rgba(255, 255, 255, var(--dgth-opacity)); --dgth-bianco: #ffffff; --dgth-bianco-neve-rgba: rgba(238, 238, 238, var(--dgth-opacity)); --dgth-bianco-neve: #eeeeee; --dgth-grigio-500-rgba: rgba(79, 79, 79, var(--dgth-opacity)); --dgth-grigio-500: #4f4f4f; --dgth-waiting: #ffb200; --dgth-bg1: var(--dgth-grigio-scuro-intenso); --dgth-bg2: var(--dgth-nero); --dgth-fg1: var(--dgth-ghiaccio); --dgth-fg2: var(--dgth-verde-smeraldo); --diff: calc(var(--max-size) - var(--min-size)); --min-size: 8px; --responsivefsz: calc( (var(--min-size) * 1px) + var(--diff) * ((100vmin - 420px) / (1200 - 420)) ); --dgth-tit1: 1.625rem; /* 26px */ --dgth-tit1-res: 2.25rem; --dgth-tit2: 1.375rem; --dgth-tit3: 1.25rem; --dgth-tit4: 1rem; --dgth-body: 1rem; --dgth-body-standard: 0.875rem; --dgth-body-big: 1.125rem; --dgth-body-medium: 1rem; --dgth-body-small: 0.75rem; --dgth-base-space: 0.5rem; --dgth-base-space-medium: 1rem; --dgth-base-space-big: 1.5rem; } * { font-family: Arial, Helvetica, sans-serif; } body { margin: 0; background-color: var(--dgth-nero); } .page-frame { width: auto; min-height: 100vh; /* MODIFIED: Allows container to grow beyond viewport height. */ --gap: 0; grid-template-columns: repeat(12, calc(100% / 12)); grid-template-rows: repeat( auto-fill, minmax(10vh, auto) ); /* MODIFIED: Creates flexible rows with a minimum height. */ background-color: transparent; /* gap: var(--gap); */ margin: 0; /* align-items: center; */ /* padding: calc(var(--gap) * 10); */ display: grid; } .app-frame { grid-row: 2 / auto-fit; border-radius: 10px; margin-top: 1%; } .color { background-color: var(--dgth-nero); color: var(--dgth-bianco); } /*login*/ html, body { /* Assicura che e occupino il 100% dell'altezza della viewport */ height: 100%; margin: 0; padding: 0; } /* .authent { background-image: linear-gradient(rgba(2, 4, 7, 1), rgba(1, 77, 145, 0.45)); background: var(--dgth-nero); width: 100%; margin: auto; padding: 3%; border-radius: 0px; grid-column: 9/ -1; grid-row: 1 / -1; } */ .authent { /*background-image: linear-gradient(rgba(2, 4, 7, 1), rgba(1, 77, 145, 0.45));*/ background: var(--dgth-nero); } @media (min-width: 770px) { .authent { width: 100%; margin: auto; padding: 3%; border-radius: 10px; grid-column: 9/ -1; grid-row: 1 / -1; } .authent h1 { font-size: 2.2rem; } } @media (max-width: 769px) { .authent { border-radius: 10px; grid-column: 3 / 11; grid-row: 2 / -2; } .authent h1 { font-size: 2.2rem; } } .authent input, .authent input::placeholder { color: white; } .authent input, .authent input::placeholder { color: white; } .authent .logo { width: 80%; margin: 1% auto 1% 0; } body.home { background-image: url("/static/images/home/background.jpg"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; } /* dash */ /* sitebar */ .sitebar { width: auto; height: 100%; background-color: var(--dgth-nero); display: flex; align-items: center; justify-content: space-between; grid-column: 1 / -1; grid-row: 1 / 2; flex-direction: column; } .stdbar a { display: flex; justify-content: flex-end; align-items: center; line-height: 100%; background-color: transparent; flex-basis: 25%; /*height: 100%;*/ } .sitebar .btn { box-shadow: 0 0 0 0; box-shadow: 0 0 0 0; } .sitebar .btn:focus { background-color: transparent; } .sitebar .username { margin: 0; display: block; } .sitebar .image { display: block-inline; margin: 0; } .sitebar svg { display: block; margin-left: 1rem; } .sitebar .site { width: 100%; height: 100%; display: flex; align-items: center; color: var(--dgth-bianco); margin-left: 1rem; } .sitebar .site a { display: block; /*color: var(--dgth-bianco); font-size: var(--dgth-tit1); margin-left: 1rem; line-height: 1em; font-size: 0.8em;*/ } .sitebar h1 { font-size: 3rem; color: var(--dgth-bianco); margin: 0; padding: 0; } .dropdown-content li > a { font-size: 16px; color: #000; display: block; line-height: 22px; padding: 14px 16px; } .stdbar { display: flex; justify-content: space-between; width: 100%; padding: 8px 0 16px 0; } .sitebar-msgbar { display: flex; justify-content: space-between; width: 100%; background-color: var(--dgth-orange-secondary); font-size: 14px; align-items: center; } .sitebar-msgbar .text { padding: 0 0 0 2rem; } .sitebar .action { flex-basis: 18%; } .sitebar-msgbar a { display: flex; justify-content: center; align-items: center; height: 70%; } /* input */ .input-color1 { color: var(--dgth-white); } .input-color2 { color: var(--dgth-orange-primary); } /* app bar */ .appbar { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 2rem; padding-top: 4rem; width: 100%; padding-left: 16px; padding-right: 16px; } .appbar .title { display: flex; font-size: var(--dgth-tit1-res); } .appbar .title .icon { margin-left: 1rem; } .tracklists .head .title { align-items: center; } .tracklists .head { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; } /* Bottoni di selezione */ .selector { display: inline-block; text-align: center; vertical-align: middle; padding: 8px 24px; border: none; border-radius: 10px; background: rgba(63, 52, 48, 0.8); cursor: pointer; font: 0.8rem; color: #ffffff; } .selector:hover { background: rgba(107, 99, 95, 0.8); } .selector:active { background: rgba(107, 99, 95, 1); } .appbar .active { background: rgba(107, 99, 95, 1); } /* tracks page */ .appbar .subact { display: flex; width: 100%; justify-content: center; padding-top: 1rem; } .appbar .head { display: flex; align-items: center; } .tracks .head { width: 100%; justify-content: center; } .work { padding: 16px; } .work .title { font-size: var(--dgth-tit2); color: var(--dgth-bianco); }