├── myspace_base.css ├── myspace_landscape.css └── myspace_portrait.css /myspace_base.css: -------------------------------------------------------------------------------- 1 | 2 | textarea{ 3 | resize: none; 4 | } 5 | 6 | button,input[type="submit"]{ 7 | background: #e6e6e6; 8 | border-image: url(https://i.imgur.com/jNTorDD.png); 9 | border-image-slice: 2; 10 | border-image-repeat: repeat; 11 | } 12 | 13 | code { 14 | font-family: Hack, monospace; 15 | background: black; 16 | color: white; 17 | } 18 | 19 | img#avatar:hover { 20 | content: url(https://i.imgur.com/dbBeXPD.png); 21 | } 22 | 23 | 24 | #block, #report{ 25 | font-size: 0; 26 | } 27 | 28 | #block:after, #report:after{ 29 | content: "kill a kitten"; 30 | font-size: small; 31 | } 32 | 33 | #report:after{ 34 | content: "use a carve tool in hammer editor"; 35 | } 36 | .blogs{ 37 | display: flex; 38 | flex-flow: row wrap; 39 | padding-top: 16px; 40 | padding-bottom: 16px; 41 | } 42 | 43 | .blurbs>.blogs>div:first-child{ 44 | margin-top: -3px; 45 | margin-left: -3px; 46 | margin-right: -3px; 47 | border-top: none; 48 | position: relative; 49 | width: calc(100% + 2px); 50 | top: -16px; 51 | } 52 | 53 | .blurbs>.blogs>div:nth-child(2){ 54 | box-shadow:0px 0px 0 1px navy; 55 | } 56 | 57 | .blurbs>.blogs>div:not(:first-child){ 58 | width: 96px; 59 | text-align: center; 60 | margin: 0 20px; 61 | } 62 | 63 | .blurbs>.blogs>div:not(:first-child):before{ 64 | content: ""; 65 | display: block; 66 | width: 96px; 67 | height: 64px; 68 | background: url(https://i.imgur.com/kHoOJF5.png); 69 | background-repeat: no-repeat; 70 | background-position: center; 71 | image-rendering: pixelated; 72 | } 73 | 74 | .blurbs>.blogs>div:not(:first-child):hover:before{ 75 | background-image: url(https://i.imgur.com/Mk6p3cQ.png); 76 | } 77 | 78 | .box.comments > table#userWall { 79 | margin: 0px; 80 | width: 100%; 81 | border-spacing: 0; 82 | background: #272C2D; 83 | } 84 | 85 | .box.comments > table#userWall td { 86 | background: #272C2D; 87 | color: #babdb6; 88 | } 89 | 90 | .box.comments > table#userWall > tbody > tr > td.tableLeft > a { 91 | color: #8ae234; 92 | } 93 | -------------------------------------------------------------------------------- /myspace_landscape.css: -------------------------------------------------------------------------------- 1 | body { 2 | --navbar-width: 250px; 3 | } 4 | 5 | #header, 6 | #hSub, 7 | .topLeft, 8 | .extended.box, 9 | div:not(.blogPost)>.blogs>div:first-child, 10 | #footer { 11 | display: none !important; 12 | } 13 | 14 | .topRight { 15 | position: fixed; 16 | bottom: 24px; 17 | left: calc(24px + var(--navbar-width)); 18 | height: 50vh; 19 | border-top-right-radius: 8px; 20 | border-bottom-right-radius: 8px; 21 | z-index: 10; 22 | overflow-y: scroll; 23 | background: #fcfcfc; 24 | } 25 | 26 | div:not(.blogPost)>.blogs { 27 | position: fixed; 28 | top: 0; 29 | left: 0; 30 | width: 100%; 31 | } 32 | 33 | div:not(.blogPost)>.blogs, 34 | div:not(.blogPost)>.blogs>div, 35 | div:not(.blogPost)>.blogs>div>* { 36 | z-index: -1; 37 | } 38 | 39 | .topRight:before { 40 | content: ""; 41 | position: fixed; 42 | bottom: 24px; 43 | left: 24px; 44 | height: calc(50vh + 20px); 45 | width: var(--navbar-width); 46 | background: var(--image-blur), rgba(255, 255, 255, 0.1); 47 | background-size: var(--image-blur-size); 48 | background-repeat: var(--image-blur-repeat); 49 | background-attachment: var(--image-blur-attachment); 50 | 51 | background-blend-mode: overlay; 52 | border-top-left-radius: 8px; 53 | border-bottom-left-radius: 8px; 54 | } 55 | 56 | .topRight::-webkit-scrollbar-track 57 | { 58 | background: rgba(0, 0, 0, 0); 59 | } 60 | 61 | .topRight::-webkit-scrollbar 62 | { 63 | width: 8px; 64 | border-top-right-radius: 8px; 65 | border-bottom-right-radius: 8px; 66 | background: rgba(0, 0, 0, 0); 67 | } 68 | 69 | .topRight::-webkit-scrollbar-thumb 70 | { 71 | background: #4A5459; 72 | border-top-right-radius: 8px; 73 | border-bottom-right-radius: 8px; 74 | } 75 | 76 | /* navigation */ 77 | #comments:target .box.blurbs>*:not(.blogs) { /* any anchor */ 78 | display: none; 79 | } 80 | 81 | #comments:not(:target) .box.comments { 82 | display: none; 83 | } 84 | 85 | #comments:target .box.comments { 86 | display: block; 87 | } 88 | -------------------------------------------------------------------------------- /myspace_portrait.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding-bottom: 20px; 3 | } 4 | 5 | #block:after, #report:after{ 6 | color: white; 7 | } 8 | 9 | #header{ 10 | background:var(--image-win-border) no-repeat left top, var(--image-win-border) no-repeat 100% top,/*url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAABmJLR0QAzADMAMzfwV8aAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAKElEQVQI12XIMQEAIAwDsEircwxUFA8csDOBtNUWgmUEGXH8xs0/sgExjB4kmTjTmwAAAABJRU5ErkJggg==),*/linear-gradient(180deg, var(--color-main), var(--color-second)),#000000 !important; 11 | box-shadow:inset 0px 1px var(--color-header-gradient-top) !important; 12 | padding: 5px 0 !important; 13 | width: 100% !important; 14 | } 15 | 16 | #header a.logo b span{ 17 | text-shadow: 0 -1px 0 #000000, 0 -1px 0 #000000, 0 1px 0 #000000, 0 1px 0 #000000, -1px 0 0 #000000, 1px 0 0 #000000, -1px 0 0 #000000, 1px 0 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000; 18 | padding-left: 10px !important; 19 | } 20 | 21 | /* frick! */ 22 | 23 | #hSub{ 24 | height: 24px !important; 25 | width: calc(100% - 4px) !important; 26 | background: var(--menu-back) !important; 27 | box-shadow: inset 0 -1px 0 0 #cccccc !important; 28 | border-bottom: solid 1px var(--color-win-border) !important; 29 | color: #e6e6e6 !important; 30 | padding: 0 2px !important; 31 | line-height: 24px !important; 32 | } 33 | 34 | #hSub a{ 35 | display: inline-block; 36 | color: black; 37 | height: 100%; 38 | padding: 0 2px; 39 | } 40 | 41 | #hSub a:hover{ 42 | background-color: navy; 43 | color: white; 44 | } 45 | 46 | #hUp { 47 | margin-top: 0px !important; 48 | } 49 | 50 | a[href*="mailbox.php"] { 51 | font-size: 0 !important; 52 | background: url(https://i.imgur.com/rYgiIEe.png) no-repeat; 53 | height: 24px; 54 | width: 24px; 55 | line-height: 24px; 56 | display: inline-block; 57 | margin: auto 0; 58 | } 59 | 60 | a[href="logout.php"] { 61 | font-size: 0 !important; 62 | background: url(https://i.imgur.com/EVt2L6S.png) no-repeat; 63 | height: 24px; 64 | width: 24px; 65 | line-height: 24px; 66 | display: inline-block; 67 | margin: auto 0; 68 | } 69 | 70 | .box.comments .boxHead{ 71 | background:var(--image-win-border) no-repeat left top, var(--image-win-border) no-repeat calc(100% - 0.5px) top, linear-gradient(189deg, var(--color-main), var(--color-second)); 72 | color: white; 73 | text-shadow: 0 -1px 0 #000000, 0 -1px 0 #000000, 0 1px 0 #000000, 0 1px 0 #000000, -1px 0 0 #000000, 1px 0 0 #000000, -1px 0 0 #000000, 1px 0 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000; 74 | padding-left: 4px; 75 | height: 32px; 76 | line-height: 32px; 77 | border-bottom: solid 1px var(--color-win-border); 78 | box-shadow:inset 0px 1px var(--color-header-gradient-top) !important; 79 | } 80 | 81 | #commentInput{ 82 | background: rgba(0,0,0,0.75); 83 | color: #FFBF00; 84 | font-family: monospace; 85 | margin-top: 0; 86 | } 87 | 88 | .shortRight{ 89 | font-family: monospace; 90 | } 91 | 92 | div#gender{ 93 | font-size: 0px !important; 94 | } 95 | 96 | div#gender:before{ 97 | content: "gender: "; 98 | display: block; 99 | text-align: left; 100 | font-size: 15px; 101 | } 102 | 103 | div#gender:after{ 104 | content: "yes"; 105 | display: block; 106 | text-align: right; 107 | font-size: 15px; 108 | margin-right: 0; 109 | margin-top: -18px; 110 | } 111 | 112 | span#age{ 113 | font-size: 0px !important; 114 | } 115 | 116 | span#age:after{ 117 | content: "today"; 118 | font-size: 15px; 119 | } 120 | 121 | span.fwiendCount{ 122 | font-size: 0px !important; 123 | } 124 | 125 | span.fwiendCount:after{ 126 | content: "no"; 127 | font-size: 15px; 128 | } 129 | 130 | div.boxInfo.box{ 131 | border-color:var(--color-win-border) !important; 132 | } 133 | 134 | .box:not(.comments), .box>div#form, .box>table#userWall, .blogCard,.topLeft>div:first-child,.short{ 135 | background: var(--image-blur), rgba(0, 0, 0, 0.15); 136 | background-blend-mode: multiply; 137 | background-size: var(--image-blur-size); 138 | background-repeat: var(--image-blur-repeat); 139 | background-attachment: var(--image-blur-attachment); 140 | } 141 | 142 | div.boxInfo.box{ 143 | background: var(--image-blur), rgba(0, 0, 0, 0.35); 144 | background-blend-mode: multiply; 145 | background-size: var(--image-blur-size); 146 | background-repeat: var(--image-blur-repeat); 147 | background-attachment: var(--image-blur-attachment); 148 | text-shadow: 1px 1px 0px black; 149 | } 150 | 151 | .blurbs{ 152 | background: white !important; 153 | } 154 | 155 | .boxHead{ 156 | background:var(--image-win-border) no-repeat left top, var(--image-win-border) no-repeat calc(100% - 0.5px) top, linear-gradient(189deg, var(--color-header-main), var(--color-header-second)); 157 | box-shadow:inset 0px 1px var(--color-header-gradient-top) !important; 158 | border-bottom: solid 1px var(--color-win-border); 159 | height: 25px; 160 | line-height: 25px; 161 | } 162 | 163 | .boxInfo{ 164 | background: linear-gradient(189deg, var(--color-main), var(--color-second)); 165 | } 166 | 167 | .boxInfo>a{ 168 | display: inline-block; 169 | width: 100%; 170 | height: 32px; 171 | } 172 | 173 | /* secret message in the middle of css 174 | begone furries 175 | this page is 100% (christian|halal) 176 | */ 177 | 178 | .boxInfo>a:hover{ 179 | background: linear-gradient(189deg, var(--color-header-main), var(--color-header-second)); 180 | } 181 | 182 | .boxInfo>a>.boxButton{ 183 | color: white; 184 | width: calc(100% - 30px); 185 | } 186 | 187 | .topRight>.box:not(.comments){ 188 | border: solid 1px var(--color-win-border); 189 | } 190 | 191 | .topRight>.box.comments{ 192 | border-top: solid 1px var(--color-win-border); 193 | border-bottom: solid 1px var(--color-win-border); 194 | } 195 | 196 | div.box.comments > div#form, div.box.comments > div.boxHead, div.box.comments > table#userWall, div.box.comments>div:last-child { 197 | border-left: solid 1px var(--color-win-border); 198 | border-right: solid 1px var(--color-win-border); 199 | } 200 | 201 | .box.comments > div#form{ 202 | border-bottom: solid 1px var(--color-win-border); 203 | } 204 | 205 | .box.comments > div.boxHead{ 206 | margin-top: 10px; 207 | } 208 | 209 | .rightHead,.blurbs>.blogs>div:first-child{ 210 | background:var(--image-win-border) no-repeat left top, var(--image-win-border) no-repeat calc(100% - 0.5px) top, linear-gradient(189deg, var(--color-main), var(--color-second)); 211 | color: white; 212 | text-shadow: 0 -1px 0 #000000, 0 -1px 0 #000000, 0 1px 0 #000000, 0 1px 0 #000000, -1px 0 0 #000000, 1px 0 0 #000000, -1px 0 0 #000000, 1px 0 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000; 213 | padding-left: 4px; 214 | height: 32px; 215 | line-height: 32px; 216 | border-bottom: solid 1px var(--color-win-border); 217 | box-shadow:inset 0px 1px var(--color-header-gradient-top) !important; 218 | } 219 | 220 | .comments>.boxHead{ 221 | border-top: solid 1px var(--color-win-border); 222 | } 223 | 224 | .fwiends{ 225 | margin-bottom: 20px; 226 | } 227 | 228 | .player{ 229 | position: fixed; 230 | left: 0; 231 | bottom: 0; 232 | margin: 0; 233 | padding: 0; 234 | height: 18px; 235 | border: none; 236 | background: none; 237 | width: 100%; 238 | } 239 | 240 | .player>.songName{ 241 | display: none; 242 | } 243 | 244 | audio{ 245 | margin: 0; 246 | padding: 0; 247 | height: 100%; 248 | border: none !important; 249 | border-radius: 0px !important; 250 | } 251 | 252 | /*audio::-webkit-media-controls-panel{ 253 | background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQCAIAAABY/YLgAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4wkTDgEgO1NlDwAAADtJREFUCNc9x7ENgDAMRNHz7/H+y0QUaULBDBZT+OgoIlE9PY1zsq4b23Qb+6Xt/1UPCogIJAFbSWQeH2cfGPtTujZdAAAAAElFTkSuQmCC); 254 | } 255 | 256 | audio::-webkit-media-controls-timeline-container{ 257 | -webkit-appearance: none 258 | background: white; 259 | }*/ 260 | 261 | .shortRight,.blogCard{ 262 | color:white; 263 | text-shadow: black 1px 1px 0; 264 | } 265 | 266 | /*.blogCard,.topLeft>div:first-child,.short{ 267 | background: var(--image-blur), rgba(0, 0, 0, 0.1); 268 | background-blend-mode: multiply; 269 | }*/ 270 | 271 | table.short{ 272 | position: relative; 273 | top: -3px; 274 | width: 100%; 275 | } 276 | 277 | div#online>img { 278 | display: none; 279 | } 280 | div#online:before { 281 | content: "user:"; 282 | display: block; 283 | text-align: left; 284 | } 285 | div#online:after { 286 | content: "ONLINE"; 287 | display: block; 288 | font-family: monospace; 289 | margin-right: 0; 290 | text-align: right; 291 | margin-top: -18px; 292 | } 293 | 294 | .uName#name { 295 | text-align: right; 296 | margin-right: 0.75em; 297 | color:white; 298 | text-shadow: black 1px 1px 0; 299 | } 300 | 301 | .blurbs { 302 | background: white; 303 | /*box-shadow: inset #cccccc 1px 34px, inset #fbfbfb -1px -1px, inset #dcdcdc -2px -2px, inset black 2px 35px;*/ 304 | padding: 3px; 305 | } 306 | 307 | .blurbs>.rightHead{ 308 | margin: 0 -3px; 309 | border-top: solid var(--color-win-border) 1px; 310 | } 311 | 312 | div.box.comments>div:last-child{ 313 | background-color: #E8E5E0; 314 | margin-top:-4px; /*TODO: wtf*/ 315 | } 316 | 317 | div.url.box{ 318 | color: white !important; 319 | } 320 | --------------------------------------------------------------------------------