move to central themes repo
This commit is contained in:
120
core/css/bbc.css
Executable file
120
core/css/bbc.css
Executable file
@@ -0,0 +1,120 @@
|
||||
a.spoiler {
|
||||
background-color: var(--main-text);
|
||||
color: var(--main-text);
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
a.spoiler:focus,
|
||||
a.spoiler:active,
|
||||
a.spoiler:hover {
|
||||
background-color: unset;
|
||||
color: unset;
|
||||
}
|
||||
|
||||
div.quote {
|
||||
background-color: var(--quote-bg, #cacaca);
|
||||
border: var(--quote-border, 1px solid #9b9481);
|
||||
padding: 4px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
div.quote .subq {
|
||||
font-family: var(--spfont1, Pixio);
|
||||
margin: -4px -4px 2px -4px;
|
||||
border-bottom: var(--quote-border, 1px solid #9b9481);
|
||||
display: flex;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
div.quote .subq .userlink { flex-grow: 1; }
|
||||
|
||||
div.quote .subq .qjump a {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
div.spoiler {
|
||||
padding: 4px;
|
||||
margin: 2px;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
div.spoiler > div.contents {
|
||||
display: none;
|
||||
background-color: var(--spoiler-bg, #b0b0b0);
|
||||
border: var(--spoiler-border, 1px solid #1c1c1c);
|
||||
border-top: none;
|
||||
margin: -2px -4px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
div.spoiler.shown > div.contents {
|
||||
display: block;
|
||||
}
|
||||
|
||||
div.spoiler > .title {
|
||||
background: var(--spoiler-header-bg, #1c1c1c);
|
||||
border-bottom: var(--spoiler-border, 1px solid #1c1c1c);
|
||||
color: var(--spoiler-header-text, #E8E8E8);
|
||||
font-family: var(--spfont1, Pixio);
|
||||
margin: -4px -4px 2px -4px;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.codeblock {
|
||||
background-color: var(--code-bg, #ffffff63);
|
||||
border: var(--menu-border, 1px solid #bdbdbd);
|
||||
color: var(--code-text, #000000);
|
||||
padding: 4px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
div.codeblock > .title {
|
||||
font-family: var(--spfont1, Pixio);
|
||||
margin: -4px -4px 2px -4px;
|
||||
padding: 4px;
|
||||
border-bottom: var(--quote-border, 1px solid #9b9481);
|
||||
}
|
||||
|
||||
embed-container {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
margin: 4px;
|
||||
width: 550px;
|
||||
height: 400px;
|
||||
background-color: #000C;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
embed-container > a {
|
||||
margin: auto;
|
||||
width: 96px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
embed-container .flashbar {
|
||||
display: flex;
|
||||
color: white;
|
||||
height: 32px;
|
||||
padding: 0px 4px;
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
embed-container .flashbar * {
|
||||
cursor: pointer;
|
||||
}
|
||||
embed-container .flashbar a:link,
|
||||
embed-container .flashbar a:visited {
|
||||
color: white;
|
||||
}
|
||||
|
||||
embed-container .flashbar a img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
embed-container .flashbar .pause {
|
||||
font-size: 24px;
|
||||
font-family: Pixio;
|
||||
}
|
||||
204
core/css/buttons.css
Normal file
204
core/css/buttons.css
Normal file
@@ -0,0 +1,204 @@
|
||||
.button {
|
||||
background: var(--default-button-background);
|
||||
border: var(--default-button-border);
|
||||
font-family: var(--primary-font);
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
button.formbutton {
|
||||
background: var(--default-button-background);
|
||||
border: var(--default-button-border);
|
||||
font-family: var(--primary-font);
|
||||
cursor: pointer;
|
||||
height: 28px;
|
||||
width: 128px;
|
||||
padding: 0px;
|
||||
margin: 2px;
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
button.formbutton.small {
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
button.formbutton img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
button.formbutton a {
|
||||
margin: 4px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.button:hover > a > img:nth-of-type(1) {
|
||||
filter: contrast(50%);
|
||||
}
|
||||
|
||||
.button:active > a > img:nth-of-type(1) {
|
||||
filter: brightness(50%) saturate(0%);
|
||||
}
|
||||
|
||||
.button > a {
|
||||
display: block;
|
||||
width: 144px;
|
||||
height: 48px;
|
||||
margin: -2px;
|
||||
}
|
||||
|
||||
.button > a > img:nth-of-type(1) {
|
||||
display: inline;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-right: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.popbutton {
|
||||
width: 44px;
|
||||
text-overflow: clip;
|
||||
overflow: hidden;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
.longbutton, .smallbutton {
|
||||
display: inline-block !important;
|
||||
padding: 2px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.longbutton {
|
||||
width: 116px;
|
||||
}
|
||||
|
||||
.smallbutton {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.longbutton a, .smallbutton a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100% !important;
|
||||
width: 100% !important;
|
||||
margin: 0px -2px;
|
||||
}
|
||||
|
||||
.longbutton.txt a {
|
||||
display: inline-block !important;
|
||||
width: 100%; height: 100%;
|
||||
font-family: var(--primary-font);
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
color: var(--main-text, #000000);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.longbutton > a > img, .smallbutton > a > img {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
}
|
||||
|
||||
.longbutton > a, .smallbutton > a {
|
||||
color: var(--main-text);
|
||||
text-decoration: none;
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.longbutton > a img, .smallbutton > a img {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.button:hover, .button.selected, button.formbutton:hover {
|
||||
background: var(--hover-button-background);
|
||||
border: var(--hover-button-border);
|
||||
}
|
||||
|
||||
.button:active, button.formbutton:active {
|
||||
background: var(--active-button-background);
|
||||
border: var(--active-button-border);
|
||||
}
|
||||
|
||||
.button.disabled, .longbutton.disabled, .smallbutton.disabled, button.formbutton.disabled {
|
||||
background: var(--disabled-button-background);
|
||||
border: var(--disabled-button-border);
|
||||
}
|
||||
|
||||
@media only screen and (orientation: landscape) {
|
||||
.button {
|
||||
display: block;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.button a {
|
||||
display: block;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.popbutton {
|
||||
font-size: 16px;
|
||||
margin: 2px 4px;
|
||||
}
|
||||
|
||||
.popbutton:hover {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.popbutton > a {
|
||||
color: var(--main-text);
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
width: 144px;
|
||||
}
|
||||
|
||||
.popbutton > a img {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.oddbutton {
|
||||
top: 8px;
|
||||
left: calc(64px + 8px);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (orientation: portrait) {
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.popbutton {
|
||||
margin: 4px 2px;
|
||||
}
|
||||
|
||||
.popbutton:hover {
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.popbutton a:nth-of-type(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.oddbutton {
|
||||
top: calc(64px + 8px);
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.longbutton.collapse {
|
||||
width: 20px;
|
||||
margin: 2px !important;
|
||||
font-size: 0px;
|
||||
}
|
||||
}
|
||||
67
core/css/creations.css
Executable file
67
core/css/creations.css
Executable file
@@ -0,0 +1,67 @@
|
||||
body.creations { }
|
||||
|
||||
body.creations .creation-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body.creations .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.creations .creation-container .title td { padding: 8px; }
|
||||
|
||||
body.creations .creation-container .gallery-cell {
|
||||
background: var(--menu-bg);
|
||||
border-left: var(--menu-border);
|
||||
border-right: var(--menu-border);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
body.creations .creation-container .gallery {
|
||||
height: 50vh;
|
||||
}
|
||||
|
||||
body.creations .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.creations .creation-container .filmstrip-cell {
|
||||
background: var(--menu-bg);
|
||||
border: var(--menu-border);
|
||||
border-top: none;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
body.creations .creation-container .info-cell {
|
||||
width: 224px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
body.creations .creation-container .info-panel {
|
||||
background: var(--menu-bg);
|
||||
border: var(--menu-border);
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
body.creations .creation-container .info-panel hr,
|
||||
body.creations .creation-container .box[name='desc'] hr {
|
||||
border: var(--menu-border);
|
||||
color: var(--menu-bg);
|
||||
}
|
||||
|
||||
body.creations .creation-container .tabbed-cell {
|
||||
vertical-align: top;
|
||||
}
|
||||
9
core/css/error.css
Normal file
9
core/css/error.css
Normal file
@@ -0,0 +1,9 @@
|
||||
.error-container p, .error-container h1 {
|
||||
text-align: center;
|
||||
font-family: var(--primary-font);
|
||||
}
|
||||
|
||||
.error-container img {
|
||||
max-height: 80vh;
|
||||
max-width: 80vw;
|
||||
}
|
||||
23
core/css/fonts.css
Executable file
23
core/css/fonts.css
Executable file
@@ -0,0 +1,23 @@
|
||||
@font-face {
|
||||
font-family: Pixio;
|
||||
src: url(../fonts/Pixio/Pixio.woff2),
|
||||
url(../fonts/Pixio/Pixio.woff),
|
||||
url(../fonts/Pixio/Pixio.ttf) format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: PixioMono;
|
||||
src: url(../fonts/PixioMono/PixioMono.woff2),
|
||||
url(../fonts/PixioMono/PixioMono.woff),
|
||||
url(../fonts/PixioMono/PixioMono.ttf) format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: _04B-03;
|
||||
src: url(../fonts/04B-03/04B_03.ttf) format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: _04B-24;
|
||||
src: url(../fonts/04B-24/04B_24.ttf) format("truetype");
|
||||
}
|
||||
34
core/css/profile.css
Normal file
34
core/css/profile.css
Normal file
@@ -0,0 +1,34 @@
|
||||
@import url('theme.css');
|
||||
@import url('fonts.css');
|
||||
@import url('buttons.css');
|
||||
@import url('tabbed-container.css');
|
||||
|
||||
body.profile .page-container {
|
||||
margin-left: auto; margin-right: auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
body.profile .page-container .header-container {
|
||||
background: var(--primary-container-background);
|
||||
border: var(--primary-container-border);
|
||||
padding: 2px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body.profile .page-container .header-table,
|
||||
body.profile .page-container .tabbed-container .tablist,
|
||||
div.button {
|
||||
font-family: Pixio;
|
||||
image-rendering: crisp-edges;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
body.profile .page-container .header-table td.tag .userlink {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
body.profile .page-container .header-table td.tag .userlink img {
|
||||
height: 32px;
|
||||
}
|
||||
342
core/css/radio.css
Normal file
342
core/css/radio.css
Normal 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
core/css/settings.css
Normal file
116
core/css/settings.css
Normal 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;
|
||||
}
|
||||
}
|
||||
118
core/css/tabbed-container.css
Normal file
118
core/css/tabbed-container.css
Normal file
@@ -0,0 +1,118 @@
|
||||
/* = TABBED CONTAINERS */
|
||||
|
||||
.tabbed-page,
|
||||
.tabbed-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tabbed-page .tablist,
|
||||
.tabbed-container .tablist {
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-shrink: 0;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.tabbed-page .tablist .tab,
|
||||
.tabbed-container .tablist .tab,
|
||||
.tabbed-container .tablist .faketab {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tablist a,
|
||||
.tablist a:link, .tablist a:visited {
|
||||
color: var(--main-text);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tabbed-page .tablist .tab,
|
||||
.tabbed-container .tablist .tab,
|
||||
.tabbed-container .tablist .faketab {
|
||||
background-color: var(--tab-inactive);
|
||||
border: var(--tab-border);
|
||||
display: inline-block;
|
||||
padding: 8px;
|
||||
position: relative;
|
||||
margin: auto 2px 0px 2px;
|
||||
bottom: -2px;
|
||||
text-align: center;
|
||||
font-family: var(--primary-font);
|
||||
}
|
||||
|
||||
.tabbed-container .tablist .tab *:not(.userlink) img,
|
||||
.tabbed-container .tablist .faketab img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tabbed-page .tablist .tab.selected,
|
||||
.tabbed-container .tablist .tab.selected,
|
||||
.tabbed-container .tablist .faketab.selected {
|
||||
background: var(--tab-selected, #d3d3d3);
|
||||
background: -moz-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
|
||||
background: -webkit-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
|
||||
background: linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
|
||||
bottom: -2px;
|
||||
/*border-bottom: none;*/
|
||||
}
|
||||
|
||||
.tabbed-page .box,
|
||||
.tabbed-container .box,
|
||||
.tabbed-container .dropdown {
|
||||
background-color: var(--tab-selected);
|
||||
border: var(--tab-border);
|
||||
padding: 4px;
|
||||
display: block;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
/* JS should handle positions and shit */
|
||||
.tabbed-container .dropdown {
|
||||
position: absolute;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.tabbed-container > .tablist > .tab > .tab-close {
|
||||
display: inline-block;
|
||||
width: 16px; height: 16px;
|
||||
margin-left: 4px;
|
||||
background-image: url('//assets.worlio.com/style/icons/close');
|
||||
background-size: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (orientation: landscape) {
|
||||
.tabbed-container.vertical {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.tabbed-container.vertical > .tablist {
|
||||
position: relative;
|
||||
right: -1px;
|
||||
bottom: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tabbed-container.vertical > .tablist .tab,
|
||||
.tabbed-container.vertical > .tablist .faketab {
|
||||
margin: 2px 0px;
|
||||
right: -1px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.tabbed-container.vertical > .tablist .tab.selected,
|
||||
.tabbed-container.vertical > .tablist .faketab.selected {
|
||||
background: var(--tab-selected, #d3d3d3);
|
||||
background: -moz-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
|
||||
background: -webkit-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
|
||||
background: linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
|
||||
border: var(--tab-border);
|
||||
}
|
||||
}
|
||||
134
core/css/theme.css
Executable file
134
core/css/theme.css
Executable file
@@ -0,0 +1,134 @@
|
||||
:root {
|
||||
--main-background: #d3d3d3;
|
||||
--main-text: #000000;
|
||||
|
||||
--subtitle: #525252;
|
||||
--main-nav: dodgerblue;
|
||||
--acc-nav: #f3dca9;
|
||||
--acc-nav-separator: 2px solid #000000;
|
||||
|
||||
--context-menu: #d0d0d0;
|
||||
--context-menu-border: 2px outset #a4a4a4;
|
||||
--context-menu-hover: #bfbfbf;
|
||||
|
||||
--primary-container-background: #d9d4c9;
|
||||
--primary-container-border: 2px outset #e5e2d1;
|
||||
|
||||
--secondary-container-background: #cacaca;
|
||||
--secondary-container-border: 2px outset #c1c1c1;
|
||||
|
||||
--header-bg: #ffffff;
|
||||
--header-text: #000000;
|
||||
--header-line: 2px solid #000000;
|
||||
|
||||
--code-bg: #ffffff63;
|
||||
--code-text: #000000;
|
||||
|
||||
--comments-bgcolor: #ffffff;
|
||||
|
||||
--border-line: #000000;
|
||||
--border-header: #ffffff;
|
||||
|
||||
--inactive: #6e6e6e;
|
||||
--alert: #ce0000;
|
||||
--currency: #89541A;
|
||||
|
||||
--staff: #d500d1;
|
||||
|
||||
--tab-border: 2px outset #d9e2d7;
|
||||
--tab-inactive: #a8a8a8;
|
||||
--tab-selected: #c8cbce;
|
||||
--tab-gradient: #dedede;
|
||||
|
||||
--popup-title-bg: #b3b3b3;
|
||||
--popup-title-border: 2px outset #868686;
|
||||
|
||||
--dialog-title: linear-gradient(180deg, #ffffff 0%, #f3dca9 8px);
|
||||
--dialog-title-border: 1px outset #a48e65;
|
||||
--dialog-bg: #b3b3b3;
|
||||
--dialog-border: 1px outset #636363;
|
||||
--dialog-button: #fbebcc;
|
||||
--dialog-button-hover: #f9f7dd;
|
||||
--dialog-button-active: #fffeee;
|
||||
|
||||
--listing-unknown: #dd8fe8;
|
||||
--listing-missing: #d57f6b;
|
||||
--listing-found: #8cb9fd;
|
||||
--listing-archived: #5dc668;
|
||||
|
||||
--status-success: #458e1c;
|
||||
--status-error: #ff0000;
|
||||
|
||||
--error: #c85151;
|
||||
--warn: #d5c58e;
|
||||
--info: #8d9dce;
|
||||
--success: #95ce8d;
|
||||
|
||||
--mail-subject-bg: #b7b7b7;
|
||||
--mail-subject-border: 2px outset #8a8a8a;
|
||||
--mail-sub-bg: #cecece;
|
||||
--mail-sub-border: 2px outset #a8a8a8;
|
||||
--mail-content-bg: #dbdbdb;
|
||||
--mail-content-border: 2px outset #959595;
|
||||
--mail-buttonbar: #cacaca;
|
||||
|
||||
--forum-header: linear-gradient(180deg, #ffffff 0%, #f3dca9 8px);
|
||||
--forum-header-border: 1px outset #a89b7f;
|
||||
--forum-content: #d9d4c9;
|
||||
--forum-content-border: 2px outset #a29c8d;
|
||||
|
||||
--forum-sub: #d7ccb6;
|
||||
--forum-sub-border: 1px outset #99907b;
|
||||
|
||||
--post: #d9d9d9;
|
||||
--post-border: 1px outset #bfb9a9;
|
||||
--post-bottombar: #d2d2d2;
|
||||
|
||||
--post-author: #b4b6b7;
|
||||
--post-author-border: 1px outset #84775a;
|
||||
|
||||
--quote-bg: #cacaca;
|
||||
--quote-border: 1px outset #9b9481;
|
||||
|
||||
--spoiler-bg: #b0b0b0;
|
||||
--spoiler-header-bg: #1c1c1c;
|
||||
--spoiler-header-text: #E8E8E8;
|
||||
--spoiler-border: 1px inset #1c1c1c;
|
||||
|
||||
--bar-bgcolor: #ffffff;
|
||||
|
||||
--input-bg: #ffffff;
|
||||
--input-text: #000000;
|
||||
|
||||
--direct: #ffffff;
|
||||
|
||||
--background-image: url('//assets.worlio.com/style/background');
|
||||
|
||||
/* DEPRECATED
|
||||
--button-large: url('//assets.worlio.com/style/button-large');
|
||||
--button-wide: url('//assets.worlio.com/style/button-wide');
|
||||
--button-long: url('//assets.worlio.com/style/button-long');
|
||||
--button-med: url('//assets.worlio.com/style/button-med');
|
||||
--button-small: url('//assets.worlio.com/style/button-small');
|
||||
*/
|
||||
--default-button-background: #d4d4d4;
|
||||
--default-button-border: 2px outset #dfdfdf;
|
||||
--hover-button-background: #99d4ab;
|
||||
--hover-button-border: 2px outset #b6e0c3;
|
||||
--active-button-background: #9e9e9e;
|
||||
--active-button-border: 2px inset #bfbfbf;
|
||||
--disabled-button-background: #808080;
|
||||
--disabled-button-border: 2px solid #808080;
|
||||
|
||||
--navbar-left: url('//assets.worlio.com/style/navbar-left');
|
||||
--navbar-right: url('//assets.worlio.com/style/navbar-right');
|
||||
--navbar-top: url('//assets.worlio.com/style/navbar-top');
|
||||
--navbar-bottom: url('//assets.worlio.com/style/navbar-bottom');
|
||||
--nav-db: url('//assets.worlio.com/style/navbar-db');
|
||||
|
||||
--navbar-bg: url('//assets.worlio.com/style/navbar-bg');
|
||||
--navbar-gradient: url('//assets.worlio.com/style/navbar-gradient');
|
||||
|
||||
--primary-font: Pixio;
|
||||
--secondary-font: TypeWriter;
|
||||
}
|
||||
45
core/css/usercard.css
Normal file
45
core/css/usercard.css
Normal file
@@ -0,0 +1,45 @@
|
||||
.user-card {
|
||||
background-position: 50% 50%;
|
||||
font-family: var(--primary-font);
|
||||
text-shadow:
|
||||
-1px -1px 0 var(--card-outline),
|
||||
0px -1px 0 var(--card-outline),
|
||||
1px -1px 0 var(--card-outline),
|
||||
-1px 0px 0 var(--card-outline),
|
||||
-1px 1px 0 var(--card-outline),
|
||||
0px 1px 0 var(--card-outline),
|
||||
1px 1px 0 var(--card-outline),
|
||||
1px 0px 0 var(--card-outline);
|
||||
}
|
||||
|
||||
/* == STYLES
|
||||
URL assets should be in base64 here, preventing issues with incorrect path-finding from the URL itself. This file should be cached.
|
||||
*/
|
||||
.user-card.wblue { /* Worlio Blue */
|
||||
--usercard-image: url('/assets/style/background');
|
||||
--usercard-color: #1E90FF;
|
||||
}
|
||||
|
||||
.user-card.wbumps { /* Worm Bumps */
|
||||
--usercard-image: url('/assets/style/card/wbumps');
|
||||
--usercard-color: #ddd;
|
||||
--card-outline: #FFF;
|
||||
}
|
||||
|
||||
.user-card.wgraving { /* Worm Engravings */
|
||||
--usercard-image: url('/assets/style/card/wgraving');
|
||||
--usercard-color: #eee;
|
||||
--card-outline: #FFF;
|
||||
}
|
||||
|
||||
.user-card.warpspeed { /* Warp Speed */
|
||||
--usercard-image: url('/assets/style/card/warpspeed');
|
||||
--usercard-color: #000;
|
||||
--card-outline: #FFF;
|
||||
}
|
||||
|
||||
.user-card.nyanstars { /* Nyan Stars */
|
||||
--usercard-image: url('/assets/style/card/nyanstars');
|
||||
--usercard-color: #013368;
|
||||
--card-outline: #FFF;
|
||||
}
|
||||
Reference in New Issue
Block a user