1 /************************************************************
2 * Faceclick styles. You are encouraged to modify this to
3 * match your page. :-)
4 *
5 * #fc_popup:
6 * +-----------------+
7 * | A B C D [search]|<-- #fc_filters
8 * +-----------------+
9 * |+---------------+|
10 * || X Y Z ... |<--- #fc_list_scrollbox
11 * || ||
12 * |+---------------+|
13 * +-----------------+
14 *
15 ************************************************************/
16 #fc_popup {
17 position: absolute;
18 width: 420px;
19 height: 250px;
20 padding: 0;
21 border: 2px solid #6c71c4;
22 border-radius: 10px;
23 background: #002b36;
24 filter: drop-shadow(10px 10px 10px #000);
25 }
26 #fc_filters {
27 background: #6c71c4;
28 display: flex;
29 gap: 5px;
30 border-radius: 6px 6px 0 0;
31 height: 45px;
32 }
33 #fc_filters a {
34 flex: 1;
35 display: flex;
36 justify-content: center;
37 align-items: center;
38 text-decoration: none;
39 border-radius: 6px 6px 0 0;
40 }
41 #fc_filters a:hover {
42 background: #9298f0;
43 }
44 #fc_filters a.selected {
45 background: #002b36;
46 }
47 #fc_filters input { /* search box */
48 width: 180px;
49 flex: 2;
50 background: #303255;
51 color: inherit;
52 padding: 5px;
53 border: 1px solid #6c71c4;
54 border-radius: 5px;
55 font-family: inherit;
56 font-size: inherit;
57 margin: 4px;
58 }
59 #fc_filters input:focus {
60 outline: none;
61 }
62 #fc_list_scrollbox {
63 height: 205px;
64 overflow-y: scroll;
65 #fc_emoji_list, #fc_emoji_list li {
66 margin: 0; padding: 0;
67 }
68 #fc_emoji_list li {
69 list-style: none;
70 display: inline-block;
71 }
72 #fc_emoji_list a {
73 width: 50px;
74 height: 50px;
75 font-size: 30px;
76 text-decoration: none;
77 display: flex;
78 justify-content: center;
79 align-items: center;
80 }
81 #fc_emoji_list a:hover {
82 background-color: #17738a;
83 }
Ratfactor.com
>
Dave's Repos