CSS

语言：

CSSSCSS

确定

body {

background-color: #eee;

}

html,

body {

margin: 0px;

height: 100%;

overflow: hidden;

}

.toolbar {

width: 100%;

background: #fff;

padding: 4px 10px;

}

.characters {

display: inline-block;

margin-right: 20px;

vertical-align: top;

}

.characters__item {

border: 1px solid #333333;

border-radius: 0;

display: inline-block;

width: 25px;

height: 25px;

text-align: center;

background-color: #eee;

}

.characters__item--selected {

background: #fff;

}

.characters__item--first {

border-bottom-left-radius: 2px;

border-top-left-radius: 2px;

}

.characters__item--last {

border-bottom-right-radius: 2px;

border-top-right-radius: 2px;

}

.characters__item--middle {

border-left-width: 0;

border-right-width: 0;

}

.characters__item--color {

border: 0;

width: 55px;

}

.characters__item__button {

width: 100%;

height: 100%;

cursor: pointer;

}

.characters__item__colorInput {

width: 100%;

cursor: pointer;

}

.bm {

background-color: transparent;

width: 100px;

height: 120px;

display: inline-block;

/*float: left;*/

overflow: hidden;

transform: translate3d(0, 0, 0);

vertical-align: top;

position: absolute;

left: 0;

top: 0;

}

.bm.char {

pointer-events: none;

}

.bm .hoverer {

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0);

position: absolute;

top: 0;

left: 0;

}

.bm .loader {

width: 50%;

height: 50%;

background-color: rgba(0, 0, 0, 0);

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

}

.bm svg g {

pointer-events: auto;

}

.space {

position: absolute;

transform: translate3d(0, 0, 0);

width: 100px;

height: 120px;

background-color: rgba(255, 0, 0, 0);

pointer-events: none;

}

.line-break {

height: 120px;

width: 0px;

}

.textBox {

position: relative;

top: 0;

left: 0;

overflow-y: auto;

overflow-x: hidden;

height: calc(100% - 56px);

width: 100%;

}

.caret {

position: absolute;

top: 0;

left: 0;

background-color: #333333;

width: 4px;

margin-left: -2px;

animation: blink-animation 1.5s steps(5, start) infinite;

-webkit-animation: blink-animation 1.5s steps(5, start) infinite;

}

.textHelper {

position: absolute;

top: 0;

left: -100%;

/*visibility: hidden;*/

opacity: 0.01;

}

@keyframes blink-animation {

to {

visibility: hidden;

}

}

@-webkit-keyframes blink-animation {

to {

visibility: hidden;

}

}

.title {

float: right;

line-height: 2em;

}