Compare commits

..

No commits in common. "e9b9bd4e976f6aac4c790e1c95c598e67f263d2c" and "87e41402fb89571befb388bcad3388b78b12b7a2" have entirely different histories.

5 changed files with 435 additions and 422 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 597 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

857
style.css
View File

@ -1,22 +1,13 @@
@import url('css/theme.css'); @import url('//assets.worlio.com/style/css/theme.css');
/* Prevent automatic browser scaling and non-linear rendering */ .pixel, nav, nav.top, .button, .centerdiv, .heading {
.pixel,
nav,
.button,
.centerdiv,
.heading
{
image-rendering: crisp-edges; image-rendering: crisp-edges;
image-rendering: -moz-crisp-edges; image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated; image-rendering: pixelated;
} }
/* Remove Scrollbars */ .no-scroll, nav, nav.top {
.no-scroll,
nav
{
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
} }
@ -27,107 +18,51 @@ nav.top::-webkit-scrollbar {
display: none; display: none;
} }
body.home .home-container {}
body.home .home-container img.logo { max-height: 256px; max-width: 100%; }
body.home .home-container .slogan {
font-family: var(--primary-font);
font-weight: bold;
font-size: 24px;
text-align: center;
}
body.home .home-container .link-contents {
display: flex;
}
body.home .home-container .link-contents .link-item {
margin: 8px;
}
body.home .home-container .link-contents .link-item img {
margin: 2px;
vertical-align: middle;
}
div.grower { flex-grow: 1; } div.grower { flex-grow: 1; }
p img, body.home .home-container .footer {
body > img { max-width: 512px;
max-width: 100%; margin: auto;
text-align: right;
} }
body.home .home-container .blog-contents {
h1 img, max-width: 512px;
h2 img { margin: auto;
width: 32px; border-bottom: 1px solid black;
} }
body.home .home-container .blog-contents .title {
table { border-bottom: 1px solid black;
border-collapse: collapse;
width: 100%;
margin-right: 8px;
}
@media only screen and (orientation: landscape) {
:target::before {
content: "";
display: block;
height: 64px;
margin: -64px 0 0;
}
}
@media only screen and (orientation: portrait) {
:target::before {
content: "";
display: block;
height: 128px;
margin: -128px 0 0;
}
}
/* = ARROW */
hr.arrow {
border: none; border-left: none;
background-image: url('//style.worlio.com/icons/arrow/arrows');
background-size: 200% 200%;
height: 24px;
width: 24px;
margin: 22px 2px 2px 2px;
}
hr.arrow.slideout { background-position: 0 0; }
hr.arrow.right { background-position: 100% 0; }
hr.arrow.up { background-position: 0 100%; }
hr.arrow.down { background-position: 100% 100%; }
/* == MAIN BODY */
body {
background-color: var(--main-background);
background-image: var(--background-image);
color: var(--main-text, #000000);
margin: 8px;
position: absolute;
right: 0px;
bottom: 0px;
}
@media only screen and (orientation: landscape) {
body {
top: 0px;
left: 64px;
}
}
@media only screen and (orientation: portrait) {
body {
top: 64px;
left: 0px;
}
}
/* == NAVIGATION BARS */
nav {
background-color: var(--main-nav);
font-family: var(--primary-font); font-family: var(--primary-font);
position: fixed; font-weight: bold;
top: 0px; font-size: 16px;
left: 0px; padding: 2px;
z-index: 10;
font-size: 14px;
} }
body.home .home-container .blog-contents .blog-item {
body > div.navgap { background: var(--primary-container-background);
height: 34px; border: var(--primary-container-border);
}
nav .logo {
width: 48px;
height: 48px;
padding: 0px;
margin: 2px; margin: 2px;
padding: 4px;
} }
body.home .home-container .blog-contents .blog-item i { text-align: right; }
/* = TOP BAR */
nav.top { nav.top {
display: flex; display: flex;
background-image: var(--navbar-top); background-image: var(--navbar-top);
@ -333,6 +268,16 @@ nav.top div.slideout .username .user-icon {
vertical-align: top; vertical-align: top;
} }
/*nav.acc > div:nth-of-type(2) {
display: block;
overflow-y: visible;
overflow-x: auto;
height: 100%;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 0px 4px;
}*/
nav.acc .slideout.active .dropdown .currency a[type="short"] { display: none; } nav.acc .slideout.active .dropdown .currency a[type="short"] { display: none; }
nav.acc .dropdown .currency a[type="extended"] { display: none; } nav.acc .dropdown .currency a[type="extended"] { display: none; }
nav.acc .slideout.active .dropdown .currency a[type="extended"] { display: unset; } nav.acc .slideout.active .dropdown .currency a[type="extended"] { display: unset; }
@ -368,109 +313,33 @@ nav.top.alert p {
white-space: pre-line; white-space: pre-line;
} }
@media only screen and (orientation: landscape) { nav {
nav { background-color: var(--main-nav);
width: 60px; position: fixed;
padding: 0px 2px;
background-image: var(--navbar-left);
background-repeat: repeat-y;
background-size: 100%;
height: 100%;
}
nav hr {
width: 100%;
border: 1px solid black;
}
nav .logo {
display: block;
}
nav.top {
width: calc(100% - 64px);
top: 0px; top: 0px;
left: 64px;
}
nav.top > .navRight .dropdown h3 {
width: 128px;
}
nav.top > .navRight .dropdown:hover h3 {
text-decoration: underline;
}
nav.top.alert {
top: 36px;
}
}
@media only screen and (orientation: portrait) {
nav {
background-image: var(--navbar-top);
background-repeat: repeat-x;
background-size: 64px;
width: 100%;
height: 60px;
padding: 2px 0px;
overflow-y: hidden;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
white-space: nowrap;
}
nav.top {
overflow-x: unset;
overflow-y: unset;
}
nav hr {
margin: 0px 2px;
border: none;
border: 1px solid black;
width: 0px;
display: inline-block;
height: 48px;
}
nav .logo {
display: inline-block;
}
nav > a {
transform: rotate(-90deg);
display: inline-block;
vertical-align: top;
height: 100%;
}
nav.top {
width: 100%;
top: 64px;
left: 0px; left: 0px;
} z-index: 10;
font-size: 14px;
nav.top > .dropdown h3 {
width: 36px;
}
nav.top.alert {
top: 100px;
}
nav.top div.slideout.account { width: 32px; }
nav.top div.slideout.account:not(.active) .dropdown .username *:not(.mycon) { display: none; }
nav.top div.slideout.account:not(.active) .dropdown .username .mycon { margin: 2px; }
} }
/* == BUTTONS */ body > div.navgap {
height: 34px;
}
nav .logo {
width: 48px;
height: 48px;
padding: 0px;
margin: 2px;
}
.button, nav {
font-family: var(--primary-font);
}
.button { .button {
background: var(--default-button-background); background: var(--default-button-background);
border: var(--default-button-border); border: var(--default-button-border);
font-family: var(--primary-font);
width: 44px; width: 44px;
height: 44px; height: 44px;
font-size: 14px; font-size: 14px;
@ -566,7 +435,101 @@ nav.top.alert p {
cursor: pointer; cursor: pointer;
} }
body {
margin: 8px;
position: absolute;
right: 0px;
bottom: 0px;
}
.header {
display: flex;
margin-bottom: 8px;
}
.header > .gap { flex-grow: 1;}
.header > .title {
border: var(--primary-container-border);
border-top: none;
flex-shrink: 0; flex-grow: 0;
background-color: var(--primary-container-background);
padding: 8px;
font-family: var(--primary-font);
font-weight: bold;
margin: -8px 4px 8px 4px;
}
.tabbed-container > .header {
margin-bottom: 0;
margin-top: -8px;
padding-top: 8px;
}
@media only screen and (orientation: landscape) { @media only screen and (orientation: landscape) {
:target::before {
content: "";
display: block;
height: 64px;
margin: -64px 0 0;
}
body {
top: 0px;
left: 64px;
}
.heading {
width: calc(100% + 8px);
padding: 2px 4px;
left: 64px;
}
.heading.main,
.heading.sub {
top: 0px;
}
.heading.main { margin: -8px; margin-bottom: 8px; }
.heading.sub { margin: -8px; margin-bottom: 8px; }
.heading.section { margin: 4px -8px; }
nav {
width: 60px;
padding: 0px 2px;
background-image: var(--navbar-left);
background-repeat: repeat-y;
background-size: 100%;
height: 100%;
}
nav hr {
width: 100%;
border: 1px solid black;
}
nav .logo {
display: block;
}
nav.top {
width: calc(100% - 64px);
top: 0px;
left: 64px;
}
nav.top > .navRight .dropdown h3 {
width: 128px;
}
nav.top > .navRight .dropdown:hover h3 {
text-decoration: underline;
}
nav.top.alert {
top: 36px;
}
.button { .button {
display: block; display: block;
margin: 2px; margin: 2px;
@ -604,9 +567,111 @@ nav.top.alert p {
top: 8px; top: 8px;
left: calc(64px + 8px); left: calc(64px + 8px);
} }
body > .header-title {
top: -8px;
margin-bottom: -8px;
}
body.forum .main{
max-width: 1200px;
margin: 4px auto;
}
.forum .thread .reply, .forum .errors {
margin: 8px 32px;
}
.forum .thread .post {
display: flex;
}
} }
.forum .thread .post { margin: 8px; }
@media only screen and (orientation: portrait) { @media only screen and (orientation: portrait) {
:target::before {
content: "";
display: block;
height: 128px;
margin: -128px 0 0;
}
body {
top: 64px;
left: 0px;
}
.heading {
margin: -8px;
margin-top: -16px;
margin-bottom: 8px;
padding: 2px 0px;
width: 100%;
left: 0px;
}
.heading.main {
top: 64px;
}
.heading.sub {
top: 128px;
}
nav {
background-image: var(--navbar-top);
background-repeat: repeat-x;
background-size: 64px;
width: 100%;
height: 60px;
padding: 2px 0px;
overflow-y: hidden;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
white-space: nowrap;
}
nav.top {
overflow-x: unset;
overflow-y: unset;
}
nav hr {
margin: 0px 2px;
border: none;
border: 1px solid black;
width: 0px;
display: inline-block;
height: 48px;
}
nav .logo {
display: inline-block;
}
nav > a {
transform: rotate(-90deg);
display: inline-block;
vertical-align: top;
height: 100%;
}
nav.top {
width: 100%;
top: 64px;
left: 0px;
}
nav.top > .dropdown h3 {
width: 36px;
}
nav.top.alert {
top: 100px;
}
.button { .button {
display: inline-block; display: inline-block;
margin: 2px; margin: 2px;
@ -634,32 +699,73 @@ nav.top.alert p {
margin: 2px !important; margin: 2px !important;
font-size: 0px; font-size: 0px;
} }
body > .header-title {
top: -16px;
margin-bottom: -16px;
}
.forum .thread .post, .forum .thread .reply, .errors {
margin: 8px;
}
.forum .thread .threadsub {
flex-direction: column;
}
.forum .thread .threadsub .buttons {
text-align: right;
}
.forum .thread .post .bottombar {
flex-direction: column;
}
.forum .thread .post .bottombar .buttons {
flex-direction: row;
}
nav.top div.slideout.account { width: 32px; }
nav.top div.slideout.account:not(.active) .dropdown .username *:not(.mycon) { display: none; }
nav.top div.slideout.account:not(.active) .dropdown .username .mycon { margin: 2px; }
} }
/* == HEADING/HEADER */ body {
background-color: var(--main-background);
.header { background-image: var(--background-image);
display: flex; color: var(--main-text, #000000);
margin-bottom: 8px;
} }
.header > .gap { flex-grow: 1;} nav,
nav.top,
.header > .title { .button,
border: var(--primary-container-border); .centerdiv,
border-top: none; .heading {
flex-shrink: 0; flex-grow: 0; scrollbar-width: none;
background-color: var(--primary-container-background); -ms-overflow-style: none;
padding: 8px;
font-family: var(--primary-font);
font-weight: bold;
margin: -8px 4px 8px 4px;
} }
.tabbed-container > .header { p img,
margin-bottom: 0; body > img {
margin-top: -8px; max-width: 100%;
padding-top: 8px; }
.logo {
max-height: 128px;
display: block;
margin-left: auto;
margin-right: auto;
}
h1 img,
h2 img {
width: 32px;
}
table {
border-collapse: collapse;
width: 100%;
margin-right: 8px;
} }
.heading { .heading {
@ -744,211 +850,19 @@ nav.top.alert p {
height: 75%; height: 75%;
} }
@media only screen and (orientation: landscape) { hr.arrow {
.heading { border: none; border-left: none;
width: calc(100% + 8px); background-image: url('//style.worlio.com/icons/arrow/arrows');
padding: 2px 4px; background-size: 200% 200%;
left: 64px; height: 24px;
} width: 24px;
margin: 22px 2px 2px 2px;
.heading.main,
.heading.sub {
top: 0px;
}
.heading.main { margin: -8px; margin-bottom: 8px; }
.heading.sub { margin: -8px; margin-bottom: 8px; }
.heading.section { margin: 4px -8px; }
body > .header-title {
top: -8px;
margin-bottom: -8px;
}
} }
@media only screen and (orientation: portrait) { hr.arrow.slideout { background-position: 0 0; }
.heading { hr.arrow.right { background-position: 100% 0; }
margin: -8px; hr.arrow.up { background-position: 0 100%; }
margin-top: -16px; hr.arrow.down { background-position: 100% 100%; }
margin-bottom: 8px;
padding: 2px 0px;
width: 100%;
left: 0px;
}
.heading.main {
top: 64px;
}
.heading.sub {
top: 128px;
}
body > .header-title {
top: -16px;
margin-bottom: -16px;
}
}
/* == HOME PAGE */
body.home .home-container {}
body.home .home-container img.logo {
max-height: 256px;
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}
body.home .home-container .slogan {
font-family: var(--primary-font);
font-weight: bold;
font-size: 24px;
text-align: center;
}
body.home .home-container .link-contents {
display: flex;
}
body.home .home-container .link-contents .link-item {
margin: 8px;
}
body.home .home-container .link-contents .link-item img {
margin: 2px;
vertical-align: middle;
}
body.home .home-container .footer {
max-width: 512px;
margin: auto;
text-align: right;
}
body.home .home-container .blog-contents {
max-width: 512px;
margin: auto;
border-bottom: 1px solid black;
}
body.home .home-container .blog-contents .title {
border-bottom: 1px solid black;
font-family: var(--primary-font);
font-weight: bold;
font-size: 16px;
padding: 2px;
}
body.home .home-container .blog-contents .blog-item {
background: var(--primary-container-background);
border: var(--primary-container-border);
margin: 2px;
padding: 4px;
}
body.home .home-container .blog-contents .blog-item i { text-align: right; }
@media only screen and (orientation: landscape) {
body.forum .main{
max-width: 1200px;
margin: 4px auto;
}
.forum .thread .reply, .forum .errors {
margin: 8px 32px;
}
.forum .thread .post {
display: flex;
}
}
.forum .thread .post { margin: 8px; }
@media only screen and (orientation: portrait) {
.forum .thread .post, .forum .thread .reply, .errors {
margin: 8px;
}
.forum .thread .threadsub {
flex-direction: column;
}
.forum .thread .threadsub .buttons {
text-align: right;
}
.forum .thread .post .bottombar {
flex-direction: column;
}
.forum .thread .post .bottombar .buttons {
flex-direction: row;
}
}
/* == LIBRARY */
body.library .lib {
background-color: transparent;
border: none;
}
body.library .lib.large {
max-width: 256px;
text-align: center;
}
body.library .lib a {
margin: 4px 8px;
display: inline-block;
}
body.library .lib a:hover {
text-shadow: 0px 0px 4px white;
}
body.library .lib a > img {
margin: auto;
filter: brightness(90%);
transition-duration: 0.1s;
}
body.library .lib a:hover > img {
filter: drop-shadow(0px 0px 4px white) brightness(100%);
}
body.library .lib.main a img {
max-height: 64px;
min-width: 64px;
max-width: 192px;
}
body.library .lib.small,
body.library .lib.tiny {
display: block;
}
body.library .lib.small > a,
body.library .lib.tiny > a {
margin: 4px 8px;
}
body.library .lib.small > a img,
body.library .lib.tiny > a img {
max-height: 16px;
min-width: 16px;
max-width: 48px;
}
body.library .lib.small > a {
width: 368px;
}
body.library .lib.tiny > a {
min-width: 64px;
}
c, code, .codeblock:not(.title) { c, code, .codeblock:not(.title) {
background: var(--code-bg); background: var(--code-bg);
@ -977,7 +891,66 @@ code p {
width: 100%; width: 100%;
} }
.lib {
background-color: transparent;
border: none;
}
.lib.large {
max-width: 256px;
text-align: center;
}
.lib a {
margin: 4px 8px;
display: inline-block;
}
.lib a:hover {
text-shadow: 0px 0px 4px white;
}
.lib a > img {
margin: auto;
filter: brightness(90%);
transition-duration: 0.1s;
}
.lib a:hover > img {
filter: drop-shadow(0px 0px 4px white) brightness(100%);
}
.lib.main a img {
max-height: 64px;
min-width: 64px;
max-width: 192px;
}
.lib.small,
.lib.tiny {
display: block;
}
.lib.small > a,
.lib.tiny > a {
margin: 4px 8px;
}
.lib.small > a img,
.lib.tiny > a img {
max-height: 16px;
min-width: 16px;
max-width: 48px;
}
.lib.small > a {
width: 368px;
}
.lib.tiny > a {
min-width: 64px;
}
.comments { .comments {
max-width: 100%; max-width: 100%;
@ -987,6 +960,17 @@ code p {
border: none; border: none;
} }
.love {
display: inline-block;
transform: none;
height: unset;
color: #FF0000;
opacity: 0.1;
text-decoration: none;
z-index: 15;
width: 48px;
}
.link { .link {
text-decoration: underline; text-decoration: underline;
color: blue; color: blue;
@ -997,6 +981,35 @@ code p {
color: blueviolet; color: blueviolet;
} }
input[type="button"],
input[type="checkbox"],
input[type="color"],
input[type="date"],
input[type="datetime-local"],
input[type="email"],
input[type="image"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="radio"],
input[type="range"],
input[type="reset"],
input[type="search"],
input[type="submit"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
textarea {
background-color: var(--input-bg);
color: var(--input-text);
}
input[type="file"] {
color: var(--input-text);
}
.styled-table > tbody > tr { .styled-table > tbody > tr {
border-bottom: 1px dashed var(--border-line); border-bottom: 1px dashed var(--border-line);
} }