Files
weewx/docs/css/weewx_docs.css
davies-barnard 46224382d9 CSS Changes
Conversion of font sizes to %ages and addition of media queries.
2016-02-26 18:22:01 +00:00

446 lines
7.7 KiB
CSS

/* Styles for the weewx documentation
*
* Copyright (c) 2015 Tom Keffer <tkeffer@gmail.com>
* Modified 02-2016 Chris Davies-Barnard <weewx@davies-barnard.co.uk>
*
* See the file LICENSE.txt for your rights.
*/
/**** MAIN LAYOUT ****/
body{
font-family: Verdana,arial,sans-serif;
font-size: 100%;
}
/**** GRID SYSTEM ****/
* { box-sizing: border-box; }
#page {
width:100%;
margin-left: auto;
margin-right: auto;
height: auto;
overflow: hidden;
}
.row:after {
content: "";
clear: both;
display: block;
}
div.main { overflow-x: scroll; }
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
.sidebar { display: none; }
.main { width:100%; }
.tr { font-size: 80%; }
}
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
.sidebar { display: block; width:190px; }
.main { margin-left: 210px; width:auto; }
.tr { font-size: 80%; }
}
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
.sidebar { display: block; width:190px; }
.main { margin-left: 210px; }
}
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
.sidebar { display: block; width:220px; }
.main { margin-left: 230px; width:auto; }
}
@media (min-width:1281px) { /* hi-res laptops and desktops */
.sidebar { display: block; width:250px; }
.main { margin-left: 270px; }
}
div.full_main { width:100% }
/**** SIDEBAR ****/
div.sidebar {
padding: 5px;
background: #fff;
position: fixed;
top: 0px;
left: 10px;
bottom: 10px;
overflow-x: hidden;
}
div.fixed {}
div.scrollable {
overflow-y: scroll;
height: 100%;
}
/**** TOC STYLES ****/
#toc_controls {}
/* Overrides for tocify Table-of-Contents */
.tocify {
position: relative;
margin-top: 10px;
margin-left: 0;
width:auto;
border: 0;
webkit-border-radius: 0px;
moz-border-radius: 0px;
border-radius: 0px;
overflow-y: scroll;
overflow-x: hidden;
}
.tocify ul, .tocify li {
line-height: 1.2;
}
.tocify-header ul, .tocify-header li{
padding-left: 10px;
text-indent: -10px;
}
.tocify-subheader {
display: inherit;
}
/* prevent dancing toc by eliminating the default bold during mouseover */
#toc .ui-state-hover {
background: #ddefef;
}
#toc .ui-state-hover a{
font-weight: normal;
color: black;
}
#toc .ui-state-default {
font-weight: normal;
background: #aacccc;
}
#toc .ui-state-default a{
color: black;
}
#toc_controls {}
/**** LEGEND ****/
#legend {}
#legend p {
border: 1px solid #888888;
padding-left: 5px;
padding-right: 5px;
font-size: 80%;
margin-bottom: 1px;
}
#legend .removed {
background: #ffdddd;
}
#legend .changed {
background: #ffe0b0;
}
#legend .added {
background: #ccffcc;
}
.legend.scrollable {
height: 80%;
}
/**** GENERAL STYLES ****/
li {
margin-right: 10%;
margin-top: 10px;
}
dt {
margin-top: 10px;
}
dd {
margin-top: 5px;
}
h1 {
font-size: 160%;
font-weight: bold;
color: #FFFFFF;
border: 1px solid black;
background-color: #008080;
padding-left: .5em;
padding-right: .5em;
}
h2 {
font-size: 140%;
font-weight: bold;
color: teal;
margin-top: 10px;
}
h3 {
font-size: 120%;
font-weight: bold;
color: teal;
}
h4 {
font-size: 100%;
font-weight: bold;
color: teal;
}
/**** MISC STYLES ****/
.code {
font-family: "Courier New", Courier, monospace;
}
.symcode {
font-family: "Courier New", Courier, monospace;
font-style: italic;
}
.station_data {
margin-left: 40px;
margin-right: 80px;
width: 500px;
}
.station_data_key {
font-size: 80%;
font-style: italic;
margin-left: 40px;
margin-right: 80px;
width: 500px;
}
.cmd {
font-weight: bold;
}
.tty {
font-family: "Courier New", Courier, monospace;
font-size: 90%;
background-color: #FFFFe0;
border: 1px solid #ddddaa;
padding: 3px 8px 3px 8px;
margin: 5px 15px 5px 15px;
white-space: pre-wrap;
line-height: normal;
}
.title {
margin-top: 0px;
text-align: center;
}
.config_section {}
.config_option, .config_important {
font-family: "Courier New", Courier, monospace;
font-weight: bold;
color: black;
margin-top: 1.5em;
margin-bottom: 0px;
}
.config_important {
color: #bb9900;
}
.highlight {
background-color: #ffe0b0;
}
.text_highlight, .first_col {
font-weight: bold;
background-color: #eef0f0;
padding-left: 10px;
padding-right: 10px;
}
.center {
text-align: center;
}
.example_output {
font-family: "Times New Roman", Times, serif;
padding: 3px 8px 3px 8px;
margin: 5px 15px 5px 15px;
border: 1px solid #cccccc;
box-shadow: 2px 2px 3px #dddddd;
display:inline-block;
}
.image {
padding: 5px;
}
.image-right {
padding-left: 50px;
padding-right: 20px;
float: right;
}
.image_caption {
font-size: 80%;
text-align: center;
padding: 5px;
}
.note {
background-color: #cce0d0;
border: 1px solid #aac0b0;
margin: 10px 30px 10px 30px;
padding: 10px;
webkit-border-radius: 6px;
moz-border-radius: 6px;
border-radius: 6px;
}
.warning {
background-color: #ffeeee;
border: 1px solid #ffdddd;
margin: 10px 30px 10px 30px;
padding: 10px;
webkit-border-radius: 6px;
moz-border-radius: 6px;
border-radius: 6px;
}
.copyright {
font-style: italic;
text-align: right;
color: #FFFFFF;
border: 1px solid black;
background-color: #008080;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 10px;
margin-top: 30pt;
}
.prompt {
font-weight: bold;
}
.thumbnail {
width: 14px;
}
.locations {
margin-left: 20px;
border: none;
}
.locations tr {
border: none;
vertical-align: middle;
}
.locations_banner {
font-weight: bold;
border: 1px solid #447777;
}
.version {
font-size: 60%;
}
.logo {
width: 48px;
padding-right: 10px;
padding-top: 5px;
}
.popup-note {
font-size: 80%;
}
.os-icons {
float: right;
margin-left: 100px;
}
/**** TABLE STYLES ****/
table {
border-collapse: collapse;
border: 1px solid #cccccc;
width: 98%;
margin:1%;
}
table .tty {
margin: 0;
}
tr {
vertical-align: top;
font-size: 90%;
}
td {
border: 1px solid #cccccc;
padding: 2px;
}
table .first_row {
font-weight: bold;
background-color: #ddefef;
padding-left: 10px;
padding-right: 10px;
}
table.fixed_width td {
width:10%;
}
caption {
background-color: #aacccc;
margin: 0;
margin-bottom: 8px;
border: 1px solid #888888;
padding: 6px 16px;
font-weight: bold;
}
/**** TABS ****/
.tabs {
float: left;
margin-left: 20px;
margin-right: 20px;
}
.tabs img {
display:inline;
}
.tab {
font-size: 80%;
font-weight: bold;
margin: 0px;
padding: 4px 16px 4px 16px;
float: left;
cursor: pointer;
webkit-border-top-left-radius: 6px;
moz-border-top-left-radius: 6px;
border-top-left-radius: 6px;
webkit-border-top-right-radius: 6px;
moz-border-top-right-radius: 6px;
border-top-right-radius: 6px;
color: #aaaaaa;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
}
.selected {
background-color: #ffffe0;
color: black;
border-top: 1px solid #447777;
border-left: 1px solid #447777;
border-right: 1px solid #447777;
}
/**** REPORT STYLES ****/
/*
* This section mimics the style that
* the reporting engine produces, so the docs
* can reproduce it.
*/
.stats {
font-family: Verdana, Arial, Helvetica, sans-serif;
padding: 13px 58px 13px 58px;
}
.stats table {
border: thin solid #000000;
width: 100%;
}
.stats td {
border: thin solid #000000;
padding: 2px;
}
.stats_label {
color: green;
}
.stats_data {
color: red;
}
/**** JQUERY UI ****/
/* Overrides for the jQuery UI widgets */
div .ui-widget-header {
border: 1px solid black;
background: #aacccc;
}
/* no spurious background images please */
.ui-widget-content {
background: white;
}