Feat: Decks page.
This commit is contained in:
235
static/dist/css/main.bundle.css
vendored
235
static/dist/css/main.bundle.css
vendored
@@ -38,14 +38,13 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--colour-page-background);
|
||||
color: var(--colour-text);
|
||||
background-color: var(--background-color);
|
||||
color: var(--text-color);
|
||||
font-family: var(--font-family-base);
|
||||
font-family: Arial;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background: linear-gradient(to bottom right, var(--colour-page-background-1), var(--colour-page-background-2)); /* var(--c_purple); */
|
||||
height: 100vh;
|
||||
/* max-height: 100vh;
|
||||
overflow-y: clip; */
|
||||
@@ -53,6 +52,7 @@ body {
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
script, link {
|
||||
@@ -88,7 +88,7 @@ script, link {
|
||||
width: 100%;
|
||||
align-self: center;
|
||||
font-size: 1rem;
|
||||
color: var(--colour-text);
|
||||
color: var(--text-color);
|
||||
}
|
||||
#pageBody > * > * {
|
||||
align-self: center;
|
||||
@@ -104,7 +104,6 @@ script, link {
|
||||
|
||||
/* Add a card effect for articles */
|
||||
.card {
|
||||
background-color: var(--colour-text-background);
|
||||
padding: 1vh 2.5vw;
|
||||
margin: 1vh 1vw;
|
||||
display: flex;
|
||||
@@ -182,7 +181,7 @@ script, link {
|
||||
|
||||
.container-input > input,
|
||||
.container-input > textarea {
|
||||
border: 2px solid var(--colour-accent);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 0.5vh;
|
||||
padding: 1vh 1vw;
|
||||
}
|
||||
@@ -205,10 +204,10 @@ li {
|
||||
|
||||
|
||||
:not(input,textarea,select,button).dirty {
|
||||
background-color: var(--colour-accent);
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
input.dirty, textarea.dirty, select.dirty {
|
||||
border-color: var(--colour-primary);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.is-collapsed {
|
||||
@@ -234,8 +233,8 @@ input.dirty, textarea.dirty, select.dirty {
|
||||
|
||||
.button-primary {
|
||||
background: var(--colour-accent);
|
||||
color: var(--colour-primary);
|
||||
border: 2px solid var(--colour-primary);
|
||||
color: var(--primary-color);
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.button-primary:hover {
|
||||
@@ -245,7 +244,7 @@ input.dirty, textarea.dirty, select.dirty {
|
||||
|
||||
.button-light {
|
||||
background: white;
|
||||
color: var(--colour-primary);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.button-light:hover {
|
||||
@@ -267,7 +266,7 @@ input.dirty, textarea.dirty, select.dirty {
|
||||
|
||||
select {
|
||||
border: 1px solid var(--colour-accent);
|
||||
background-color: var(--colour-page-background-1);
|
||||
background-color: var(--background-color-1);
|
||||
}
|
||||
|
||||
img, video {
|
||||
@@ -321,7 +320,7 @@ h5 {
|
||||
position: fixed;
|
||||
width: 100px;
|
||||
/* height: 50%; */
|
||||
background: var(--colour-page-background);
|
||||
background: var(--background-color);
|
||||
justify-content: right;
|
||||
align-items: right;
|
||||
align-self: right;
|
||||
@@ -386,11 +385,11 @@ h5 {
|
||||
border-bottom-right-radius: 12px;
|
||||
}
|
||||
#overlayHamburger > :hover {
|
||||
color: var(--colour-page-background);
|
||||
background-color: var(--colour-primary);
|
||||
color: var(--background-color);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
#overlayHamburger .container {
|
||||
background-color: var(--colour-page-background);
|
||||
background-color: var(--tcg-accent-purple);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
@@ -406,8 +405,8 @@ h5 {
|
||||
height: fit-content;
|
||||
}
|
||||
#overlayHamburger .container:hover {
|
||||
color: var(--colour-page-background);
|
||||
background-color: var(--colour-primary);
|
||||
color: var(--background-color);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
#overlayHamburger > .container {
|
||||
/*
|
||||
@@ -418,13 +417,13 @@ h5 {
|
||||
#overlayHamburger .container a {
|
||||
width: 100%;
|
||||
padding: 4.5px 0;
|
||||
color: var(--colour-text);
|
||||
color: var(--tcg-text-primary);
|
||||
text-decoration: none;
|
||||
line-height: initial;
|
||||
}
|
||||
#overlayHamburger .container a:hover {
|
||||
color: var(--colour-page-background);
|
||||
background-color: var(--colour-primary);
|
||||
color: var(--background-color);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 400px) {
|
||||
@@ -497,7 +496,7 @@ th.is_collapsed, td.is_collapsed {
|
||||
display: table-cell !important;
|
||||
}
|
||||
td.dirty {
|
||||
background-color: var(--colour-primary);
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
td:not(.dirty) {
|
||||
background-color: transparent;
|
||||
@@ -517,7 +516,7 @@ table button {
|
||||
}
|
||||
|
||||
table button.active {
|
||||
background-color: var(--colour-page-background);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
tr.delete, tr.delete > td {
|
||||
@@ -560,7 +559,7 @@ table div {
|
||||
color: var(--colour-text-link-visited);
|
||||
}
|
||||
.topnav a:hover {
|
||||
background-color: var(--colour-page-background);
|
||||
background-color: var(--background-color);
|
||||
color: var(--colour-text)
|
||||
}
|
||||
.topnav > .container {
|
||||
@@ -678,10 +677,10 @@ table div {
|
||||
#formFilters button {
|
||||
padding: 0.5vh 0.75vh;
|
||||
background-color: var(--colour-accent);
|
||||
color: var(--colour-primary);
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
border-radius: 0.75vh;
|
||||
border: 2px solid var(--colour-primary);
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
#formFilters button.is_collapsed {
|
||||
@@ -725,45 +724,62 @@ form.filter button.save, form.filter button.button-cancel {
|
||||
padding-right: 30vw;
|
||||
}
|
||||
}
|
||||
|
||||
/* In sections */
|
||||
.tcg.footer {
|
||||
display: flex;
|
||||
}
|
||||
.tcg.footer > .container {
|
||||
/* display: flex; */
|
||||
}
|
||||
.footer-content {
|
||||
display: flex;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.footer-section {
|
||||
/* display: flex; */
|
||||
margin: auto auto;
|
||||
}
|
||||
|
||||
|
||||
#formFilters {
|
||||
padding: 0.5vh 1vw;
|
||||
margin-top: 1vh;
|
||||
}
|
||||
|
||||
table.table-main {
|
||||
.table-main {
|
||||
overflow-x: auto;
|
||||
padding: 1vh 1vw;
|
||||
max-width: 88vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
|
||||
padding: 0; /*1vh 1vw;*/
|
||||
max-width: 80vw; /* min(calc(1vh * 80), calc(1vw * 90)); */
|
||||
width: min-content;
|
||||
align-items: normal;
|
||||
justify-content: normal;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
table.table-main * {
|
||||
.table-main * {
|
||||
padding: 0.25vh 0.5vh;
|
||||
}
|
||||
|
||||
table.table-main thead {
|
||||
.table-main thead {
|
||||
max-height: 4vh;
|
||||
overflow-y: visible;
|
||||
background-color: var(--colour-text-background);
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
table.table-main tbody {
|
||||
.table-main tbody {
|
||||
max-height: 75vh;
|
||||
overflow-y: auto;
|
||||
min-width: fit-content;
|
||||
max-width: fit-content;
|
||||
overflow-x: visible;
|
||||
}
|
||||
table.table-main tbody.is_collapsed {
|
||||
.table-main tbody.is_collapsed {
|
||||
display: block;
|
||||
}
|
||||
table.table-main:has(tbody > div) tbody {
|
||||
.table-main:has(tbody > div) tbody {
|
||||
}
|
||||
table.table-main tbody > div {
|
||||
.table-main tbody > div {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
@@ -778,72 +794,72 @@ table.table-main tbody > div {
|
||||
width: 100%; /* min(calc(90vh), calc(70vw)); */
|
||||
}
|
||||
|
||||
table.table-main select,
|
||||
table.table-main input:not([type="checkbox"]),
|
||||
table.table-main textarea,
|
||||
table.table-main div {
|
||||
.table-main select,
|
||||
.table-main input:not([type="checkbox"]),
|
||||
.table-main textarea,
|
||||
.table-main div {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid var(--colour-accent);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0.5vh;
|
||||
text-align: center;
|
||||
background-color: var(--colour-text-background);
|
||||
background-color: var(--background-color);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
table.table-main thead tr th,
|
||||
table.table-main tbody tr td {
|
||||
.table-main thead tr th,
|
||||
.table-main tbody tr td {
|
||||
max-width: 20vh;
|
||||
min-width: 20vh;
|
||||
padding: 0 0.5vh;
|
||||
}
|
||||
table.table-main tbody tr td {
|
||||
.table-main tbody tr td {
|
||||
height: 3vh;
|
||||
/* padding-top: 0.5vh; */
|
||||
}
|
||||
table.table-main thead tr th.notes,
|
||||
table.table-main tbody tr td.notes {
|
||||
.table-main thead tr th.notes,
|
||||
.table-main tbody tr td.notes {
|
||||
max-width: fit-content;
|
||||
}
|
||||
table.table-main tbody tr td:has(.dirty) {
|
||||
background-color: var(--colour-primary);
|
||||
.table-main tbody tr td:has(.dirty) {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
table.table-main tbody tr td:has(.dirty) table tr:not(:has(.dirty)) {
|
||||
.table-main tbody tr td:has(.dirty) table tr:not(:has(.dirty)) {
|
||||
background-color: var(--colour-text-background);
|
||||
}
|
||||
table.table-main tbody tr:not(:last-of-type) td {
|
||||
.table-main tbody tr:not(:last-of-type) td {
|
||||
padding-bottom: 0.25vh;
|
||||
}
|
||||
table.table-main tbody tr td.ddl-preview div {
|
||||
.table-main tbody tr td.ddl-preview div {
|
||||
cursor: pointer;
|
||||
}
|
||||
table.table-main tbody tr td.ddl-preview div,
|
||||
table.table-main tbody tr td.ddl-preview select {
|
||||
.table-main tbody tr td.ddl-preview div,
|
||||
.table-main tbody tr td.ddl-preview select {
|
||||
padding-left: 2vh;
|
||||
padding-right: 2vh;
|
||||
}
|
||||
table.table-main thead tr th.active,
|
||||
table.table-main tbody tr td.active {
|
||||
.table-main thead tr th.active,
|
||||
.table-main tbody tr td.active {
|
||||
max-width: 6vh;
|
||||
min-width: 6vh;
|
||||
}
|
||||
table.table-main thead tr th.active svg.active.add {
|
||||
fill: var(--colour-primary);
|
||||
background-color: var(--colour-accent);
|
||||
border: 2px solid var(--colour-accent);
|
||||
.table-main thead tr th.active svg.active.add {
|
||||
fill: var(--primary-color);
|
||||
background-color: var(--background-color);
|
||||
border: 2px solid var(--border-color);
|
||||
padding: 0;
|
||||
border-radius: 1vh;
|
||||
}
|
||||
table.table-main tbody tr td.active svg.active.add {
|
||||
fill: var(--colour-primary);
|
||||
.table-main tbody tr td.active svg.active.add {
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
table.table-main tbody tr td.active svg.active.delete {
|
||||
fill: var(--colour-error);
|
||||
.table-main tbody tr td.active svg.active.delete {
|
||||
fill: var(--tcg-accent-red);
|
||||
}
|
||||
table.table-main tbody tr td.display_order,
|
||||
table.table-main thead tr th.display_order {
|
||||
.table-main tbody tr td.display_order,
|
||||
.table-main thead tr th.display_order {
|
||||
max-width: 5vh;
|
||||
min-width: 5vh;
|
||||
}
|
||||
@@ -869,13 +885,13 @@ table.table-main thead tr th.display_order {
|
||||
.company-name {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
table.table-main {
|
||||
.table-main {
|
||||
max-height: 61vh;
|
||||
}
|
||||
table.table-main thead {
|
||||
.table-main thead {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
table.table-main tbody {
|
||||
.table-main tbody {
|
||||
max-height: 53vh;
|
||||
}
|
||||
}
|
||||
@@ -883,44 +899,53 @@ table.table-main thead tr th.display_order {
|
||||
|
||||
|
||||
|
||||
/* Default */
|
||||
|
||||
:root {
|
||||
/* Claude dark blue / grey theme */
|
||||
--colour-accent: #C77DFF;
|
||||
--colour-error: red;
|
||||
--colour-error-accent: #fc8181;
|
||||
--colour-error-highlight: #fff5f5;
|
||||
--colour-error-title: #c53030;
|
||||
--colour-page-background: #E0AAFF;
|
||||
--colour-page-background-1: #F5ECFE;
|
||||
--colour-page-background-2: #FAE0E2;
|
||||
--colour-primary: #240046;
|
||||
--colour-secondary: #3C096C;
|
||||
--colour-success: #38a169;
|
||||
--colour-success-highlight: #f0fff4;
|
||||
--colour-success-title: #16a34a;
|
||||
--colour-text: #10002B;
|
||||
--colour-text-background: white;
|
||||
--colour-text-link-unvisited: #0000EE;
|
||||
--colour-text-link-visited: #551A8B;
|
||||
--background-color: #121212;
|
||||
--text-color: #e0e0e0;
|
||||
--primary-color: #bb86fc;
|
||||
--secondary-color: #03dac6;
|
||||
--success-color: #00c853;
|
||||
--danger-color: #cf6679;
|
||||
--warning-color: #ffab00;
|
||||
--info-color: #2196f3;
|
||||
--light-color: #2c2c2c;
|
||||
--dark-color: #1f1f1f;
|
||||
--border-color: #333333;
|
||||
--shadow-color: rgba(255, 255, 255, 0.1);
|
||||
|
||||
/* Header * /
|
||||
--header-bg: #1f1f1f;
|
||||
--header-text: #e0e0e0;
|
||||
|
||||
/* Footer * /
|
||||
--footer-bg: #1f1f1f;
|
||||
--footer-text: #a0a0a0;
|
||||
|
||||
/* Navigation * /
|
||||
--nav-bg: #1f1f1f;
|
||||
--nav-text: #e0e0e0;
|
||||
--nav-hover-bg: #2c2c2c;
|
||||
--nav-hover-text: #bb86fc;
|
||||
|
||||
/* Buttons * /
|
||||
--Button-primary-bg: #bb86fc;
|
||||
--Button-primary-text: #121212;
|
||||
--Button-secondary-bg: #03dac6;
|
||||
--Button-secondary-text: #121212;
|
||||
|
||||
/* Forms * /
|
||||
--input-bg: #2c2c2c;
|
||||
--input-border: #454545;
|
||||
--input-text: #e0e0e0;
|
||||
--input-focus-border: #bb86fc;
|
||||
|
||||
/* Cards * /
|
||||
--card-bg: #1f1f1f;
|
||||
--card-border: #333333;
|
||||
--card-shadow: 0 0.125rem 0.25rem rgba(255, 255, 255, 0.05);
|
||||
*/
|
||||
}
|
||||
|
||||
/*
|
||||
--c_purple_darker: #310055;
|
||||
--c_purple_dark: #4A0A77;
|
||||
--c_purple: #6818A5;
|
||||
--c_purple_light: #CBAFFE;
|
||||
--c_purple_lighter: #F5ECFE;
|
||||
|
||||
--c_blue: #0044FF;
|
||||
--c_blue_pastel: #B8E0FF;
|
||||
--c_blue_light: #73E8FF;
|
||||
--c_blue_dark: #003ADB;
|
||||
/* --c_red: * /
|
||||
--c-red: #FF0000;
|
||||
--c_red_pastel: #FAE0E2;
|
||||
--c_red_lighter: #FAE0E2;
|
||||
}
|
||||
*/
|
||||
|
||||
/*# sourceMappingURL=main.bundle.css.map*/
|
||||
Reference in New Issue
Block a user