953 lines
18 KiB
CSS
953 lines
18 KiB
CSS
|
|
:root {
|
|
--font-family-base: 'Open Sans', Arial, sans-serif;
|
|
/* Declare global variables */
|
|
/*
|
|
--c_purple: #5B29FF;
|
|
--c_purple_pastel: #D1D1FF;
|
|
--c_purple_lighter: #E8E1FF;
|
|
--c_purple_light: #C6BDFF;
|
|
--c_purple_dark: #4700B3;
|
|
*/
|
|
/* purple theme
|
|
- light https://coolors.co/palette/a172fd-a77afe-ac82fe-b691fe-c1a0fe-cbaffe-d6bffe-e0cefe-ebddfe-f5ecfe
|
|
- dark https://coolors.co/palette/310055-3c0663-4a0a77-5a108f-6818a5-8b2fc9-ab51e3-bd68ee-d283ff-dc97ff
|
|
*/
|
|
/*
|
|
--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;
|
|
*/
|
|
}
|
|
|
|
html {
|
|
height: 100vh;
|
|
/* overflow-y: clip; */
|
|
}
|
|
|
|
body {
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
font-family: var(--font-family-base);
|
|
font-family: Arial;
|
|
padding: 0;
|
|
margin: 0;
|
|
border: 0;
|
|
height: 100vh;
|
|
/* max-height: 100vh;
|
|
overflow-y: clip; */
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
script, link {
|
|
display: none !important;
|
|
}
|
|
|
|
/*
|
|
#pageBody {
|
|
/ * height: 69vh !important; * /
|
|
max-height: 79vh;
|
|
padding: 0 5vw;
|
|
margin: 0;
|
|
border: 0;
|
|
align-content: center;
|
|
justify-content: flex-start;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
position: absolute;
|
|
width: 90vw;
|
|
color: var(--colour-text);
|
|
}
|
|
*/
|
|
|
|
.page-body > * {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
align-self: center;
|
|
font-size: 1rem;
|
|
color: var(--text-color);
|
|
}
|
|
#pageBody > * > * {
|
|
align-self: center;
|
|
padding-top: 0.5vh 0.5vw;
|
|
padding-bottom: 0.5vh 0.5vw;
|
|
}
|
|
#pageBody > .card {
|
|
height: fit-content;
|
|
margin: 0.5vh auto;
|
|
}
|
|
|
|
section {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* Add a card effect for articles */
|
|
.card {
|
|
padding: 1vh 2.5vw;
|
|
margin: 1vh 1vw;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
border-radius: 1.5vh;
|
|
position: relative;
|
|
height: fit-content;
|
|
max-width: 80vw;
|
|
}
|
|
|
|
.container {
|
|
flex: 1;
|
|
margin: 0;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
text-align: flex-start;
|
|
/* max-width: 100%; */
|
|
/* min-width: fit-content; */
|
|
}
|
|
|
|
.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin: auto 0;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.container > .card:first-of-type {
|
|
margin-top: none;
|
|
}
|
|
|
|
|
|
/*
|
|
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other *
|
|
@media screen and (max-width: 800px) {
|
|
.leftcolumn, .rightcolumn {
|
|
width: 100%;
|
|
/* padding: 0; *
|
|
}
|
|
}
|
|
|
|
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other *
|
|
@media screen and (max-width: 400px) {
|
|
.topnav a {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
}
|
|
*/
|
|
|
|
.container-input {
|
|
padding: 1vh 1vw;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.container-input > label {
|
|
width: 100%;
|
|
margin-bottom: 1vh;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.container-input > input,
|
|
.container-input > textarea {
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 0.5vh;
|
|
padding: 1vh 1vw;
|
|
}
|
|
|
|
.label-title {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
ul {
|
|
max-width: 90%;
|
|
padding: 5px 0 10px 0;
|
|
width: fit-content;
|
|
margin: auto;
|
|
}
|
|
li {
|
|
text-align: left;
|
|
font-size: 18px;
|
|
}
|
|
|
|
|
|
:not(input,textarea,select,button).dirty {
|
|
background-color: var(--border-color);
|
|
}
|
|
input.dirty, textarea.dirty, select.dirty {
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.is-collapsed {
|
|
display: none;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
padding: 0.5vh 0.75vh;
|
|
border-radius: 0.75vh;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
transition: all 0.3s ease;
|
|
width: fit-content;
|
|
}
|
|
.button:not(.is_collapsed) {
|
|
cursor: pointer;
|
|
}
|
|
.button.is_collapsed {
|
|
display: block;
|
|
opacity: 0;
|
|
}
|
|
|
|
.button-primary {
|
|
background: var(--colour-accent);
|
|
color: var(--primary-color);
|
|
border: 2px solid var(--primary-color);
|
|
}
|
|
|
|
.button-primary:hover {
|
|
background: var(--colour-secondary);
|
|
color: var(--colour-accent);
|
|
}
|
|
|
|
.button-light {
|
|
background: white;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.button-light:hover {
|
|
background: var(--colour-accent);
|
|
}
|
|
|
|
.logo:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.button.icon.active.delete,
|
|
.button.icon.active.add {
|
|
height: 2vh;
|
|
}
|
|
|
|
|
|
|
|
|
|
select {
|
|
border: 1px solid var(--colour-accent);
|
|
background-color: var(--background-color-1);
|
|
}
|
|
|
|
img, video {
|
|
border-radius: 3vh;
|
|
}
|
|
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
h2 {
|
|
font-size: 1.8rem;
|
|
}
|
|
h3 {
|
|
font-size: 1.2rem;
|
|
margin-top: 1vh;
|
|
}
|
|
h4 {
|
|
font-size: 13px;
|
|
margin: 1vh;
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
h5 {
|
|
font-size: 11px;
|
|
margin: 1vh;
|
|
}
|
|
|
|
|
|
.text-center {
|
|
text-align: center;
|
|
}
|
|
.section-title {
|
|
font-size: 1.8rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.section-subtitle {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Overlay modal */
|
|
.overlay {
|
|
/*
|
|
display: none;
|
|
*/
|
|
position: fixed;
|
|
width: 100px;
|
|
/* height: 50%; */
|
|
background: var(--background-color);
|
|
justify-content: right;
|
|
align-items: right;
|
|
align-self: right;
|
|
z-index: 999;
|
|
}
|
|
.is_collapsed {
|
|
display: none;
|
|
}
|
|
|
|
/* Hamburger menu overlay */
|
|
#buttonHamburger {
|
|
cursor: pointer;
|
|
position: fixed;
|
|
right: 1vh;
|
|
min-height: 3.5vh;
|
|
max-height: 3.5vh;
|
|
min-width: 4vh;
|
|
max-width: 4vh;
|
|
z-index: 10;
|
|
padding: 0;
|
|
}
|
|
#buttonHamburger.expanded {
|
|
min-width: 100px;
|
|
max-width: 100px;
|
|
min-height: 5vh;
|
|
max-height: 5vh;
|
|
padding-left: calc(100 * 1px - 5 * 1vh);
|
|
padding-bottom: 1vh;
|
|
}
|
|
#buttonHamburger .icon.hamburger {
|
|
min-height: 2.5vh;
|
|
max-height: 2.5vh;
|
|
min-width: 2.5vh;
|
|
max-width: 2.5vh;
|
|
padding: 0.5vh 0.75vh;
|
|
}
|
|
/*
|
|
#buttonHamburger:hover {
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
*/
|
|
#overlayHamburger {
|
|
top: 7vh;
|
|
right: 1vh;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
max-height: 60vh;
|
|
background-color: var(--colour-accent);
|
|
border: 2px solid var(--border-colour);
|
|
border-radius: 0.75vh;
|
|
width: 100px;
|
|
z-index: 2;
|
|
padding-top: 3.5vh;
|
|
}
|
|
#overlayHamburger:first-child {
|
|
border-top-left-radius: 12px;
|
|
border-top-right-radius: 12px;
|
|
}
|
|
#overlayHamburger:last-child {
|
|
border-bottom-left-radius: 12px;
|
|
border-bottom-right-radius: 12px;
|
|
}
|
|
#overlayHamburger > :hover {
|
|
color: var(--background-color);
|
|
background-color: var(--primary-color);
|
|
}
|
|
#overlayHamburger .container {
|
|
background-color: var(--tcg-accent-purple);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
width: 100%;
|
|
/* color: var(--colour-text); */
|
|
font-weight: bold;
|
|
font-size: 15px;
|
|
/* height: 18px; */
|
|
cursor: pointer;
|
|
padding: 0;
|
|
height: fit-content;
|
|
}
|
|
#overlayHamburger .container:hover {
|
|
color: var(--background-color);
|
|
background-color: var(--primary-color);
|
|
}
|
|
#overlayHamburger > .container {
|
|
/*
|
|
padding-top: 4.5px;
|
|
padding-bottom: 4.5px;
|
|
*/
|
|
}
|
|
#overlayHamburger .container a {
|
|
width: 100%;
|
|
padding: 4.5px 0;
|
|
color: var(--tcg-text-primary);
|
|
text-decoration: none;
|
|
line-height: initial;
|
|
}
|
|
#overlayHamburger .container a:hover {
|
|
color: var(--background-color);
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
@media screen and (max-width: 400px) {
|
|
#buttonHamburger {
|
|
min-height: 5vh;
|
|
max-height: 5vh;
|
|
min-width: 5.5vh;
|
|
max-width: 5.5vh;
|
|
}
|
|
#buttonHamburger .icon.hamburger {
|
|
min-height: 4vh;
|
|
max-height: 4vh;
|
|
min-width: 4vh;
|
|
max-width: 4vh;
|
|
}
|
|
#overlayHamburger {
|
|
padding-top: 5vh;
|
|
}
|
|
}
|
|
|
|
/* Confirm overlay */
|
|
#overlayConfirm {
|
|
position: absolute;
|
|
left: 25vw;
|
|
width: 50vw;
|
|
height: 50vh;
|
|
}
|
|
|
|
#overlayConfirm .row > * {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#overlayConfirm .row .button.button-cancel {
|
|
margin-right: 0.5vh;
|
|
}
|
|
#overlayConfirm .row .button.submit {
|
|
margin-left: 0.5vh;
|
|
}
|
|
|
|
|
|
|
|
|
|
#formFilters .container {
|
|
max-width: fit-content;
|
|
}
|
|
|
|
thead, tbody {
|
|
padding-top: 0px !important;
|
|
padding-bottom: 0px !important;
|
|
}
|
|
|
|
th {
|
|
background-color: transparent;
|
|
}
|
|
td {
|
|
font-size: min(16px, calc(1vh * 3));
|
|
}
|
|
|
|
th, td {
|
|
min-width: fit-content;
|
|
}
|
|
tr:not(:last-child) > td {
|
|
border-bottom: 1px dashed var(--border-colour);
|
|
}
|
|
td > table > tbody > tr > td {
|
|
border: none !important;
|
|
}
|
|
th.is_collapsed, td.is_collapsed {
|
|
display: table-cell !important;
|
|
}
|
|
td.dirty {
|
|
background-color: var(--primary-color);
|
|
}
|
|
td:not(.dirty) {
|
|
background-color: transparent;
|
|
}
|
|
|
|
tr {
|
|
min-height: 1px;
|
|
border-bottom: 1px solid;
|
|
border-top: 1px solid;
|
|
border-color: var(--border-colour);
|
|
background-color: transparent;
|
|
}
|
|
|
|
table button {
|
|
margin: 0.25vh;
|
|
padding: 0.5vh 1vh;
|
|
}
|
|
|
|
table button.active {
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
tr.delete, tr.delete > td {
|
|
background-color: var(--colour-error);
|
|
}
|
|
|
|
table div {
|
|
align-content: center;
|
|
}
|
|
|
|
|
|
/* Navigation */
|
|
.topnav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex: 1;
|
|
flex-direction: row;
|
|
font-weight: bold;
|
|
font-size: 1vh;
|
|
max-height: 7vh;
|
|
height: 7vh;
|
|
align-items: flex-start;
|
|
background: var(--colour-text-background);
|
|
justify-content: center; /* space-between */
|
|
align-items: center;
|
|
}
|
|
.topnav a,
|
|
.topnav label,
|
|
.topnav p,
|
|
.topnav h1 {
|
|
float: left;
|
|
display: flex;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
width: 100%;
|
|
max-height: 7vh;
|
|
justify-content: center;
|
|
}
|
|
.topnav h1 {
|
|
color: var(--colour-text-link-visited);
|
|
}
|
|
.topnav a:hover {
|
|
background-color: var(--background-color);
|
|
color: var(--colour-text)
|
|
}
|
|
.topnav > .container {
|
|
width: 30vw;
|
|
min-width: 30vw;
|
|
max-width: 30vw;
|
|
height: 100%;
|
|
align-items: center;
|
|
align-self: center;
|
|
display: flex;
|
|
}
|
|
.topnav .container.logo {
|
|
cursor: pointer;
|
|
}
|
|
.topnav .container .logo {
|
|
/* min-width: 35vh; */
|
|
max-width: 30vw;
|
|
/* width: 30vw; */
|
|
/* min-height: 6vh; */
|
|
max-height: 6vh;
|
|
margin: 0.5vh;
|
|
margin-right: auto;
|
|
}
|
|
.topnav .container.company-name {
|
|
min-width: 30vw;
|
|
max-width: 30vw;
|
|
}
|
|
.company-name {
|
|
font-size: 1.6rem;
|
|
}
|
|
.nav-links {
|
|
display: flex;
|
|
gap: 0 2rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
max-width: calc(1vw * 100 - 1vh * 35);
|
|
align-items: center;
|
|
margin: 0 0.5vw;
|
|
}
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: var(--colour-text);
|
|
font-weight: normal;
|
|
align-content: center;
|
|
font-size: 1.2rem;
|
|
width: fit-content;
|
|
padding: 0.5vh 0.5vw;
|
|
border-radius: 0.5vh;
|
|
}
|
|
.nav-links a.button {
|
|
color: var(--colour-text-background);
|
|
margin: 0 auto;
|
|
font-weight: bold;
|
|
}
|
|
|
|
|
|
/* Page Filters */
|
|
#formFilters {
|
|
width: fit-content;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
}
|
|
#formFilters * {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#formFilters .container {
|
|
}
|
|
#formFilters .container-input {
|
|
max-width: fit-content;
|
|
padding: 0 0.5vh;
|
|
}
|
|
#formFilters .container-input:has(.dirty) {
|
|
background-color: var(--colour-accent);
|
|
}
|
|
|
|
#formFilters .container-input input {
|
|
width: 10vh;
|
|
max-width: 10vh;
|
|
height: 20px;
|
|
}
|
|
/*
|
|
#formFilters .container-input input {
|
|
height: 1.7vh;
|
|
}
|
|
#formFilters .container-input select {
|
|
height: 2vh;
|
|
}
|
|
*/
|
|
|
|
#formFilters .container-input.filter.active_only {
|
|
width: 8vh;
|
|
}
|
|
#formFilters .container-input.filter.active_only input {
|
|
display: none;
|
|
}
|
|
#formFilters .container-input.filter.active_only svg.active_only {
|
|
height: 25px;
|
|
fill: var(--colour-text-background);
|
|
background-color: var(--colour-accent);
|
|
/* border: 1px solid var(--colour-accent);
|
|
border-radius: 0.5vh; */
|
|
width: 25px;
|
|
}
|
|
#formFilters .container-input.filter.active_only svg.active_only.is_checked {
|
|
fill: var(--colour-accent);
|
|
background-color: var(--colour-text-background);
|
|
}
|
|
#formFilters .container-input.filter.is_not_empty {
|
|
width: 12vh;
|
|
}
|
|
|
|
/*
|
|
#formFilters button {
|
|
padding: 0.5vh 0.75vh;
|
|
background-color: var(--colour-accent);
|
|
color: var(--primary-color);
|
|
font-weight: bold;
|
|
border-radius: 0.75vh;
|
|
border: 2px solid var(--primary-color);
|
|
}
|
|
|
|
#formFilters button.is_collapsed {
|
|
display: block;
|
|
opacity: 0;
|
|
}
|
|
*/
|
|
|
|
form.filter button.save, form.filter button.button-cancel {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
form.filter button.save, form.filter button.button-cancel {
|
|
margin-top: 0;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
/*
|
|
@media screen and (max-width: 400px) {
|
|
.topnav h1 {
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
*/
|
|
|
|
@media screen and (max-width: 980px) {
|
|
/*
|
|
.hero h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
*/
|
|
.nav-links,
|
|
.nav-links.tcg {
|
|
display: none;
|
|
}
|
|
.topnav {
|
|
justify-content: flex-start;
|
|
align-items: start;
|
|
}
|
|
.topnav.tcg {
|
|
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-main {
|
|
overflow-x: auto;
|
|
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-main * {
|
|
padding: 0.25vh 0.5vh;
|
|
}
|
|
|
|
.table-main thead {
|
|
max-height: 4vh;
|
|
overflow-y: visible;
|
|
background-color: var(--background-color);
|
|
}
|
|
|
|
.table-main tbody {
|
|
max-height: 75vh;
|
|
overflow-y: auto;
|
|
min-width: fit-content;
|
|
max-width: fit-content;
|
|
overflow-x: visible;
|
|
}
|
|
.table-main tbody.is_collapsed {
|
|
display: block;
|
|
}
|
|
.table-main:has(tbody > div) tbody {
|
|
}
|
|
.table-main tbody > div {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
text-align: center;
|
|
justify-content: center;
|
|
justify-items: center;
|
|
justify-self: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
align-self: center;
|
|
position: relative;
|
|
display: block;
|
|
width: 100%; /* min(calc(90vh), calc(70vw)); */
|
|
}
|
|
|
|
.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(--border-color);
|
|
border-radius: 0.5vh;
|
|
text-align: center;
|
|
background-color: var(--background-color);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.table-main thead tr th,
|
|
.table-main tbody tr td {
|
|
max-width: 20vh;
|
|
min-width: 20vh;
|
|
padding: 0 0.5vh;
|
|
}
|
|
.table-main tbody tr td {
|
|
height: 3vh;
|
|
/* padding-top: 0.5vh; */
|
|
}
|
|
.table-main thead tr th.notes,
|
|
.table-main tbody tr td.notes {
|
|
max-width: fit-content;
|
|
}
|
|
.table-main tbody tr td:has(.dirty) {
|
|
background-color: var(--primary-color);
|
|
}
|
|
.table-main tbody tr td:has(.dirty) table tr:not(:has(.dirty)) {
|
|
background-color: var(--colour-text-background);
|
|
}
|
|
.table-main tbody tr:not(:last-of-type) td {
|
|
padding-bottom: 0.25vh;
|
|
}
|
|
.table-main tbody tr td.ddl-preview div {
|
|
cursor: pointer;
|
|
}
|
|
.table-main tbody tr td.ddl-preview div,
|
|
.table-main tbody tr td.ddl-preview select {
|
|
padding-left: 2vh;
|
|
padding-right: 2vh;
|
|
}
|
|
.table-main thead tr th.active,
|
|
.table-main tbody tr td.active {
|
|
max-width: 6vh;
|
|
min-width: 6vh;
|
|
}
|
|
.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-main tbody tr td.active svg.active.add {
|
|
fill: var(--primary-color);
|
|
}
|
|
.table-main tbody tr td.active svg.active.delete {
|
|
fill: var(--tcg-accent-red);
|
|
}
|
|
.table-main tbody tr td.display_order,
|
|
.table-main thead tr th.display_order {
|
|
max-width: 5vh;
|
|
min-width: 5vh;
|
|
}
|
|
|
|
#container-template-elements {
|
|
display: none;
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 850px) {
|
|
}
|
|
@media screen and (max-width: 400px) {
|
|
#formFilters input[type="text"],
|
|
#formFilters select {
|
|
width: 15vh;
|
|
/* height: 3vh; */
|
|
}
|
|
.topnav .container.company-name {
|
|
margin: 0 auto;
|
|
min-width: 40vw;
|
|
max-width: 64vw;
|
|
}
|
|
.company-name {
|
|
font-size: 1.2rem;
|
|
}
|
|
.table-main {
|
|
max-height: 61vh;
|
|
}
|
|
.table-main thead {
|
|
font-size: 0.8rem;
|
|
}
|
|
.table-main tbody {
|
|
max-height: 53vh;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
:root {
|
|
--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);
|
|
*/
|
|
}
|
|
|
|
|
|
/*# sourceMappingURL=main.bundle.css.map*/ |