1 /* Famsite CSS */
2
3 /* Optional Emoji font to support clients without good system Emoji font
4 * support. You can remove this to shave 300Kb from the total payload of
5 * Famsite.
6 ***********************************************************************
7 */
8 @font-face {
9 font-family: 'Twemoji';
10 src: url("twemoji-subset.woff2") format("woff2");
11 }
12 .postbox textarea, .post .txt, #fc_popup, .emoji, .control-row
13 { font-family: "Twemoji", serif !important; }
14 span.picked-emoji { font-family: "Twemoji"; }
15 /*
16 * End of optional Emoji font declarations.
17 ***********************************************************************
18 */
19
20 html { margin: 0; padding: 0; height: 100%; }
21 body {
22 margin: 0; padding: 0;
23 font-size: 1.2em;
24 background: #fefeee;
25 color: #222;
26 }
27 a, a:visited { color: #538; }
28
29 header {
30 background: #679;
31 padding: 5px;
32 color: #FFF;
33 display: flex;
34 align-items: center;
35 gap: 20px;
36 }
37 header a, header a:visited {
38 color: #ffd045;
39 background: #444e64;
40 padding: 3px;
41 text-decoration: none;
42 }
43 header a:hover { filter: drop-shadow(3px 3px #000); }
44 header a:active { filter: drop-shadow(-1px -1px #000); }
45 header .avatar-container { display: flex; align-items: center; }
46 header .avatar { width: 30px; height: 30px; margin-right: 5px; }
47
48 .avatar {
49 width: 46px; height: 46px;
50 border: 2px solid #ffd87c; border-radius: 10px;
51 }
52
53 #timeline {
54 max-width: 770px;
55 margin: auto;
56 }
57
58 /* Post Box (Submit new post) */
59 .postbox {
60 max-width: 650px;
61 margin: 35px;
62 }
63 input[name='image'] { display: none; }
64 .control-row {
65 width: 100%;
66 padding: 15px;
67 display: flex;
68 justify-content: space-between;
69 align-items: center;
70 }
71 .postbox textarea {
72 border: 2px solid #86B; border-radius: 15px;
73 background: #FEC;
74 width: 100%; height: 120px;
75 font-family: "Twemoji", serif;
76 font-size: 1em;
77 padding: 15px;
78 }
79 #image-preview img {
80 max-width: 200px;
81 max-height: 200px;
82 margin: 10px;
83 }
84 .postbox a:hover {
85 background: #e7d8ff;
86 color: #9700ff;
87 }
88 .postbox button {
89 font-size: 1.1em;
90 background: #86B;
91 color: #FFF;
92 border: 2px solid #000;
93 border-radius: 15px;
94 padding: 10px;
95 }
96 .postbox button:hover {
97 filter: drop-shadow(5px 5px #000);
98 top: -3px; left: -3px;
99 }
100 .postbox button:active {
101 filter: drop-shadow(-2px -2px #000);
102 top: 2px; left: 2px;
103 }
104 .postbox button.cancel {
105 background-color: #ff5371;
106 margin-right: 10px;
107 }
108
109
110 /* Popups */
111 #fc_popup { z-index: 2; }
112 .popup {
113 position: absolute;
114 display: flex;
115 padding: 5px;
116 border: 2px solid #FFF;
117 border-radius: 10px;
118 filter: drop-shadow(10px 10px 10px #000);
119 gap: 5px;
120 z-index: 1;
121 }
122 .popup.spoiler-pop { background: #000; }
123 .popup.reaction-pop { background: #00ceff; }
124 .popup .picked-emoji { font-size: 1.2em; }
125 .popup button {
126 border: 2px solid white;
127 border-radius: 5px;
128 font-size: 1.1em;
129 }
130 .popup button.cancel { background-color: #ff5371; color: white; }
131 .popup button.add { background-color: #649951; color: white; }
132 .popup button.pick { background-color: #cbf5ff; }
133 .popup input {
134 flex: 1;
135 background: #FEC;
136 font-size: 1em;
137 }
138
139
140 /* Animations */
141 .whee {
142 border: 1px solid black;
143 animation: whee-anim 2s infinite;
144 }
145 @keyframes whee-anim {
146 0% { background: #D55; }
147 50% { background: #FD8; }
148 100% { background: #D55; }
149 }
150
151 /* Display Post */
152 h2.day {
153 font-size: 2em;
154 color: #ADE;
155 border-bottom: 6px dotted;
156 }
157 .posts { margin-left: 20px; }
158 .post { max-width: 700px; margin-bottom: 30px; }
159 .post .avatar { }
160 .post .image { margin-left: 4em; }
161 .post .info {
162 display: flex; gap: 10px;
163 color: #888;
164 font-size: 0.9em;
165 margin: 10px 0;
166 background-image: linear-gradient(to right, #F5F5E2FF , #F5F5E200);
167 }
168 .post .info a, .post .info a:visited {
169 color: #999;
170 padding: 5px;
171 margin-left: 1em;
172 }
173 .post .info a:hover { color: #538; }
174 .post > .txt { margin-left: 60px; }
175 .spoiler { background: #d7bcff; color: #86b0; }
176 .spoiler:hover { background: #efe5ff; color: #000; cursor: pointer; }
177 .post .add_reaction:hover { background: #b3f7e4; }
178 .post .edit-link:hover { background: #f7d6b3; }
179 .reactions {
180 color: #555;
181 margin-left: 60px;
182 border-top: 1px solid #555;
183 margin-top: 5px;
184 padding-top: 5px;
185 }
186 .reactions .emoji { font-size: 1.2em; margin-right: 5px; }
187 .reactions .user { font-size: 0.8em; margin-right: 5px; }
188 .reactions .txt { font-size: 0.8em; }
189 .post a.edit-link { margin-left: 1em; }
190
191
192 /* "Special" posts group together horizontally */
193 .special {
194 display: flex; gap: 20px;
195 border-width: 2px 2px 2px 16px;
196 border-radius: 20px;
197 border-style: solid;
198 padding: 10px;
199 }
200 .special .post { flex: 1; max-width: 350px; }
201 .special .info a { margin-left: 5px; }
202 .special1 { /* wordplay */ border-color: #87c037; }
203 .special2 { /* connections */ border-color: #bc70c4; }
204 .special .post .txt { margin-left: 0; }
205 .special .reactions { margin-left: 0; }
206 .special .control-row { display: flex; flex-direction: column; }
207 .special .control-row .buttons { display: flex; flex-direction: column; }
208 .special .control-row .buttons button { margin: 10px; }
209 /* swap order of submit and cancel */
210 .special .control-row .buttons .cancel { order: 2; }
211
212 .small { font-size: 0.9em; }
Ratfactor.com
>
Dave's Repos