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