Pushing this mess anyway

This commit is contained in:
2023-04-26 17:57:59 -05:00
parent f59af072d9
commit bf26698b70
18 changed files with 883 additions and 2004 deletions

56
css/accform.css Executable file
View File

@@ -0,0 +1,56 @@
.logincontainer {
max-width: 300px;
margin: 32px;
text-align: center;
}
.logincontainer hr {
border: 1px inset rgba(0,0,0,0.5);
}
.logincontainer .assets,
.logincontainer .accinput {
flex-grow: 1;
padding: 8px;
}
.options .option { display: flex; }
.options .option .name {
font-family: var(--spfont1);
font-size: 12px;
flex-shrink: 0; flex-grow: 1;
text-align: right;
padding: 2px;
}
.options .option input,
.options .option select,
.options .option textarea, {
flex-grow: 0;
}
.logincontainer h2 {
font-family: var(--spfont1);
}
.logincontainer .error {
color: var(--error);
}
.logincontainer .buttonbar {
display: flex;
}
img.bg-icon-overlay {
position: absolute;
bottom: 0; right: 0;
width: 50vh; height: 50vh;
/* width: 100vh; height: 100vh; */
opacity: 0.25;
z-index: -100;
}
ul.errors {
text-align: left;
color: red;
}

109
css/blog.css Normal file
View File

@@ -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;
}

16
css/buttons.css Normal file
View File

@@ -0,0 +1,16 @@
div.button {
display: block;
padding: 4px;
background: #D4D4D4;
border: 2px outset #B8B8B8;
}
div.button:hover {
background: #99D4AB;
border: 2px outset #77C68F;
}
div.button:active {
background: #9E9E9E;
border: 2px inset #707070;
}

67
css/creations.css Executable file
View File

@@ -0,0 +1,67 @@
body.creation-page { }
body.creation-page .creation-container {
max-width: 800px;
margin: 0 auto;
}
body.creation-page .creation-container .title {
background: var(--menu-bg);
border: var(--menu-border);
border-bottom: none;
text-align: left;
font-weight: bold;
font-family: var(--spfont1);
font-size: 24px;
}
body.creation-page .creation-container .title td { padding: 8px; }
body.creation-page .creation-container .gallery-cell {
background: var(--menu-bg);
border-left: var(--menu-border);
border-right: var(--menu-border);
padding: 8px;
}
body.creation-page .creation-container .gallery {
height: 50vh;
}
body.creation-page .creation-container .gallery .gallery-pager {
width: 24px;
text-align: center;
font-size: 20px;
font-family: var(--spfont1);
color: var(--main-text);
text-decoration: none;
cursor: pointer;
}
body.creation-page .creation-container .filmstrip-cell {
background: var(--menu-bg);
border: var(--menu-border);
border-top: none;
padding: 8px;
}
body.creation-page .creation-container .info-cell {
width: 224px;
vertical-align: top;
}
body.creation-page .creation-container .info-panel {
background: var(--menu-bg);
border: var(--menu-border);
padding: 8px;
}
body.creation-page .creation-container .info-panel hr,
body.creation-page .creation-container .box[name='desc'] hr {
border: var(--menu-border);
color: var(--menu-bg);
}
body.creation-page .creation-container .tabbed-cell {
vertical-align: top;
}

View File

@@ -1,15 +1,3 @@
:root {
--spfont1: Pixio;
--spfont2: TypeWriter;
--spfont3: Pixelated;
--spfont4: Joystix;
--spfont5: VCR_OSD_MONO;
--spfont6: BitPap;
--spfont7: Comicoro;
--spfont8: DOSVGA-LessPerfect;
--spfont9: DOSVGA-MorePerfect;
}
@font-face {
font-family: TypeWriter;
src: url(//assets.worlio.com/fonts/type_writer/type_writer.woff),

342
css/radio.css Normal file
View File

@@ -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; }
}

116
css/settings.css Normal file
View File

@@ -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;
}
}

View File

@@ -8,11 +8,15 @@
--acc-nav-separator: 2px solid #000000;
--context-menu: #d0d0d0;
--context-menu-border: 1px outset #a4a4a4;
--context-menu-border: 2px outset #a4a4a4;
--context-menu-hover: #bfbfbf;
--menu-border: 1px outset #c8b793;
--menu-bg: #dbd1bb;
/* DEPRECATED: Use --x-container-y */
--menu-border: 2px outset #c4dbff;
--menu-bg: #a5cff9;
--primary-container-background: #a5cff9;
--primary-container-border: 2px outset #c4dbff;
--header-bg: #ffffff;
--header-text: #000000;
@@ -32,12 +36,13 @@
--staff: #d500d1;
--tab-inactive: #aeafb9;
--tab-selected: #bfcfdd;
--tab-border: 2px outset #000;
--tab-inactive: #b9b3ae;
--tab-selected: #ddd0bf;
--tab-gradient: #dedede;
--popup-title-bg: #b3b3b3;
--popup-title-border: 1px outset #868686;
--popup-title-border: 2px outset #868686;
--dialog-bg: #fbebcc;
--dialog-button-hover: #f9f7dd;
@@ -57,11 +62,11 @@
--success: #95ce8d;
--mail-subject-bg: #b7b7b7;
--mail-subject-border: 1px outset #8a8a8a;
--mail-subject-border: 2px outset #8a8a8a;
--mail-sub-bg: #cecece;
--mail-sub-border: 1px outset #a8a8a8;
--mail-sub-border: 2px outset #a8a8a8;
--mail-content-bg: #dbdbdb;
--mail-content-border: 1px outset #959595;
--mail-content-border: 2px outset #959595;
--mail-buttonbar: #cacaca;
--forum-header: #f3dca9;
@@ -121,12 +126,6 @@
--navbar-bg: url('//assets.worlio.com/style/navbar-bg');
--navbar-gradient: url('//assets.worlio.com/style/navbar-gradient');
--rankflag0: #777;
--rankflag1: #4c3525;
--rankflag2: #3d464b;
--rankflag3: #5c4d0f;
--rankflag4: #5988a5;
--rankflag5: #319b3a;
--rankflag6: #d35ed0;
--rankflag7: #171717;
--primary-font: Pixio;
--secondary-font: TypeWriter;
}