Compare commits

..

2 Commits

Author SHA1 Message Date
e9b9bd4e97 Started organizing stylesheets. Fixed path for import. 2023-06-06 14:15:34 -05:00
7b1ebc06ef Add missing plan icons 2023-06-06 14:14:23 -05:00
5 changed files with 427 additions and 440 deletions

BIN
icons/plan-icons/basic.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 597 B

BIN
icons/plan-icons/bronze.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

BIN
icons/plan-icons/gold.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
icons/plan-icons/silver.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

857
style.css
View File

@ -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;
}
@media only screen and (orientation: landscape) {
nav {
background-color: var(--main-nav);
position: fixed;
top: 0px;
left: 0px;
z-index: 10;
font-size: 14px;
width: 60px;
padding: 0px 2px;
background-image: var(--navbar-left);
background-repeat: repeat-y;
background-size: 100%;
height: 100%;
}
body > div.navgap {
height: 34px;
nav hr {
width: 100%;
border: 1px solid black;
}
nav .logo {
width: 48px;
height: 48px;
padding: 0px;
margin: 2px;
display: block;
}
.button, nav {
font-family: var(--primary-font);
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;
}
}
@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; }
}
/* == 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;
/* == HEADING/HEADER */
.header {
display: flex;
margin-bottom: 8px;
}
.forum .thread .threadsub {
flex-direction: column;
.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;
}
.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);
}
nav,
nav.top,
.button,
.centerdiv,
.heading {
scrollbar-width: none;
-ms-overflow-style: none;
}
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;
}
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%; }
.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) {
.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;
@ -981,35 +997,6 @@ code p {
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 {
border-bottom: 1px dashed var(--border-line);
}