fix and add missing assets

css/accform.css

@@ -0,0 +1,58 @@
+.buttonbar {
+    display: inline-flex;
+}
+
+.logincontainer {
+    display: flex;
+}
+
+@media only screen and (orientation: portrait) {
+    .logincontainer {
+        flex-direction: column;
+    }
+    
+    .logincontainer .assets,
+    .logincontainer .accinput {
+        text-align: center;
+    }
+}
+
+@media only screen and (orientation: landscape) {
+    .logincontainer {
+        margin-top: 10%;
+    }
+    
+    .logincontainer .assets,
+    .logincontainer .accinput {
+        max-width: 50%;
+    }
+}
+
+.logincontainer .assets,
+.logincontainer .accinput {
+    flex-grow: 1;
+    padding: 8px;
+}
+
+.options .option b {
+    font-family: var(--spfont1);
+    font-size: 12px;
+}
+
+.logincontainer .assets img {
+    max-width: 100%;
+    min-width: 128px;
+    width: 512px;
+}
+
+.logincontainer .accinput h2 {
+    font-family: var(--spfont1);
+}
+
+.logincontainer .separator {
+    border: var(--acc-nav-separator);
+}
+
+.error {
+    color: var(--error);
+}

css/bbc.css

@@ -18,6 +18,22 @@ div.quote {
     margin: 2px;
 }
 
+div.quote.qreply {
+	overflow: hidden;
+    max-height: 128px;
+}
+
+div.quote.qreply::before {
+	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--quote-bg) 100%);
+	width: 100%;
+	height: 64px;
+	display: block;
+	content: "";
+	top: 68px;
+	position: relative;
+	margin-bottom: -68px;
+}
+
 div.quote .subq {
     font-family: var(--spfont1, Pixio);
     margin: -4px -4px 2px -4px;
@@ -76,6 +92,15 @@ div.codeblock > .title {
     border-bottom: var(--quote-border, 1px solid #9b9481);
 }
 
+div.private {
+	--background: #0087ff26;
+	--border: 1px solid #023ECCAB;
+	background: var(--background);
+	border-top: var(--border); border-bottom: var(--border);
+	margin: 2px -4px;
+	padding: 4px;
+}
+
 embed-container {
     display: inline-flex;
     vertical-align: middle;

css/blog.css

@@ -0,0 +1,109 @@
+body.blog-index .article {
+	background-color: var(--menu-bg, #d0d0d0);
+	border: var(--menu-border, 1px solid #a4a4a4);
+	margin: 4px;
+	padding: 8px;
+}
+
+body.blog-index .article p {
+	margin: 2px;
+}
+
+body.blog-index .article i, .article .userlink {
+	font-family: var(--spfont1, Pixio);
+}
+
+body.blog-index .article i { color: var(--subtitle, #525252); }
+
+.body > img {
+	max-width: calc(100% - 64px);
+}
+
+.subject {
+	margin: 4px 0px;
+		}
+
+#commentFrame {
+	width: calc(100% - 8px);
+	border: none;
+}
+
+.comment {
+	background-color: var(--menu-bg, #d0d0d0);
+	border: var(--menu-border, 1px solid #bdbdbd);
+	margin: 4px;
+	padding: 8px;
+}
+
+.comment p {
+	margin: 2px;
+}
+
+.comment i {
+	color: var(--subtitle, #525252);
+}
+
+.userlink, .userlink a {
+	color: var(--main-text, #000000);
+	text-decoration: none;
+}
+
+.userlink, .date i, .comment i, #comments {
+	font-family: var(--spfont1, Pixio);
+}
+
+textarea {
+	width: calc(100% - 8px);
+}
+
+.header-title h1, .header-title .author {
+	margin: 2px;
+}
+
+.header-title .author .userlink {
+	margin: 0px;
+}
+
+.header-title i {
+	color: var(--subtitle, #525252);
+}
+
+
+.comment {
+	background-color: var(--menu-bg, #d0d0d0);
+	border: var(--menu-border, 1px solid #bdbdbd);
+	margin: 4px;
+	padding: 8px;
+}
+
+.comment p {
+	margin: 2px;
+}
+
+.comment a[title="Delete"],
+.userlink,
+.comment i{
+	font-family: var(--spfont1, Pixio);
+}
+
+.comment i {
+	color: var(--subtitle, #525252);
+}
+
+.userlink, .userlink a {
+	color: var(--main-text, #000000);
+	text-decoration: none;
+}
+
+textarea {
+	width: calc(100% - 8px);
+}
+
+#header {
+	font-size: 24px;
+	vertical-align: top;
+}
+
+body#comments > .header-title {
+	top: -10px;
+}

css/radio.css

@@ -0,0 +1,342 @@
+@import url('//assets.worlio.com/style/css/theme.css');
+
+@font-face {
+	font-family:Pixio;
+	src:url(//assets.worlio.com/fonts/Pixio/Pixio.woff2),
+	url(//assets.worlio.com/fonts/Pixio/Pixio.woff),
+	url(//assets.worlio.com/fonts/Pixio/Pixio.ttf) format("truetype");
+}
+
+@font-face {
+	font-family:nk57;
+	src:url(../fonts/nk57/nk57-monospace-cd-rg.ttf) format("truetype"),
+	url(../fonts/nk57/nk57-monospace-cd-bd.ttf) format("truetype"),
+	url(../fonts/nk57/nk57-monospace-cd-it.ttf) format("truetype"),
+	url(../fonts/nk57/nk57-monospace-cd-lt.ttf) format("truetype");
+}
+
+:root {
+	--primary: #0079b5;
+	--primary-border: #009ae6;
+
+	--secondary: #f3dca9;
+	--secondary-border: #f2e5c8;
+
+	--button: #DFDFDF;
+	--button-active: gray;
+
+	--monitor: #0F0F0F;
+	--monitor-text: #F0F0F0;
+	--monitor-border: gray;
+
+	--link-color: unset;
+}
+
+*:link, *:visited {
+	color: var(--link-color);
+}
+
+html {
+	height: 100%;
+}
+
+body {
+	background: var(--background-image) var(--main-background);
+	background-repeat: repeat;
+	height: 100%;
+	margin: 0;
+}
+
+body, button, fakebutton, input { font-family: Pixio; }
+
+.container, .player-container {
+	background: var(--primary);
+	border: 2px outset var(--primary-border);
+	padding: 4px;
+}
+.container {
+	min-width: 320px;
+	min-height: 280px;
+	display: flex;
+	gap: 4px;
+	margin: auto;
+	max-width: 976px;
+}
+.player-container {
+	position: relative;
+	border-bottom: none;
+	width: 320px;
+	height: 78px;
+	margin-bottom: -2px;
+	z-index: 1;
+}
+.footer {
+	min-width: 320px;
+	max-width: 976px;
+	text-align: right;
+	margin: auto;
+}
+
+player, visualizer {
+	display: flex;
+	flex-direction: column;
+	background: var(--secondary);
+	border: 2px outset var(--secondary-border);
+	flex-shrink: 0;
+	padding: 4px;
+}
+
+.banner {
+	display: flex;
+}
+
+player {
+	width: 308px; height: 68px;
+}
+
+visualizer {
+	margin-bottom: 4px;
+}
+
+.vis-container {
+	width: 320px;
+	max-width: 320px;
+}
+
+button, fakebutton, slider {
+	border: 2px outset var(--button);
+	background: var(--button);
+}
+
+slider input {
+	background: lightgray;
+	-webkit-appearance: none;
+	appearance: none;
+	height: 50%;
+	margin: auto 4px;
+	width: 96px;
+}
+
+slider input::-webkit-slider-thumb,
+slider input::-moz-range-thumb {
+	background: gray;
+	-webkit-appearance: none;
+	appearance: none;
+	width: 8px;
+	height: 100%;
+	border: none;
+	border-radius: 0;
+}
+
+select {
+	border: none;
+	background: none;
+}
+
+button:active,
+button.active,
+fakebutton:active,
+fakebutton.active {
+	border: 2px inset var(--button-active);
+	background: var(--button-active);
+}
+
+fakebutton { display: flex; }
+fakebutton img { margin: 2px; }
+
+controls {
+	display: flex;
+}
+
+controls input { flex-grow: 1; }
+
+tablist {
+	display: flex;
+	flex-shrink: 0;
+}
+
+metadata, canvas {
+	color: var(--monitor-text);
+	background: black;
+	border: 2px inset var(--secondary-border);
+}
+
+metadata {
+	padding: 4px;
+	display: flex;
+	flex-direction: column;
+}
+metadata station { font-weight: bold; }
+
+panel {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+}
+
+stations {
+	display: flex;
+	flex-direction: column;
+	overflow-y: auto;
+	border: 2px inset var(--primary-border);
+	margin: 2px;
+	flex-grow: 1;
+}
+
+favorites, history, stats {
+	background: var(--monitor);
+	color: var(--monitor-text);
+	border: 2px inset var(--monitor-border);
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	padding: 4px;
+	overflow-y: scroll;
+	min-height: 0;
+}
+
+tabbox {
+	display: none;
+	flex-direction: column;
+	flex-grow: 1;
+}
+tabbox.active { display: flex; }
+
+station {
+	display: flex;
+	flex-direction: column;
+	cursor: pointer;
+	user-select: none;
+	padding: 4px;
+	margin: 2px;
+	border: 2px inset var(--button-active);
+	background: var(--button-active);
+}
+
+station.active {
+	background: var(--button);
+	border: 2px outset var(--button);
+	color: black;
+}
+
+station station-name { font-weight: bold; }
+station track-meta {
+	font-size: 12px;
+}
+
+history track-container {
+	display: flex;
+	flex-direction: column;
+	padding: 2px;
+}
+
+history track-container track-station { font-weight: bold; }
+
+history track-container:nth-of-type(1) {
+	background-color: var(--monitor-text);
+	color: var(--monitor);
+}
+
+canvas.vis, canvas.metadata { border-bottom: none; }
+
+.button-row { display: flex; }
+
+.fav-button img {
+	filter: contrast(0%);
+}
+
+.fav-button.fav img {
+	filter: none;
+}
+
+favorites .station-header,
+history .station-header {
+	text-align: center;
+	margin: 4px 0;
+	text-decoration: underline;
+	margin-top: 12px;
+}
+
+favorites .track,
+history .track {
+	display: flex;
+	border-bottom: 1px dashed var(--monitor-text);
+	margin: 2px 0;
+}
+
+favorites .track button,
+history .track button {
+	background: none;
+	border: none;
+	cursor: pointer;
+	flex-shrink: 0;
+	flex-grow: 0;
+	margin: 2px;
+}
+
+favorites .track a,
+history .track a {
+	flex-grow: 1;
+}
+
+@media only screen and (orientation: portrait) {
+	.container, .footer {
+		flex-direction: column;
+		width: 320px;
+	}
+
+	.banner { flex-direction: column-reverse; }
+	.banner img, .player-container {
+		margin: auto;
+	}
+	.banner > img { flex-shrink: 0; }
+	.player-container { margin-bottom: -2px; }
+
+	panel {
+		max-height: 480px;
+	}
+
+	favorites, history {
+		height: 240px;
+	}
+
+	body.old panel#favorites, body.old panel#history { display: none; }
+}
+
+@media only screen and (orientation: landscape) {
+	.container, .footer {
+		width: calc(100% - 64px);
+	}
+	body:not(.old) .container { height: calc(100% - 212px); }
+
+	.banner {
+		margin: auto;
+		min-width: 320px;
+		width: calc(100% - 52px);
+		max-width: 988px;
+	}
+	.banner > img { margin-top: 2px; } 
+
+	.player-container {
+		margin-top: 48px;
+	}
+
+	/* OLD */
+	body.old .container, body.old .footer {
+		flex-direction: column;
+		width: 320px;
+	}
+
+	body.old .banner { flex-direction: column-reverse; }
+	body.old .banner img, body.old .player-container {
+		margin: auto;
+	}
+	body.old .banner > img { flex-shrink: 0; }
+	body.old .player-container { margin-bottom: -2px; }
+
+	body.old panel {
+		max-height: 480px;
+	}
+
+	body.old panel#favorites, body.old panel#history { display: none; }
+}

css/settings.css

@@ -0,0 +1,116 @@
+iframe {
+width: 100%;
+border: none;
+min-height: 128px;
+}
+
+.box[name="profile"] img.avatar {
+	float: left;
+	margin: 2px;
+}
+
+.tabbed-container .box {
+padding: 8px;
+}
+
+.tablist .tab {
+cursor: pointer;
+}
+
+.box .option .title.small {
+font-size: 12px;
+}
+
+.option {
+margin: 8px 0px;
+}
+
+.option.disabled > *:not(.title) {
+opacity: 0.2;
+}
+
+.option .title {
+font-family: var(--spfont1);
+font-weight: bold;
+}
+
+.option .inputtext:not(.shown) {
+display: none;
+}
+
+.box hr {
+border: var(--menu-border);
+}
+
+.box .buttonbar {
+border-top: var(--menu-border);
+padding: 4px;
+display: flex;
+}
+
+.box .buttonbar .grower {
+flex-grow: 1;
+}
+
+.box[name="sessions"] .session {
+background: var(--mail-content-bg, #dbdbdb);
+border: var(--mail-content-border, 1px outset #a8a8a8);
+padding: 4px;
+margin: 8px 0px;
+}
+
+.box[name="sessions"] .session .title {
+background: var(--mail-subject-bg, #b7b7b7);
+border: var(--mail-subject-border, 1px outset #8a8a8a);
+display: flex;
+padding: 4px;
+margin: -8px;
+margin-bottom: 4px;
+font-family: var(--spfont1);
+}
+
+.box[name="sessions"] .session .title img {
+height: 16px;
+}
+
+.box[name="sessions"] .session .title b {
+flex-grow: 1;
+}
+
+.box[name="sessions"] .session .title .button {
+margin: 0px !important;
+}
+
+.box .pager { display: flex; }
+
+.box .userlist .user-box {
+    display: flex;
+    margin: 4px 0px;
+}
+.box .userlist .user-box:hover { background: #0001; }
+
+.box .userlist .user-box hr {
+    margin: 4px;
+}
+
+.guestbooklist .gbmsgbox {
+    border: var(--menu-border);
+    background: var(--menu-bg);
+    margin: 4px;
+    padding: 2px;
+}
+
+.guestbooklist .gbmsgbox .name {
+    display: flex;
+}
+@media only screen and (orientation: landscape) {
+.tabbed-container.primary > .box .tabbed-container.secondary {
+	margin: -44px -4px -8px -4px;
+}
+
+.tabbed-container.primary > .box .tabbed-container.secondary .box {
+	border-left: none;
+	border-right: none;
+	border-bottom: none;
+}
+}