diff options
| author | Adam Harvey <adam@ahprojects.com> | 2019-06-05 10:44:12 -0500 |
|---|---|---|
| committer | Adam Harvey <adam@ahprojects.com> | 2019-06-05 10:44:12 -0500 |
| commit | b3ed0f95eb94a4e7cb5e137bb8196db8c36aa50d (patch) | |
| tree | 8eb5ce503f805bbd58c4565cd845ac196b1a30dd /site/public/assets/css | |
| parent | 7919ecc1a760f611efbe1283096482a8ec99efef (diff) | |
fix?
Diffstat (limited to 'site/public/assets/css')
| -rw-r--r-- | site/public/assets/css/applets.css | 246 | ||||
| -rw-r--r-- | site/public/assets/css/css.css | 1270 | ||||
| -rw-r--r-- | site/public/assets/css/fonts.css | 41 | ||||
| -rw-r--r-- | site/public/assets/css/leaflet.css | 635 | ||||
| -rw-r--r-- | site/public/assets/css/mobile.css | 172 | ||||
| -rw-r--r-- | site/public/assets/css/splash.css | 134 | ||||
| -rwxr-xr-x | site/public/assets/css/tabulator.css | 759 |
7 files changed, 3257 insertions, 0 deletions
diff --git a/site/public/assets/css/applets.css b/site/public/assets/css/applets.css new file mode 100644 index 00000000..ef9f09e2 --- /dev/null +++ b/site/public/assets/css/applets.css @@ -0,0 +1,246 @@ +/* applets */ + +.applet_container { + min-height: 340px; + clear: left; + margin: 20px auto 40px auto; +} +.applet_container.autosize { + min-height: 0; +} +.applet { + margin-bottom: 60px; + transition: opacity 0.2s cubic-bezier(0,0,1,1); + opacity: 0; +} +.applet.map { + width: 100vw; + height: 50vh; +} +.applet.loaded { + opacity: 1; +} + +.row { + display: flex; + flex-direction: row; + justify-content: flex-start; +} +.q { + width: 100%; + padding: 8px 12px; + font-size: 13pt; + color:#333; +} +.timing { + font-size: 9pt; + padding-top: 10px; +} + +/* search results */ + +.name_search, .face_search { + box-shadow: inset 0 0 40px #000; + background: #111; + padding: 20px 0; + /*background: black;*/ + width: 100%; +} +.name_search { + margin-top: 0px; + margin-bottom: 20px; +} +.face_search .applet { + max-width: 640px; + margin: 0 auto; +} +.name_search .applet { + max-width: 640px; + margin: 0 auto; +} +.results { + margin-top: 10px; + padding-bottom: 10px; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +.results > div { + width: 200px; + margin-left: 20px; + margin-bottom: 40px; + font-size: 8pt; + background: #000; + padding: 5px; + font-weight: 500; +} +.results > div img { + display: block; + margin-bottom: 4px; + width: 190px; + height: 190px; + background: rgba(255,255,255,0.05); +} +.results > div:nth-child(3n+1) { + margin-left: 0; +} +.applet h2 { + font-size: 20pt; +} +.query h2 { + margin-top: 0; padding-top: 0; +} +.img { + position: relative; +} +.img .bbox { + position: absolute; + color: rgba(255,255,255,1); + background: rgba(255,255,255,0.05); + border: 1px solid; +} +.cta { + padding-left: 20px; + font-size: 10pt; +} +.cta ol { + margin: 0; + padding: 0 0 20px 20px; +} + +.searchContainer { + padding-top: 20px; +} + +.uploadContainer > div { + position: relative; + width: 300px; + height: 300px; + display: flex; + align-items: center; + justify-content: center; + background: #333; + border: 3px dashed #fff; + border-radius: 10px; + opacity: 0.3; + transition: opacity 0.2s cubic-bezier(0,0,1,1); +} +.uploadContainer.active, +.desktop .uploadContainer > div:hover { + opacity: 1; +} +.uploadContainer input { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + opacity: 0; + cursor: pointer; +} +.uploadContainer img { + max-width: 40px; +} + +/* map */ + +.map, .map .applet { + height: 500px; +} +.map { + margin-bottom: 20px; +} +.map_cover { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + cursor: pointer; + background: rgba(0,0,0,0.8); + z-index: 9998; /* site header is 9999 */ + display: flex; + justify-content: center; + align-items: center; + font-size: 36px; + transition: opacity 0.4s cubic-bezier(0,0,1,1); + opacity: 1; +} +.desktop .map_cover { + opacity: 0; +} +.desktop .map_cover:hover { + opacity: 1; +} +.leaflet-popup-content-wrapper { + max-height: 230px; + overflow-y: auto; +} +.leaflet-popup-content a { + color: #0078A8; + border-bottom: 1px solid rgba(0, 128, 160, 0.4); +} +.desktop .leaflet-popup-content a:hover { + color: #0078A8; + border-bottom: 1px solid rgba(0, 128, 160, 0.9); +} + +/* tabulator */ + +.tabulator { + font-family: 'Roboto', sans-serif; +} +.tabulator-row { + transition: background-color 100ms cubic-bezier(0,0,1,1); + background-color: rgba(255,255,255,0.0); +} +.desktop .tabulator-row:hover { + background-color: rgba(255,255,255,0.2); +} +.tabulator-row.tabulator-row-odd { + background-color: rgba(255,255,255,0.05); +} +.tabulator-row.tabulator-row-even { + background-color: rgba(255,255,255,0.1); +} + +/* analysis results */ + +.analysisContainer .results div { + width: 256px; + text-align: center; + padding: 10px; + margin: 10px; +} +.analysisContainer .results div img { + max-width: 100%; +} + +/* chart */ + +.piechart .chart { + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: flex-start; +} +.piechart .chart > div { + width: 50%; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} +.piechart .chart .c3-chart-arc text { + fill: #fff; +} +.piechart .chart .c3-chart-arc.c3-target-Academic text { + fill: #333; +} +.piechart .c3 path, .piechart .c3 line { + stroke: rgba(64,64,64,0.3); +} +.piechart .chartCaption { + color: #888; + font-size: 12px; + font-family: 'Roboto', sans-serif; + font-weight: 400; +} diff --git a/site/public/assets/css/css.css b/site/public/assets/css/css.css new file mode 100644 index 00000000..f59556f8 --- /dev/null +++ b/site/public/assets/css/css.css @@ -0,0 +1,1270 @@ +* { box-sizing: border-box; outline: 0; } +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.001s !important; + transition-duration: 0.001s !important; + } +} +html, body { + margin: 0; + padding: 0; + width: 100%; + min-height: 100%; + /*font-family: 'Roboto Mono', sans-serif;*/ + font-family: 'Roboto', sans-serif; + color: #eee; + overflow-x: hidden; +} +html { + background: #181818; +} +a { outline: none; } +img { border: 0; } +.content { + opacity: 0; + transition: opacity 0.1s cubic-bezier(0,1,1,1); +} +html.desktop .content, +html.mobile .content { + opacity: 1; + margin-top: 50px; +} +html.mobile .content{ +} + +/* header */ + +header { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 70px; + z-index: 9999; + background: #1e1e1e; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + box-shadow: 0 0 4px rgba(0,0,0,0.3); +} +header .slogan { + display: flex; + flex-direction: row; + align-items: center; + /*padding-left: 56px;*/ + padding-left: 36px; + text-decoration: none; +} +header .logo { + background-image: url(../img/megapixels_logo_white.svg); + background-size: contain; + background-repeat: no-repeat; + margin-top: 0px; + margin-right: 8px; + width: 20px; + height: 20px; + flex: 0 0 20px; +} +header .site_name { + font-family: 'Roboto', sans-serif; + font-weight: 600; + text-transform: uppercase;; + color: #fff; + font-size: 11px; + line-height: 11px; + letter-spacing: 3px; +} +header .page_name { + font-size: 22px; + font-weight: 400; + color: #eee; + opacity: 0; + transition: 0.3s opacity cubic-bezier(0,0,1,1); + margin-left:18px; +} +.scrolled header .page_name { + opacity: 1; +} +header .links { + font-size: 18px; + line-height: 18px; +} +.home header .links a { + background-color: rgba(24,24,24,0.9); + border-bottom: 2px solid transparent; + padding: 3px; +} +header .sub { + margin-left: 4px; + margin-top: 2px; + transition: color 0.1s cubic-bezier(0,0,1,1); +} +.sub { + color: #666; + font-size: 10pt; +} +.desktop header .slogan:hover .site_name { + color: #fff; +} +.desktop header .slogan:hover .sub { + color: #666; +} +header .links { + display: flex; + flex-direction: row; + font-family: 'Roboto Mono', monospace; +} +header .links span, +header .links a { + display: block; + color: #dedede; + text-decoration: none; + text-transform: uppercase; + margin-right: 32px; + transition: color 0.1s cubic-bezier(0,0,1,1), border-color 0.05s cubic-bezier(0,0,1,1); + border-bottom: 1px solid rgba(255,255,255,0); + padding-bottom: 3px; + padding-top: 2px; + font-weight: 400; +} +header .links a.active { + color: #fff; + border-bottom: 2px solid rgba(255,255,255,1); +} +.desktop header .links a:hover { + color: #fff; + border-bottom: 2px solid rgba(255,255,255,1); +} +.desktop header .links a.active:hover { + color: #fff; + border-bottom: 2px solid rgba(255,255,255,1); +} +.home header .links a { + margin-right: 26px; + margin-left: 0; +} +.home header .links a:last-child { + margin-right: 29px; +} +/* footer */ + +footer { + width: 100%; + background: #000; + display: flex; + flex-direction: row; + justify-content: space-between; + color: #666; + font-size: 13px; + /*line-height: 17px;*/ + padding: 15px; + font-family: "Roboto", sans-serif; +} +footer > div { + display: flex; + flex-direction: row; +} +footer > div:nth-child(1) { + padding-left: 75px; +} +footer > div:nth-child(2) { + padding-right: 75px; +} +footer a { + display: inline-block; + color: #aaa; + transition: all 0.1s cubic-bezier(0,0,1,1); + padding-bottom: 1px; + text-decoration: none; +} +.desktop footer a:hover { + color: #fff; + border-bottom:1px solid #999; +} +footer ul { + margin: 0; + display: flex; + flex-direction: row; + color: #888; + font-size: 11px; +} +footer ul li { + margin-bottom: 0; + font-size: 11px; + font-weight: 400; + color:#666; +} +footer ul li:last-child { + margin-right: 0px; +} +footer ul:first-child li { + margin-right: 8px; +} +footer ul:last-child li { + margin-left: 8px; +} +.desktop footer a:hover { + color: #fff; +} + +/* headings */ + +h1 { + color: #eee; + font-weight: 400; + font-size: 34pt; + margin: 20px auto 10px auto; + padding: 0; + transition: color 0.1s cubic-bezier(0,0,1,1); + font-family: 'Roboto Mono', monospace; +} +h2 { + color: #eee; + font-weight: 400; + font-size: 34px; + line-height: 43px; + margin: 20px auto 20px auto; + padding: 0; + transition: color 0.1s cubic-bezier(0,0,1,1); + font-family: 'Roboto Mono', monospace; +} +h3 { + margin: 20px auto 10px auto; + font-size: 28px; + font-weight: 400; + transition: color 0.1s cubic-bezier(0,0,1,1); + font-family: 'Roboto Mono', monospace; +} +h4 { + margin: 6px auto 10px auto; + padding: 0; + font-size: 18pt; + font-weight: 400; + transition: color 0.1s cubic-bezier(0,0,1,1); + font-family: 'Roboto Mono', monospace; +} +h5 { + margin: 6px auto 10px auto; + padding: 0; + font-size: 14pt; + font-weight: 400; + transition: color 0.1s cubic-bezier(0,0,1,1); + font-family: 'Roboto Mono', monospace; +} +.content h3 a { + color: #888; + text-decoration: none; +} +.desktop .content h3 a:hover { + color: #fff; + text-decoration: underline; +} +.right-sidebar h3 { + margin: 0; + padding: 0 0 10px 0; + font-family: 'Roboto Mono'; + font-weight: 400; + font-size: 13px; + text-transform: uppercase; + letter-spacing: 2px; +} +.right-sidebar ul li a { + border-bottom: 0; +} +th, .gray { + font-family: 'Roboto', monospace; + font-weight: 500; + text-transform: uppercase; + letter-spacing: .15rem; + color: #777; +} +th, .gray { + font-size: 9pt; +} + +/* splash teaser */ + +.teaser { + position: absolute; + top: 50%; + left: 100px; + transform: translateY(-50%); +} +.teaser b { + font-family: 'Roboto', sans-serif; + font-weight: 500; + color: #fff; + font-size: 40px; + background: #181818; + box-shadow: -3px -3px #181818, 3px -3px #181818, -3px 3px #181818, 3px 3px #181818; + box-decoration-break: clone; +} +.teaser tt { + font-family: 'Roboto Mono', monospace; + color: #ddd; + font-size: 16px; + line-height: 1.7; + display: block; + max-width: 340px; + margin: 10px 0 30px 0; +} +.teaser tt span { + background: #181818; + box-shadow: -3px -3px #181818, 3px -3px #181818, -3px 3px #181818, 3px 3px #181818; + box-decoration-break: clone; +} +.teaser .btn { + color: #ddd; + background: #444; + padding: 14px 20px; + font-size: 16px; + border-radius: 4px; + text-decoration: none; + box-shadow: 0 1px 2px #181818; + transition: all 0.1s; +} +.desktop .teaser .btn:hover { + color: #fff; + background: #666; +} + +/* content */ + +.content { + padding-top: 20px; + padding-bottom: 100px; + min-height: calc(100vh - 55px); + line-height: 1.8; +} +section { + width: 960px; + margin: 0 auto; +} +.home section { + width: 960px; +} +.content .first_paragraph { + font-weight: 300; + font-size: 16pt; + color: #ddd; + margin-bottom: 20px; + margin-top: 30px; + line-height: 36px; +} +section p { + margin: 10px auto 20px auto; + line-height: 1.9rem; + font-size: 17px; + font-weight: 400; + color: #cdcdcd; +} +section ul { + margin: 10px auto 20px auto; + max-width: 720px; +} +section h1, section h2, section h3, section h4, section h5, section h6, section p{ + max-width: 720px; +} + +.content-dataset section:nth-child(2) p:first-child{ + font-size:19px; + color:red; +} +p.subp{ + font-size: 14px; +} +.content a { + color: #dedede; + text-decoration: none; + border-bottom: 2px solid #666; + padding-bottom: 1px; + transition: color 0.1s cubic-bezier(0,0,1,1); +} +.desktop .content a:hover { + color: #fff; + border-bottom: 2px solid #ccc; +} + +/* top of post metadata */ + +.meta { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + font-size: 12px; + color: #ccc; + margin-bottom: 20px; + font-family: 'Roboto', sans-serif; + margin-right: 20px; + line-height: 17px +} +.meta .gray { + font-size: 9pt; + padding-bottom: 5px; + line-height: 14px +} +.mobile .meta .gray { + font-size: 10px; + padding-bottom: 0px; +} +.right-sidebar { + float: right; + width: 200px; + margin: 0px 20px 20px 20px; + padding-top: 12px; + padding-left: 20px; + border-left: 1px solid #333; + font-family: 'Roboto'; + font-size: 14px; + font-weight: 400; +} +.left-sidebar { + float: left; + width: 200px; + padding-top: 10px; + padding-right: 20px; + /*margin-right: 20px;*/ + margin-bottom: 10px; + /*border-right: 1px solid #444;*/ + font-family: 'Roboto'; + font-size: 14px; + font-weight: 400; + clear:left; +} +.left-sidebar .meta, .right-sidebar .meta { + flex-direction: column; +} +.mobile .left-sidebar .meta, .right-sidebar .meta { + display: inline-block; + border-bottom: 1px solid #333; + padding:10px 10px 10px 0; + margin: 0 4px 4px 0; + color: #bbb; +} +.right-sidebar ul { + margin-bottom: 10px; + color: #aaa; +} +.left-sidebar ul { + margin-bottom: 10px; + color: #aaa; +} +.right-sidebar ul:first-child a { + text-decoration: none; + border-bottom: 1px solid; +} +.left-sidebar ul:first-child a { + text-decoration: none; + border-bottom: 1px solid; +} +.left-sidebar a, .right-sidebar a { + border-bottom: 1px solid #666; +} +.desktop .content .left-sidebar a:hover, +.desktop .content .right-sidebar a:hover { + border-bottom: 1px solid #ccc; +} + +/* lists */ + +ul { + list-style-type: none; + margin: 0 0 30px 0; + padding: 0; +} +ul li { + margin-bottom: 8px; + color: #dedede; + font-weight: 400; + font-size: 14px; +} + +/* misc formatting */ + +code { + font-family: 'Roboto Mono', monospace; + font-size: 9pt; + padding: 2px 4px; + background: rgba(255,255,255,0.1); +} +pre { + margin: 0 auto 20px auto; + max-width: 720px; + border: 1px solid #666; + border-radius: 2px; + padding: 10px; + display: block; + background: #333; + overflow: auto +} +pre code { + display: block; + max-height: 400px; + max-width: 960px; + overflow: scroll; + padding: 4px 10px; +} +table { + margin-bottom: 40px; +} +table thead{ + text-align: left; +} +table, tr, td, th { + border: none; + border-collapse:collapse; +} +.chart table tr{ + width: auto; +} +table tr{ + display:table; + table-layout: fixed; + width:100%; +} +table td, table th{ + padding:10px; + +} +table tr td{ + font-size:12px; +} +table tbody tr:nth-child(odd){ + background-color:#292929; +} +table tbody tr:nth-child(even){ + background-color:#333; +} + +hr { + height: 1px; + background: #888; + border: 0; + width: 80px; +} +hr.supp{ + width:100%; + margin:70px 0 30px 0; +} +blockquote { + margin: 0 auto; + max-width: 720px; + padding: 0 0 0 10px; + border-left: 2px solid #555; +} + +/* Buttons */ + +.citation-opts { +} +.citation-opts li{ + display: inline-block; + margin-right:10px; +} +.desktop .content a.btn{ + display: inline-block; + background: #333; + padding: 6px 10px; + font-size: 10px; + border-radius: 6px; + font-weight: 400; + border:0px; +} +.desktop .content a.btn:hover{ + background: #444; + border:0px; +} + +/* footnotes */ + +.footnotes hr { + display: none; +} +ul.footnotes { + max-width: 720px; + margin: 0 auto; + font-size: 12px; +} +ul.footnotes li { + font-size: 12px; + list-style-type: none; + margin-bottom: 12px; +} +ul.footnotes p { + font-size: 12px; +} +.footnotes ol:before { + content: 'Footnotes'; + margin: 0 0 10px -40px; + padding-bottom: 0; + display: block; + font-family: 'Roboto Mono', monospace; + font-weight: 400; + text-transform: uppercase; + color: #666; + font-size: 11pt; +} + +/* images */ + +section img { + max-width: 100%; + display: block; + margin: 0 auto; +} +.image img { + cursor: pointer; +} +section .image { + margin-bottom: 20px; +} +section.images { + display: flex; + flex-direction: row; + align-items: flex-start; + justify-content: center; + clear: both; +} +.image:only-child { + width: 100%; +} +.image:first-child { + margin-left: 0; + /*margin-top:10px;*/ +} +.image:nth-child(2), +.image:nth-child(3) { + margin-left: 40px; +} +.image:nth-child(4) { + margin-left: 20px; +} +.image:first-child:nth-last-child(2), +.image:first-child:nth-last-child(2) ~ .image { + width: 300px; +} +.image:first-child:nth-last-child(3), +.image:first-child:nth-last-child(3) ~ .image { + width: 186px; +} +.image:first-child:nth-last-child(4) ~ .image { + width: 100px; +} +section.wide { + width: 960px; +} +section.wide .image { + max-width: 960px; +} +section.fullwidth { + width: 100%; +} +section.fullwidth .image { + max-width: 100%; +} +.image .caption{ + text-align: center; +} +.image .caption.intro-caption{ + text-align: center; +} +.caption { + text-align: center; + font-size: 10pt; + color: #999; + max-width: 960px; + margin: 10px auto 10px auto; + font-family: 'Roboto'; +} +.caption a { + color: #ccc; + border: 0; +} +.desktop .caption a:hover { + color: #fff; + border: 0; +} + + + +.sideimage { + margin: 0px 0 40px 0; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; +} +.sideimage p{ + margin-top:0px; + padding-top:0px; + font-size:14px; +} +.sideimage strong{ + display: block; + font-size:26px; + line-height: 26px; + font-weight: 400; + font-family: 'Roboto'; + margin-bottom: 16px; +} +.sideimage img { + margin-right: 40px; + width: 200px; + height: 200px; +} + +/* blog index */ + +.research_index { + margin-top: 40px; +} +.research_index a { + text-decoration: none; +} +.research_index h1 { + margin-top: 20px; + text-decoration: underline; +} +.desktop .research_index section:hover h1 { + color: #fff; +} +.research_index section:hover h2 { + color: #ddd; +} + +/* home page */ + +.hero { + width: 100%; + background: black; + background: linear-gradient(#000,#222); + height: 50vw; + max-height: 70vh; +} +.hero .inner { + position: relative; + width: 100%; + max-width: 1200px; + height: 100%; + display: flex; + align-items: center; + margin: 0 auto; +} +#face_container { + pointer-events: none; + position: absolute; + width: 66vw; + height: 50vw; + max-height: 70vh; + top: 0; + right: -16vw; + z-index: 0; + text-align: center; + perspective: 500px; + perspective-origin: 50% 80%; +} +.currentFace { + position: absolute; + bottom: 50px; + width: 100%; + left: 0; + text-align: center; + font-size: 26px; +} +.intro { + max-width: 960px; + padding: 75px 0 75px 10px; + z-index: 1; +} +.intro .headline { + font-family: 'Roboto Mono', monospace; + font-size: 24pt; + line-height: 40pt; +} +.intro .buttons { + margin: 40px 0; +} +.intro button { + font-family: 'Roboto', sans-serif; + padding: 15px 20px; + border-radius: 8px; + border: 1px solid transparent; + cursor: pointer; + font-size: 12pt; + margin-right: 10px; + transition: color 0.1s cubic-bezier(0,0,1,1), background-color 0.1s cubic-bezier(0,0,1,1); +} +.intro button.normal { + background: #191919; + border-color: #444; + color: #ddd; +} +.intro button.important { + background: #444; + border-color: #444; + color: #ddd; +} +.desktop .intro button:hover { + background: #666; + border-color: #666; + color: #fff; +} +.intro .under { + font-size: 12px; + color: #888; +} +.intro .under a { + color: #bbb; +} +.desktop .intro .under a:hover { + color: #fff; +} +.dataset-intro h2 { + margin-top: 40px; +} +.content .dataset-intro .first_paragraph { + margin-top: 10px; + font-size: 18px; +} + +/* intro - list of datasets */ + +.dataset-heading { + /*background: #000;*/ + width: 100%; + padding: 0 25px; +} +.dataset-heading p{ + max-width: none; +} +.dataset-heading h1{ + max-width: none; +} +.dataset-list { + display: flex; + flex-direction: row; + flex-wrap: wrap; + margin: 20px 0 0 0; +} +.dataset-list a { + text-decoration: none; + transition: border 0.1s cubic-bezier(0,0,1,1); + margin: 0 11px 22px 0; + border: 1px solid #333; + border-radius: 4px; +} +.dataset-list .dataset { + width: 300px; + padding: 12px; + color: white; + font-weight: 400; + font-family: 'Roboto'; + position: relative; +} +.dataset-list .dataset-image { + background-size: cover; + width: auto; + height: 178px; +} +.desktop .content .dataset-list a { + border: 1px solid #333; + +} +.desktop .dataset-list a:hover { + border: 1px solid #666; +} +.dataset-list .fields { + font-size: 12px; + color: #ccc; +} +.dataset-list .dataset .title{ + font-size: 16px; + line-height: 20px; + margin-bottom: 4px; + font-weight: 400; + display: block; +} +.dataset-list .fields div { + display: block; +} +.dataset-list .sort-options { + margin: 0; + padding: 0; +} +.dataset-list .sort-options:before { + content: 'Browse list by:'; + opacity: 0.7; + display: block; + padding-bottom: 10px; +} +.dataset-list .sort-options li { + display: inline-block; + margin: 0; + cursor: pointer; + margin-right: 10px; + transition: background 0.2s; + background: #555; + color: #fff; + padding: 7px 11px; + border-radius: 4px; + font-weight: 400; + font-size: 14px; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +} +.dataset-list .sort-options li:last-child { + margin-right:0; +} +.dataset-list .sort-options li.active { + background: #fff; + color: #000; +} +.desktop .dataset-list .sort-options li:hover { + background: #888; +} +.desktop .dataset-list .sort-options li.active:hover { + background: #fff; +} +.dataset_list .applet { + margin-bottom: 15px; +} + + + +/* intro section for datasets */ + +section.intro_section { + font-family: 'Roboto Mono'; + width: 100%; + background-size: cover; + background-position: center left; + /*padding: 50px 0;*/ + min-height: 40vh; + display: flex; + justify-content: center; + align-items: center; + background-color: #111111; + margin-bottom: 20px; + padding: 0; +} +.intro_section .inner { + max-width: 960px; + margin: 3rem auto; +} +.intro_section .hero_desc { + font-size: 38px; + line-height: 60px; + margin-bottom: 30px; + color: #ddd; + font-weight: 400; +} +.mobile .intro_section .hero_desc{ + font-size: 16px; + line-height: 32px; + margin-bottom: 20px; +} +.intro_section .hero_desc .dataset-name{ + color:#fff; +} +.intro_section .hero_subdesc { + font-size: 17px; + line-height: 36px; + max-width: 80%; + font-weight: 400; + color: #ddd; +} +.mobile .intro_section .hero_subdesc { + font-size: 14px; + line-height: 28px; +} +.intro_section .hero_desc .bgpad { + box-shadow: -10px -10px #181818, 10px -10px #181818, 10px 10px #181818, -10px 10px #181818; + background: #181818; +} +.intro_section .hero_subdesc .bgpad { + box-shadow: -10px -10px #181818, 10px -10px #181818, 10px 10px #181818, -10px 10px #181818; + background: #181818; +} +.mobile .intro_section .hero_desc .bgpad { + box-shadow: -6px -6px #181818, 6px -6px #181818, 6px 6px #181818, -6px 6px #181818; + background: #181818; +} +.mobile .intro_section .hero_subdesc .bgpad { + box-shadow: -6px -6px #181818, 6px -6px #181818, 6px 6px #181818, -6px 6px #181818; + background: #181818; +} + + +.firefox .intro_section div > span { + box-decoration-break: clone; +} + +/* ----------------------------------------------------- +page-specific formatting +----------------------------------------------------- */ + +/* Dataset */ + +.leaflet-container{ + margin-bottom: 10px +} + +.hr-wave-holder { + /* Clip edges, as some of the lines don't terminate nicely. */ + overflow: hidden; + position: relative; + width: 100%; + height: 50px; + margin-top:50px; +} + +.hr-wave-line1 { + background: linear-gradient(45deg, transparent, transparent 49%, #fff 49%, transparent 51%); +} +.hr-wave-line2 { + background: linear-gradient(-45deg, transparent, transparent 49%, #fff 49%, transparent 51%); +} +.hr-wave-line { + background-size: 20px 20px; + position: absolute; + width: 100%; + height: 10px; +} + + +/* map */ + +ul.map-legend{ + display: inline-block; + margin: 0; + font-size: 14px; +} +ul.map-legend li { + margin-right: 10px; + padding-top: 4px; + display: inline-block; + cursor: pointer; +} +.desktop ul.map-legend li:hover { + text-decoration: underline; +} +ul.map-legend li:before { + content: ''; + display: inline-block; + width: 10px; + height: 10px; + margin-right: 6px; +} +ul.map-legend li.active { + text-decoration: underline; + color: #fff; +} +ul.map-legend li.edu:before { + background-color: #f2f293; +} +ul.map-legend li.com:before { + background-color: #3264f6; +} +ul.map-legend li.gov:before { + background-color: #f30000; +} +ul.map-legend li.source:before { + content: none; + display: inline-block; + width: 0px; + margin-right: 10px; +} + +/* about */ +.desktop a.ahrefmoz{ + color:#DE5825; +} +.desktop a.ahrefmoz:hover{ + color:#EF6D3B; +} + +.content-about { + color: #fff; +} +.content-about p { + font-size: 16px; +} +.content-about ul{ + font-size: 14px; + font-weight: 300; +} +.content-about section:first-of-type > p:first-of-type { + font-size: 22px; + line-height: 40px; +} +.content-about .about-menu ul li { + display: inline-block; + font-size: 14px; + font-weight: 400; + text-transform: uppercase; + margin-right: 15px; + font-family: 'Roboto'; +} +.content-about .about-menu ul li a { + border-bottom: 0; + color: #aaa; +} + +.content-about .about-menu ul li a.current { + border-bottom: 1px solid #ddd; + color: #ddd; +} + +/* columns */ + +.columns { + display: flex; + flex-direction: row; + justify-content: flex-start; +} +.content-about .columns .column{ + /* on the about page use padding and bg color */ + background: #202020; + padding: 20px; +} +.columns .column { + font-family: Roboto, sans-serif; + font-weight: 400; + margin: 10px; +} +.columns .column:first-of-type { + margin-left: 0; +} +.columns-2 .column { + width: 50%; +} +.columns-3 .column { + width: 33%; +} +.columns-4 .column { + width: 25%; +} + +/* about page */ + + +.flex-container { + padding: 0; + margin: 0; + list-style: none; + + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + + -webkit-flex-flow: row wrap; + justify-content: space-around; +} + +.content-about .team-photos-container{ + margin:40px 0; +} +.content-about .team-member { + height: auto; + margin-top: 10px; + color: white; + width: 400px; + font-weight: bold; + flex-grow: 1; + margin:0 40px 0 0; + padding:20px; + border-radius:6px; + background: #202020; +} +.content-about .team-member&:last-child{ + margin:0 0 0 40px; +} +.content-about .team-member p{ + font-size:16px; +} +.content-about .team-member img{ + margin:0; + display: block; +} +.content-about .team-member h3{ + font-size:20px; +} + + + +/* footnotes */ + +a.footnote { + font-size: 9px; + line-height: 0px; + position: relative; + /*display: inline-block;*/ + bottom: 7px; + text-decoration: none; + color: #ff8; + border: 0; + left: -1px; + transition-duration: 0s; +} +a.footnote_shim { + /*display: inline-block;*/ + width: 1px; height: 1px; + overflow: hidden; + position: relative; + top: -90px; + visibility: hidden; +} +.right-sidebar a.footnote { + bottom: 8px; +} +.desktop a.footnote:hover { + /*background-color: #ff8;*/ + color: #fff; + border: 0; +} +.backlinks { + margin-right: 10px; +} +.content .backlinks a { + color: #ff8; + font-size: 10px; + text-decoration: none; + border: 0; + font-weight: bold; + position: relative; + bottom: 5px; + margin-right: 2px; +} +.content .footnotes .backlinks a { + bottom: 3px; +} +li p { + margin: 0; padding: 0; + display: inline; +} + +/* citation browser */ + +.citationHeader { + max-width: 720px; + margin: 10px auto; + padding-bottom: 10px +} +.download-btn { + display: inline-block; + font-size: 13px; + color: #ddd; + cursor: pointer; + background: #333; + padding: 8px 10px; + border-radius: 5px; + transition: all 0.1s; +} diff --git a/site/public/assets/css/fonts.css b/site/public/assets/css/fonts.css new file mode 100644 index 00000000..8db01fbd --- /dev/null +++ b/site/public/assets/css/fonts.css @@ -0,0 +1,41 @@ +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 300; + src: url("../fonts/Roboto_300.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto_300.woff") format("woff"), url("../fonts/Roboto_300.woff2") format("woff2"), url("../fonts/Roboto_300.svg#Roboto") format("svg"), url("../fonts/Roboto_300.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 400; + src: url("../fonts/Roboto_400.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto_400.woff") format("woff"), url("../fonts/Roboto_400.woff2") format("woff2"), url("../fonts/Roboto_400.svg#Roboto") format("svg"), url("../fonts/Roboto_400.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto'; + font-style: normal; + font-weight: 500; + src: url("../fonts/Roboto_500.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto_500.woff") format("woff"), url("../fonts/Roboto_500.woff2") format("woff2"), url("../fonts/Roboto_500.svg#Roboto") format("svg"), url("../fonts/Roboto_500.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 300; + src: url("../fonts/Roboto_Mono_300.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto_Mono_300.woff") format("woff"), url("../fonts/Roboto_Mono_300.woff2") format("woff2"), url("../fonts/Roboto_Mono_300.svg#RobotoMono") format("svg"), url("../fonts/Roboto_Mono_300.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 400; + src: url("../fonts/Roboto_Mono_400.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto_Mono_400.woff") format("woff"), url("../fonts/Roboto_Mono_400.woff2") format("woff2"), url("../fonts/Roboto_Mono_400.svg#RobotoMono") format("svg"), url("../fonts/Roboto_Mono_400.ttf") format("truetype"); +} + +@font-face { + font-family: 'Roboto Mono'; + font-style: normal; + font-weight: 500; + src: local("Roboto-Mono Medium"), local("RobotoMono-Medium"), url("../fonts/Roboto_Mono_500.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto_Mono_500.woff") format("woff"), url("../fonts/Roboto_Mono_500.woff2") format("woff2"), url("../fonts/Roboto_Mono_500.svg#RobotoMono") format("svg"), url("../fonts/Roboto_Mono_500.ttf") format("truetype"); +} diff --git a/site/public/assets/css/leaflet.css b/site/public/assets/css/leaflet.css new file mode 100644 index 00000000..a0932d57 --- /dev/null +++ b/site/public/assets/css/leaflet.css @@ -0,0 +1,635 @@ +/* required styles */
+
+.leaflet-pane,
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-tile-container,
+.leaflet-pane > svg,
+.leaflet-pane > canvas,
+.leaflet-zoom-box,
+.leaflet-image-layer,
+.leaflet-layer {
+ position: absolute;
+ left: 0;
+ top: 0;
+ }
+.leaflet-container {
+ overflow: hidden;
+ }
+.leaflet-tile,
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ -webkit-user-drag: none;
+ }
+/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
+.leaflet-safari .leaflet-tile {
+ image-rendering: -webkit-optimize-contrast;
+ }
+/* hack that prevents hw layers "stretching" when loading new tiles */
+.leaflet-safari .leaflet-tile-container {
+ width: 1600px;
+ height: 1600px;
+ -webkit-transform-origin: 0 0;
+ }
+.leaflet-marker-icon,
+.leaflet-marker-shadow {
+ display: block;
+ }
+/* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */
+/* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */
+.leaflet-container .leaflet-overlay-pane svg,
+.leaflet-container .leaflet-marker-pane img,
+.leaflet-container .leaflet-shadow-pane img,
+.leaflet-container .leaflet-tile-pane img,
+.leaflet-container img.leaflet-image-layer,
+.leaflet-container .leaflet-tile {
+ max-width: none !important;
+ max-height: none !important;
+ }
+
+.leaflet-container.leaflet-touch-zoom {
+ -ms-touch-action: pan-x pan-y;
+ touch-action: pan-x pan-y;
+ }
+.leaflet-container.leaflet-touch-drag {
+ -ms-touch-action: pinch-zoom;
+ /* Fallback for FF which doesn't support pinch-zoom */
+ touch-action: none;
+ touch-action: pinch-zoom;
+}
+.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
+ -ms-touch-action: none;
+ touch-action: none;
+}
+.leaflet-container {
+ -webkit-tap-highlight-color: transparent;
+}
+.leaflet-container a {
+ -webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
+}
+.leaflet-tile {
+ filter: inherit;
+ visibility: hidden;
+ }
+.leaflet-tile-loaded {
+ visibility: inherit;
+ }
+.leaflet-zoom-box {
+ width: 0;
+ height: 0;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ z-index: 800;
+ }
+/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
+.leaflet-overlay-pane svg {
+ -moz-user-select: none;
+ }
+
+.leaflet-pane { z-index: 400; }
+
+.leaflet-tile-pane { z-index: 200; }
+.leaflet-overlay-pane { z-index: 400; }
+.leaflet-shadow-pane { z-index: 500; }
+.leaflet-marker-pane { z-index: 600; }
+.leaflet-tooltip-pane { z-index: 650; }
+.leaflet-popup-pane { z-index: 700; }
+
+.leaflet-map-pane canvas { z-index: 100; }
+.leaflet-map-pane svg { z-index: 200; }
+
+.leaflet-vml-shape {
+ width: 1px;
+ height: 1px;
+ }
+.lvml {
+ behavior: url(#default#VML);
+ display: inline-block;
+ position: absolute;
+ }
+
+
+/* control positioning */
+
+.leaflet-control {
+ position: relative;
+ z-index: 800;
+ pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+ pointer-events: auto;
+ }
+.leaflet-top,
+.leaflet-bottom {
+ position: absolute;
+ z-index: 1000;
+ pointer-events: none;
+ }
+.leaflet-top {
+ top: 0;
+ }
+.leaflet-right {
+ right: 0;
+ }
+.leaflet-bottom {
+ bottom: 0;
+ }
+.leaflet-left {
+ left: 0;
+ }
+.leaflet-control {
+ float: left;
+ clear: both;
+ }
+.leaflet-right .leaflet-control {
+ float: right;
+ }
+.leaflet-top .leaflet-control {
+ margin-top: 10px;
+ }
+.leaflet-bottom .leaflet-control {
+ margin-bottom: 10px;
+ }
+.leaflet-left .leaflet-control {
+ margin-left: 10px;
+ }
+.leaflet-right .leaflet-control {
+ margin-right: 10px;
+ }
+
+
+/* zoom and fade animations */
+
+.leaflet-fade-anim .leaflet-tile {
+ will-change: opacity;
+ }
+.leaflet-fade-anim .leaflet-popup {
+ opacity: 0;
+ -webkit-transition: opacity 0.2s linear;
+ -moz-transition: opacity 0.2s linear;
+ transition: opacity 0.2s linear;
+ }
+.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
+ opacity: 1;
+ }
+.leaflet-zoom-animated {
+ -webkit-transform-origin: 0 0;
+ -ms-transform-origin: 0 0;
+ transform-origin: 0 0;
+ }
+.leaflet-zoom-anim .leaflet-zoom-animated {
+ will-change: transform;
+ }
+.leaflet-zoom-anim .leaflet-zoom-animated {
+ -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
+ -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
+ transition: transform 0.25s cubic-bezier(0,0,0.25,1);
+ }
+.leaflet-zoom-anim .leaflet-tile,
+.leaflet-pan-anim .leaflet-tile {
+ -webkit-transition: none;
+ -moz-transition: none;
+ transition: none;
+ }
+
+.leaflet-zoom-anim .leaflet-zoom-hide {
+ visibility: hidden;
+ }
+
+
+/* cursors */
+
+.leaflet-interactive {
+ cursor: pointer;
+ }
+.leaflet-grab {
+ cursor: -webkit-grab;
+ cursor: -moz-grab;
+ cursor: grab;
+ }
+.leaflet-crosshair,
+.leaflet-crosshair .leaflet-interactive {
+ cursor: crosshair;
+ }
+.leaflet-popup-pane,
+.leaflet-control {
+ cursor: auto;
+ }
+.leaflet-dragging .leaflet-grab,
+.leaflet-dragging .leaflet-grab .leaflet-interactive,
+.leaflet-dragging .leaflet-marker-draggable {
+ cursor: move;
+ cursor: -webkit-grabbing;
+ cursor: -moz-grabbing;
+ cursor: grabbing;
+ }
+
+/* marker & overlays interactivity */
+.leaflet-marker-icon,
+.leaflet-marker-shadow,
+.leaflet-image-layer,
+.leaflet-pane > svg path,
+.leaflet-tile-container {
+ pointer-events: none;
+ }
+
+.leaflet-marker-icon.leaflet-interactive,
+.leaflet-image-layer.leaflet-interactive,
+.leaflet-pane > svg path.leaflet-interactive {
+ pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
+ pointer-events: auto;
+ }
+
+/* visual tweaks */
+
+.leaflet-container {
+ background: #ddd;
+ outline: 0;
+ }
+.leaflet-container a {
+ color: #0078A8;
+ }
+.leaflet-container a.leaflet-active {
+ outline: 2px solid orange;
+ }
+.leaflet-zoom-box {
+ border: 2px dotted #38f;
+ background: rgba(255,255,255,0.5);
+ }
+
+
+/* general typography */
+.leaflet-container {
+ font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
+ }
+
+
+/* general toolbar styles */
+
+.leaflet-bar {
+ box-shadow: 0 1px 5px rgba(0,0,0,0.65);
+ border-radius: 4px;
+ }
+.leaflet-bar a,
+.leaflet-bar a:hover {
+ background-color: #fff;
+ border-bottom: 1px solid #ccc;
+ width: 26px;
+ height: 26px;
+ line-height: 26px;
+ display: block;
+ text-align: center;
+ text-decoration: none;
+ color: black;
+ }
+.leaflet-bar a,
+.leaflet-control-layers-toggle {
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+ display: block;
+ }
+.leaflet-bar a:hover {
+ background-color: #f4f4f4;
+ }
+.leaflet-bar a:first-child {
+ border-top-left-radius: 4px;
+ border-top-right-radius: 4px;
+ }
+.leaflet-bar a:last-child {
+ border-bottom-left-radius: 4px;
+ border-bottom-right-radius: 4px;
+ border-bottom: none;
+ }
+.leaflet-bar a.leaflet-disabled {
+ cursor: default;
+ background-color: #f4f4f4;
+ color: #bbb;
+ }
+
+.leaflet-touch .leaflet-bar a {
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ }
+.leaflet-touch .leaflet-bar a:first-child {
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+ }
+.leaflet-touch .leaflet-bar a:last-child {
+ border-bottom-left-radius: 2px;
+ border-bottom-right-radius: 2px;
+ }
+
+/* zoom control */
+
+.leaflet-control-zoom-in,
+.leaflet-control-zoom-out {
+ font: bold 18px 'Lucida Console', Monaco, monospace;
+ text-indent: 1px;
+ }
+
+.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
+ font-size: 22px;
+ }
+
+
+/* layers control */
+
+.leaflet-control-layers {
+ box-shadow: 0 1px 5px rgba(0,0,0,0.4);
+ background: #fff;
+ border-radius: 5px;
+ }
+.leaflet-control-layers-toggle {
+ background-image: url(images/layers.png);
+ width: 36px;
+ height: 36px;
+ }
+.leaflet-retina .leaflet-control-layers-toggle {
+ background-image: url(images/layers-2x.png);
+ background-size: 26px 26px;
+ }
+.leaflet-touch .leaflet-control-layers-toggle {
+ width: 44px;
+ height: 44px;
+ }
+.leaflet-control-layers .leaflet-control-layers-list,
+.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
+ display: none;
+ }
+.leaflet-control-layers-expanded .leaflet-control-layers-list {
+ display: block;
+ position: relative;
+ }
+.leaflet-control-layers-expanded {
+ padding: 6px 10px 6px 6px;
+ color: #333;
+ background: #fff;
+ }
+.leaflet-control-layers-scrollbar {
+ overflow-y: scroll;
+ overflow-x: hidden;
+ padding-right: 5px;
+ }
+.leaflet-control-layers-selector {
+ margin-top: 2px;
+ position: relative;
+ top: 1px;
+ }
+.leaflet-control-layers label {
+ display: block;
+ }
+.leaflet-control-layers-separator {
+ height: 0;
+ border-top: 1px solid #ddd;
+ margin: 5px -10px 5px -6px;
+ }
+
+/* Default icon URLs */
+.leaflet-default-icon-path {
+ background-image: url(images/marker-icon.png);
+ }
+
+
+/* attribution and scale controls */
+
+.leaflet-container .leaflet-control-attribution {
+ background: #fff;
+ background: rgba(255, 255, 255, 0.7);
+ margin: 0;
+ }
+.leaflet-control-attribution,
+.leaflet-control-scale-line {
+ padding: 0 5px;
+ color: #333;
+ }
+.leaflet-control-attribution a {
+ text-decoration: none;
+ }
+.leaflet-control-attribution a:hover {
+ text-decoration: underline;
+ }
+.leaflet-container .leaflet-control-attribution,
+.leaflet-container .leaflet-control-scale {
+ font-size: 11px;
+ }
+.leaflet-left .leaflet-control-scale {
+ margin-left: 5px;
+ }
+.leaflet-bottom .leaflet-control-scale {
+ margin-bottom: 5px;
+ }
+.leaflet-control-scale-line {
+ border: 2px solid #777;
+ border-top: none;
+ line-height: 1.1;
+ padding: 2px 5px 1px;
+ font-size: 11px;
+ white-space: nowrap;
+ overflow: hidden;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+
+ background: #fff;
+ background: rgba(255, 255, 255, 0.5);
+ }
+.leaflet-control-scale-line:not(:first-child) {
+ border-top: 2px solid #777;
+ border-bottom: none;
+ margin-top: -2px;
+ }
+.leaflet-control-scale-line:not(:first-child):not(:last-child) {
+ border-bottom: 2px solid #777;
+ }
+
+.leaflet-touch .leaflet-control-attribution,
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+ box-shadow: none;
+ }
+.leaflet-touch .leaflet-control-layers,
+.leaflet-touch .leaflet-bar {
+ border: 2px solid rgba(0,0,0,0.2);
+ background-clip: padding-box;
+ }
+
+
+/* popup */
+
+.leaflet-popup {
+ position: absolute;
+ text-align: center;
+ margin-bottom: 20px;
+ }
+.leaflet-popup-content-wrapper {
+ padding: 1px;
+ text-align: left;
+ border-radius: 12px;
+ }
+.leaflet-popup-content {
+ margin: 13px 19px;
+ line-height: 1.4;
+ }
+.leaflet-popup-content p {
+ margin: 18px 0;
+ }
+.leaflet-popup-tip-container {
+ width: 40px;
+ height: 20px;
+ position: absolute;
+ left: 50%;
+ margin-left: -20px;
+ overflow: hidden;
+ pointer-events: none;
+ }
+.leaflet-popup-tip {
+ width: 17px;
+ height: 17px;
+ padding: 1px;
+
+ margin: -10px auto 0;
+
+ -webkit-transform: rotate(45deg);
+ -moz-transform: rotate(45deg);
+ -ms-transform: rotate(45deg);
+ transform: rotate(45deg);
+ }
+.leaflet-popup-content-wrapper,
+.leaflet-popup-tip {
+ background: white;
+ color: #333;
+ box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+ }
+.leaflet-container a.leaflet-popup-close-button {
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: 4px 4px 0 0;
+ border: none;
+ text-align: center;
+ width: 18px;
+ height: 14px;
+ font: 16px/14px Tahoma, Verdana, sans-serif;
+ color: #c3c3c3;
+ text-decoration: none;
+ font-weight: bold;
+ background: transparent;
+ }
+.leaflet-container a.leaflet-popup-close-button:hover {
+ color: #999;
+ }
+.leaflet-popup-scrolled {
+ overflow: auto;
+ border-bottom: 1px solid #ddd;
+ border-top: 1px solid #ddd;
+ }
+
+.leaflet-oldie .leaflet-popup-content-wrapper {
+ zoom: 1;
+ }
+.leaflet-oldie .leaflet-popup-tip {
+ width: 24px;
+ margin: 0 auto;
+
+ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
+ filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
+ }
+.leaflet-oldie .leaflet-popup-tip-container {
+ margin-top: -1px;
+ }
+
+.leaflet-oldie .leaflet-control-zoom,
+.leaflet-oldie .leaflet-control-layers,
+.leaflet-oldie .leaflet-popup-content-wrapper,
+.leaflet-oldie .leaflet-popup-tip {
+ border: 1px solid #999;
+ }
+
+
+/* div icon */
+
+.leaflet-div-icon {
+ background: #fff;
+ border: 1px solid #666;
+ }
+
+
+/* Tooltip */
+/* Base styles for the element that has a tooltip */
+.leaflet-tooltip {
+ position: absolute;
+ padding: 6px;
+ background-color: #fff;
+ border: 1px solid #fff;
+ border-radius: 3px;
+ color: #222;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ pointer-events: none;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+ }
+.leaflet-tooltip.leaflet-clickable {
+ cursor: pointer;
+ pointer-events: auto;
+ }
+.leaflet-tooltip-top:before,
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+ position: absolute;
+ pointer-events: none;
+ border: 6px solid transparent;
+ background: transparent;
+ content: "";
+ }
+
+/* Directions */
+
+.leaflet-tooltip-bottom {
+ margin-top: 6px;
+}
+.leaflet-tooltip-top {
+ margin-top: -6px;
+}
+.leaflet-tooltip-bottom:before,
+.leaflet-tooltip-top:before {
+ left: 50%;
+ margin-left: -6px;
+ }
+.leaflet-tooltip-top:before {
+ bottom: 0;
+ margin-bottom: -12px;
+ border-top-color: #fff;
+ }
+.leaflet-tooltip-bottom:before {
+ top: 0;
+ margin-top: -12px;
+ margin-left: -6px;
+ border-bottom-color: #fff;
+ }
+.leaflet-tooltip-left {
+ margin-left: -6px;
+}
+.leaflet-tooltip-right {
+ margin-left: 6px;
+}
+.leaflet-tooltip-left:before,
+.leaflet-tooltip-right:before {
+ top: 50%;
+ margin-top: -6px;
+ }
+.leaflet-tooltip-left:before {
+ right: 0;
+ margin-right: -12px;
+ border-left-color: #fff;
+ }
+.leaflet-tooltip-right:before {
+ left: 0;
+ margin-left: -12px;
+ border-right-color: #fff;
+ }
diff --git a/site/public/assets/css/mobile.css b/site/public/assets/css/mobile.css new file mode 100644 index 00000000..124b9d42 --- /dev/null +++ b/site/public/assets/css/mobile.css @@ -0,0 +1,172 @@ +/* MOBILE - iphone/ipad css */ + +softbr { + display: none; +} + +@media all and (max-device-width: 1024px) { + softbr { + display: block; + height: 10px; + } + + /* header / footer */ + + header .slogan { + padding-left: 10px; + } + header .splash { + display: none; + } + .home header .links a { + margin-right: 0; + } + header .links a { + padding-right: 0; + margin-right: 14px; + font-size: 14px; + } + footer { + font-size: 14px; + line-height: 1.6; + } + footer > div:nth-child(1) { + padding: 0; + color: #ccc; + margin-bottom: 15px; + } + footer > div:nth-child(2) { + padding: 0; + color: #ccc; + margin-bottom: 15px; + } + footer a { + color: #eee; + border-color: #ccc; + } + footer ul { + flex-wrap: wrap; + } + h1 { + font-size: 32px; + line-height: 44px; + } + + /* MOBILE content */ + + .intro_section { + padding: 50px 0 20px 0; + } + .intro_section .hero_desc { + font-size: 28px; + line-height: 50px; + margin-bottom: 20px; + } + .intro_section .inner { + margin: 0; + max-width: 100%; + padding: 20px; + } + .intro_section .hero_subdesc { + max-width: 100%; + } + section h1, section h2, section h3, section h4, section h5, section h6, section p { + max-width: 100%; + } + section { + width: 100%; + padding: 0 25px; + } + section p{ + font-size: 15px; + } + section.about-menu { + padding: 0; + } + .content-about .about-menu ul li{ + font-size: 12px; + } + .content-about .team-member p{ + font-size: 13px; + line-height: 26px; + } + .content-about section:first-of-type > p:first-of-type { + font-size: 16px; + line-height: 30px; + } + .meta { + margin-right: 0px; + margin-bottom: 10px; + } + .modal img { + max-width: 100%; + display: block; + } + th { + overflow: hidden; + text-overflow: ellipsis; + } + section.wide { + width: 100%; + } + .map, .map .applet { + height: 360px; + } + .dataset-heading section { + padding: 0; + } + .dataset-list .dataset { + width: 100%; + } + .dataset-list a { + width: 100%; + } + + .content td a { + text-overflow: ellipsis; + max-width: 100%; + overflow: hidden; + display: inline-block; + } + + .content-about .team-member { + margin: 0 0 10px 0; + padding: 15px; + margin-bottom: 25px; + } + .page_name { + display: none; + } +} + +/* iphone-specific */ +@media all and (max-device-width: 640px) { + .right-sidebar { + float: none; + width: 100%; + border: 0; + margin: 0 0 14px 0; + padding: 0 2px; + } + .map, .map .applet { + height: 360px; + } + .citationBrowser input.q { + max-width: 180px; + } + .columns { + flex-direction: column; + } + .columns .column { + margin: 0; + margin-bottom: 25px; + } + .columns-2 .column, + .columns-3 .column, + .columns-4 .column { + width: 100%; + } + .teaser { + display: none; + } +}
\ No newline at end of file diff --git a/site/public/assets/css/splash.css b/site/public/assets/css/splash.css new file mode 100644 index 00000000..6089f10d --- /dev/null +++ b/site/public/assets/css/splash.css @@ -0,0 +1,134 @@ +/* splash */ + +html, body { + overflow: hidden; + width: 100%; height: 100%; +} +header { + position: absolute; + background: transparent; + box-shadow: none; +} +footer { + background: transparent; + position: absolute; + bottom: 0; left: 0; + padding: 20px; +} +footer div { + z-index: 2; +} +footer { + background: #111; +} +header .links a.activeLink { + color: white; + border-bottom-color: white; +} +.splash { +} +#three_container { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; +} + +.about.open { + pointer-events: auto; + opacity: 1; + cursor: pointer; +} +.about { + position: absolute; + top: 0; left: 0; + width: 100%; height: 100%; + display: flex; + align-items: center; + justify-content: center; + background: rgba(0,0,0,0.5); + opacity: 0; + pointer-events: none; + transition: opacity 400ms; + overflow-y: scroll; +} +.about .inner { + padding: 40px; + background: #000; + color: #eee; + max-width: 600px; + line-height: 1.5; + cursor: text; +} +.about .inner b { + color: #fff; +} +.about a { + color: #fff; +} +p { + margin: 0 10px 20px 0; + line-height: 1.5; + font-size: 14px; + font-weight: 300; +} + +@media screen and (max-width: 700px) { + header, footer { + transition: background 0.4s; + } + .modalOpen header, + .modalOpen footer { + background: rgba(25, 25, 25, 1.0); + } + header .slogan { + padding-left: 10px; + } + footer { + display: block; + background: rgba(25, 25, 25, 0.8); + padding: 10px 20px; + } + footer div { + background: transparent; + text-align: center; + width: 100%; + display: block; + padding: 0; + } + header .links { + display: block; + text-align: right; + padding: 0; + padding-right: 10px; + } + header .links span, + header .links a { + display: inline-block; + text-align: right; + margin: 0; + font-size: 12px; + background: rgba(25, 25, 25, 0.5); + text-shadow: 0 0 0 rgba(0,0,0,0); + border-bottom: 0; + } + .about { + display: block; + } + .about .inner { + max-width: 100%; + padding: 20px; + padding-top: 80px; + padding-bottom: 50px; + } +} +@media screen and (max-height: 500px) { + .about { + display: block; + } + .about .inner { + max-width: 100%; + padding: 20px; + padding-top: 70px; + padding-bottom: 50px; + } +} diff --git a/site/public/assets/css/tabulator.css b/site/public/assets/css/tabulator.css new file mode 100755 index 00000000..d26b5cfc --- /dev/null +++ b/site/public/assets/css/tabulator.css @@ -0,0 +1,759 @@ +/* Tabulator v4.1.3 (c) Oliver Folkerd */ +.tabulator { + position: relative; + font-size: 13px; + text-align: left; + overflow: hidden; + -ms-transform: translatez(0); + transform: translatez(0); +} + +.tabulator[tabulator-layout="fitDataFill"] .tabulator-tableHolder .tabulator-table { + min-width: 100%; +} + +.tabulator.tabulator-block-select { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.tabulator .tabulator-header { + position: relative; + box-sizing: border-box; + width: 100%; + border-bottom: 1px solid #333; + color: #ddd; + white-space: nowrap; + overflow: hidden; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +} + +.tabulator .tabulator-header .tabulator-col { + display: inline-block; + position: relative; + box-sizing: border-box; + border-right: 1px solid #333; + text-align: left; + vertical-align: bottom; + overflow: hidden; + padding: 5px 0; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-moving { + position: absolute; + border: 1px solid #333; + background: rgba(80,20,10,0.2); + pointer-events: none; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-col-content { + box-sizing: border-box; + position: relative; + padding: 4px; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { + box-sizing: border-box; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + vertical-align: bottom; + /* AH */ + font-weight: 500; + font-size:14px; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title .tabulator-title-editor { + box-sizing: border-box; + width: 100%; + border: 1px solid #333; + padding: 1px; + background: #fff; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-arrow { + display: inline-block; + position: absolute; + top: 11px; + right: 8px; + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #666; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols { + position: relative; + display: -ms-flexbox; + display: flex; + border-top: 1px solid #333; + overflow: hidden; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols .tabulator-col:last-child { + margin-right: -1px; +} + +.tabulator .tabulator-header .tabulator-col:first-child .tabulator-col-resize-handle.prev { + display: none; +} + +.tabulator .tabulator-header .tabulator-col.ui-sortable-helper { + position: absolute; + border: 1px solid #333; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter { + position: relative; + box-sizing: border-box; + margin-top: 2px; + width: 100%; + text-align: center; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea { + height: auto !important; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg { + margin-top: 3px; +} + +.tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear { + width: 0; + height: 0; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title { + padding-right: 25px; + padding-left: 6px; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { + cursor: pointer; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="none"] .tabulator-col-content .tabulator-arrow { + border-top: none; + border-bottom: 6px solid #666; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="asc"] .tabulator-col-content .tabulator-arrow { + border-top: none; + border-bottom: 6px solid #666; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="desc"] .tabulator-col-content .tabulator-arrow { + border-top: 6px solid #666; + border-bottom: none; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical .tabulator-col-content .tabulator-col-title { + -webkit-writing-mode: vertical-rl; + -ms-writing-mode: tb-rl; + writing-mode: vertical-rl; + text-orientation: mixed; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip .tabulator-col-title { + -ms-transform: rotate(180deg); + transform: rotate(180deg); +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-col-title { + padding-right: 0; + padding-top: 20px; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip .tabulator-col-title { + padding-right: 0; + padding-bottom: 20px; +} + +.tabulator .tabulator-header .tabulator-col.tabulator-col-vertical.tabulator-sortable .tabulator-arrow { + right: calc(50% - 6px); +} + +.tabulator .tabulator-header .tabulator-frozen { + display: inline-block; + position: absolute; + z-index: 10; +} + +.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left { + border-right: 2px solid #333; +} + +.tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right { + border-left: 2px solid #333; +} + +.tabulator .tabulator-header .tabulator-calcs-holder { + box-sizing: border-box; + min-width: 400%; + background: rgba(80,20,10,0.2); + border-top: 1px solid #333; + border-bottom: 1px solid #333; + overflow: hidden; +} + +.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row { + background: rgba(80,20,10,0.2); +} + +.tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle { + display: none; +} + +.tabulator .tabulator-header .tabulator-frozen-rows-holder { + min-width: 400%; +} + +.tabulator .tabulator-header .tabulator-frozen-rows-holder:empty { + display: none; +} + +.tabulator .tabulator-tableHolder { + position: relative; + width: 100%; + white-space: nowrap; + overflow: auto; + -webkit-overflow-scrolling: touch; +} + +.tabulator .tabulator-tableHolder:focus { + outline: none; +} + +.tabulator .tabulator-tableHolder .tabulator-placeholder { + box-sizing: border-box; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + width: 100%; +} + +.tabulator .tabulator-tableHolder .tabulator-placeholder[tabulator-render-mode="virtual"] { + position: absolute; + top: 0; + left: 0; + height: 100%; +} + +.tabulator .tabulator-tableHolder .tabulator-placeholder span { + display: inline-block; + margin: 0 auto; + padding: 10px; + color: #ccc; + font-weight: bold; + font-size: 20px; +} + +.tabulator .tabulator-tableHolder .tabulator-table { + position: relative; + display: inline-block; + white-space: nowrap; + overflow: visible; +} + +.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs { + font-weight: bold; + background: rgba(80,20,10,0.2); +} + +.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-top { + border-bottom: 2px solid #333; +} + +.tabulator .tabulator-tableHolder .tabulator-table .tabulator-row.tabulator-calcs.tabulator-calcs-bottom { + border-top: 2px solid #333; +} + +.tabulator .tabulator-footer { + padding: 5px 10px; + border-top: 1px solid #999; + text-align: right; + color: #555; + font-weight: bold; + white-space: nowrap; + -ms-user-select: none; + user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +} + +.tabulator .tabulator-footer .tabulator-calcs-holder { + box-sizing: border-box; + width: calc(100% + 20px); + margin: -5px -10px 5px -10px; + text-align: left; + background: rgba(80,20,10,0.2); + border-bottom: 1px solid #333; + border-top: 1px solid #333; + overflow: hidden; +} + +.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row { + background: rgba(80,20,10,0.2); +} + +.tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle { + display: none; +} + +.tabulator .tabulator-footer .tabulator-calcs-holder:only-child { + margin-bottom: -5px; + border-bottom: none; +} + +.tabulator .tabulator-footer .tabulator-pages { + margin: 0 7px; +} + +.tabulator .tabulator-footer .tabulator-page { + display: inline-block; + margin: 0 2px; + padding: 2px 5px; + border: 1px solid #333; + border-radius: 3px; + background: rgba(255, 255, 255, 0.2); + color: #555; + font-family: inherit; + font-weight: inherit; + font-size: inherit; +} + +.tabulator .tabulator-footer .tabulator-page.active { + color: #d00; +} + +.tabulator .tabulator-footer .tabulator-page:disabled { + opacity: .5; +} + +.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover { + cursor: pointer; + background: rgba(0, 0, 0, 0.2); + color: #fff; +} + +.tabulator .tabulator-col-resize-handle { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 5px; +} + +.tabulator .tabulator-col-resize-handle.prev { + left: 0; + right: auto; +} + +.tabulator .tabulator-col-resize-handle:hover { + cursor: ew-resize; +} + +.tabulator .tabulator-loader { + position: absolute; + display: -ms-flexbox; + display: flex; + -ms-flex-align: center; + align-items: center; + top: 0; + left: 0; + z-index: 100; + height: 100%; + width: 100%; + background: rgba(0, 0, 0, 0.4); + text-align: center; +} + +.tabulator .tabulator-loader .tabulator-loader-msg { + display: inline-block; + margin: 0 auto; + padding: 10px 20px; + border-radius: 4px; + background: #fff; + font-weight: bold; + font-size: 16px; +} + +.tabulator .tabulator-loader .tabulator-loader-msg.tabulator-loading { + border: 4px solid #333; + color: #000; +} + +.tabulator .tabulator-loader .tabulator-loader-msg.tabulator-error { + color: #000; +} + +.tabulator-row { + position: relative; + box-sizing: border-box; + min-height: 22px; +} + +.tabulator-row.tabulator-row-even { +} + +.tabulator-row.tabulator-selectable:hover { + cursor: pointer; +} + +.tabulator-row.tabulator-selected { + background-color: #9ABCEA; +} + +.tabulator-row.tabulator-selected:hover { + background-color: #555; + cursor: pointer; +} + +.tabulator-row.tabulator-row-moving { + border: 1px solid #000; + background: #fff; +} + +.tabulator-row.tabulator-moving { + position: absolute; + border-top: 1px solid #333; + border-bottom: 1px solid #333; + pointer-events: none; + z-index: 15; +} + +.tabulator-row .tabulator-row-resize-handle { + position: absolute; + right: 0; + bottom: 0; + left: 0; + height: 5px; +} + +.tabulator-row .tabulator-row-resize-handle.prev { + top: 0; + bottom: auto; +} + +.tabulator-row .tabulator-row-resize-handle:hover { + cursor: ns-resize; +} + +.tabulator-row .tabulator-frozen { + display: inline-block; + position: absolute; + background-color: inherit; + z-index: 10; +} + +.tabulator-row .tabulator-frozen.tabulator-frozen-left { + border-right: 2px solid #333; +} + +.tabulator-row .tabulator-frozen.tabulator-frozen-right { + border-left: 2px solid #333; +} + +.tabulator-row .tabulator-responsive-collapse { + box-sizing: border-box; + padding: 5px; + border-top: 1px solid #333; + border-bottom: 1px solid #333; +} + +.tabulator-row .tabulator-responsive-collapse:empty { + display: none; +} + +.tabulator-row .tabulator-responsive-collapse table { + font-size: 13px; +} + +.tabulator-row .tabulator-responsive-collapse table tr td { + position: relative; +} + +.tabulator-row .tabulator-responsive-collapse table tr td:first-of-type { + padding-right: 10px; +} + +.tabulator-row .tabulator-cell { + display: inline-block; + position: relative; + box-sizing: border-box; + padding: 10px; + border-right: 1px solid #333; + vertical-align: middle; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.tabulator-row .tabulator-cell.tabulator-editing { + border: 1px solid #1D68CD; + padding: 0; +} + +.tabulator-row .tabulator-cell.tabulator-editing input, .tabulator-row .tabulator-cell.tabulator-editing select { + border: 1px; + background: transparent; +} + +.tabulator-row .tabulator-cell.tabulator-validation-fail { + border: 1px solid #dd0000; +} + +.tabulator-row .tabulator-cell.tabulator-validation-fail input, .tabulator-row .tabulator-cell.tabulator-validation-fail select { + border: 1px; + background: transparent; + color: #dd0000; +} + +.tabulator-row .tabulator-cell:first-child .tabulator-col-resize-handle.prev { + display: none; +} + +.tabulator-row .tabulator-cell.tabulator-row-handle { + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; +} + +.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box { + width: 80%; +} + +.tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box .tabulator-row-handle-bar { + width: 100%; + height: 3px; + margin-top: 2px; + background: #666; +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-branch { + display: inline-block; + vertical-align: middle; + height: 9px; + width: 7px; + margin-top: -9px; + margin-right: 5px; + border-bottom-left-radius: 1px; + border-left: 2px solid #333; + border-bottom: 2px solid #333; +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-control { + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + vertical-align: middle; + height: 11px; + width: 11px; + margin-right: 5px; + border: 1px solid #333; + border-radius: 2px; + background: rgba(0, 0, 0, 0.1); + overflow: hidden; +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-control:hover { + cursor: pointer; + background: rgba(0, 0, 0, 0.2); +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse { + display: inline-block; + position: relative; + height: 7px; + width: 1px; + background: transparent; +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after { + position: absolute; + content: ""; + left: -3px; + top: 3px; + height: 1px; + width: 7px; +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand { + display: inline-block; + position: relative; + height: 7px; + width: 1px; + background: #333; +} + +.tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand:after { + position: absolute; + content: ""; + left: -3px; + top: 3px; + height: 1px; + width: 7px; + background: #333; +} + +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle { + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: center; + justify-content: center; + -moz-user-select: none; + -khtml-user-select: none; + -webkit-user-select: none; + -o-user-select: none; + height: 15px; + width: 15px; + border-radius: 4px; + background: #666; + color: #fff; + font-weight: bold; + font-size: 1.1em; +} + +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover { + opacity: .7; +} + +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-close { + display: initial; +} + +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle.open .tabulator-responsive-collapse-toggle-open { + display: none; +} + +.tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close { + display: none; +} + +.tabulator-row.tabulator-group { + box-sizing: border-box; + border-bottom: 1px solid #999; + border-right: 1px solid #333; + border-top: 1px solid #999; + padding: 5px; + padding-left: 10px; + background: #333; + font-weight: bold; + min-width: 100%; +} + +.tabulator-row.tabulator-group:hover { + cursor: pointer; + background-color: rgba(0, 0, 0, 0.1); +} + +.tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow { + margin-right: 10px; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 6px solid #666; + border-bottom: 0; +} + +.tabulator-row.tabulator-group.tabulator-group-level-1 .tabulator-arrow { + margin-left: 20px; +} + +.tabulator-row.tabulator-group.tabulator-group-level-2 .tabulator-arrow { + margin-left: 40px; +} + +.tabulator-row.tabulator-group.tabulator-group-level-3 .tabulator-arrow { + margin-left: 60px; +} + +.tabulator-row.tabulator-group.tabulator-group-level-4 .tabulator-arrow { + margin-left: 80px; +} + +.tabulator-row.tabulator-group.tabulator-group-level-5 .tabulator-arrow { + margin-left: 100px; +} + +.tabulator-row.tabulator-group .tabulator-arrow { + display: inline-block; + width: 0; + height: 0; + margin-right: 16px; + border-top: 6px solid transparent; + border-bottom: 6px solid transparent; + border-right: 0; + border-left: 6px solid #666; + vertical-align: middle; +} + +.tabulator-row.tabulator-group span { + margin-left: 10px; + color: #d00; +} + +.tabulator-edit-select-list { + position: absolute; + display: inline-block; + box-sizing: border-box; + max-height: 200px; + background: #fff; + border: 1px solid #333; + font-size: 13px; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + z-index: 10000; +} + +.tabulator-edit-select-list .tabulator-edit-select-list-item { + padding: 4px; + color: #333; +} + +.tabulator-edit-select-list .tabulator-edit-select-list-item.active { + color: #fff; + background: #1D68CD; +} + +.tabulator-edit-select-list .tabulator-edit-select-list-item:hover { + cursor: pointer; + color: #fff; + background: #1D68CD; +} + +.tabulator-edit-select-list .tabulator-edit-select-list-group { + border-bottom: 1px solid #333; + padding: 4px; + padding-top: 6px; + color: #333; + font-weight: bold; +} |
