styles/main.css
body {
width: 1280px;
margin: 0 auto;
background: #efefef;
color: #34495e;
}
span.cke_combo_text,
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
color: #34495e;
}
.button, button {
padding: 0 15px;
}
#tabs {
float: left;
width: 40%;
}
#fontawesome a {
width: 60px;
height: 60px;
}
#editor {
margin-top: 1em;
float: right;
width: 60%;
}
#tabs .color {
margin-top: 15px;
margin-left: 10px;
}
#filter {
margin: 10px;
}
button.active {
border: none;
background-color: #03a9f4;
color: #fff;
}
.sp-preview {
width: 56px;
height: 28px;
border: none;
}
#Container {
height: 600px;
overflow: scroll;
}
.sp-replacer {
border-color: #fff;
border-radius: 4px;
}
.sp-dd {
background: url('images/arrow.png') no-repeat;
height: 24px;
width: 24px;
}
.sandbox {
position: relative;
min-height: 580px;
padding: 15px;
margin: 10px;
overflow: hidden;
height: 100%;
border: 1px dotted #fff;
border-radius: 2px;
}
.sandbox .mix {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
position: relative;
background: rgba(255, 255, 255, 0.2);
margin-bottom: 4%;
display: none;
padding-right: .5em;
line-height: 1.8em;
vertical-align: top;
-webkit-backface-visibility: hidden;
}
.sandbox .mix {
cursor: copy;
}
.sandbox .mix:before {
content: '';
display: inline-block;
padding-top: 60%;
vertical-align: middle;
}
.sandbox .mix:after {
content: '';
position: absolute;
border: 15px solid transparent;
border-right-color: #16a085;
top: -15px;
left: -15px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.sandbox .mix.category-1:after {
border-right-color: #4caf50;
}
.sandbox .mix.category-2:after {
border-right-color: #03a9f4;
}
.sandbox .gap,
.sandbox .mix {
width: 48%;
}
.sandbox.list .mix {
width: 100%;
background: rgba(255, 255, 255, 0.3);
}
.sandbox.list .mix:before {
padding-top: 3%;
}
.sandbox.pagination {
min-height: 0;
background: #6bd2e8;
padding: 15px;
}
.sandbox.pagination .mix {
margin-bottom: 4%;
width: 48%;
}
.sandbox.pagination .mix:before {
padding-top: 45%;
}
.sandbox.pagination .mix.category-1:after {
border-right-color: #3fc5e1;
}
.sandbox.pagination .mix.category-2:after {
border-right-color: #92e094;
}
@media all and (min-width: 641px) {
.sandbox.pagination .mix {
width: 23.5%;
margin-bottom: 0;
}
}
@media all and (min-width: 769px) {
.sandbox.pagination {
padding: 30px;
}
}
@media all and (min-width: 641px) {
.sandbox .mix {
margin-bottom: 2%;
}
.sandbox .mix:before {
padding-top: 80%;
}
.sandbox .gap,
.sandbox .mix {
width: 23.5%;
}
}
@media all and (min-width: 769px) {
.sandbox {
padding: 10px 10px 0;
}
.sandbox .mix:before {
padding-top: 10%;
}
.sandbox .gap,
.sandbox .mix {
width: 48%;
}
}