update styles

This commit is contained in:
Dennis Eichhorn 2017-07-18 20:01:47 +02:00
parent 35af5535e9
commit 7637251ffb

View File

@ -128,40 +128,6 @@ article {
.darkblue { .darkblue {
background: #2969B0; } background: #2969B0; }
.w-100 {
min-width: 215px;
width: 100%;
width: calc(100% - 5px); }
.w-50 {
min-width: 215px;
width: 49%;
width: calc(50% - 5px); }
.w-33 {
min-width: 215px;
width: 32%;
width: calc(33.33% - 5px); }
.w-25 {
min-width: 215px;
width: 25%;
width: calc(25% - 5px); }
.w-75 {
min-width: 215px;
width: 75%;
width: calc(75% - 5px); }
.w-66 {
min-width: 215px;
width: 66%;
width: calc(66.66% - 5px); }
.wd-100 {
width: 100%;
width: calc(100% - 105px); }
.wf-100 { .wf-100 {
width: 100%; } width: 100%; }
@ -183,30 +149,6 @@ article {
.spacer { .spacer {
padding: 5px; } padding: 5px; }
.fw-100 {
width: 100%;
margin: 5px; }
.fw-50 {
width: 50%;
margin: 5px; }
.fw-33 {
width: 33%;
margin: 5px; }
.fw-25 {
width: 25%;
margin: 5px; }
.fw-75 {
width: 75%;
margin: 5px; }
.fw-66 {
width: 66%;
margin: 5px; }
.resizable { .resizable {
resize: both; resize: both;
overflow: auto; } overflow: auto; }
@ -3242,7 +3184,7 @@ article {
background: #2969B0; } background: #2969B0; }
*[draggable] { *[draggable] {
cursor: pointer; } cursor: move; }
p { p {
margin: 0 0 10px 0; margin: 0 0 10px 0;
@ -3250,7 +3192,6 @@ p {
p span { p span {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
p + p { p + p {
margin-top: 5px; } margin-top: 5px; }
@ -3263,7 +3204,6 @@ p + p {
position: relative; position: relative;
cursor: pointer; cursor: pointer;
display: inline-block; } display: inline-block; }
.tooltip > i { .tooltip > i {
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
@ -3283,7 +3223,6 @@ p + p {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
white-space: pre; } white-space: pre; }
.tooltip > i:before, .tooltip > i:after { .tooltip > i:before, .tooltip > i:after {
content: ""; content: "";
position: absolute; position: absolute;
@ -3292,12 +3231,10 @@ p + p {
top: 100%; top: 100%;
left: 50%; left: 50%;
margin-left: -10px; } margin-left: -10px; }
.tooltip > i:after { .tooltip > i:after {
border-top: 10px solid #000000; border-top: 10px solid #000000;
margin-top: 0; margin-top: 0;
z-index: 1; } z-index: 1; }
.tooltip:hover > i { .tooltip:hover > i {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }
@ -3532,22 +3469,17 @@ canvas {
/* Colors */ /* Colors */
form li { form li {
margin: 5px 0 5px 0; } margin: 5px 0 5px 0; }
form td { form td {
white-space: nowrap; white-space: nowrap;
padding-bottom: 5px; } padding-bottom: 5px; }
form td textarea + i { form td textarea + i {
vertical-align: top; } vertical-align: top; }
form label { form label {
font-size: 0.9em; font-size: 0.9em;
color: #878787; color: #878787;
text-shadow: -1px -1px 1px #ffffff; } text-shadow: -1px -1px 1px #ffffff; }
form i + i { form i + i {
margin-left: 3px; } margin-left: 3px; }
form .inputPrefix { form .inputPrefix {
border-left: 1px solid #b7b7b7; border-left: 1px solid #b7b7b7;
border-top: 1px solid #b7b7b7; border-top: 1px solid #b7b7b7;
@ -3555,10 +3487,8 @@ form .inputPrefix {
line-height: 2em; line-height: 2em;
height: 100%; height: 100%;
background: #bebebe; } background: #bebebe; }
form .layout td + td { form .layout td + td {
padding-left: 5px; } padding-left: 5px; }
form .list { form .list {
font-size: 0.9em; } font-size: 0.9em; }
form .list td { form .list td {
@ -3602,11 +3532,9 @@ img.frame-1 {
-ms-border-radius: 3px; -ms-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
background-clip: padding-box; } background-clip: padding-box; }
img.frame-2 { img.frame-2 {
border: 1px solid #b7b7b7; border: 1px solid #b7b7b7;
background: #f5f5ff; } background: #f5f5ff; }
img.frame-3 { img.frame-3 {
padding: 5px; padding: 5px;
background: #ffffff; background: #ffffff;
@ -3641,11 +3569,6 @@ img.frame-3 {
left: -400%; } } left: -400%; } }
div.slider-1 { div.slider-1 {
overflow: hidden; } overflow: hidden; }
div.slider-1 figure img {
width: 20%;
float: left; }
div.slider-1 figure { div.slider-1 figure {
position: relative; position: relative;
width: 500%; width: 500%;
@ -3654,13 +3577,15 @@ div.slider-1 figure {
text-align: left; text-align: left;
font-size: 0; font-size: 0;
animation: 30s slidy infinite; } animation: 30s slidy infinite; }
div.slider-1 figure img {
width: 20%;
float: left; }
.slider-2 { .slider-2 {
width: 100%; width: 100%;
position: relative; position: relative;
padding-top: auto; padding-top: auto;
text-align: center; } text-align: center; }
.slider-2 > img { .slider-2 > img {
width: 100%; width: 100%;
position: absolute; position: absolute;
@ -3668,10 +3593,17 @@ div.slider-1 figure {
top: 0; top: 0;
transition: all 0.5s; transition: all 0.5s;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); } box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75); }
.slider-2 input { .slider-2 input {
display: none; } display: none; }
.slider-2 input:checked + label {
border-color: #666;
opacity: 1; }
.slider-2 input:checked + label + img {
opacity: 1;
transform: scale(1); }
.slider-2 input ~ img {
opacity: 0;
transform: scale(1.1); }
.slider-2 label { .slider-2 label {
display: inline-block; display: inline-block;
margin-top: calc(50% + 15px); margin-top: calc(50% + 15px);
@ -3679,22 +3611,9 @@ div.slider-1 figure {
border: 3px solid #999; border: 3px solid #999;
cursor: pointer; cursor: pointer;
opacity: 0.6; } opacity: 0.6; }
.slider-2 label img { .slider-2 label img {
display: block; } display: block; }
.slider-2 input:checked + label {
border-color: #666;
opacity: 1; }
.slider-2 input ~ img {
opacity: 0;
transform: scale(1.1); }
.slider-2 input:checked + label + img {
opacity: 1;
transform: scale(1); }
/* Global */ /* Global */
/* Content Container */ /* Content Container */
/* Content box */ /* Content box */
@ -3709,6 +3628,7 @@ progress {
min-width: 150px; } min-width: 150px; }
.textarea, .textarea,
.tag-input,
textarea, textarea,
select, select,
input[type="password"], input[type="password"],
@ -3729,6 +3649,7 @@ input[type="datetime-local"] {
transition: background 0.3s, border 0.3s; transition: background 0.3s, border 0.3s;
box-shadow: inset 1px 1px 4px -2px #c5c5c5; } box-shadow: inset 1px 1px 4px -2px #c5c5c5; }
.textarea:focus, .textarea:focus,
.tag-input:focus,
textarea:focus, textarea:focus,
select:focus, select:focus,
input[type="password"]:focus, input[type="password"]:focus,
@ -3853,6 +3774,14 @@ select.plain {
cursor: pointer; cursor: pointer;
box-shadow: none; } box-shadow: none; }
.tag-input input {
border: none;
padding: 0;
margin: 0; }
.tag-input .tag {
padding: 3px;
font-size: 0.8rem; }
/* Global */ /* Global */
/* Content Container */ /* Content Container */
/* Content box */ /* Content box */
@ -3861,11 +3790,22 @@ select.plain {
.ac-container { .ac-container {
margin: 10px auto 30px auto; margin: 10px auto 30px auto;
text-align: left; } text-align: left; }
.ac-container > input { .ac-container > input {
display: none; } display: none; }
.ac-container > input:checked + label {
.ac-container > label { background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff));
background: -webkit-linear-gradient(top, #ffffff 0, #f5f5ff 100);
background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100);
background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100);
background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100);
color: #000; }
.ac-container > input:checked + label + section {
display: inherit; }
.ac-container > input + label + section {
display: none; }
.ac-container label {
display: block; display: block;
padding: 5px 20px; padding: 5px 20px;
position: relative; position: relative;
@ -3887,8 +3827,7 @@ select.plain {
background: -o-linear-gradient(top, #e0e3eb 0, #f5f5ff 100); background: -o-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
background: -ms-linear-gradient(top, #e0e3eb 0, #f5f5ff 100); background: -ms-linear-gradient(top, #e0e3eb 0, #f5f5ff 100);
background: linear-gradient(to bottom, #e0e3eb 0, #f5f5ff 100); } background: linear-gradient(to bottom, #e0e3eb 0, #f5f5ff 100); }
.ac-container label:hover {
.ac-container > label:hover {
background: #ffffff; background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100); background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff)); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff));
@ -3896,17 +3835,6 @@ select.plain {
background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100); background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100);
background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100); background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100);
background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); } background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100); }
.ac-container > input:checked + label {
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0, #f5f5ff 100);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffffff), color-stop(100, #f5f5ff));
background: -webkit-linear-gradient(top, #ffffff 0, #f5f5ff 100);
background: -o-linear-gradient(top, #ffffff 0, #f5f5ff 100);
background: -ms-linear-gradient(top, #ffffff 0, #f5f5ff 100);
background: linear-gradient(to bottom, #ffffff 0, #f5f5ff 100);
color: #000; }
.ac-container > section { .ac-container > section {
background: #f5f5ff; background: #f5f5ff;
overflow: hidden; overflow: hidden;
@ -3917,12 +3845,6 @@ select.plain {
border-right: 1px solid #b7b7b7; border-right: 1px solid #b7b7b7;
padding: 10px; } padding: 10px; }
.ac-container > input + label + section {
display: none; }
.ac-container > input:checked + label + section {
display: inherit; }
div.alert { div.alert {
padding: 10px; padding: 10px;
font-weight: bold; } font-weight: bold; }
@ -3981,7 +3903,6 @@ blockquote {
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
font-size: 12px; } font-size: 12px; }
.crumbs-1 li { .crumbs-1 li {
background: #f5f5ff; background: #f5f5ff;
border: 1px solid #b7b7b7; border: 1px solid #b7b7b7;
@ -4000,15 +3921,6 @@ blockquote {
-webkit-border-top-left-radius: 3px; -webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
background-clip: padding-box; } background-clip: padding-box; }
.crumbs-1 .last {
padding-right: 20px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
background-clip: padding-box; }
.crumbs-1 li:not(.last):after, .crumbs-1 li:before { .crumbs-1 li:not(.last):after, .crumbs-1 li:before {
content: " "; content: " ";
display: block; display: block;
@ -4021,26 +3933,27 @@ blockquote {
top: 50%; top: 50%;
margin-top: -18px; margin-top: -18px;
left: 100%; } left: 100%; }
.crumbs-1 .last:before {
border: none; }
.crumbs-1 li:not(.last):after { .crumbs-1 li:not(.last):after {
z-index: 2; } z-index: 2; }
.crumbs-1 li:before { .crumbs-1 li:before {
border-left-color: #b7b7b7; border-left-color: #b7b7b7;
margin-left: 1px; margin-left: 1px;
z-index: 1; } z-index: 1; }
.crumbs-1 .active, .crumbs-1 li:hover {
background: #ffffff; }
.crumbs-1 .active {
cursor: default; }
.crumbs-1 li.active:not(.last):after, .crumbs-1 li:hover:not(.last):after { .crumbs-1 li.active:not(.last):after, .crumbs-1 li:hover:not(.last):after {
border-left: 14px solid #ffffff; } border-left: 14px solid #ffffff; }
.crumbs-1 .last {
padding-right: 20px;
-webkit-border-bottom-right-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
background-clip: padding-box; }
.crumbs-1 .last:before {
border: none; }
.crumbs-1 .active {
cursor: default; }
.crumbs-1 .active, .crumbs-1 li:hover {
background: #ffffff; }
/* Global */ /* Global */
/* Content Container */ /* Content Container */
@ -4150,7 +4063,6 @@ ul.btns {
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
font-size: 12px; } font-size: 12px; }
ul.btns li { ul.btns li {
background: #f5f5ff; background: #f5f5ff;
border-left: 1px solid #b7b7b7; border-left: 1px solid #b7b7b7;
@ -4164,20 +4076,16 @@ ul.btns li {
box-shadow: inset 1px 1px 0px 0px #ffffff; } box-shadow: inset 1px 1px 0px 0px #ffffff; }
ul.btns li:last-child { ul.btns li:last-child {
border-right: 1px solid #b7b7b7; } border-right: 1px solid #b7b7b7; }
ul.btns a {
display: block;
padding: 10px; }
ul.btns li:before { ul.btns li:before {
border-left-color: #b7b7b7; border-left-color: #b7b7b7;
margin-left: 1px; } margin-left: 1px; }
ul.btns a {
ul.btns .active, ul.btns li:hover { display: block;
background: #ffffff; } padding: 10px; }
ul.btns .active { ul.btns .active {
cursor: default; } cursor: default; }
ul.btns .active, ul.btns li:hover {
background: #ffffff; }
button.simple { button.simple {
background: #f5f5ff; background: #f5f5ff;
@ -4221,7 +4129,6 @@ ul.boxed {
border-radius: 3px; border-radius: 3px;
background-clip: padding-box; background-clip: padding-box;
border: 1px solid #b7b7b7; } border: 1px solid #b7b7b7; }
ul.boxed li { ul.boxed li {
margin: 5px 0 5px 0; } margin: 5px 0 5px 0; }
ul.boxed li:first-child { ul.boxed li:first-child {
@ -4238,10 +4145,8 @@ ul.h-list li {
padding: 0; padding: 0;
border-spacing: 0; border-spacing: 0;
border-collapse: collapse; } border-collapse: collapse; }
.bullet-list td:first-child { .bullet-list td:first-child {
padding-right: 20px; } padding-right: 20px; }
.bullet-list span { .bullet-list span {
margin-right: 5px; } margin-right: 5px; }
@ -4251,7 +4156,6 @@ ul.h-list li {
border-radius: 30px; border-radius: 30px;
background: #ccc; background: #ccc;
display: inline-block; } display: inline-block; }
.bullet.active { .bullet.active {
background: #000; } background: #000; }
@ -4455,7 +4359,6 @@ main {
/* Can be anything */ /* Can be anything */
position: relative; position: relative;
background: none !important; } background: none !important; }
.meter > span { .meter > span {
display: block; display: block;
height: 100%; height: 100%;
@ -4519,11 +4422,9 @@ main {
margin: 0 0 30px 120px; margin: 0 0 30px 120px;
padding-left: 30px; padding-left: 30px;
border-left: 3px solid #eaeaea; } border-left: 3px solid #eaeaea; }
.timeline li { .timeline li {
margin: 0; margin: 0;
position: relative; } position: relative; }
.timeline p { .timeline p {
margin: 0 0 15px; } margin: 0 0 15px; }
@ -4601,7 +4502,6 @@ main {
height: 70px; height: 70px;
border-radius: 50%; border-radius: 50%;
background-color: tomato; } background-color: tomato; }
.progress-radial .overlay { .progress-radial .overlay {
position: absolute; position: absolute;
width: 60px; width: 60px;
@ -4619,30 +4519,20 @@ main {
/* Content box */ /* Content box */
/* Navigation */ /* Navigation */
/* Colors */ /* Colors */
section.box.orange {
border-top: 3px solid #FBA026; }
section.box.red {
border-top: 3px solid #B8312F; }
section.box.green {
border-top: 3px solid #41A85F; }
section.box.blue {
border-top: 3px solid #2C82C9; }
section.box.purple {
border-top: 3px solid #553982; }
section.box.darkblue {
border-top: 3px solid #2969B0; }
.box { .box {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
margin-top: 0.3rem; } margin-top: 0.3rem; }
.box .inner {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: inset 1px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 1px 1px 0px 0px #ffffff;
box-shadow: inset 1px 1px 0px 0px #ffffff;
padding: 10px; }
.box-container { .box-container {
display: inline-block; } display: inline-block; }
@ -4653,15 +4543,18 @@ section.box {
box-shadow: 0px 1px 0px 0px #f1f1f1; box-shadow: 0px 1px 0px 0px #f1f1f1;
border: 1px solid #b7b7b7; border: 1px solid #b7b7b7;
background: #fff; } background: #fff; }
section.box section.box.orange {
.box .inner { border-top: 3px solid #FBA026; }
-moz-box-sizing: border-box; section.box section.box.orange.red {
-webkit-box-sizing: border-box; border-top: 3px solid #B8312F; }
box-sizing: border-box; section.box section.box.orange.green {
-moz-box-shadow: inset 1px 1px 0px 0px #ffffff; border-top: 3px solid #41A85F; }
-webkit-box-shadow: inset 1px 1px 0px 0px #ffffff; section.box section.box.orange.blue {
box-shadow: inset 1px 1px 0px 0px #ffffff; border-top: 3px solid #2C82C9; }
padding: 10px; } section.box section.box.orange.purple {
border-top: 3px solid #553982; }
section.box section.box.orange.darkblue {
border-top: 3px solid #2969B0; }
section header > h1 { section header > h1 {
margin: 10px 10px 0 10px; margin: 10px 10px 0 10px;
@ -4669,7 +4562,6 @@ section header > h1 {
font-size: 1.1em; font-size: 1.1em;
text-shadow: 1px 1px 1px #ffffff; text-shadow: 1px 1px 1px #ffffff;
border-bottom: 1px solid #e1e1e1; } border-bottom: 1px solid #e1e1e1; }
section > h2 { section > h2 {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -4786,47 +4678,21 @@ section > h2 {
/* Content box */ /* Content box */
/* Navigation */ /* Navigation */
/* Colors */ /* Colors */
.table.red { .table {
background: none; } background: none; }
.table.red caption { .table caption {
background: #B8312F;
color: #fff; } color: #fff; }
.table.red thead { .table thead {
background: #B8312F;
color: #fff; } color: #fff; }
.table.red caption, .table.red thead {
.table.orange { background: #B8312F; }
background: none; } .table.orange caption, .table.orange thead {
.table.orange caption { background: #FBA026; }
background: #FBA026; .table.green caption, .table.green thead {
color: #fff; } background: #41A85F; }
.table.orange thead { .table.blue caption, .table.blue thead {
background: #FBA026; background: #2C82C9; }
color: #fff; } .table.white caption, .table.white thead {
.table.green {
background: none; }
.table.green caption {
background: #41A85F;
color: #fff; }
.table.green thead {
background: #41A85F;
color: #fff; }
.table.blue {
background: none; }
.table.blue caption {
background: #2C82C9;
color: #fff; }
.table.blue thead {
background: #2C82C9;
color: #fff; }
.table.white {
background: none; }
.table.white caption {
background: #fff; }
.table.white thead {
background: #fff; } background: #fff; }
table.table { table.table {