diff --git a/icons/plan-icons/basic.png b/icons/plan-icons/basic.png new file mode 100755 index 0000000..bb371cc Binary files /dev/null and b/icons/plan-icons/basic.png differ diff --git a/icons/plan-icons/bronze.png b/icons/plan-icons/bronze.png new file mode 100755 index 0000000..c1eb10c Binary files /dev/null and b/icons/plan-icons/bronze.png differ diff --git a/icons/plan-icons/gold.png b/icons/plan-icons/gold.png new file mode 100755 index 0000000..d084f3b Binary files /dev/null and b/icons/plan-icons/gold.png differ diff --git a/icons/plan-icons/silver.png b/icons/plan-icons/silver.png new file mode 100755 index 0000000..5506c39 Binary files /dev/null and b/icons/plan-icons/silver.png differ diff --git a/style.css b/style.css index f5a29de..5094faf 100644 --- a/style.css +++ b/style.css @@ -1,13 +1,22 @@ -@import url('//assets.worlio.com/style/css/theme.css'); +@import url('css/theme.css'); -.pixel, nav, nav.top, .button, .centerdiv, .heading { +/* Prevent automatic browser scaling and non-linear rendering */ +.pixel, +nav, +.button, +.centerdiv, +.heading +{ image-rendering: crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; } -.no-scroll, nav, nav.top { +/* Remove Scrollbars */ +.no-scroll, +nav +{ scrollbar-width: none; -ms-overflow-style: none; } @@ -18,51 +27,107 @@ nav.top::-webkit-scrollbar { 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; } -body.home .home-container .footer { - max-width: 512px; - margin: auto; - text-align: right; +p img, +body > img { + max-width: 100%; } -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; } +h1 img, +h2 img { + width: 32px; +} + +table { + 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); + position: fixed; + top: 0px; + left: 0px; + z-index: 10; + font-size: 14px; +} + +body > div.navgap { + height: 34px; +} + +nav .logo { + width: 48px; + height: 48px; + padding: 0px; + margin: 2px; +} + +/* = TOP BAR */ nav.top { display: flex; background-image: var(--navbar-top); @@ -268,16 +333,6 @@ nav.top div.slideout .username .user-icon { 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 .dropdown .currency a[type="extended"] { display: none; } nav.acc .slideout.active .dropdown .currency a[type="extended"] { display: unset; } @@ -313,33 +368,109 @@ nav.top.alert p { white-space: pre-line; } -nav { - background-color: var(--main-nav); - position: fixed; - top: 0px; - left: 0px; - z-index: 10; - font-size: 14px; +@media only screen and (orientation: landscape) { + 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; + } } -body > div.navgap { - height: 34px; +@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; + } + + 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; } } -nav .logo { - width: 48px; - height: 48px; - padding: 0px; - margin: 2px; -} - -.button, nav { - font-family: var(--primary-font); -} +/* == BUTTONS */ .button { background: var(--default-button-background); border: var(--default-button-border); + font-family: var(--primary-font); width: 44px; height: 44px; font-size: 14px; @@ -435,101 +566,7 @@ nav .logo { 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) { - :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 { display: block; margin: 2px; @@ -567,111 +604,9 @@ body { top: 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) { - :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 { display: inline-block; margin: 2px; @@ -699,73 +634,32 @@ body { margin: 2px !important; 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; } } -body { - background-color: var(--main-background); - background-image: var(--background-image); - color: var(--main-text, #000000); +/* == HEADING/HEADER */ + +.header { + display: flex; + margin-bottom: 8px; } -nav, -nav.top, -.button, -.centerdiv, -.heading { - scrollbar-width: none; - -ms-overflow-style: none; +.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; } -p img, -body > img { - max-width: 100%; -} - -.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; +.tabbed-container > .header { + margin-bottom: 0; + margin-top: -8px; + padding-top: 8px; } .heading { @@ -850,19 +744,211 @@ table { height: 75%; } -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; +@media only screen and (orientation: landscape) { + .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; } + + body > .header-title { + top: -8px; + margin-bottom: -8px; + } } -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%; } +@media only screen and (orientation: portrait) { + .heading { + margin: -8px; + margin-top: -16px; + 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) { background: var(--code-bg); @@ -891,66 +977,7 @@ code p { 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 { max-width: 100%; @@ -960,17 +987,6 @@ code p { border: none; } -.love { - display: inline-block; - transform: none; - height: unset; - color: #FF0000; - opacity: 0.1; - text-decoration: none; - z-index: 15; - width: 48px; -} - .link { text-decoration: underline; color: blue;