From 7b1ebc06ef46d5dd3ceae24a7f7ff41925c3cf9d Mon Sep 17 00:00:00 2001 From: Wirlaburla Date: Tue, 6 Jun 2023 14:14:23 -0500 Subject: [PATCH] Add missing plan icons --- icons/plan-icons/basic.png | Bin 0 -> 597 bytes icons/plan-icons/bronze.png | Bin 0 -> 4903 bytes icons/plan-icons/gold.png | Bin 0 -> 4997 bytes icons/plan-icons/silver.png | Bin 0 -> 4975 bytes style.css | 838 ++++++++++++++++++------------------ 5 files changed, 427 insertions(+), 411 deletions(-) create mode 100755 icons/plan-icons/basic.png create mode 100755 icons/plan-icons/bronze.png create mode 100755 icons/plan-icons/gold.png create mode 100755 icons/plan-icons/silver.png diff --git a/icons/plan-icons/basic.png b/icons/plan-icons/basic.png new file mode 100755 index 0000000000000000000000000000000000000000..bb371cc37e53c6af7f95a4c77afd49a77a24c160 GIT binary patch literal 597 zcmV-b0;>IqP)EX>4Tx04R}tkv&MmKpe$iQ>CI62MdZgWT;LSL`B6(t5Adrp;ls)aN8A4$tv*4+kRU=q1x1u#AwsK0iirg6M?L%lj$a~|Larhh zITlcc3fb|4|H1EW&D{8yn-q)!?Ju_dF$4s5fqK=pzmILZeggQPfh(=)FV}$SPtvPR zEqny@Yy%h9O-eSad^gZEa<4bO1wgWnpw> zWFU8GbZ8()Nlj2!fese{001pXL_t&-(_>&D5g0=;cFF($|4Sh$#3_kv8UquI$H>U| jj2QbFa9Kf=Be4Piku(VyT_Up^00000NkvXXu0mjfbVltQ literal 0 HcmV?d00001 diff --git a/icons/plan-icons/bronze.png b/icons/plan-icons/bronze.png new file mode 100755 index 0000000000000000000000000000000000000000..c1eb10cdd3bccb920184e7728468e8a3d200f96b GIT binary patch literal 4903 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 Li5Az+Tax!*wg+zY literal 0 HcmV?d00001 diff --git a/icons/plan-icons/silver.png b/icons/plan-icons/silver.png new file mode 100755 index 0000000000000000000000000000000000000000..5506c39731174e35c6fad97a00ec575fde91422f GIT binary patch literal 4975 zcmeHLc~lcu7oSKqfVi}ZA|FZ&2TP$zCi^0hU5F4w5(Fw0Co>Zg$YwH-u-Jm49~4(a zzlzpMS){IrQ2449JSr}@SE@w>iV7|@Y8N~$qTfqE#nb-dIbZ)X=S*hizI%W7-ru|L z=DifgM2C-ac6Wv#Xq+S>G#1<)ZPz;v;F~wIyb*#N&S%LJh*-o-F&OnqwFajUnFgGK zThvMjva~;lU$nWy*X3!7YvQP4sPOh9xDO+n|7d8g%ib=zP|;*mv~2#cHMZ=%#*@>Z z4|-V1<7YkmxFGd|owt_ed$6YZ^j;|6=l4g=zP_c|bN4^6W;Mf3726uNGz{iW7d;p_ zJb1VF)6wnDuByk+c9dxM?|+a^#gZ>gO=YGq`6deqd7N*^L$5SkiaZ zE6S%HU9;!@ww@0UlQ-o;6`Ak*KJ)EuZSP3??eybQb^gVxQBl*92gUk<-l|LQ_um*Z zHEnahL#A~1{Qo??82xz4o&Lam{!dv4>-~Q9%P#XfQFOku&+SG_DMz^=IGA>M`xUKk zC`aDb``3?&?+IFxB11d( zeMFjiq0MRX_Q2gJE7eRHKQv2`zDy?mfK z`(FFrzQyB37w3fwdNzy~|9mQZnyP-L*J{D#7{2D#0{RcUy$@TaCX}CZXH->{FWz%> zSJv1d)9k{HY`7&auyHvTUe&UFTW0x03yUv2_QY{Fl@-_`iQakI&CP|p)Pq>su*Fo} zBeR%Ni}=rEy&VbT#vG4tO?TgI5*&%$nA~<}g}bUPE=wcsKSIC0vu(y#E7q>- zHxKkJCO@eRuB)kkvgO9YF(%Z&P+8M&9z`G_^j<^RP}+&2j_MNvj9k zOS`P$UYks-e!7|&F#rDc0|C)))(eJ?%Iua;1{oKVCp$JpJz`W1cy?r5T`=i@a4rOq zR;oinVk99UFIF~K&)b%55Jwyf^f-|$tMqjx&n_sys(Y3M$&WAC9h2`|wouh}^w#AG zWs;EMo*tjZDIQM~_J|q<_wRN4IxhF5=ycJa(PMj_7Y7%)O;|hd*xGs1I-PQ5Uev+% z7D(D~PEMsOYyA{=T#@{Xg+Z%NonhmsCK(dDx4g^#qSR~c#G;i`7Jl@(t8|T} zSgXG6uUpeROD%UjWnUz4B(@K+(+{7gE{BI~J#Jdx)O=`b+3& zO7}edpRL>_e{TFORaP{EB);B!B3&ly&uyK)yak zEzF|MU{U8dQ~ZsXQWP6HcNhY^iK!}rFo+lov)N2Hv*~(c3WF&W3K=kq!D7*X2F;YI zBM=KsXY#T^3}J-gCe)}l5Nf@SV#7of`gB4}rGjzFi}IvC2pHMkb2 znt)g4Yc9hj(wLVPHVRVIT7%sRko}q_p;o>k>$TWyBldJg1_I1q;=ZQ+B6qto(2`0; zp?Wmk7M>(jOttwJVR}@JiR_PDC6mYJ3ivbx6)0&On9ZjNSPB7+&*O42l&26PY~=_j ziOxhIIuy4-0dTq+;P8c91cOl)jmg6lG!CE3rXes}KtnK$%Ty>aSgAlqK+HF)K~*A} zkx|*8FaQNB*-AE(kI@t;8>MlCOa)EIVKZqgB@2hyN{&#V)K`&ZsQ4NF=UvAp8!_-k z%5SUd|3;Vds{;?N1G^wIIL^4%#T&sM5J?dk9tstVo*n^SoD30(CJ3T?*)Ec$G9Uv8$%I52M!xMrcA80=#lHVN z5KSY(5{MAJ*0!~V>^nXjqnOo%ielUG#pjKm3Y5Ggp+R!TtLPHQVb*9$S&t*u=r$IH kg$_<*kdPg21fjT4!iw@lvykz(82|tP literal 0 HcmV?d00001 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;