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 a.cancel {
105 background-color: #f5ebff;
106 cursor: pointer;
107 }
108 .postbox a.delete {
109 background-color: #ff8585;
110 color: #fff;
111 cursor: pointer;
112 }
113
114
115 /* Popups */
116 #fc_popup { z-index: 2; }
117 .popup {
118 position: absolute;
119 display: flex;
120 padding: 5px;
121 border: 2px solid #FFF;
122 border-radius: 10px;
123 filter: drop-shadow(10px 10px 10px #000);
124 gap: 5px;
125 z-index: 1;
126 }
127 .popup.spoiler-pop { background: #000; }
128 .popup.reaction-pop { background: #00ceff; }
129 .popup .picked-emoji { font-size: 1.2em; }
130 .popup button {
131 border: 2px solid white;
132 border-radius: 5px;
133 font-size: 1.1em;
134 }
135 .popup button.cancel { background-color: #ff5371; color: white; }
136 .popup button.add { background-color: #649951; color: white; }
137 .popup button.pick { background-color: #cbf5ff; }
138 .popup input {
139 flex: 1;
140 background: #FEC;
141 font-size: 1em;
142 }
143
144
145 /* Animations */
146 .whee {
147 border: 1px solid black;
148 animation: whee-anim 2s infinite;
149 }
150 @keyframes whee-anim {
151 0% { background: #D55; }
152 50% { background: #FD8; }
153 100% { background: #D55; }
154 }
155
156 /* Display Post */
157 h2.day {
158 font-size: 2em;
159 color: #ADE;
160 border-bottom: 6px dotted;
161 }
162 .posts { margin-left: 20px; }
163 .post { max-width: 700px; margin-bottom: 30px; }
164 .post .avatar { }
165 .post .image { margin-left: 4em; }
166 .post .info {
167 display: flex; gap: 10px;
168 color: #888;
169 font-size: 0.9em;
170 margin: 10px 0;
171 background-image: linear-gradient(to right, #F5F5E2FF , #F5F5E200);
172 }
173 .post .info a, .post .info a:visited {
174 color: #999;
175 padding: 5px;
176 margin-left: 1em;
177 }
178 .post .info a:hover { color: #538; }
179 .post > .txt { margin-left: 60px; }
180 .spoiler { background: #d7bcff; color: #86b0; }
181 .spoiler:hover { background: #efe5ff; color: #000; cursor: pointer; }
182 .post .add_reaction:hover { background: #b3f7e4; }
183 .post .edit-link:hover { background: #f7d6b3; }
184 .reactions {
185 color: #555;
186 margin-left: 60px;
187 border-top: 1px solid #555;
188 margin-top: 5px;
189 padding-top: 5px;
190 }
191 .reactions .reaction { display: flex; align-items: center; margin-left: 5px; }
192 .reactions .emoji { font-size: 1.2em; margin-right: 5px; }
193 .reactions .user { font-size: 0.8em; margin-right: 5px; }
194 .reactions .txt { font-size: 0.8em; }
195 .post a.edit-link { margin-left: 1em; }
196
197
198 /* "Special" posts group together horizontally */
199 .special {
200 display: flex; gap: 20px;
201 border-width: 2px 2px 2px 16px;
202 border-radius: 20px;
203 border-style: solid;
204 padding: 10px;
205 }
206 .special .post { flex: 1; max-width: 350px; }
207 .special .info a { margin-left: 5px; }
208 .special1 { /* wordplay or wordle */ border-color: #87c037; }
209 .special2 { /* connections */ border-color: #bc70c4; }
210 .special .post .txt { margin-left: 0; }
211 .special .reactions { margin-left: 0; }
212 .special .control-row { display: flex; flex-direction: column; }
213 .special .control-row .buttons { display: flex; flex-direction: column; }
214 .special .control-row .buttons button { margin: 10px; }
215 /* swap order of submit and cancel */
216 .special .control-row .buttons .cancel { order: 2; }
217
218 .small { font-size: 0.9em; }
Ratfactor.com
>
Dave's Repos