First full working version
This commit is contained in:
83 files changed
+397
-1016
No files matched your search
@@ -210,74 +210,9 @@ header#mainHeader h2 { display: inline-block; vertical-align: middle; font-weigh
|
||||
header#mainHeader > a:focus > img,
|
||||
header#mainHeader > a:hover > img { opacity: .7; }
|
||||
|
||||
.summary { display: block;
|
||||
padding: 0 1em;
|
||||
border: 1px solid var(--color-borders);
|
||||
border-radius: .1em; }
|
||||
.accordion { max-height: 0; overflow-y: hidden;
|
||||
transition: max-height 0.2s ease-out, border 0.2s ease-out; }
|
||||
.accordion.active { display: block; padding: 1em 0; border-top: 1px dotted var(--color-borders);
|
||||
border-bottom: 1px dotted var(--color-borders); }
|
||||
|
||||
.threeCol { display: grid; grid-template-columns: 1fr; grid-gap: 2em; }
|
||||
.threeCol > * { max-height: 300px; overflow-y: hidden; padding: 0 1em;
|
||||
transition: max-height 0.2s ease-out, border 0.2s ease-out;
|
||||
cursor: pointer; border: 1px solid var(--color-borders); border-bottom-style: dashed; }
|
||||
.threeCol > .active { border-bottom-style: solid; }
|
||||
.threeCol > :hover { border-color: var(--color-accent-hover); }
|
||||
|
||||
.threeCol a { transition: color .4s; }
|
||||
.threeCol a:hover { color: var(--color-accent-hover); }
|
||||
|
||||
@media screen and (min-width: 1024px) {
|
||||
.threeCol { display: block; overflow-x: auto; white-space: nowrap; }
|
||||
.threeCol > * { display: inline-block; margin-right: 5%; width: 30%; white-space: initial; vertical-align: top; }
|
||||
.threeCol > :last-child { margin-right: 0; }
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Accordions
|
||||
*/
|
||||
/* Style the buttons that are used to open and close the accordion panel */
|
||||
.faq_question { position: relative; display: block; width: 100%;
|
||||
padding: .6rem .8rem .6rem 2.4rem; cursor: pointer;
|
||||
margin: .2em 0;
|
||||
border: 1px solid var(--color-borders); border-radius: .2rem;
|
||||
outline: none; transition: .4s ease-out; }
|
||||
|
||||
.faq_question:before { display: inline-block; content: " > ";
|
||||
position: absolute; left: .8rem; top: 50%; transform: translate(0, -50%);
|
||||
font-size: 1.6rem;
|
||||
color: var(--color-accent-normal);
|
||||
font-weight: bold; }
|
||||
|
||||
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
|
||||
.active, .faq_question:hover { background: var(--color-bg-raised2); }
|
||||
.accordion.faq_answer { padding-left: 18px; padding-right: 18px; white-space: pre-wrap; }
|
||||
|
||||
section h2 { margin-top: 2em; }
|
||||
|
||||
#more { border-top: 1px solid var(--color-borders); margin-top: 2em;}
|
||||
|
||||
.moreTiles { display: block; max-width: 100%; position: relative; }
|
||||
.moreTiles > a { display: inline-block; border: 1px solid var(--color-borders);
|
||||
border-radius: .1rem;
|
||||
font-size: .7em;
|
||||
transition: border .4s; }
|
||||
.moreTiles > a:hover,
|
||||
.moreTiles > a:focus { border-color: var(--color-accent-hover); }
|
||||
.moreTiles > a img { display: block; width: 400px; height: 225px; border-radius: inherit; }
|
||||
.moreTiles .moreTilesMeta { position: absolute; bottom: .5em;
|
||||
max-width: 400px;
|
||||
padding: .5em; background: rgba(0, 0, 0, .8);
|
||||
color: #FFF; }
|
||||
.moreTiles .moreTilesMeta p { margin: 0 0; padding: 0 0; font-weight: bold; }
|
||||
.moreTilesTitle { font-weight: bold; font-size: 1.15em; transition: color .4s; }
|
||||
|
||||
.moreTiles > a:hover .moreTilesTitle,
|
||||
.moreTiles > a:focus .moreTilesTitle { color: var(--color-accent-hover); }
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
|
||||
header nav > div > div { display: none; position: absolute; right: 0; top: 100%; width: 300px;
|
||||
@@ -327,3 +262,5 @@ section h2 { margin-top: 2em; }
|
||||
max-width: 1400px; margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
#resultsP { margin: 1em 0; padding: 1em; background: var(--color-bg-raised); }
|
||||
@@ -1 +1 @@
|
||||
@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:#1976D2;--color-accent-hover:#0D47A1;--color-green:#388E3C;--color-red:#D32F2F}@media(prefers-color-scheme:dark){:root{--color-bg-normal:#000;--color-bg-raised:#273000;--color-bg-raised2:#121212;--color-fg-normal:#FFF;--color-fg-less:#EEE;--color-borders:#37474F;--color-borders-dark:#BDBDBD;--color-accent-normal:#FFC107;--color-accent-hover:#FFA000;--color-green:#81C784;--color-red:#EF5350}}@font-face{font-family:sourceSansPro;src:local('Source-Sans-Pro'),local('Source Sans Pro'),url(../fonts/SourceSansPro-Regular.woff2)format('woff2'),url(../fonts/SourceSansPro-Regular.ttf)format('truetype');font-display:swap}*{box-sizing:border-box;z-index:1}body{margin:0;background:var(--color-bg-normal);color:var(--color-fg-normal);font-family:sourceSansPro,Arial,Helvetica,Times;font-size:1.2em;line-height:1.5em}#contentWrapper{display:grid;grid-template-columns:auto auto;grid-gap:2em 2em}a{text-decoration:none;color:inherit}h1{display:block;width:100%;text-align:center;margin:0 auto .8em;padding:1em 0;font-size:2.5em;line-height:1.2em}h1>*{display:inline-block;vertical-align:middle;color:var(--color-fg-less)}h1 img{margin-right:.5em;border-radius:.1em;opacity:.7;transition:opacity .4s}h1 img:hover{opacity:1}main,#contentWrapper>section,#contentWrapper>div,#contentWrapper>form{grid-row:auto;grid-column:1/span 2;display:block;width:90%;margin:0 auto 3em}div#uploader #uploaderMenu{display:block;padding:.5em 0}#parserList{display:block;margin:0;padding:0}#parserList>li{display:grid;grid-template-columns:15fr 1fr;margin:0;padding:0;border-bottom:1px solid var(--color-borders);cursor:pointer;transition:.2s ease-out}#parserList>li>:first-child:before{content:" > ";margin-right:.5em}#parserList>li>*{display:inline-block;grid-column:auto;grid-row:1;margin:0;padding:.3rem 1em}#parserList>li:hover{background:var(--color-bg-raised);color:var(--color-accent-hover)}main p,section p:not(.threeCol p){white-space:pre-wrap}@media screen and (min-width:768px){#contentWrapper{grid-template-columns:400px 1fr}#contentWrapper>div#uploader{position:relative;min-width:initial}#contentWrapper>main{padding-left:2em;border-left:1px dashed var(--color-fg-normal)}div#uploader #uploaderMenu{position:sticky;top:0}#contentWrapper>div#uploader,#contentWrapper>main{grid-column:auto;width:initial}#contentWrapper>div#uploader{margin-left:5vw}#contentWrapper>main{margin-right:5vw}}form>div{margin-bottom:1em}label{display:block;font-weight:700;margin-bottom:.5em}form>h4{margin-top:0}body>footer{padding:1em 5% 3em;background:var(--color-fg-normal);color:var(--color-bg-normal);border-top:.1em solid var(--color-borders)}body>footer>div{display:block}body>footer>div a,body>footer>div span{display:block;font-weight:700;cursor:pointer;color:inherit;transition:color .4s}body>footer>div a:hover,body>footer>div span:hover{color:var(--color-accent-hover)}.invisible{display:none!important;opacity:0}.buttonLike,select,button,textarea,input{display:block;width:100%;padding:.5em;border:2.5px solid var(--color-bg-raised);background:inherit;color:var(--color-fg-less);font-family:sourceSansPro;font-size:1em;border-radius:.2em;transition:border .2s}select:hover,textarea:hover,input:hover{border-color:#888}button{width:100%;padding:.5em .8em;border:1px solid var(--color-fg-normal);font-weight:700;border-radius:.1em;text-transform:uppercase;transition:color .2s,color .2s}textarea{line-height:1.2em}button:focus,button:hover{color:var(--color-accent-hover);border-color:var(--color-accent-hover)}button.backButton{margin-top:1.5em}button+button{margin-top:.5em}aside>h4:first-child{margin-top:0}select:focus,textarea:focus,input:focus{border-color:var(--color-accent-hover);box-shadow:none}textarea:invalid,input:invalid{box-shadow:none}textarea:invalid:focus,input:invalid:focus{border-right-width:1em}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 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)}#contentWrapper>div.uploader{margin-bottom:0}#contentWrapper>div.uploader>form{border:1px solid var(--color-bg-raised);padding:1em;margin-bottom:0}.loading:before,.loading:after{content:" ";display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:64px;width:64px;margin:0;padding:0;border-radius:50%;border:8px solid var(--color-accent-hover);border-color:var(--color-accent-hover)transparent transparent transparent;z-index:100;animation:rotating 1.2s cubic-bezier(.5,0,.5,1)infinite;animation-delay:-.15s}.loading:after{animation-delay:-.45s}@keyframes rotating{from{transform:rotate(0)}to{transform:rotate(3Line truncated
|
||||
@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:#1976D2;--color-accent-hover:#0D47A1;--color-green:#388E3C;--color-red:#D32F2F}@media(prefers-color-scheme:dark){:root{--color-bg-normal:#000;--color-bg-raised:#273000;--color-bg-raised2:#121212;--color-fg-normal:#FFF;--color-fg-less:#EEE;--color-borders:#37474F;--color-borders-dark:#BDBDBD;--color-accent-normal:#FFC107;--color-accent-hover:#FFA000;--color-green:#81C784;--color-red:#EF5350}}@font-face{font-family:sourceSansPro;src:local('Source-Sans-Pro'),local('Source Sans Pro'),url(../fonts/SourceSansPro-Regular.woff2)format('woff2'),url(../fonts/SourceSansPro-Regular.ttf)format('truetype');font-display:swap}*{box-sizing:border-box;z-index:1}body{margin:0;background:var(--color-bg-normal);color:var(--color-fg-normal);font-family:sourceSansPro,Arial,Helvetica,Times;font-size:1.2em;line-height:1.5em}#contentWrapper{display:grid;grid-template-columns:auto auto;grid-gap:2em 2em}a{text-decoration:none;color:inherit}h1{display:block;width:100%;text-align:center;margin:0 auto .8em;padding:1em 0;font-size:2.5em;line-height:1.2em}h1>*{display:inline-block;vertical-align:middle;color:var(--color-fg-less)}h1 img{margin-right:.5em;border-radius:.1em;opacity:.7;transition:opacity .4s}h1 img:hover{opacity:1}main,#contentWrapper>section,#contentWrapper>div,#contentWrapper>form{grid-row:auto;grid-column:1/span 2;display:block;width:90%;margin:0 auto 3em}div#uploader #uploaderMenu{display:block;padding:.5em 0}#parserList{display:block;margin:0;padding:0}#parserList>li{display:grid;grid-template-columns:15fr 1fr;margin:0;padding:0;border-bottom:1px solid var(--color-borders);cursor:pointer;transition:.2s ease-out}#parserList>li>:first-child:before{content:" > ";margin-right:.5em}#parserList>li>*{display:inline-block;grid-column:auto;grid-row:1;margin:0;padding:.3rem 1em}#parserList>li:hover{background:var(--color-bg-raised);color:var(--color-accent-hover)}main p,section p:not(.threeCol p){white-space:pre-wrap}@media screen and (min-width:768px){#contentWrapper{grid-template-columns:400px 1fr}#contentWrapper>div#uploader{position:relative;min-width:initial}#contentWrapper>main{padding-left:2em;border-left:1px dashed var(--color-fg-normal)}div#uploader #uploaderMenu{position:sticky;top:0}#contentWrapper>div#uploader,#contentWrapper>main{grid-column:auto;width:initial}#contentWrapper>div#uploader{margin-left:5vw}#contentWrapper>main{margin-right:5vw}}form>div{margin-bottom:1em}label{display:block;font-weight:700;margin-bottom:.5em}form>h4{margin-top:0}body>footer{padding:1em 5% 3em;background:var(--color-fg-normal);color:var(--color-bg-normal);border-top:.1em solid var(--color-borders)}body>footer>div{display:block}body>footer>div a,body>footer>div span{display:block;font-weight:700;cursor:pointer;color:inherit;transition:color .4s}body>footer>div a:hover,body>footer>div span:hover{color:var(--color-accent-hover)}.invisible{display:none!important;opacity:0}.buttonLike,select,button,textarea,input{display:block;width:100%;padding:.5em;border:2.5px solid var(--color-bg-raised);background:inherit;color:var(--color-fg-less);font-family:sourceSansPro;font-size:1em;border-radius:.2em;transition:border .2s}select:hover,textarea:hover,input:hover{border-color:#888}button{width:100%;padding:.5em .8em;border:1px solid var(--color-fg-normal);font-weight:700;border-radius:.1em;text-transform:uppercase;transition:color .2s,color .2s}textarea{line-height:1.2em}button:focus,button:hover{color:var(--color-accent-hover);border-color:var(--color-accent-hover)}button.backButton{margin-top:1.5em}button+button{margin-top:.5em}aside>h4:first-child{margin-top:0}select:focus,textarea:focus,input:focus{border-color:var(--color-accent-hover);box-shadow:none}textarea:invalid,input:invalid{box-shadow:none}textarea:invalid:focus,input:invalid:focus{border-right-width:1em}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 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)}#contentWrapper>div.uploader{margin-bottom:0}#contentWrapper>div.uploader>form{border:1px solid var(--color-bg-raised);padding:1em;margin-bottom:0}.loading:before,.loading:after{content:" ";display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);height:64px;width:64px;margin:0;padding:0;border-radius:50%;border:8px solid var(--color-accent-hover);border-color:var(--color-accent-hover)transparent transparent transparent;z-index:100;animation:rotating 1.2s cubic-bezier(.5,0,.5,1)infinite;animation-delay:-.15s}.loading:after{animation-delay:-.45s}@keyframes rotating{from{transform:rotate(0)}to{transform:rotate(3Line truncated
|
||||
Reference in new issue
Block a user