add the sakura theme
This commit is contained in:
Andreas Zweili
parent
8b7eacaf8f
commit
11b5d3c3f2
198
docs/docs.org
198
docs/docs.org
|
|
@ -570,64 +570,178 @@ positioned on the page.
|
|||
The inventory.css file get's loaded in the base.html file. It provides
|
||||
some generel theming over the application.
|
||||
|
||||
*** Body
|
||||
|
||||
Add a margin of a few pixels around the body.
|
||||
The theme used in the inventory css is called "sakura earthly". It's
|
||||
repository can be found here: https://github.com/oxalorg/sakura
|
||||
I modified the theme slightly. I changed the font to sans-serif
|
||||
because it makes in the inventory more sense. In addition I'm
|
||||
displaying all lines in a table.
|
||||
|
||||
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
||||
/* Sakura.css v1.0.0
|
||||
* ================
|
||||
* Minimal css theme.
|
||||
* Project: https://github.com/oxalorg/sakura
|
||||
*/
|
||||
/* Body */
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
font-family: sans-serif; }
|
||||
|
||||
body {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
#+END_SRC
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.618;
|
||||
max-width: 38em;
|
||||
margin: auto;
|
||||
color: #4a4a4a;
|
||||
background-color: #f9f9f9;
|
||||
padding: 13px; }
|
||||
|
||||
*** Tables
|
||||
@media (max-width: 684px) {
|
||||
body {
|
||||
font-size: 1.53rem; } }
|
||||
|
||||
Display a border around tables.
|
||||
@media (max-width: 382px) {
|
||||
body {
|
||||
font-size: 1.35rem; } }
|
||||
|
||||
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
#+END_SRC
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.1;
|
||||
font-family: Verdana, Geneva, sans-serif;
|
||||
font-weight: 700;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-word;
|
||||
-ms-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto; }
|
||||
|
||||
Align table headers on the left side.
|
||||
h1 {
|
||||
font-size: 2.35em; }
|
||||
|
||||
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
#+END_SRC
|
||||
h2 {
|
||||
font-size: 2.00em; }
|
||||
|
||||
Add a padding around the table content.
|
||||
h3 {
|
||||
font-size: 1.75em; }
|
||||
|
||||
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
||||
th, td {
|
||||
padding: 5px;
|
||||
}
|
||||
#+END_SRC
|
||||
h4 {
|
||||
font-size: 1.5em; }
|
||||
|
||||
*** Code
|
||||
h5 {
|
||||
font-size: 1.25em; }
|
||||
|
||||
h6 {
|
||||
font-size: 1em; }
|
||||
|
||||
small, sub, sup {
|
||||
font-size: 75%; }
|
||||
|
||||
hr {
|
||||
border-color: #338618; }
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #338618; }
|
||||
a:hover {
|
||||
color: #5e5e5e;
|
||||
border-bottom: 2px solid #4a4a4a; }
|
||||
|
||||
ul {
|
||||
padding-left: 1.4em; }
|
||||
|
||||
li {
|
||||
margin-bottom: 0.4em; }
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin-left: 1.5em;
|
||||
padding-left: 1em;
|
||||
border-left: 3px solid #338618; }
|
||||
|
||||
img {
|
||||
max-width: 100%; }
|
||||
|
||||
/* Pre and Code */
|
||||
pre {
|
||||
background-color: #C7E3BE;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
overflow-x: auto; }
|
||||
|
||||
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
||||
code {
|
||||
background-color: lightgray;
|
||||
clear: left;
|
||||
border: 1px solid;
|
||||
padding: 5px;
|
||||
}
|
||||
#+END_SRC
|
||||
font-size: 0.9em;
|
||||
padding: 0 0.5em;
|
||||
background-color: #C7E3BE;
|
||||
white-space: pre-wrap; }
|
||||
|
||||
*** Footer
|
||||
pre > code {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
white-space: pre; }
|
||||
|
||||
Styles related to the footer.
|
||||
/* Tables */
|
||||
table {
|
||||
text-align: justify;
|
||||
width: 100%;
|
||||
border-collapse: collapse; }
|
||||
|
||||
#+BEGIN_SRC css :tangle ../network_inventory/static/inventory/css/inventory.css
|
||||
p.copyright {
|
||||
font-size:10px
|
||||
}
|
||||
td, th {
|
||||
padding: 0.5em;
|
||||
border: 1px solid #C7E3BE; }
|
||||
|
||||
/* Buttons, forms and input */
|
||||
input, textarea {
|
||||
border: 1px solid #4a4a4a; }
|
||||
input:focus, textarea:focus {
|
||||
border: 1px solid #338618; }
|
||||
|
||||
textarea {
|
||||
width: 100%; }
|
||||
|
||||
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
background-color: #338618;
|
||||
color: #f9f9f9;
|
||||
border-radius: 1px;
|
||||
border: 1px solid #338618;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box; }
|
||||
.button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
|
||||
cursor: default;
|
||||
opacity: .5; }
|
||||
.button:focus, .button:hover, button:focus, button:hover, input[type="submit"]:focus, input[type="submit"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="button"]:focus, input[type="button"]:hover {
|
||||
background-color: #5e5e5e;
|
||||
border-color: #5e5e5e;
|
||||
color: #f9f9f9;
|
||||
outline: 0; }
|
||||
|
||||
textarea, select, input[type] {
|
||||
color: #4a4a4a;
|
||||
padding: 6px 10px;
|
||||
/* The 6px vertically centers text on FF, ignored by Webkit */
|
||||
margin-bottom: 10px;
|
||||
background-color: #C7E3BE;
|
||||
border: 1px solid #C7E3BE;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box; }
|
||||
textarea:focus, select:focus, input[type]:focus {
|
||||
border: 1px solid #338618;
|
||||
outline: 0; }
|
||||
|
||||
input[type="checkbox"]:focus {
|
||||
outline: 1px dotted #338618; }
|
||||
|
||||
label, legend, fieldset {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 600; }
|
||||
#+END_SRC
|
||||
|
||||
** base.html
|
||||
|
|
|
|||
|
|
@ -1,29 +1,165 @@
|
|||
/* Sakura.css v1.0.0
|
||||
* ================
|
||||
* Minimal css theme.
|
||||
* Project: https://github.com/oxalorg/sakura
|
||||
*/
|
||||
/* Body */
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
font-family: sans-serif; }
|
||||
|
||||
body {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
font-size: 1.8rem;
|
||||
line-height: 1.618;
|
||||
max-width: 38em;
|
||||
margin: auto;
|
||||
color: #4a4a4a;
|
||||
background-color: #f9f9f9;
|
||||
padding: 13px; }
|
||||
|
||||
table, th, td {
|
||||
border: 1px solid black;
|
||||
}
|
||||
@media (max-width: 684px) {
|
||||
body {
|
||||
font-size: 1.53rem; } }
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
@media (max-width: 382px) {
|
||||
body {
|
||||
font-size: 1.35rem; } }
|
||||
|
||||
th, td {
|
||||
padding: 5px;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.1;
|
||||
font-family: Verdana, Geneva, sans-serif;
|
||||
font-weight: 700;
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-word;
|
||||
-ms-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-webkit-hyphens: auto;
|
||||
hyphens: auto; }
|
||||
|
||||
h1 {
|
||||
font-size: 2.35em; }
|
||||
|
||||
h2 {
|
||||
font-size: 2.00em; }
|
||||
|
||||
h3 {
|
||||
font-size: 1.75em; }
|
||||
|
||||
h4 {
|
||||
font-size: 1.5em; }
|
||||
|
||||
h5 {
|
||||
font-size: 1.25em; }
|
||||
|
||||
h6 {
|
||||
font-size: 1em; }
|
||||
|
||||
small, sub, sup {
|
||||
font-size: 75%; }
|
||||
|
||||
hr {
|
||||
border-color: #338618; }
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #338618; }
|
||||
a:hover {
|
||||
color: #5e5e5e;
|
||||
border-bottom: 2px solid #4a4a4a; }
|
||||
|
||||
ul {
|
||||
padding-left: 1.4em; }
|
||||
|
||||
li {
|
||||
margin-bottom: 0.4em; }
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
margin-left: 1.5em;
|
||||
padding-left: 1em;
|
||||
border-left: 3px solid #338618; }
|
||||
|
||||
img {
|
||||
max-width: 100%; }
|
||||
|
||||
/* Pre and Code */
|
||||
pre {
|
||||
background-color: #C7E3BE;
|
||||
display: block;
|
||||
padding: 1em;
|
||||
overflow-x: auto; }
|
||||
|
||||
code {
|
||||
background-color: lightgray;
|
||||
clear: left;
|
||||
border: 1px solid;
|
||||
padding: 5px;
|
||||
}
|
||||
font-size: 0.9em;
|
||||
padding: 0 0.5em;
|
||||
background-color: #C7E3BE;
|
||||
white-space: pre-wrap; }
|
||||
|
||||
p.copyright {
|
||||
font-size:10px
|
||||
}
|
||||
pre > code {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
white-space: pre; }
|
||||
|
||||
/* Tables */
|
||||
table {
|
||||
text-align: justify;
|
||||
width: 100%;
|
||||
border-collapse: collapse; }
|
||||
|
||||
td, th {
|
||||
padding: 0.5em;
|
||||
border: 1px solid #C7E3BE; }
|
||||
|
||||
/* Buttons, forms and input */
|
||||
input, textarea {
|
||||
border: 1px solid #4a4a4a; }
|
||||
input:focus, textarea:focus {
|
||||
border: 1px solid #338618; }
|
||||
|
||||
textarea {
|
||||
width: 100%; }
|
||||
|
||||
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
background-color: #338618;
|
||||
color: #f9f9f9;
|
||||
border-radius: 1px;
|
||||
border: 1px solid #338618;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box; }
|
||||
.button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
|
||||
cursor: default;
|
||||
opacity: .5; }
|
||||
.button:focus, .button:hover, button:focus, button:hover, input[type="submit"]:focus, input[type="submit"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="button"]:focus, input[type="button"]:hover {
|
||||
background-color: #5e5e5e;
|
||||
border-color: #5e5e5e;
|
||||
color: #f9f9f9;
|
||||
outline: 0; }
|
||||
|
||||
textarea, select, input[type] {
|
||||
color: #4a4a4a;
|
||||
padding: 6px 10px;
|
||||
/* The 6px vertically centers text on FF, ignored by Webkit */
|
||||
margin-bottom: 10px;
|
||||
background-color: #C7E3BE;
|
||||
border: 1px solid #C7E3BE;
|
||||
border-radius: 4px;
|
||||
box-shadow: none;
|
||||
box-sizing: border-box; }
|
||||
textarea:focus, select:focus, input[type]:focus {
|
||||
border: 1px solid #338618;
|
||||
outline: 0; }
|
||||
|
||||
input[type="checkbox"]:focus {
|
||||
outline: 1px dotted #338618; }
|
||||
|
||||
label, legend, fieldset {
|
||||
display: block;
|
||||
margin-bottom: .5rem;
|
||||
font-weight: 600; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue