Files
2026-05-13 17:11:09 +02:00

468 lines
8.1 KiB
CSS

html, body {
height: 100%;
}
body > .container {
width: 100%;
}
.container > .row:first-child > .choice-title {
margin-top: 0;
border-top: none;
}
.choice-title {
margin-bottom: -10px;
}
.choice-title, #preview-title, #code-title {
position: relative;
border-top: 1px solid #dedede;
}
.choice-title:after, #preview-title:after, #code-title:after {
content: "";
display: block;
position: absolute;
top: 0px;
left: 0;
right: 0;
border-top: 1px solid #FFF;
}
.container > .row > .choice-title:after {
border-top: none;
}
.choice-title span, #preview-title span, #code-title a {
display: inline-block;
margin-left: -1px;
padding: 2px 10px;
min-width: 80px;
text-decoration: none;
font-size: 13px;
font-variant: small-caps;
text-transform: lowercase;
-webkit-border-radius: 0 0 3px 0;
border-radius: 0 0 3px 0;
margin-top: 1px;
margin-bottom: -1px;
white-space: normal;
}
.choice-title span, #code-title a {
color: #333;
background-color: #E6E6E6;
}
.container-xs .choice-title {
display: block;
width: 100%;
margin-bottom: 10px;
}
#preview {
background-color: #FFF;
}
#preview-title span {
background: #6D5491;
color: #FFF;
}
#preview-title:hover span {
cursor: default;
}
.selector, .selector:before, #test-wrapper:not(.no-transition) * {
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.choice, .target {
position: relative;
padding: 10px 12px;
}
.selector, .target {
border: 1px solid transparent;
}
.choice, .selector {
display: inline-block;
cursor: pointer;
}
.selector.select-snippet p {
margin-bottom: 0;
}
.selector:hover, .selector.active {
border: 1px dashed #999;
}
.selector:before {
content: '\ea10';
position: absolute;
top: 0;
right: 0;
padding: 3px 7px;
color: green;
opacity: 0;
background-color: rgba(255,255,255,.9);
}
.selector:hover:before, .selector.active:before {
opacity: 1;
}
.select-tag {
text-align: left;
}
.target-wrapper {
min-height: 48px;
}
/* Labels */
label:not(.radio-inline) {
white-space: nowrap;
line-height: 34px;
}
.btn-toggle {
padding: 2px 0;
}
#btn-test {
margin: auto;
}
input {
border: 1px solid #ccc;
}
#icon-choice label {
margin-top: 6px;
}
#remove-icon {
padding: 4px 10px;
}
/* Code */
#code-wrapper {
margin-top: 10px;
}
#code-title .glyphicon {
float: right;
font-size: 10px;
line-height: 16px;
}
pre {
display: block;
margin: auto;
padding: 0 !important;
border: none !important;
border-radius: 0;
font-size: 12px;
word-break: break-all;
background: none;
word-wrap: break-word;
}
/* Color selectors */
.selector.select-color .color {
display: inline-block;
width: 30px;
height: 30px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
#colorselector {
display: inline-block;
text-align: left;
height: 28px;
padding: 0 40px;;
}
#colorselector label {
position: relative;
top: -10px;
}
#colorselector div {
width: 28px;
height: 28px;
position: relative;
background: url(../img/colorpicker/select2.png) center;
display: inline-block;
margin-left: 20px;
}
/* icons */
.table-icons .btn-icon {
color: #333;
text-shadow: none;
}
/* Tables */
.select-style span {
display: block;
width: 103px;
height: 70px;
background: url("../img/tables.png") no-repeat;
}
#table-builder-wrapper {
display: none;
}
#table-builder {
border-collapse: separate;
border-spacing: 2px;
}
#table-builder td {
width: 20px;
height: 20px;
min-width: 20px;
min-height: 20px;
border: 1px solid #999;
}
#table-striped {
background-position: left center;
}
#table-bordered {
background-position: -103px center;
}
#table-condensed {
background-position: -206px center;
}
#table-hover {
background-position: -309px center;
}
#table-responsive {
background-position: -412px center;
}
#test-wrapper table > thead > tr th, #test-wrapper table > thead > tr td, #test-wrapper table > tbody > tr th, #test-wrapper table > tbody > tr td {
white-space: nowrap;
}
.test-wrapper-table {
max-height:230px;
}
/* Template */
#cols .alert {
padding-top: 7px;
}
#cols [class^='col-'] {
margin-bottom: 5px;
}
#cols div[class^="col-"][draggable=true] p, #preview div[class^="col-"][draggable=true] p {
display: block;
width: 100%;
border: 1px solid #ccc;
background: #FFF;
padding: 2px 5px;
color: #999;
cursor: move;
}
#test-wrapper.dropzone {
margin-left: 15px;
margin-right: 15px;
min-height: 80px;
}
#test-wrapper.dropzone h2 {
position: absolute;
text-align: center;
line-height: 80px;
color: #CCC;
width: 99%;
margin: 0;;
}
.dropzone {
min-height: 50px;
border: 1px dashed #ccc;
}
a.breakpoint-tooltip div.choice {
padding-right: 30px;
}
a.breakpoint-tooltip {
display: inline-block;
}
.form-control-like {
background-image: none;
border: none;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: none;
transition: none;
background: none;
padding-left: 0;
padding-right: 0;
}
.btn-xs span[class^="bootstrap-icon-"] {
top:1px;
position:relative;
}
/* label */
.select-label-style {
padding-left:20px;
padding-right: 20px;
}
/* Other classes */
.append {
margin-left: 7px;
}
.btn-toggle .btn-default {
color: #ccc;
}
.margin-bottom-md {
margin-bottom: 13px;
}
.margin-bottom-zero {
margin-bottom: 0;
}
.prepend {
margin-right: 7px;
}
/* Icomoon */
@font-face {
font-family: 'icomoon-tbp';
font-style: normal;
font-weight: normal;
src: url('../fonts/icomoon-tbp.eot?-tu63u2');
src: url('../fonts/icomoon-tbp.eot?#iefix-tu63u2') format('embedded-opentype'), url('../fonts/icomoon-tbp.woff?-tu63u2') format('woff'), url('../fonts/icomoon-tbp.ttf?-tu63u2') format('truetype'), url('../fonts/icomoon-tbp.svg?-tu63u2#icomoon') format('svg');
}
[class^='bootstrap-'], [class*=' bootstrap-'], .selector:before {
text-transform: none;
font-family: 'icomoon-tbp';
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bootstrap-icon-screen:before {
content: "\e601";
}
.bootstrap-icon-phone:before {
content: "\e602";
}
.bootstrap-icon-tablet:before {
content: "\e603";
}
.bootstrap-icon-tablet-landscape:before {
content: "\e604";
}
.bootstrap-icon-plus:before {
content: "\ea0a";
}
.bootstrap-icon-minus:before {
content: "\ea0b";
}
.bootstrap-icon-checkmark:before {
content: "\ea10";
}
.bootstrap-icon-bootstrap-icon:before {
content: "\e600";
}
/* Glyphicon */
@font-face {
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflings-regular') format('svg');
}
#cols div[class^="col-" draggable="true"] span {
font-size: 12px;
line-height: 14px;
}
/* Image / FileTree */
#file-tree-wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
min-height: 100%;
background: rgba(0, 0, 0, .75);
z-index: 2;
}
#file-tree {
width: 80%;
height: 80%;
margin: 3% 10%;
padding: 5%;
-webkit-border-radius: 5px;
border-radius: 5px;
background: #FFF;
}
#image-file-preview {
padding: 10px;
}
#image-file-preview img, #thumb-div img, .center-img img {
margin: auto;
max-width: 200px;
max-height: 200px;
}