phc/storage
6
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Aggiunte tante cose

Browse Source
This commit is contained in:
aziis98
2022-07-04 03:49:29 +02:00
parent 658a40c8bb
commit 8823418daa
20 changed files with 1354 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
_frontend/styles/main.scss
+471 -52
View File
@@ -5,18 +5,21 @@
}
:root {
--bg-100: #ffffff;
--bg-500: #f0f0f0;
--bg-600: #e0e0e0;
--bg-light-100: #ffffff;
--bg-light-500: #f0f0f0;
--bg-light-600: #e0e0e0;
--bg-light-700: #d0d0d0;
--bg-2-400: #666;
--bg-2-500: #38383d;
--bg-dark-400: #55555f;
--bg-dark-500: #38383d;
--fg-400: #3d3d3d;
--fg-500: #333;
--fg-light-400: #3d3d3d;
--fg-light-500: #333;
--fg-2-500: #ddd;
--fg-dark-300: #505050;
--fg-dark-500: #ddd;
--ft-mono: 'JetBrains Mono', monospace;
--ft-sans: 'Open Sans', sans-serif;
--ft-sans-wt-light: 300;
@@ -33,8 +36,8 @@ body {
font-family: var(--ft-sans);
font-size: 16px;
color: var(--fg-500);
background: var(--bg-500);
color: var(--fg-light-500);
background: var(--bg-light-500);
}
//
@@ -43,48 +46,162 @@ body {
main {
display: flex;
z-index: 0;
.sidebar {
transition: all 150ms ease-in-out;
&.collapsed {
width: 0;
min-width: 0;
}
user-select: none;
display: flex;
flex-direction: column;
padding: 1rem;
// padding: 0.5rem 1rem 0 0.5rem;
min-height: 100vh;
min-width: 15rem;
color: var(--fg-2-500);
background: var(--bg-2-500);
min-width: 13rem;
width: 25vw;
max-width: 25rem;
overflow-x: hidden;
color: var(--fg-dark-500);
background: var(--bg-dark-500);
font-size: 18px;
z-index: -1;
z-index: 1;
flex-shrink: 0;
.logo {
font-size: 24px;
font-weight: var(--ft-sans-wt-light);
margin: 1rem;
}
& > .items {
margin: 0.5rem;
& > .item > .label {
min-width: 170px;
}
}
.items {
display: flex;
flex-direction: column;
gap: 0.25rem;
& > .item > .label {
font-weight: var(--ft-sans-wt-bold);
}
hr {
margin: 0;
padding: 0;
width: 100%;
height: 1px;
border: none;
background: var(--fg-dark-300);
}
.item {
&.dropdown {
cursor: pointer;
& .item > .label {
font-size: 16px;
margin-left: 1.75rem;
}
}
& > .children {
padding-top: 0.25rem;
display: flex;
flex-direction: column;
&.collapsed {
display: none;
}
}
}
.label {
padding: 0.5rem;
border-radius: 0.25rem;
display: flex;
min-width: 10rem;
.icon {
display: flex;
align-items: center;
justify-content: center;
}
&:hover {
background: var(--bg-dark-400);
}
}
}
}
.main-content {
width: 100%;
background: var(--bg-500);
display: flex;
flex-direction: column;
align-items: center;
flex-grow: 1;
height: 100vh;
overflow-y: auto;
background: var(--bg-light-500);
box-shadow: 0 0 2rem 0 #00000022;
z-index: 2;
header {
width: 100%;
min-height: 3rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
padding: 0.5rem 1rem 0.5rem 0.5rem;
gap: 0.75rem;
background: var(--bg-100);
border-bottom: 1px solid var(--bg-600);
background: var(--bg-light-100);
border-bottom: 1px solid var(--bg-light-600);
color: var(--fg-400);
color: var(--fg-light-400);
vertical-align: middle;
.logo {
font-size: 32px;
font-weight: var(--ft-sans-wt-bold);
.group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.label {
font-size: 18px;
font-weight: var(--ft-sans-wt-light);
}
.machine {
@@ -93,45 +210,228 @@ main {
}
}
.widgets {
& > .content {
display: flex;
justify-content: center;
align-items: start;
flex-direction: column;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
flex-grow: 1;
max-width: 120ch;
.widget {
background: var(--bg-100);
border: 1px solid var(--bg-600);
padding: 1rem;
min-height: 10rem;
max-width: 50ch;
.title {
font-weight: var(--ft-sans-wt-bold);
code {
font-weight: normal;
}
}
&.todo {
width: 300px;
height: 200px;
}
}
padding: 1rem 1rem 0 1rem;
}
}
}
//
// Utilities
//
@keyframes toast-fade-in {
from {
opacity: 0;
}
to {
opacity: 0.95;
}
}
@keyframes toast-fade-out {
from {
opacity: 0.95;
}
to {
opacity: 0;
}
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
flex-grow: 1;
gap: 0.5rem;
.row-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
}
//
// Components
//
.panel {
background: var(--bg-light-100);
border: 1px solid var(--bg-light-600);
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
& .title {
font-weight: var(--ft-sans-wt-bold);
}
}
.table {
& > .header {
display: flex;
justify-content: space-between;
}
& > .cells {
display: grid;
align-items: center;
gap: 0.25rem 0.5rem;
.header {
display: flex;
align-items: center;
min-height: 2.25rem;
font-weight: var(--ft-sans-wt-bold);
}
& > div {
min-width: 4rem;
}
}
}
form {
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: center;
@extend .panel;
label {
justify-self: end;
}
.fill {
grid-column: span 2;
}
.title {
font-weight: var(--ft-sans-wt-bold);
}
.center {
justify-self: center;
}
}
//
// Controls
//
a,
a:hover,
a:visited {
text-decoration: none;
color: inherit;
}
button,
.button {
border: none;
background: none;
font-family: var(--ft-sans);
font-size: 16px;
color: var(--fg-light-500);
text-decoration: none;
cursor: pointer;
--size: 2.25rem;
height: var(--size);
padding: 0 0.75rem;
border-radius: 2px;
display: flex;
align-items: center;
&.icon {
display: flex;
justify-content: center;
width: var(--size);
}
&.flat {
&:hover {
background: #00000018;
}
}
&:not(.flat) {
border: 1px solid var(--bg-light-700);
background: var(--bg-light-600);
&:hover {
background: var(--bg-light-700);
}
}
}
input[type='text'],
input[type='password'],
textarea {
border: 1px solid var(--bg-light-700);
background: var(--bg-light-100);
font-family: var(--ft-sans);
font-size: 16px;
color: var(--fg-light-500);
border-radius: 2px;
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
&.mono {
font-size: 90%;
font-family: var(--ft-mono);
}
}
textarea {
padding: 0.5rem;
}
input[type='text'],
input[type='password'] {
padding: 0 0.5rem;
--size: 2.25rem;
height: var(--size);
display: flex;
align-items: center;
}
//
// Typography
//
.material-symbols-outlined {
font-size: 22px;
}
b {
font-weight: var(--ft-sans-wt-bold);
}
@@ -144,6 +444,10 @@ p {
}
}
code {
font-size: 95%;
}
$base-font-size: 16px;
$heading-scale: 1.33;
@@ -169,3 +473,118 @@ $heading-scale: 1.33;
line-height: 1.5;
}
}
//
// Routes
//
.route-index {
& > .content {
width: 100%;
max-width: 1300px;
}
.widgets {
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
width: 100%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
justify-content: center;
gap: 1rem;
.widget {
@extend .panel;
min-height: 10rem;
&.pie {
grid-row: span 2;
& > .content {
place-content: center;
}
}
& > .content {
flex-grow: 1;
display: grid;
& > canvas {
min-width: 250px;
min-height: 250px;
width: 100%;
height: 100%;
}
}
}
}
}
.route-api-keys {
.table {
min-width: 30rem;
.name {
button {
font-family: var(--ft-mono);
}
}
.options {
display: flex;
justify-content: end;
gap: 0.5rem;
.delete {
color: #e62929;
&:hover {
background: #e629291d;
}
}
}
}
}
.toasts {
position: absolute;
z-index: 10;
left: 50%;
transform: translateX(-50%);
bottom: 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
transition: all 150ms linear;
font-size: 15px;
.toast {
background: #38383d;
color: var(--fg-dark-500);
padding: 0.5rem 1rem;
border-radius: 0.5rem;
opacity: 0.95;
animation: toast-fade-in 250ms ease-out;
transition: opacity 250ms ease-in;
&.removed {
opacity: 0;
}
}
}