/
style.css
129 lines (121 loc) · 2.03 KB
/
style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
body {
font-family: 'Roboto', serif;
}
a {
cursor: pointer;
}
.editor
{
position:relative;
}
.editorAria {
height:100%;
min-height:400px;
border:1px solid #ddd;
overflow-y: auto;
padding: 1em;
margin-top: -2px;
outline: none;
}
.toolbar {
position:sticky;
top:0;
left:0;
right:0;
background-color:#fff;
border:1px solid #ddd;
padding:10px;
}
.toolbar a,
.fore-wrapper,
.back-wrapper {
border: 1px solid #ddd;
background: #FFF;
font-family: 'Roboto', serif;
color: #000;
padding: 5px;
margin: 2px 0px;
width:35px;
height:35px;
display: inline-block;
text-align:center;
text-decoration: none;
}
.toolbar a:hover,
.fore-wrapper:hover,
.back-wrapper:hover {
background: #0eacc6;
color:#fff;
border-color:#0eacc6;
}
a.palette-item {
display:inline-block;
height: 1.3em;
width: 1.3em;
margin: 0px 1px 1px;
cursor:pointer;
}
a.palette-item[data-value="#FFFFFF"]{
border:1px solid #ddd!important;
}
a.palette-item:hover {
transform:scale(1.1);
}
.fore-wrapper,
.back-wrapper
{
position:relative;
cursor:auto;
}
.fore-palette,
.back-palette {
display: none;
cursor:auto;
}
.fore-wrapper:hover .fore-palette,
.back-wrapper:hover .back-palette {
display:block;
}
.fore-wrapper .fore-palette,
.back-wrapper .back-palette {
position:relative;
display: inline-block;
cursor: auto;
display: block;
left:0;
top:calc(100% + 5px);
position: absolute;
padding: 10px 5px;
width: 160px;
background: #FFF;
box-shadow: 0 0 5px #CCC;
display:none;
text-align:left;
}
.fore-wrapper .fore-palette:after,
.back-wrapper .back-palette:before
{
content:'';
display:inline-block;
position:absolute;
top:-10px;
left:10px;
width:0;
height:0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
}
.fore-palette a,
.back-palette a {
background: #FFF;
margin-bottom: 2px;
border:none;
}
.editor img
{
max-width:100%;
-o-object-fit:cover;
object-fit:cover;
}