kopia lustrzana https://gitlab.com/tomaszg/geostat
Some formatting for css
Tomasz Golinski
rodzic
958834553c
commit
ed774b006f
204
geo.css
204
geo.css
|
|
@ -1,32 +1,32 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Lato|Special+Elite|Averia+Serif+Libre');
|
||||
|
||||
body {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background: white;
|
||||
font-family: 'Lato', serif;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
background: white;
|
||||
font-family: 'Lato', serif;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-family: 'Averia Serif Libre', serif;
|
||||
font-size: 34px;
|
||||
font-weight: bold;
|
||||
color: #BBB;
|
||||
text-align: center;
|
||||
font-family: 'Averia Serif Libre', serif;
|
||||
font-size: 34px;
|
||||
font-weight: bold;
|
||||
color: #BBB;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-family: 'Special Elite', serif;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
color: #48B;
|
||||
text-align: center;
|
||||
font-family: 'Special Elite', serif;
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
color: #48B;
|
||||
}
|
||||
|
||||
form {
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
div.basic_stats {
|
||||
|
|
@ -38,13 +38,19 @@ span.value {
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
a:link, a:visited, a:hover, a:active {
|
||||
a:link,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
color: #48B;
|
||||
}
|
||||
|
||||
table, dl, .histogram_others, .heatmap {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
table,
|
||||
dl,
|
||||
.histogram_others,
|
||||
.heatmap {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -59,139 +65,137 @@ table, dl, .histogram_others, .heatmap {
|
|||
font-size: 10px;
|
||||
}
|
||||
|
||||
#footer a:link, #footer a:visited, #footer a:hover, #footer a:active {
|
||||
#footer a:link,
|
||||
#footer a:visited,
|
||||
#footer a:hover,
|
||||
#footer a:active {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.dt_head {
|
||||
font-weight: bold;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
width: 4em;
|
||||
background: #CCC;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
width: 4em;
|
||||
background: #CCC;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
td.dt_zero {
|
||||
color: #888;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
|
||||
/* histogram */
|
||||
|
||||
.bar {
|
||||
font-size: .8em;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
width: 500px;
|
||||
height: 40px;
|
||||
margin-left: 200px;
|
||||
background: repeating-linear-gradient(
|
||||
to right,
|
||||
#ddd,
|
||||
#ddd 1px,
|
||||
#fff 1px,
|
||||
#fff 5%
|
||||
);
|
||||
font-size: .8em;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
width: 500px;
|
||||
height: 40px;
|
||||
margin-left: 200px;
|
||||
background: repeating-linear-gradient( to right, #ddd, #ddd 1px, #fff 1px, #fff 5%);
|
||||
}
|
||||
|
||||
.bar:after {
|
||||
content: "";
|
||||
display: block;
|
||||
background-color: #48B;
|
||||
width: var(--percent);
|
||||
margin-bottom: 10px;
|
||||
height: 90%;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
content: "";
|
||||
display: block;
|
||||
background-color: #48B;
|
||||
width: var(--percent);
|
||||
margin-bottom: 10px;
|
||||
height: 90%;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.text {
|
||||
/* font-weight: 600;*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
justify-content: flex-end;
|
||||
/* font-weight: 600;*/
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
width: 200px;
|
||||
background-color: white;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
dl {
|
||||
display: flex;
|
||||
background-color: white;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
display: flex;
|
||||
background-color: white;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.histogram_others {
|
||||
width: 700px;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
|
||||
/* collapsible */
|
||||
|
||||
.wrap-collabsible {
|
||||
margin-bottom: 1.2rem 0;
|
||||
margin-bottom: 1.2rem 0;
|
||||
}
|
||||
|
||||
.toggle {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lbl-toggle {
|
||||
display: inline;
|
||||
|
||||
font-weight: bold;
|
||||
font-family: 'Lato', serif;
|
||||
color: #48B;
|
||||
cursor: pointer;
|
||||
border-radius: 7px;
|
||||
transition: all 0.25s ease-out;
|
||||
padding-left: 1em;
|
||||
display: inline;
|
||||
font-weight: bold;
|
||||
font-family: 'Lato', serif;
|
||||
color: #48B;
|
||||
cursor: pointer;
|
||||
border-radius: 7px;
|
||||
transition: all 0.25s ease-out;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.lbl-toggle:hover {
|
||||
color: #A02020;
|
||||
color: #A02020;
|
||||
}
|
||||
|
||||
.lbl-toggle::before {
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid currentColor;
|
||||
vertical-align: middle;
|
||||
margin-right: .7rem;
|
||||
transform: translateY(-2px);
|
||||
transition: transform .2s ease-out;
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
border-top: 5px solid transparent;
|
||||
border-bottom: 5px solid transparent;
|
||||
border-left: 5px solid currentColor;
|
||||
vertical-align: middle;
|
||||
margin-right: .7rem;
|
||||
transform: translateY(-2px);
|
||||
transition: transform .2s ease-out;
|
||||
}
|
||||
|
||||
.toggle:checked + .lbl-toggle::before {
|
||||
transform: rotate(90deg) translateX(-3px);
|
||||
.toggle:checked+.lbl-toggle::before {
|
||||
transform: rotate(90deg) translateX(-3px);
|
||||
}
|
||||
|
||||
.collapsible-content {
|
||||
font-size: 12px;
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
transition: max-height .25s ease-in-out;
|
||||
font-size: 12px;
|
||||
max-height: 0px;
|
||||
overflow: hidden;
|
||||
transition: max-height .25s ease-in-out;
|
||||
}
|
||||
|
||||
.toggle:checked + .lbl-toggle + .collapsible-content {
|
||||
max-height: 10000em;
|
||||
.toggle:checked+.lbl-toggle+.collapsible-content {
|
||||
max-height: 10000em;
|
||||
}
|
||||
|
||||
.collapsible-content .content-inner {
|
||||
background: rgba(240, 245, 255, 1);
|
||||
padding: .5rem 1rem;
|
||||
background: rgba(240, 245, 255, 1);
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue