Compare commits
No commits in common. "e9b9bd4e976f6aac4c790e1c95c598e67f263d2c" and "87e41402fb89571befb388bcad3388b78b12b7a2" have entirely different histories.
e9b9bd4e97
...
87e41402fb
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
857
style.css
|
|
@ -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);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user