Summary Files Commits Branches @commit @diff @stats
path: root / docs / css / spectre.css
diff options
context:
space:
mode:
1 files changed, 130 insertions, 114 deletions
-rw-r--r--docs/css/spectre.css244
diff --git a/docs/css/spectre.css b/docs/css/spectre.css
index 873c300..12f5331 100644
--- a/docs/css/spectre.css
+++ b/docs/css/spectre.css
@@ -402,7 +402,9 @@ a {
text-decoration: none;
}
a:focus,
-a:hover {
+a:hover,
+a:active,
+a.active {
color: #3b49af;
text-decoration: underline;
}
@@ -465,7 +467,7 @@ h6 {
}
p {
line-height: 2.4rem;
- margin: 0 0 1em;
+ margin: 0 0 1rem;
}
a,
ins,
@@ -474,7 +476,7 @@ u {
text-decoration-skip: ink edges;
}
blockquote {
- border-left: .2rem solid #ddd;
+ border-left: .2rem solid #efefef;
margin-left: 0;
padding: 1rem 2rem;
}
@@ -482,7 +484,7 @@ blockquote p:last-child {
margin-bottom: 0;
}
blockquote cite {
- color: #b3b3b3;
+ color: #999;
}
ul,
ol {
@@ -522,7 +524,7 @@ mark {
border-radius: .2rem;
display: inline-block;
line-height: 1;
- padding: .3rem;
+ padding: .3rem .4rem;
vertical-align: baseline;
}
kbd {
@@ -531,7 +533,7 @@ kbd {
color: #fff;
display: inline-block;
line-height: 1;
- padding: .3rem;
+ padding: .3rem .4rem;
vertical-align: baseline;
}
abbr[title] {
@@ -596,13 +598,13 @@ abbr[title] {
.table.table-striped tbody tr.active {
background: #f0f0f0;
}
-.table th,
.table td {
border-bottom: .1rem solid #efefef;
padding: 1.5rem 1rem;
}
.table th {
- border-color: #e2e2e2;
+ border-bottom: .2rem solid #333;
+ padding: 1.5rem 1rem;
}
.btn {
-webkit-appearance: none;
@@ -648,19 +650,19 @@ abbr[title] {
color: #fff;
}
.btn.btn-primary:focus {
- background: #4856c1;
+ background: #4452c0;
border-color: #3b49af;
color: #fff;
}
.btn.btn-primary:hover {
- background: #404fbe;
- border-color: #35419c;
+ background: #3f4eba;
+ border-color: #3b49af;
color: #fff;
}
.btn.btn-primary:active,
.btn.btn-primary.active {
- background: #3e4cb6;
- border-color: #35419c;
+ background: #3d4ab3;
+ border-color: #3946a7;
color: #fff;
}
.btn.btn-primary.loading::after {
@@ -674,12 +676,10 @@ abbr[title] {
color: #5764c6;
}
.btn.btn-link:focus,
-.btn.btn-link:hover {
- color: #35419c;
-}
+.btn.btn-link:hover,
.btn.btn-link:active,
.btn.btn-link.active {
- color: #283176;
+ color: #3b49af;
}
.btn.btn-sm {
font-size: 1.2rem;
@@ -773,16 +773,16 @@ abbr[title] {
appearance: none;
background: #fff;
background-image: none;
- border: .1rem solid #c5c5c5;
+ border: .1rem solid #ccc;
border-radius: .2rem;
color: #333;
display: block;
font-size: 1.4rem;
height: 3.2rem;
- line-height: 1.8rem;
+ line-height: 2rem;
max-width: 100%;
outline: 0;
- padding: .6rem .8rem;
+ padding: .5rem .8rem;
position: relative;
transition: all .2s ease;
width: 100%;
@@ -791,18 +791,17 @@ abbr[title] {
border-color: #5764c6;
}
.form-input[disabled] {
- background: #eeeff2;
+ background: #f8f8f8;
}
.form-input.input-sm {
font-size: 1.2rem;
height: 2.4rem;
- padding: .3rem .6rem;
+ padding: .1rem .6rem;
}
.form-input.input-lg {
font-size: 1.6rem;
- height: 4.2rem;
- line-height: 2rem;
- padding: 1rem .8rem;
+ height: 4rem;
+ padding: .9rem .8rem;
}
.form-input.input-inline {
display: inline-block;
@@ -825,7 +824,7 @@ textarea.form-input {
height: auto;
}
.form-input-hint {
- color: #888;
+ color: #999;
margin-top: .4rem;
}
.has-success .form-input-hint,
@@ -845,10 +844,10 @@ textarea.form-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
- border: .1rem solid #c5c5c5;
+ border: .1rem solid #ccc;
border-radius: .2rem;
font-size: 1.4rem;
- line-height: 1.6rem;
+ line-height: 2rem;
min-width: 18rem;
outline: 0;
padding: .5rem .8rem;
@@ -871,13 +870,12 @@ textarea.form-input {
.form-select.select-sm {
font-size: 1.2rem;
height: 2.4rem;
- padding: .4rem 2rem .4rem .6rem;
+ padding: .1rem 2rem .1rem .6rem;
}
.form-select.select-lg {
font-size: 1.6rem;
- height: 4.2rem;
- line-height: 2rem;
- padding: 1rem 2.4rem 1rem .8rem;
+ height: 4rem;
+ padding: .9rem 2.4rem .9rem .8rem;
}
.has-success .form-select,
.form-select.is-success {
@@ -913,7 +911,7 @@ textarea.form-input {
}
.form-checkbox .form-icon,
.form-radio .form-icon {
- border: .1rem solid #c5c5c5;
+ border: .1rem solid #ccc;
display: inline-block;
font-size: 1.4rem;
height: 1.4rem;
@@ -927,10 +925,6 @@ textarea.form-input {
vertical-align: top;
width: 1.4rem;
}
-.form-checkbox:hover .form-icon,
-.form-radio:hover .form-icon {
- border-color: #929292;
-}
.form-checkbox input:checked + .form-icon,
.form-radio input:checked + .form-icon {
background: #5764c6;
@@ -998,9 +992,9 @@ textarea.form-input {
position: relative;
}
.form-switch .form-icon {
- background: #c5c5c5;
+ background: #ccc;
background-clip: padding-box;
- border: .1rem solid #c5c5c5;
+ border: .1rem solid #ccc;
border-radius: .9rem;
display: inline-block;
height: 1.8rem;
@@ -1041,20 +1035,20 @@ textarea.form-input {
display: -webkit-flex;
}
.input-group .input-group-addon {
- background: #f9f9f9;
- border: .1rem solid #c5c5c5;
+ background: #f8f8f8;
+ border: .1rem solid #ccc;
border-radius: .2rem;
- line-height: 1.6rem;
- padding: .7rem .8rem;
+ line-height: 2rem;
+ padding: .5rem .8rem;
}
.input-group .input-group-addon.addon-sm {
font-size: 1.2rem;
- padding: .3rem .6rem;
+ padding: .1rem .6rem;
}
.input-group .input-group-addon.addon-lg {
font-size: 1.6rem;
line-height: 2rem;
- padding: 1rem .8rem;
+ padding: .9rem .8rem;
}
.input-group .input-group-addon,
.input-group .input-group-btn {
@@ -1111,10 +1105,10 @@ textarea.form-input {
.label {
background: #f8f8f8;
border-radius: .2rem;
- color: #888;
+ color: #666;
display: inline-block;
line-height: 1;
- padding: .3rem;
+ padding: .3rem .4rem;
vertical-align: baseline;
}
.label.label-primary {
@@ -1125,6 +1119,10 @@ textarea.form-input {
background: #32b643;
color: #fff;
}
+.label.label-warning {
+ background: #ffb700;
+ color: #fff;
+}
.label.label-danger {
background: #e85600;
color: #fff;
@@ -1135,7 +1133,7 @@ code {
color: #e06870;
display: inline-block;
line-height: 1;
- padding: .3rem;
+ padding: .3rem .4rem;
vertical-align: baseline;
}
.code {
@@ -1145,7 +1143,7 @@ code {
position: relative;
}
.code::before {
- color: #c5c5c5;
+ color: #ccc;
content: attr(data-lang);
font-size: 1.2rem;
position: absolute;
@@ -1206,7 +1204,7 @@ code {
margin: 0 0 1rem 0;
}
.figure .figure-caption {
- color: #888;
+ color: #666;
margin-top: 1rem;
}
.container {
@@ -1216,15 +1214,8 @@ code {
padding-right: 1rem;
width: 100%;
}
-@media screen and (min-width: 980px) {
- .grid-960 {
- width: 98rem;
- }
-}
-@media screen and (min-width: 500px) {
- .grid-480 {
- width: 50rem;
- }
+.container.grid-960 {
+ max-width: 98rem;
}
.columns {
display: flex;
@@ -1578,30 +1569,52 @@ code {
width: 8.33333333%;
}
}
+.show-xs,
+.show-sm,
+.show-md,
+.show-lg,
+.show-xl {
+ display: none !important;
+}
@media screen and (max-width: 480px) {
.hide-xs {
display: none !important;
}
+ .show-xs {
+ display: block !important;
+ }
}
@media screen and (max-width: 600px) {
.hide-sm {
display: none !important;
}
+ .show-sm {
+ display: block !important;
+ }
}
@media screen and (max-width: 840px) {
.hide-md {
display: none !important;
}
+ .show-md {
+ display: block !important;
+ }
}
@media screen and (max-width: 960px) {
.hide-lg {
display: none !important;
}
+ .show-lg {
+ display: block !important;
+ }
}
@media screen and (max-width: 1280px) {
.hide-xl {
display: none !important;
}
+ .show-xl {
+ display: block !important;
+ }
}
.navbar {
-webkit-align-items: center;
@@ -1636,15 +1649,16 @@ code {
.empty {
background: #f8f8f8;
border-radius: .2rem;
+ color: #666;
padding: 4rem;
text-align: center;
}
-.empty .empty-title {
- font-size: 1.8rem;
- margin: 1.5rem 0 .5rem 0;
+.empty .empty-title,
+.empty .empty-meta {
+ margin: 1rem auto;
}
.empty .empty-meta {
- color: #888;
+ color: #999;
}
.empty .empty-action {
margin-top: 1.5rem;
@@ -1655,21 +1669,16 @@ code {
.form-autocomplete .form-autocomplete-input {
-webkit-align-content: flex-start;
align-content: flex-start;
- background: #fff;
- border: .1rem solid #c5c5c5;
- border-radius: .2rem;
- color: #333;
- display: -ms-flexbox;
display: flex;
+ display: -ms-flexbox;
display: -webkit-flex;
-ms-flex-line-pack: start;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
+ height: auto;
min-height: 3.6rem;
- outline: 0;
padding: .1rem 0 .1rem .2rem;
- width: 100%;
}
.form-autocomplete .form-autocomplete-input.is-focused {
border-color: #5764c6;
@@ -1690,6 +1699,7 @@ code {
padding: .1em 0;
}
.avatar {
+ background: #5764c6;
border-radius: 50%;
color: #fff;
display: inline-block;
@@ -1703,12 +1713,12 @@ code {
width: 3.2rem;
}
.avatar.avatar-xs {
- font-size: 1.2rem;
+ font-size: 1.4rem;
height: 1.6rem;
width: 1.6rem;
}
.avatar.avatar-sm {
- font-size: 1.2rem;
+ font-size: 1rem;
height: 2.4rem;
width: 2.4rem;
}
@@ -1718,7 +1728,7 @@ code {
width: 4.8rem;
}
.avatar.avatar-xl {
- font-size: 2.8rem;
+ font-size: 2.6rem;
height: 6.4rem;
width: 6.4rem;
}
@@ -1747,12 +1757,13 @@ code {
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
+ vertical-align: middle;
z-index: 1;
}
.avatar.avatar-xs[data-initial]::before {
- -webkit-transform: translate(-50%, -50%) scale(.65);
- -ms-transform: translate(-50%, -50%) scale(.65);
- transform: translate(-50%, -50%) scale(.65);
+ -webkit-transform: translate(-50%, -50%) scale(.5);
+ -ms-transform: translate(-50%, -50%) scale(.5);
+ transform: translate(-50%, -50%) scale(.5);
}
.badge {
display: inline-block;
@@ -1870,10 +1881,10 @@ code {
}
.card .card-title {
font-size: 2rem;
- line-height: 1;
+ line-height: 1.4;
}
.card .card-meta {
- color: #888;
+ color: #999;
font-size: 1.3rem;
}
.chip {
@@ -1926,7 +1937,7 @@ code {
background: #fff;
border-radius: .2rem;
box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .3);
- display: block;
+ list-style: none;
margin: 0;
min-width: 18rem;
padding: .8rem;
@@ -1938,59 +1949,63 @@ code {
}
.menu .menu-item {
border-radius: .2rem;
- display: block;
- line-height: 2.4rem;
margin-top: 0;
- padding: .3rem .8rem;
+ padding: 0 .8rem;
text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
-.menu .menu-item a {
+.menu .menu-item > a {
border-radius: .2rem;
color: inherit;
display: block;
- margin: -.3rem -.8rem;
- padding: .3rem .8rem;
+ line-height: 2.4rem;
+ margin: 0 -.8rem;
+ padding: .4rem .8rem;
text-decoration: none;
}
-.menu .menu-item a:focus,
-.menu .menu-item a:hover {
+.menu .menu-item > a:focus,
+.menu .menu-item > a:hover {
color: #5764c6;
}
-.menu .menu-item a:active,
-.menu .menu-item a.active {
- background: #eff1fa;
- color: #4452c0;
+.menu .menu-item > a:active,
+.menu .menu-item > a.active {
+ background: #f7f8fc;
+ color: #3b49af;
}
.menu .menu-header {
color: #ccc;
- display: block;
font-size: 1.2rem;
- line-height: 1.8rem;
+ line-height: 2rem;
margin-top: 0;
- padding: .2rem .8rem;
+ padding: .2rem 0;
+ position: relative;
}
.menu .menu-header::after {
border-bottom: .1rem solid #efefef;
content: "";
display: block;
height: .1rem;
- -webkit-transform: translateY(-1rem);
- -ms-transform: translateY(-1rem);
- transform: translateY(-1rem);
+ position: absolute;
+ top: 50%;
width: 100%;
}
.menu .menu-header .menu-header-text {
background: #fff;
display: inline-block;
- margin-left: -.6rem;
- padding: 0 .6rem;
+ padding: 0 .8rem;
position: relative;
z-index: 99;
}
+.menu .menu-badge {
+ float: right;
+ padding: .4rem 0;
+}
+.menu .menu-badge .label {
+ margin: .2rem 0;
+}
.modal {
-webkit-align-items: center;
align-items: center;
@@ -2077,10 +2092,10 @@ code {
margin: 0;
}
.breadcrumb .breadcrumb-item:last-child {
- color: #888;
+ color: #999;
}
.breadcrumb .breadcrumb-item:not(:first-child)::before {
- color: #c5c5c5;
+ color: #ccc;
content: "/";
padding: 0 .4rem;
}
@@ -2201,7 +2216,7 @@ code {
color: #5764c6;
}
.nav .nav-item.active > a {
- color: #333;
+ color: #666;
font-weight: bold;
}
.nav .nav-item.active > a:focus,
@@ -2213,7 +2228,7 @@ code {
margin-left: 2rem;
}
.nav .nav a {
- color: #808080;
+ color: #999;
}
.step {
display: flex;
@@ -2245,7 +2260,7 @@ code {
width: 100%;
}
.step .step-item a {
- color: #888;
+ color: #999;
display: inline-block;
padding: 2rem 1rem 0;
text-decoration: none;
@@ -2274,7 +2289,7 @@ code {
background: #efefef;
}
.step .step-item.active ~ .step-item a::before {
- background: #c5c5c5;
+ background: #ccc;
}
.tile {
-webkit-align-content: space-between;
@@ -2289,7 +2304,8 @@ code {
margin: 0;
padding: .5rem 0;
}
-.tile .tile-icon {
+.tile .tile-icon,
+.tile .tile-action {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
@@ -2305,18 +2321,12 @@ code {
.tile .tile-content:not(:last-child) {
padding-right: 1rem;
}
-.tile .tile-action {
- -webkit-flex: 0 0 auto;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
-}
.tile .tile-title {
font-size: 1.6rem;
font-weight: 500;
}
.tile .tile-meta {
- color: #888;
- font-size: 1.3rem;
+ color: #999;
}
.tile.tile-centered {
-webkit-align-items: center;
@@ -2326,6 +2336,12 @@ code {
.tile.tile-centered .tile-content {
overflow: hidden;
}
+.tile.tile-centered .tile-title,
+.tile.tile-centered .tile-meta {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
.toast {
background: rgba(51, 51, 51, .9);
border: .1rem solid #333;
@@ -2484,7 +2500,7 @@ code {
.divider {
border-bottom: .1rem solid #efefef;
display: block;
- margin: .5rem 0;
+ margin: .8rem 0;
}
.loading {
color: transparent !important;