adding a theme color accent
This commit is contained in:
parent
c0c28ef8eb
commit
2991d07b86
|
|
@ -11,12 +11,16 @@
|
|||
--black: #000;
|
||||
--gray: #DCDCDC;
|
||||
|
||||
--light: #f1f1f1;
|
||||
--dark: #222;
|
||||
|
||||
--theme: steelblue;
|
||||
|
||||
--primary: #1F618D;
|
||||
--info: #3498DB;
|
||||
--warning: #B7950B;
|
||||
--danger: #C0392B;
|
||||
--success: #1E8449;
|
||||
--default: #DCDCDC;
|
||||
--default: #EEE;
|
||||
}
|
||||
|
||||
[data-theme=dark] {
|
||||
|
|
@ -63,7 +67,7 @@ table {
|
|||
}
|
||||
|
||||
table>thead>tr>th {
|
||||
border-bottom: 2px solid var(--mg);
|
||||
border-bottom: 2px solid var(--theme);
|
||||
}
|
||||
|
||||
table.striped tbody>:nth-child(2n-1) {
|
||||
|
|
@ -75,8 +79,8 @@ th {
|
|||
}
|
||||
|
||||
th,td {
|
||||
border-bottom: 1px solid var(--mg);
|
||||
padding: .5rem;
|
||||
border-bottom: 1px solid var(--theme);
|
||||
}
|
||||
|
||||
fieldset {border: none;padding: 0;}
|
||||
|
|
@ -89,19 +93,24 @@ legend {
|
|||
margin-bottom: 1rem;
|
||||
line-height: inherit;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--mg);
|
||||
border-bottom: 1px solid var(--theme);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: var(--space) 0;
|
||||
border-left: calc(var(--space) / 2) solid var(--fg);
|
||||
border-left: calc(var(--space) / 2) solid var(--theme);
|
||||
color: var(--black);
|
||||
background: var(--gray);
|
||||
background: var(--default);
|
||||
padding: var(--space);
|
||||
}
|
||||
|
||||
blockquote.primary {background: #DEF}
|
||||
blockquote.danger {background: #FEE}
|
||||
blockquote.warn {background: #FEA}
|
||||
blockquote.success {background: #DFE}
|
||||
|
||||
code {
|
||||
color: var(--mg);
|
||||
background: var(--default);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
|
|
@ -110,7 +119,7 @@ blockquote code, details code {
|
|||
}
|
||||
|
||||
hr {
|
||||
color: var(--mg);
|
||||
color: var(--theme);
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
|
|
@ -119,6 +128,8 @@ h1,h2,h3,h4,h5,h6 {
|
|||
padding-bottom: calc(var(--space) / 2);
|
||||
text-transform: capitalize;
|
||||
color: var(--fg);
|
||||
|
||||
color: var(--theme);
|
||||
}
|
||||
|
||||
h1 {
|
||||
|
|
@ -131,7 +142,7 @@ h4 {font-size: 1.2rem}
|
|||
h5 {font-size: 1rem}
|
||||
h6 {font-size: .9rem}
|
||||
|
||||
a {color: var(--primary)}
|
||||
a {color: var(--theme)}
|
||||
a:hover {opacity: .5;}
|
||||
/* a:hover {color: var(--fg)} */
|
||||
|
||||
|
|
@ -142,7 +153,7 @@ section, article {
|
|||
|
||||
article {
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
background: var(--gray);
|
||||
background: var(--default);
|
||||
}
|
||||
|
||||
article main {
|
||||
|
|
@ -176,7 +187,7 @@ details[open] {
|
|||
margin-bottom: var(--space);
|
||||
}
|
||||
|
||||
details>* {padding: calc(var(--space)/2); border-top: 1px solid var(--bg)}
|
||||
details>* {padding: calc(var(--space)/2); border-top: 1px solid var(--theme)}
|
||||
|
||||
summary {
|
||||
background-color: var(--default);
|
||||
|
|
@ -191,8 +202,8 @@ button, input {
|
|||
color: var(--fg);
|
||||
min-width: fit-content;
|
||||
width: 100%;
|
||||
border: 1px solid var(--mg);
|
||||
height: 2.5rem;
|
||||
border: 1px solid var(--theme);
|
||||
border-radius: var(--radius);
|
||||
padding: .5rem 1rem;
|
||||
}
|
||||
|
|
@ -214,7 +225,12 @@ button[disabled], button[disabled]:hover {
|
|||
button.link {
|
||||
border: none;
|
||||
background: none;
|
||||
color: var(--primary)
|
||||
color: var(--theme)
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--theme);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
button.default {
|
||||
|
|
@ -248,10 +264,10 @@ button.success {
|
|||
|
||||
button:hover, input[type="reset"]:hover,input[type="submit"]:hover {
|
||||
/* background: var(--mg); */
|
||||
background: #DCDCDC;
|
||||
color: var(--black);
|
||||
background: var(--dark);
|
||||
border: 2px solid var(--theme);
|
||||
color: var(--light);
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
button.link:hover {
|
||||
|
|
@ -265,7 +281,7 @@ input:disabled {
|
|||
}
|
||||
|
||||
select:focus,textarea:focus,input:focus {
|
||||
border: 2px solid var(--mg);
|
||||
border: 2px solid var(--theme);
|
||||
}
|
||||
|
||||
input[type="checkbox"],input[type="radio"] {
|
||||
|
|
@ -282,7 +298,7 @@ select,textarea {
|
|||
font-size: var(--size);
|
||||
height: 2.5rem;
|
||||
width: 100%;
|
||||
border: 1px solid var(--mg);
|
||||
border: 1px solid var(--theme);
|
||||
color: var(--fg);
|
||||
background: var(--bg);
|
||||
border-radius: var(--radius);
|
||||
|
|
@ -304,7 +320,7 @@ select {
|
|||
textarea {
|
||||
overflow: auto;
|
||||
resize: vertical;
|
||||
border: 1px solid var(--mg);
|
||||
border: 1px solid var(--theme);
|
||||
height: calc(var(--size) * 6rem);;
|
||||
padding: clamp(.5rem, var(--space), 2rem);
|
||||
cursor: text;
|
||||
|
|
@ -316,7 +332,7 @@ textarea {
|
|||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--mg);
|
||||
border-bottom: 1px solid var(--theme);
|
||||
}
|
||||
|
||||
nav ul {
|
||||
|
|
@ -377,8 +393,8 @@ nav ul li a:hover {opacity: .75;}
|
|||
.fill {width: 100%; height: 100%}
|
||||
.outline {background-color: transparent; color: var(--fg); border: 1px solid var(--fg)}
|
||||
.underline {border-bottom: 1px solid var(--mg)}
|
||||
.border {border: 1px solid var(--mg)}
|
||||
.content {padding: var(--space)}
|
||||
.border {border: 1px solid var(--theme)}
|
||||
.title {margin: 0; padding:0}
|
||||
.subtitle {margin-top: -.25rem; font-size: small};
|
||||
.spaceless {margin: 0; padding:0}
|
||||
|
|
|
|||
Loading…
Reference in New Issue