damus.io

damus.io website
git clone git://jb55.com/damus.io
Log | Files | Refs | README | LICENSE

styles.css (6005B)


      1 /* Hello welcome to my styles. Here are some notes.
      2  *
      3  *  - I use Noto Sans because it supports most languages.
      4  *  - I will implement light mode first and then attempt dark.
      5  *  - All variables should be declared at the top.
      6  *  - Use as little as possible, write from scratch, and utilize helper 
      7  *    classes.
      8  *  - No transpilers!
      9  */
     10 
     11 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;800&display=swap');
     12 
     13 :root {
     14 	--clrBg:          #fff;
     15 	--clrPanel:       #f9f9f9;
     16 	--clrBorder:      #f2f2f2;
     17 	--clrBtn:         #202020;
     18 	--clrText:        #202020;
     19 	--clrTextLight:   #868686;
     20 	--clrTextLighter: #abb4ca;
     21 	--clrHeart:       #ff5050;
     22 	--clrWarn:        #fbc560;
     23 
     24 	--navPadding: 5px;
     25 	--fsSmall:    12px;
     26 	--fsNormal:   16px;
     27 	--fsReduced:  14px;
     28 	--fsEnlarged: 18px;
     29 
     30 	--ffDefault: "Noto Sans", sans-serif;
     31 }
     32 *:focus-visible {
     33 	/* Technically this is bad and something else should be done to indicate
     34 	 * that something is in focus.
     35 	 */
     36 	outline: none;
     37 }
     38 body {
     39 	background: var(--clrBg);
     40 	color: var(--clrText);
     41 	font-family: "Noto Sans", sans-serif;
     42 	font-size: var(--fsNormal);
     43 	margin: 0;
     44 	padding: 0;
     45 	width: 100%;
     46 	height: 100%;
     47 }
     48 
     49 /* Utilities */
     50 .flex-fill {
     51 	flex: 1;
     52 }
     53 .hide {
     54 	display: none;
     55 }
     56 .loader {
     57 	font-size: 24px;
     58 }
     59 button.action:disabled {
     60 	cursor: default;
     61 	background-color: var(--clrTextLight);
     62 }
     63 button {
     64 	background: #171717;
     65 	cursor: pointer;
     66 }
     67 button.icon {
     68 	border: none;
     69 	background: transparent;
     70 	padding: 0;
     71 	margin: 0;
     72 }
     73 button.action {
     74 	border: none;
     75 	border-radius: 50px;
     76 	background: #171717;
     77 	padding: 10px 15px;
     78 	font-size: 16px;
     79 	color: white;
     80 	font-weight: 800;
     81 }
     82 .float-right {
     83 	float: right;
     84 }
     85 
     86 /* Application Framework */
     87 button.nav {
     88 	color: var(--clrBtn);
     89 	font-size: 24px;
     90 	padding: calc(var(--navPadding) * 4) calc(var(--navPadding) * 5);
     91 }
     92 
     93 #app-icon-logo {
     94 	font-size: 28px;
     95 	text-align: center;
     96 	padding: calc(var(--navPadding) * 4);
     97 }
     98 
     99 #app-icon-logo > img {
    100 	border-radius: 50%;
    101 	width: 42px;
    102 	height: 42px;
    103 }
    104 
    105 #container {
    106 	display: flex;
    107 
    108 	/*
    109 	flex-direction: row;
    110 	width: 100vw;
    111 	height: 100vh;
    112 	overflow: hidden;*/
    113 }
    114 #nav {
    115 	flex-shrink: 1;
    116 	border-right: 1px solid var(--clrBorder);
    117 }
    118 #content {
    119 	display: flex;
    120 	flex-direction: column;
    121 	border-right: 1px solid var(--clrBorder);
    122 }
    123 #content header > label {
    124 	padding: 22px 15px;
    125 	font-size: 22px;
    126 	font-weight: 800;
    127 	display: block;
    128 }
    129 
    130 #view {
    131 	max-width: 750px;
    132 	overflow-y: scroll;
    133 	flex: 1;
    134 }
    135 
    136 /* Events & Content */
    137 .event {
    138 	display: flex;
    139 	flex-direction: row;
    140 	padding: 15px;
    141 	transition: background-color 0.2s linear;
    142 }
    143 .event:hover {
    144 	background-color: var(--clrPanel);
    145 }
    146 .loading-events {
    147 	text-align: center;
    148 	padding: 15px;
    149 }
    150 .userpic {
    151 	flex-shrink: 1;
    152 }
    153 
    154 .pfp {
    155 	border-radius: 50%;
    156 	width: 64px;
    157 	height: 64px;
    158 	object-fit: fill;
    159 	font-size: 3.25em;
    160 }
    161 
    162 .event-content {
    163 	flex: 1;
    164 	padding-left: 15px;
    165 }
    166 .event-content > .info {
    167 	display: inline-block;
    168 }
    169 .username {
    170 	font-weight: 800;
    171 	font-size: var(--fsReduced);
    172 }
    173 .chatroom-name {
    174 	font-weight: bold;
    175 }
    176 .timestamp, .replying-to, .boosted-by {
    177 	font-size: var(--fsSmall);
    178 	color: var(--clrTextLight);
    179 }
    180 .comment {
    181 	word-break: break-word;
    182 }
    183 
    184 .inline-img {
    185 	width: 100%;
    186 	max-height: 300px;
    187 	object-fit: contain;
    188 }
    189 
    190 .action-bar {
    191 }
    192 .action-bar > button {
    193 	margin-right: 25px;
    194 	color: var(--clrTextLighter);
    195 	font-size: var(--fsNormal);
    196 }
    197 .reactions {
    198 	padding-bottom: 15px;
    199 }
    200 
    201 .reaction-group {
    202 	display: inline-flex;
    203 	align-items: center;
    204 	border: 2px solid var(--clrBorder);
    205 	padding: 4px;
    206 	border-radius: 5px;
    207 }
    208 
    209 .reaction-group img {
    210 	width: 18px;
    211 	height: 18px;
    212 	object-fit: cover;
    213 	border-radius: 50%;
    214 	margin-left: -8px;
    215 	vertical-align: top;
    216 }
    217 
    218 .reaction-group img:first-of-type {
    219 	margin-left: 0px;
    220 }
    221 
    222 .reaction-emoji {
    223 	margin-right: 4px;
    224 }
    225 
    226 .action-bar button.icon {
    227 	transition:	color 0.3s linear;
    228 }
    229 .action-bar button.icon:hover {
    230 	color: var(--clrText);
    231 }
    232 .action-bar button.heart:hover {
    233 	color: var(--clrHeart);
    234 }
    235 details.cw summary {
    236 	background: #f2f2f2;
    237 	padding: 10px;
    238 	border-radius: 12px;
    239 	color: #444;
    240 	cursor: pointer;
    241 	margin-bottom: 10px;
    242 	outline: none;
    243 }
    244 
    245 /* Thread Expansion */
    246 .thread-collapsed {
    247 	padding: 15px; 
    248 }
    249 .thread-summary {
    250 	background: #f2f2f2;
    251 	padding: 10px;
    252 	border-radius: 12px;
    253 	color: #444;
    254 	cursor: pointer;
    255 }
    256 
    257 /* Modal */
    258 .modal {
    259 	position: fixed;
    260 	z-index: 1; 
    261 	left: 0;
    262 	top: 0;
    263 	width: 100%; 
    264 	height: 100%;
    265 	background: rgba(0,0,0,0.4);
    266 	opacity: 1;
    267 	transition: opacity 0.2s linear;
    268 }
    269 .modal.closed {
    270 	opacity: 0;
    271 	pointer-events: none;
    272 }
    273 .modal-content {
    274 	padding: 20px;
    275 	overflow: auto;
    276 	border-radius: 15px;
    277 	background: var(--clrPanel);
    278 	max-width: 700px;
    279 	margin: 0 auto;
    280 	margin-top: 35px;
    281 }
    282 .modal header {
    283 	display: flex;
    284 }
    285 .modal header label {
    286 	font-weight: 800;
    287 	font-size: var(--fsEnlarged);
    288 	flex: 1;
    289 }
    290 .modal header button {
    291 	font-size: 24px;
    292 }
    293 
    294 /* Post & Reply */
    295 #newpost {
    296 	padding: 0px 15px 15px;
    297 	display: flex;
    298 	flex-direction: row;
    299 	border-bottom: solid 1px var(--clrBorder);
    300 }
    301 #newpost > :first-child {
    302 	width: 64px;
    303 }
    304 #newpost > :last-child {
    305 	padding-left: 15px;
    306 	flex: 1;
    307 }
    308 textarea.post-input {
    309 	display: block;
    310 	width: 100%;
    311 	border: none;
    312 	background: transparent;
    313 	color: var(--clrText);
    314 	font-size: var(--fsEnlarged);
    315 	font-family: var(--ffDefault);
    316 	margin: 10px 0;
    317 	padding: 0;
    318 	box-sizing: border-box;
    319 	resize: vertical;
    320 }
    321 
    322 .post-tools {
    323 	text-align: right;
    324 }
    325 .post-tools > button.icon {
    326 	margin-right: 10px;
    327 	font-size: var(--fsEnlarged);
    328 	color: var(--clrTextLight);
    329 }
    330 .post-tools > button.icon.cw.active {
    331 	color: var(--clrWarn);
    332 }
    333 input[type="text"].cw {
    334 	border: none;
    335 	border-bottom: solid 2px var(--clrWarn);
    336 	font-size: var(--fsReduced);
    337 }
    338 
    339 .clickable {
    340 	cursor: pointer;
    341 }
    342 
    343 .bottom-border {
    344 	border-bottom: solid 1px var(--clrBorder);
    345 }
    346 
    347 .deleted-comment {
    348 	border: 2px dashed var(--clrBorder);
    349 	border-radius: 10px;
    350 	padding: 10px;
    351 }
    352 
    353 @media (max-width: 800px){
    354 	:root {
    355 		--navPadding: 2px;
    356 	}
    357 
    358 	.pfp {
    359 		width: 44px;
    360 		height: 44px;
    361 		font-size: 2.2em;
    362 	}
    363 
    364 	#newpost > :first-child {
    365 		width: 0;
    366 	}
    367 }