museum-digital/csvxml
35
0
Fork 0
Code Issues 3 Pull Requests Releases Activity

Finish full JS rewrite (in index_new.php fr now)

Browse Source 
See #14
This commit is contained in:
Joshua Ramon Enslin
2022-11-06 23:23:02 +01:00
parent 77aeebd90a
commit a141b23608
5 changed files with 397 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/assets/css/csvxml.css
View File

@ -1,4 +1,17 @@
@import 'editMenu.css';
@import 'dialogue.css';
:root {
--color-bg-normal: #FFF;
--color-bg-raised: #EEE;
--color-bg-raised2: #FAFAFA;
--color-fg-normal: #000;
--color-fg-less: #212121;
--color-borders: #D6D6D6;
--color-borders-dark: #646464;
--color-accent-normal: #FFCCBC;
--color-accent-hover: #CB9B8C;
}
/* ==============
| Load fonts
@ -18,16 +31,17 @@
* { box-sizing: border-box; z-index: 1; }
body { margin: 2em; background: #FFF;
body { margin: 2em; background: var(--color-bg-normal);
font-family: sourceSansPro, Arial, Helvetica, Times; font-size: 1.2em; line-height: 1.5em; }
a { text-decoration: none; color: inherit; }
h1 { display: block; max-width: 600px; margin: 0 auto 1.5em auto; }
h1 > * { display: inline-block; vertical-align: middle; color: #212121; }
h1 > * { display: inline-block; vertical-align: middle; color: var(--color-fg-less); }
h1 img { height: 2em; margin-right: .2em; border-radius: .1em; opacity: .7; transition: opacity .4s; }
h1 img:hover { opacity: 1; }
main,
body > div,
body > form { display: block; max-width: 90vw; margin: 0 auto 3em auto; padding-bottom: 3em; }
@ -40,8 +54,8 @@ label { display: block; font-weight: bold; margin-bottom: .5em; }
select,
button,
textarea,
input { display: block; width: 100%; padding: .5em .5em; border: 2.5px solid #EEE;
background: inherit; color: #424242; font-family: roboto; font-size: 1em;
input { display: block; width: 100%; padding: .5em .5em; border: 2.5px solid var(--color-bg-raised);
background: inherit; color: var(--color-fg-less); font-family: roboto; font-size: 1em;
border-radius: .2em; transition: border .2s; }
.buttonLike { display: inline-block; text-align: center; }
@ -49,7 +63,7 @@ input[type="submit"],
button { padding: .5em .8em; }
.buttonLike,
input[type="submit"],
button { background: #FFCCBC; color: #424242; border: none; font-weight: bold; text-transform: uppercase; transition: background .2s, color .2s; }
button { background: var(--color-accent-normal); color: var(--color-fg-less); border: none; font-weight: bold; text-transform: uppercase; transition: background .2s, color .2s; }
textarea { line-height: 1.2em; }
select:hover,
@ -61,7 +75,7 @@ input[type="submit"]:focus,
button:focus,
.buttonLike:hover,
input[type="submit"]:hover,
button:hover { background: #CB9B8C; color: #000; }
button:hover { background: var(--color-accent-hover); color: #000; }
aside .buttonLike + .buttonLike,
aside button + button { margin-top: .5em; }
@ -69,7 +83,7 @@ aside > h4:first-child { margin-top: 0; }
select:focus,
textarea:focus,
input:focus { border-color: #CB9B8C; box-shadow: none; }
input:focus { border-color: var(--color-accent-hover); box-shadow: none; }
textarea:invalid,
input:invalid { box-shadow: none; }
@ -80,29 +94,29 @@ textarea { min-height: 30vh; }
table { width: 100%; max-height: 60vh; margin: 2em 0; border-collapse: collapse; overflow: auto; }
th { padding: .3em .5em; text-align: left; border-bottom: 2px solid #424242; }
tbody > tr:nth-child(2n + 1) { background: #F2F2F2; }
td { padding: .3em .5em; border-bottom: 1px solid #D6D6D6; }
th { padding: .3em .5em; text-align: left; border-bottom: 2px solid var(--color-fg-less); }
tbody > tr:nth-child(2n + 1) { background: var(--color-bg-raised2); }
td { padding: .3em .5em; border-bottom: 1px solid var(--color-borders); }
body > div.uploader { background: #F2F2F2; border: 2px solid #EEE; padding: 1em 1em; }
body > div.uploader { background: var(--color-bg-raised2); border: 2px solid var(--color-bg-raised); padding: 1em 1em; }
ul.fieldList { display: block; margin: .5em 0; padding: 0 0; list-style: none; }
ul.fieldList > li { display: inline-block; padding: .3em; margin: .1em; border: 1px solid #D6D6D6; background: #FAFAFA; cursor: pointer; transition: background .4s, border .4s, box-shadow .4s;; }
ul.fieldList > li:hover { background: #FFF; border-color: #212121; }
ul.fieldList > li { display: inline-block; padding: .3em; margin: .1em; border: 1px solid var(--color-borders); background: var(--color-bg-raised2); cursor: pointer; transition: background .4s, border .4s, box-shadow .4s;; }
ul.fieldList > li:hover { background: var(--color-bg-normal); border-color: var(--color-fg-less); }
ul.fieldList > li.requiredField:before { display: inline-block; content: " \002612 "; margin-right: .5em; }
ul.fieldList > li.humanTLToggled { border-color: #CB9B8C; background: #CB9B8C; box-shadow: 0 8px 6px -6px black; }
ul.fieldList > li.humanTLToggled { border-color: var(--color-accent-hover); background: var(--color-accent-hover); box-shadow: 0 8px 6px -6px black; }
.options > a.buttonLike { display: inline-block; width: auto;
margin: .15em 0; padding: .4em .5em;
text-transform: inherit; cursor: pointer;
background: initial; border: 2px solid #D6D6D6;
background: initial; border: 2px solid var(--color-borders);
opacity: 1;
transition: background .4s, opacity .4s; }
.options > a.buttonLike:hover { background: #D6D6D6; }
.options > a.buttonLike:hover { background: var(--color-borders); }
.actionList { margin: 1em 0 1em 1em; padding: .5em 0; }
.actionList > li a { display: inline-block; padding: .3em; border-radius: .3em; transition: background .4s; }
.actionList > li a:hover { background: #CB9B8C; }
.actionList > li a:hover { background: var(--color-accent-hover); }
/* =============
| Dark mode

40
public/assets/css/dialogue.css Normal file
View File

@ -0,0 +1,40 @@
/* ========
| Reference overlay
|= ======== */
#dialogueArea { display: block; position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
max-width: initial; max-height: initial;
background: rgba(0,0,0,.7); backdrop-filter: blur(3px);
z-index: 10000; }
#dialogue { display: block; position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%); min-width: 60vw; min-height: 2em;
max-width: 90vw; max-height: 90vh; overflow-y: auto;
padding: 1.5em 1em;
background: var(--color-bg-normal); border-radius: .3em;
box-shadow: 2px 2px 4px var(--color-fg-less), -2px -2px 4px var(--color-fg-less); }
#dialogue h3 { margin-top: 0; padding-top: 0; text-transform: initial; color: var(--color-fg-less); }
#confirmButtons { text-align: right; }
#dialogue .buttonLike { margin: .5em 0 .2em .5em; background: transparent; transition: background .4s, color .4s; }
#dialogue .buttonLike:hover { background: var(--color-borders-dark); color: var(--color-bg-normal); }
#dialogue input[type="text"],
#dialogue textarea { padding: .5em; border-radius: .1em; border: 2px solid var(--color-borders); transition: border .4s; }
#dialogue input[type="text"]:hover,
#dialogue textarea:hover { border-color: var(--color-fg-normal); }
#dialogue button { padding: .6em .8em; font-size: .8em; background: var(--color-bg-normal); border: 1px solid var(--color-borders);
transition: .4s; }
#dialogue button:focus,
#dialogue button:hover { background: var(--color-fg-less); color: var(--color-bg-normal); border-color: var(--color-fg-less); }
#dialogue form > * { display: block; width: 100%; }
#dialogue form label { font-weight: bold; color: var(--color-fg-less); }
#dialogueClose { float: right; display: inline-block; padding: 0 .6em .2em .6em; background: var(--color-bg-raised);
border-radius: 100%; cursor: pointer; transition: .4s; }
#dialogueClose:hover { background: var(--color-fg-less); color: var(--color-bg-normal); }
#dialogue ul { margin-left: 1em; padding-left: 0; transition: .4s; }
#dialogue ul.minimized { height: 20px; background-color: var(--color-accent-normal);
background-size: 20px 20px;
background-image: repeating-linear-gradient(to right, var(--color-fg-normal), var(--color-fg-normal) 1px, var(--color-accent-normal) 1px, var(--color-accent-normal)); }
#dialogue ul.minimized > * { display: none; }

12
public/assets/css/editMenu.css
View File

@ -3,11 +3,11 @@
|= ======== */
.newToolTip { position: fixed; display: none !important; min-width: 300px !important; max-width: 600px;
background: #212121 !important; color: #FFF; text-align: left; font-size: .95rem;
border-radius: .2em; box-shadow: 1px 1px 4px #646464; z-index: 3000; white-space: initial !important; }
background: var(--color-fg-less) !important; color: var(--color-bg-normal); text-align: left; font-size: .95rem;
border-radius: .2em; box-shadow: 1px 1px 4px var(--color-borders-dark); z-index: 3000; white-space: initial !important; }
#newToolTipMain:before { content: attr(data-title); display: block; padding: .5em 1em; max-width: 598px;
background: #212121; color: #BDBDBD; font-weight: bold;
box-shadow: 0px 4px 2px -2px #646464; }
background: var(--color-fg-less); color: var(--color-bg-raised2); font-weight: bold;
box-shadow: 0px 4px 2px -2px var(--color-borders-dark); }
#newToolTipMain > * { padding: .5rem 1rem !important; }
#newToolTipMain > table td { padding: .5rem 1em; vertical-align: top; }
@media screen and (min-width:75em) {
@ -21,10 +21,6 @@ dl#newToolTipMain dd { margin: -1em 0 0 0; padding: 0 0 0 0; }
.newToolTipMain p + .toolTipHierarchy { padding-bottom: 0 !important; }
#newToolTipMain > h5 { padding: 0 1rem !important; margin: -.5rem 0 !important; }
.toolTipHierarchy { margin: 0; padding: 0; border-top: 1px solid #424242; list-style: none; }
.toolTipHierarchy ul { margin: 0; padding: .2em 0 .2em 0; list-style: none; }
.toolTipHierarchy ul ul { padding: .1em 0 .1em 1.2em; }
.toolTipHierarchy ul > li:before { content: " \002514 "; display: inline-block; padding-right: .4em; }
.copyToDialogue { cursor: pointer; }