mirror of https://github.com/status-im/fathom.git
update to latest css
This commit is contained in:
Danny van Kooten
parent
ed21a80df9
commit
e4e4bfdea6
|
|
@ -109,7 +109,7 @@ class Chart extends Component {
|
|||
}
|
||||
|
||||
paramsChanged(o, n) {
|
||||
return o.siteId != n.siteId || o.before != n.before && o.after != n.after;
|
||||
return o.siteId != n.siteId || o.before != n.before || o.after != n.after;
|
||||
}
|
||||
|
||||
@bind
|
||||
|
|
|
|||
|
|
@ -200,13 +200,13 @@ class DatePicker extends Component {
|
|||
let p = availablePeriods[id];
|
||||
return (
|
||||
<li class={classNames({ active: id == state.period })}>
|
||||
<a href="#" data-value={id} onClick={this.setPeriod}>{p.label}</a>
|
||||
<a href="javascript:void(0);" data-value={id} onClick={this.setPeriod}>{p.label}</a>
|
||||
</li>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<ul>
|
||||
<ul class="date-nav cf">
|
||||
{links}
|
||||
<li class="custom">
|
||||
<Pikadayer value={this.dateValue(state.startDate)} onSelect={this.setStartDate} />
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ class Sidebar extends Component {
|
|||
}
|
||||
|
||||
paramsChanged(o, n) {
|
||||
return o.siteId != n.siteId || o.before != n.before && o.after != n.after;
|
||||
return o.siteId != n.siteId || o.before != n.before || o.after != n.after;
|
||||
}
|
||||
|
||||
@bind
|
||||
|
|
@ -53,7 +53,7 @@ class Sidebar extends Component {
|
|||
|
||||
render(props, state) {
|
||||
return (
|
||||
<div class="box box-totals animated fadeInUp delayed_03s">
|
||||
<div class="box box-totals">
|
||||
<CountWidget title="Unique visitors" value={state.data.Visitors} loading={state.loading} />
|
||||
<CountWidget title="Pageviews" value={state.data.Pageviews} loading={state.loading} />
|
||||
<CountWidget title="Avg time on site" value={state.data.AvgDuration} format="duration" loading={state.loading} />
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
paramsChanged(o, n) {
|
||||
return o.siteId != n.siteId || o.before != n.before && o.after != n.after;
|
||||
return o.siteId != n.siteId || o.before != n.before || o.after != n.after;
|
||||
}
|
||||
|
||||
@bind
|
||||
|
|
|
|||
|
|
@ -56,7 +56,8 @@ class Dashboard extends Component {
|
|||
changeDateRange(s) {
|
||||
this.setState({
|
||||
before: s.before,
|
||||
after: s.after
|
||||
after: s.after,
|
||||
period: s.period,
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -127,7 +128,7 @@ class Dashboard extends Component {
|
|||
|
||||
return (
|
||||
<div class="app-page ">
|
||||
<div class="wrapper animated fadeInUp delayed_02s">
|
||||
<div class={"rapper animated fadeInUp delayed_02s " + state.period }>
|
||||
|
||||
<header class="section">
|
||||
<nav class="main-nav">
|
||||
|
|
@ -141,29 +142,37 @@ class Dashboard extends Component {
|
|||
</header>
|
||||
|
||||
<section class="section">
|
||||
<nav class="date-nav">
|
||||
<nav>
|
||||
<DatePicker onChange={this.changeDateRange} />
|
||||
</nav>
|
||||
|
||||
<div class="boxes">
|
||||
<Sidebar siteId={state.site.id} before={state.before} after={state.after} />
|
||||
|
||||
<div class="boxes-col">
|
||||
<div class="box box-graph">
|
||||
<Chart siteId={state.site.id} before={state.before} after={state.after} />
|
||||
</div>
|
||||
<div class="box box-pages">
|
||||
<Table endpoint="stats/pages" headers={["Top pages", "Views", "Uniques"]} siteId={state.site.id} before={state.before} after={state.after} />
|
||||
</div>
|
||||
<div class="box box-referrers">
|
||||
<Table endpoint="stats/referrers" headers={["Top referrers", "Views", "Uniques"]} siteId={state.site.id} before={state.before} after={state.after} showHostname="true" />
|
||||
</div>
|
||||
<div class="box box-graph">
|
||||
<Chart siteId={state.site.id} before={state.before} after={state.after} />
|
||||
</div>
|
||||
<div class="box box-pages">
|
||||
<Table endpoint="stats/pages" headers={["Top pages", "Views", "Uniques"]} siteId={state.site.id} before={state.before} after={state.after} />
|
||||
</div>
|
||||
<div class="box box-referrers">
|
||||
<Table endpoint="stats/referrers" headers={["Top referrers", "Views", "Uniques"]} siteId={state.site.id} before={state.before} after={state.after} showHostname="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer hide-on-mobile">
|
||||
<p>Use <strong>the arrow keys</strong> to cycle through date ranges.</p>
|
||||
</div>
|
||||
<footer class="section">
|
||||
<div class="half">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="https://usefathom.com/terms/">Terms of use</a></li>
|
||||
<li><a href="https://usefathom.com/privacy/">Privacy policy</a></li>
|
||||
<li><a href="https://usefathom.com/data/">Our data policy</a></li>
|
||||
<li><LogoutButton onSuccess={props.onLogout} /></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="hide-on-mobile">Use <strong>the arrow keys</strong> to cycle through date ranges.</div>
|
||||
</div>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<footer class="section"></footer>
|
||||
|
|
|
|||
|
|
@ -1,341 +0,0 @@
|
|||
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background on active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57-
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers.
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE 10+.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10.
|
||||
* 2. Remove the padding in IE 10.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||
*/
|
||||
|
||||
details {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Misc
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10+.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -10,238 +10,135 @@ light #f5f7fa
|
|||
padding 8, 16, 20, 32, 64, 128, 256, 512, 1024
|
||||
font size 12, 16, 64
|
||||
*/
|
||||
@import "normalize";
|
||||
@import "fonts-overpass";
|
||||
|
||||
::selection { background: #a0ffd1; }
|
||||
::-moz-selection { background: #a0ffd1; }
|
||||
* {
|
||||
* { margin: 0; padding: 0; border: none; outline: none; list-style: none; box-sizing: border-box; text-decoration: none; font-size: 100%; vertical-align: baseline; line-height: 1.2; }
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
list-style: none;
|
||||
box-sizing: border-box;
|
||||
text-decoration: none;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
line-height: 1.2;
|
||||
|
||||
}
|
||||
html, body, #root { height: 100%; }
|
||||
body { overflow-y: scroll; }
|
||||
html, body { background: #f5f7fa; }
|
||||
body { font: 400 16px "overpass", sans-serif; color: #222; text-align: center; padding: 8px; }
|
||||
|
||||
|
||||
html {}
|
||||
body {
|
||||
font: 400 16px/1 'overpass', sans-serif;
|
||||
background: #f5f7fa;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.app-page {
|
||||
.wrapper { max-width: 1180px; margin: 0 auto; text-align: left; }
|
||||
.section { margin-bottom: 32px; }
|
||||
header {}
|
||||
|
||||
.rapper { text-align: left; margin: 0 auto; max-width: 1124px; }
|
||||
|
||||
header, footer { margin: 16px 0; }
|
||||
section {}
|
||||
footer {}
|
||||
footer { font-size: 12px; color: #aaa; }
|
||||
|
||||
a { transition: ease color .2s; }
|
||||
|
||||
nav { position: relative; font-size: 12px; }
|
||||
|
||||
nav a { color: #222; }
|
||||
footer nav a { color: #aaa; padding: 4px 0; display: inline-block; }
|
||||
footer nav a:hover { color: #222; }
|
||||
|
||||
header li { padding: 8px 0; }
|
||||
nav li.logo a { color: #533feb; font-size: 16px; }
|
||||
nav li.logo a:hover { color: #222; }
|
||||
|
||||
.boxes {
|
||||
display: flex;
|
||||
margin: 8px 0;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
justify-content:
|
||||
flex-start; align-items:
|
||||
stretch; width: 100%;
|
||||
}
|
||||
|
||||
.boxes-col {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.box {
|
||||
border-radius: 4px;
|
||||
margin-bottom: 8px;
|
||||
box-shadow: 0 2px 8px 0 rgba(70,73,77,.16);
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
flex-basis: 100%;
|
||||
min-width: 40px;
|
||||
}
|
||||
.box-totals { background: #46494d; color: #fff; padding: 24px 16px 0 16px; }
|
||||
.box-pages, .box-referrers, .box-graph { background: #fff; }
|
||||
|
||||
nav.main-nav ul { width: 100%; margin-top: 4px; margin-bottom: 0; padding: 0; }
|
||||
nav li { display: inline-block; }
|
||||
nav li a { transition: color .2s ease; position: relative; display: inline-block; padding: 0 8px 0 0; }
|
||||
nav li a:hover { color: #98a0a6; }
|
||||
.main-nav ul li { padding: 8px 0; }
|
||||
|
||||
.date-nav ul { padding: 0; margin: 0; font-size: 12px; text-transform: uppercase; }
|
||||
.date-nav li,
|
||||
.date-nav li a {
|
||||
color: #46494d;
|
||||
}
|
||||
nav.date-nav li a { }
|
||||
nav.date-nav li a:hover { color: #98a0a6; }
|
||||
nav.date-nav li.active a:hover { color: #46494d; }
|
||||
nav.date-nav li.active a:after { content:""; background: #88ffc6; display: block; width: 100%; height: 3px; position: absolute; top: 4px; z-index: -1; margin: 0 0 0 -4px; transition: all .4s ease; }
|
||||
|
||||
.date-nav .custom {
|
||||
float: right;
|
||||
}
|
||||
.date-nav .custom input {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
width: 68px;
|
||||
outline: 0;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: #533feb;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
text-align: right;
|
||||
margin: 20px 0;
|
||||
font-size: 12px;
|
||||
color: #46494d;
|
||||
}
|
||||
|
||||
.hide-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav li.visitors { color: #533feb; }
|
||||
nav li.signout a { padding-right: 0; }
|
||||
nav li.logo { float: left; }
|
||||
nav li.logo a { color: #533feb; display: inline-block; background: url("data:image/svg+xml;charset=UTF-8,%3csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 48 48' xml:space='preserve'%3e%3cpath style='fill:%23533feb;' d='M47.882,26.381C47.96,25.598,48,24.804,48,24c0.001-6.623-2.688-12.632-7.029-16.971 C36.632,2.688,30.623-0.001,24,0C17.377-0.001,11.368,2.688,7.029,7.029C2.688,11.368-0.001,17.377,0,24 c0,3.917,0.941,7.624,2.609,10.892c0,0,0,0,0,0c1.985,3.891,4.998,7.165,8.682,9.47C14.975,46.667,19.338,48.001,24,48 c6.221,0.001,11.901-2.372,16.162-6.258C44.424,37.858,47.284,32.45,47.882,26.381C47.882,26.381,47.882,26.381,47.882,26.381 C47.882,26.381,47.882,26.381,47.882,26.381C47.882,26.381,47.882,26.381,47.882,26.381C47.882,26.381,47.882,26.381,47.882,26.381 z M24,2.824c5.852,0.001,11.137,2.368,14.974,6.202c3.596,3.599,5.902,8.472,6.175,13.891l-8.386-8.386 c-0.263-0.263-0.627-0.414-0.998-0.414s-0.735,0.151-0.998,0.413L22.588,26.709l-5.59-5.59c-0.551-0.551-1.445-0.551-1.997,0 l-10.69,10.69C3.353,29.394,2.824,26.762,2.824,24c0.001-5.852,2.368-11.137,6.202-14.974C12.863,5.192,18.148,2.824,24,2.824z'/%3e%3cpath style='fill:%23fff;' d='M4.312,31.809l10.69-10.69c0.551-0.551,1.445-0.551,1.997,0l5.59,5.59l12.178-12.178 c0.263-0.263,0.626-0.413,0.998-0.413s0.735,0.151,0.998,0.414l8.386,8.386c-0.273-5.42-2.579-10.293-6.175-13.891 C35.137,5.192,29.852,2.824,24,2.824C18.148,2.824,12.863,5.192,9.026,9.026C5.192,12.863,2.824,18.148,2.824,24 C2.824,26.762,3.353,29.394,4.312,31.809z'/%3e%3c/svg%3e") top left no-repeat; background-size: 24px 24px; height: 24px; padding: 6px 0 6px 32px; }
|
||||
|
||||
|
||||
.main-nav ul { display: inline-block; padding: 0; }
|
||||
.spacer { color: #98a0a6; padding: 0 8px; }
|
||||
|
||||
|
||||
.header div, .date-nav a, .total-heading { font-size: 12px; text-transform: uppercase; color: #98a0a6; }
|
||||
|
||||
p, li, .cell { }
|
||||
.total-numbers { font-size: 44px; letter-spacing: -3px; margin-bottom: 32px; font-weight: 200; }
|
||||
.totals-detail { width: 48%; display: inline-block; }
|
||||
.total-heading { color: #fff; opacity: .6; }
|
||||
|
||||
.table-row { display: flex; flex-direction: row; flex-grow: 0; flex-wrap: wrap; width: 100%; position: relative; margin-bottom: 2px; padding: 0 16px; }
|
||||
.cell { flex-grow: 1; width: 20%; text-align: left; padding: 8px 0; position: relative; z-index: 2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
||||
.main-col { width: 56%; margin-right: 4%; }
|
||||
|
||||
.header:after { display: none; }
|
||||
.table-row:after { content: ""; background: #88ffc6; position: absolute; height: 30px; top: 0; left: 0; opacity: .2; border-right: 2px solid #45ce8c; }
|
||||
.w100:after{width:99%}.w99:after{width:99%}.w98:after{width:98%}.w97:after{width:97%}.w96:after{width:96%}
|
||||
.w95:after{width:95%}.w94:after{width:94%}.w93:after{width:93%}.w92:after{width:92%}.w91:after{width:91%}
|
||||
.w90:after{width:90%}.w89:after{width:89%}.w88:after{width:88%}.w87:after{width:87%}.w86:after{width:86%}
|
||||
.w85:after{width:85%}.w84:after{width:84%}.w83:after{width:83%}.w82:after{width:82%}.w81:after{width:81%}
|
||||
.w80:after{width:80%}.w79:after{width:79%}.w78:after{width:78%}.w77:after{width:77%}.w76:after{width:76%}
|
||||
.w75:after{width:75%}.w74:after{width:74%}.w73:after{width:73%}.w72:after{width:72%}.w71:after{width:71%}
|
||||
.w70:after{width:70%}.w69:after{width:69%}.w68:after{width:68%}.w67:after{width:67%}.w66:after{width:66%}
|
||||
.w65:after{width:65%}.w64:after{width:64%}.w63:after{width:63%}.w62:after{width:62%}.w61:after{width:61%}
|
||||
.w60:after{width:60%}.w59:after{width:59%}.w58:after{width:58%}.w57:after{width:57%}.w56:after{width:56%}
|
||||
.w55:after{width:55%}.w54:after{width:54%}.w53:after{width:53%}.w52:after{width:52%}.w51:after{width:51%}
|
||||
.w50:after{width:50%}.w49:after{width:49%}.w48:after{width:48%}.w47:after{width:47%}.w46:after{width:46%}
|
||||
.w45:after{width:45%}.w44:after{width:44%}.w43:after{width:43%}.w42:after{width:42%}.w41:after{width:41%}
|
||||
.w40:after{width:40%}.w39:after{width:39%}.w38:after{width:38%}.w37:after{width:37%}.w36:after{width:36%}
|
||||
.w35:after{width:35%}.w34:after{width:34%}.w33:after{width:33%}.w32:after{width:32%}.w31:after{width:31%}
|
||||
.w30:after{width:30%}.w29:after{width:29%}.w28:after{width:28%}.w27:after{width:27%}.w26:after{width:26%}
|
||||
.w25:after{width:25%}.w24:after{width:24%}.w23:after{width:23%}.w22:after{width:22%}.w21:after{width:21%}
|
||||
.w20:after{width:20%}.w19:after{width:19%}.w18:after{width:18%}.w17:after{width:17%}.w16:after{width:16%}
|
||||
.w15:after{width:15%}.w14:after{width:14%}.w13:after{width:13%}.w12:after{width:12%}.w11:after{width:11%}
|
||||
.w10:after{width:10%}.w09:after{width:9%}.w08:after{width:8%}.w07:after{width:7%}.w06:after{width:6%}
|
||||
.w05:after{width:5%}.w04:after{width:4%}.w03:after{width:3%}.w02:after{width:2%}.w01:after{width:1%}.w00:after{width:0}
|
||||
|
||||
a { color: #46494d; text-decoration: none; transition: all .4s ease; }
|
||||
.cell a:hover { color: #533feb; }
|
||||
|
||||
/* site switcher */
|
||||
nav li.sites { font-size: 12px; margin-left: 12px; background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='#533feb' d='M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z'%3E%3C/path%3E%3C/svg%3E") 97% 8px no-repeat; border-radius: 4px; padding: 8px; background-size: 10px auto; }
|
||||
nav li.sites { background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='#533feb' d='M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z'%3E%3C/path%3E%3C/svg%3E") 97% 8px no-repeat; border-radius: 4px; padding: 8px; background-size: 10px auto; }
|
||||
nav li.sites:hover { background: #533feb url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='#fff' d='M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z'%3E%3C/path%3E%3C/svg%3E") 97% 8px no-repeat; background-size: 10px auto; }
|
||||
nav li.sites ul { display: none; position: absolute; z-index: 1000; width: 100%; background: #533feb; border-radius: 4px; padding: 8px 0; margin: 0 0 0 -8px; }
|
||||
nav li.sites:hover ul { display: block; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); }
|
||||
nav li ul { display: none; position: absolute; z-index: 1001; width: 100%; background: #533feb; border-radius: 4px; padding: 8px 0; margin: 0 0 0 -8px; }
|
||||
nav li:hover ul { display: block; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); }
|
||||
nav li.sites:hover a { color: #fff; }
|
||||
nav li.sites ul li { padding: 0 4px; width: 100%; }
|
||||
nav li.sites ul a { color: #ddd; display: inline-block; width: 100%; font-size: 13px; padding: 4px; }
|
||||
nav li.sites ul a:hover { background: rgba(255,255,255,.2); border-radius: 2px; }
|
||||
nav li.sites ul li.add-new a { color: #88ffc6; }
|
||||
nav li ul li { padding: 0 4px; width: 100%; }
|
||||
nav li ul a { color: #ddd; display: inline-block; width: 100%; font-size: 13px; padding: 4px; }
|
||||
nav li ul a:hover { background: rgba(255,255,255,.2); border-radius: 2px; }
|
||||
nav li ul li.add-new a { color: #88ffc6 !important; }
|
||||
|
||||
/* gearwheel */
|
||||
nav .settings svg { width: 16px; display: inline-block; transition: ease all .2s; }
|
||||
nav .settings svg path { fill: #533feb; }
|
||||
nav .settings svg:hover { transform: rotate(45deg); }
|
||||
|
||||
.date-nav { margin-bottom: 12px; }
|
||||
.date-nav li a { position: relative; font-size: 12px; text-transform: uppercase; padding-right: 8px; }
|
||||
.date-nav li.custom { color: #aaa; float: right; margin: 0; }
|
||||
.date-nav li.custom input {
|
||||
display: inline-block;
|
||||
width: 75px;
|
||||
border: 0;
|
||||
font-size: inherit;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.date-nav li a:hover { color: #aaa; }
|
||||
.date-nav li.active a { padding-right: 8px; z-index: 1; color: #222; }
|
||||
.date-nav li.active a:after { content:""; background: #88ffc6; display: block; width: 100%; height: 3px; position: absolute; top: 6px; z-index: -1; margin: 0 0 0 -4px; }
|
||||
|
||||
.box { background: #fff; border-radius: 4px; margin-bottom: 16px; padding: 16px; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); }
|
||||
|
||||
.box-totals { background: #222; color: #ddd; }
|
||||
|
||||
/* modal */
|
||||
.totals-detail { display: grid; grid-template-columns: 1fr 1.6fr; grid-gap: 12px; }
|
||||
.total-numbers { text-align: right; }
|
||||
.current-detail div { color: #88ffc6; }
|
||||
|
||||
.table-row { display: grid; grid-template-columns: 4fr 1fr 1fr; grid-gap: 12px; padding: 8px 0; position: relative; }
|
||||
.table-row.header { font-size: 12px; text-transform: uppercase; color: #aaa; }
|
||||
.table-row a { color: #222; }
|
||||
.table-row a:hover { color: #533feb; }
|
||||
.cell { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; z-index: 1; position: relative; }
|
||||
.cell.main-col { text-align: left; }
|
||||
|
||||
.table-row:after { content: ""; background: #88ffc6; position: absolute; height: 34px; top: 0; left: -16px; opacity: .2; border-right: 2px solid #45ce8c; z-index: 0; }
|
||||
.table-row.header:after { background: none; border: none; }
|
||||
|
||||
.modal-wrap { position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: 1977; background: rgba(20,20,20,.8); display: grid; grid-template-columns: 1fr; align-items: center; }
|
||||
.modal { max-width: 520px; width: 100%; margin: 0 auto; text-align: left; background: #fff; z-index: 1978; height: auto; border-radius: 4px; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); overflow: hidden; }
|
||||
.modal { max-width: 480px; width: 100%; margin: 0 auto; text-align: left; background: #fff; z-index: 1978; height: auto; border-radius: 4px; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); overflow: hidden; }
|
||||
.modal p { padding: 16px; font-size: 12px; color: #aaa; }
|
||||
|
||||
small { font-size: 12px; color: #aaa; }
|
||||
small a { color: #aaa; }
|
||||
|
||||
.modal form { padding: 0 16px; }
|
||||
.modal label { padding: 4px 0; display: block; }
|
||||
.modal fieldset { padding: 0; display: block; width: 100%; margin-bottom: 32px; }
|
||||
.modal fieldset:last-child { margin-bottom: 16px; }
|
||||
.modal input, textarea { background: #f5f7fa; padding: 4px; width: 100%; display: block; font: 400 16px "overpass", sans-serif; color: #222; border-bottom: 2px solid #e6e8eb; }
|
||||
.modal textarea { font-size: 12px; min-height: 120px; resize: none; overflow-y: scroll; }
|
||||
.modal button { background: #88ffc6; color: #222; padding: 4px 16px; font: 400 16px "overpass", sans-serif; cursor: pointer; border-radius: 4px; }
|
||||
.modal div.delete a { color: red; }
|
||||
label { padding: 4px 0; display: block; }
|
||||
fieldset { display: block; width: 100%; margin-bottom: 32px; }
|
||||
fieldset:last-child { margin-bottom: 16px; }
|
||||
input, textarea { background: #f5f7fa; padding: 4px; width: 100%; display: block; font: 400 16px "overpass", sans-serif; color: #222; border-bottom: 2px solid #e6e8eb; }
|
||||
textarea { font-size: 12px; min-height: 120px; resize: none; overflow-y: scroll; }
|
||||
button { background: #88ffc6; color: #222; padding: 4px 16px; font: 400 16px "overpass", sans-serif; cursor: pointer; border-radius: 4px; }
|
||||
div.delete a { color: red; }
|
||||
|
||||
.w100:after{width:99%}.w99:after{width:99%}.w98:after{width:98%}.w97:after{width:97%}.w96:after{width:96%}.w95:after{width:95%}.w94:after{width:94%}.w93:after{width:93%}.w92:after{width:92%}.w91:after{width:91%}.w90:after{width:90%}.w89:after{width:89%}.w88:after{width:88%}.w87:after{width:87%}.w86:after{width:86%}.w85:after{width:85%}.w84:after{width:84%}.w83:after{width:83%}.w82:after{width:82%}.w81:after{width:81%}.w80:after{width:80%}.w79:after{width:79%}.w78:after{width:78%}.w77:after{width:77%}.w76:after{width:76%}.w75:after{width:75%}.w74:after{width:74%}.w73:after{width:73%}.w72:after{width:72%}.w71:after{width:71%}.w70:after{width:70%}.w69:after{width:69%}.w68:after{width:68%}.w67:after{width:67%}.w66:after{width:66%}.w65:after{width:65%}.w64:after{width:64%}.w63:after{width:63%}.w62:after{width:62%}.w61:after{width:61%}.w60:after{width:60%}.w59:after{width:59%}.w58:after{width:58%}.w57:after{width:57%}.w56:after{width:56%}.w55:after{width:55%}.w54:after{width:54%}.w53:after{width:53%}.w52:after{width:52%}.w51:after{width:51%}.w50:after{width:50%}.w49:after{width:49%}.w48:after{width:48%}.w47:after{width:47%}.w46:after{width:46%}.w45:after{width:45%}.w44:after{width:44%}.w43:after{width:43%}.w42:after{width:42%}.w41:after{width:41%}.w40:after{width:40%}.w39:after{width:39%}.w38:after{width:38%}.w37:after{width:37%}.w36:after{width:36%}.w35:after{width:35%}.w34:after{width:34%}.w33:after{width:33%}.w32:after{width:32%}.w31:after{width:31%}.w30:after{width:30%}.w29:after{width:29%}.w28:after{width:28%}.w27:after{width:27%}.w26:after{width:26%}.w25:after{width:25%}.w24:after{width:24%}.w23:after{width:23%}.w22:after{width:22%}.w21:after{width:21%}.w20:after{width:20%}.w19:after{width:19%}.w18:after{width:18%}.w17:after{width:17%}.w16:after{width:16%}.w15:after{width:15%}.w14:after{width:14%}.w13:after{width:13%}.w12:after{width:12%}.w11:after{width:11%}.w10:after{width:10%}.w09:after{width:9%}.w08:after{width:8%}.w07:after{width:7%}.w06:after{width:6%}.w05:after{width:5%}.w04:after{width:4%}.w03:after{width:3%}.w02:after{width:2%}.w01:after{width:1%}.w00:after{width:0}
|
||||
|
||||
|
||||
|
||||
@media ( min-width: 1220px ) {
|
||||
|
||||
nav.main-nav ul { margin-top: 24px; }
|
||||
.hide-on-mobile{ display: initial; }
|
||||
|
||||
.boxes { justify-content: space-between; flex-wrap: nowrap; }
|
||||
.box { margin: 0 4px; }
|
||||
.boxes-col {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.box-graph {
|
||||
margin: 0 0 4px 0;
|
||||
max-width: 1000px;
|
||||
}
|
||||
.box-totals { max-width: 230px; margin-left: 0; }
|
||||
.box-pages {
|
||||
flex-basis: 464px;
|
||||
width: 50%;
|
||||
margin: 0 2px 0 0;
|
||||
max-width: 500px;
|
||||
}
|
||||
.box-referrers {
|
||||
flex-basis: 464px;
|
||||
margin: 0 0 0 2px;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.totals-detail { width: 100%; }
|
||||
.total-numbers { font-size: 64px; }
|
||||
|
||||
.half { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; align-items: center; }
|
||||
.half div { text-align: right; }
|
||||
.half div.submit { text-align: left; }
|
||||
|
||||
body { padding: 0; }
|
||||
header, footer { margin: 32px 0; }
|
||||
|
||||
nav li { display: inline-block; position: relative; margin-right: 16px; }
|
||||
nav li.sites { width: 204px; margin-right: 0; }
|
||||
nav li.sites, nav li.settings, nav li.visitors { float: right; }
|
||||
nav li.sites, nav li.settings { float: right; }
|
||||
nav li.sites, nav li.sites:hover { background-position: 184px 8px; }
|
||||
|
||||
}
|
||||
|
||||
@media( max-width: 600px ) {
|
||||
.date-nav .custom { display: none; }
|
||||
nav .date-nav li { margin-right: 8px; }
|
||||
nav li ul { width: 204px; right: 0; margin: 0; }
|
||||
|
||||
.box { margin: 0; padding: 32px 16px; }
|
||||
.boxes { display: grid; grid-template-columns: 276px 420px 420px; grid-gap: 4px; }
|
||||
.box-totals { grid-column: 1; grid-row: 1/3; }
|
||||
.box-graph { grid-column: 2/4; grid-row: 1; margin: 0 0 4px 0; }
|
||||
.box-pages { grid-column: 2; grid-row: 2 ; }
|
||||
.box-referrers { grid-column: 3; grid-row: 2; }
|
||||
|
||||
.today .box-pages, .today .box-referrers{ grid-row: 1; }
|
||||
|
||||
.half { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; align-items: center; }
|
||||
.half div { text-align: right; }
|
||||
.half div.submit { text-align: left; }
|
||||
|
||||
.totals-detail { display: block; margin-bottom: 32px; }
|
||||
.total-heading { font-size: 12px; text-transform: uppercase; color: #888; line-height: .8; }
|
||||
.total-numbers { font-size: 68px; font-weight: 200; letter-spacing: -.06em; text-align: left; }
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,16 @@
|
|||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.cf:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
.hide-on-mobile { display: none !important; }
|
||||
}
|
||||
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
|
|
@ -44,7 +54,6 @@
|
|||
.delayed_05s { animation-delay: .5s; }
|
||||
.delayed_06s { animation-delay: .6s; }
|
||||
|
||||
|
||||
.fadeInUp { animation-name: fadeInUp; }
|
||||
.fadeInDown { animation-name: fadeInDown; }
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue