1
|
/*
|
2
|
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
3
|
For licensing, see LICENSE.md or http://ckeditor.com/license
|
4
|
*/
|
5
|
|
6
|
/*
|
7
|
colorpanel.css (part of editor.css)
|
8
|
=====================================
|
9
|
|
10
|
The color panel is related to the contents part of the panels that are
|
11
|
displayed when clicking the color buttons of the toolbar. See panels.css for
|
12
|
styles related to the outer part of panels.
|
13
|
|
14
|
The following is the visual representation of the color panel contents:
|
15
|
|
16
|
+-- .cke_panel_block.cke_colorblock --+
|
17
|
| +-- a.cke_colorauto --------------+ |
|
18
|
| | | |
|
19
|
| | AUTOMATIC COLOR | |
|
20
|
| | | |
|
21
|
| +---------------------------------+ |
|
22
|
| +-- table ------------------------+ |
|
23
|
| | | |
|
24
|
| | COLOR PALETTE | |
|
25
|
| | | |
|
26
|
| |---------------------------------| |
|
27
|
| | "More Colors" | |
|
28
|
| +---------------------------------+ |
|
29
|
+-------------------------------------+
|
30
|
|
31
|
The AUTOMATIC COLOR section is an <a> containing a table with two cells with
|
32
|
the following contents:
|
33
|
|
34
|
+-- TD -----------------+ +-- TD -----------------+
|
35
|
| +-- .cke_colorbox --+ | | |
|
36
|
| | | | | "Automatic" |
|
37
|
| +-------------------+ | | |
|
38
|
+-----------------------+ +-----------------------+
|
39
|
|
40
|
The COLOR PALETTE section instead is a table with a variable number of cells
|
41
|
(by default 8). Each cell represents a color box, with the following structure:
|
42
|
|
43
|
+-- A.cke_colorbox ---------+
|
44
|
| +-- SPAN.cke_colorbox --+ |
|
45
|
| | | |
|
46
|
| +-----------------------+ |
|
47
|
+---------------------------+
|
48
|
*/
|
49
|
|
50
|
/* The container of the color palette. */
|
51
|
.cke_colorblock
|
52
|
{
|
53
|
padding: 3px;
|
54
|
font-size: 11px;
|
55
|
font-family: 'Microsoft Sans Serif', Tahoma, Arial, Verdana, Sans-Serif;
|
56
|
}
|
57
|
|
58
|
.cke_colorblock,
|
59
|
.cke_colorblock a
|
60
|
{
|
61
|
text-decoration: none;
|
62
|
color: #000;
|
63
|
}
|
64
|
|
65
|
/* The box which is to represent a single color on the color palette.
|
66
|
It is a small, square-shaped element which can be selected from the palette. */
|
67
|
span.cke_colorbox
|
68
|
{
|
69
|
width: 10px;
|
70
|
height: 10px;
|
71
|
border: #808080 1px solid;
|
72
|
float: left;
|
73
|
}
|
74
|
|
75
|
.cke_rtl span.cke_colorbox
|
76
|
{
|
77
|
float: right;
|
78
|
}
|
79
|
|
80
|
/* The wrapper of the span.cke_colorbox. It provides an extra border and padding. */
|
81
|
a.cke_colorbox
|
82
|
{
|
83
|
border: #fff 1px solid;
|
84
|
padding: 2px;
|
85
|
float: left;
|
86
|
width: 12px;
|
87
|
height: 12px;
|
88
|
}
|
89
|
|
90
|
.cke_rtl a.cke_colorbox
|
91
|
{
|
92
|
float: right;
|
93
|
}
|
94
|
|
95
|
/* Different states of the a.cke_colorbox wrapper. */
|
96
|
a:hover.cke_colorbox,
|
97
|
a:focus.cke_colorbox,
|
98
|
a:active.cke_colorbox
|
99
|
{
|
100
|
border: #b6b6b6 1px solid;
|
101
|
background-color: #e5e5e5;
|
102
|
}
|
103
|
|
104
|
/* Buttons which are visible at the top/bottom of the color palette:
|
105
|
- cke_colorauto (TOP) applies the automatic color.
|
106
|
- cke_colormore (BOTTOM) executes the color dialog.
|
107
|
*/
|
108
|
a.cke_colorauto,
|
109
|
a.cke_colormore
|
110
|
{
|
111
|
border: #fff 1px solid;
|
112
|
padding: 2px;
|
113
|
display: block;
|
114
|
cursor: pointer;
|
115
|
}
|
116
|
|
117
|
/* Different states of cke_colorauto/cke_colormore buttons. */
|
118
|
a:hover.cke_colorauto,
|
119
|
a:hover.cke_colormore,
|
120
|
a:focus.cke_colorauto,
|
121
|
a:focus.cke_colormore,
|
122
|
a:active.cke_colorauto,
|
123
|
a:active.cke_colormore
|
124
|
{
|
125
|
border: #b6b6b6 1px solid;
|
126
|
background-color: #e5e5e5;
|
127
|
}
|