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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 KWwi^I<^Bb>2X6HM 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 zcmeHKX;2i`7QRT7MO+d^k%ux4g&~lh>Dib?hJ71h5Sc+B60xVdhiRZ^#+im0786kP zL2!wPzKF(1SR}595O~oDmWm7Rk!TQspn^*rH49dP=&K%4vFcT-{E>g2s;=t3=bZ1H z^PO{V-7b!eiJ0K%>IeXsAd3u*0|405&pWmN0N>e_%>dY*%TXp$afpebH|W$v2F{?e z^*94J6KVj=o%a(KZR+xNdXnm#G^P|3-+BlSV0NZIn_3%kx5>^|wHQ=wn?7uht9Y;Z z#LQ>IZWgu^!hc9m+#^#b zUc(;qiVU9>^Lt&d?y7ORe$_5aI`odjb->wc+t}}&nufOc*iLZ|?puoQpHh8hLsc)9 z{C(|;%IQbe?7p|P@54iO8}mU`_WRyXz5ClcyV8F@_2^`SU+HR8(z4`!scxvh=HmN< z*T+py-!y2OE#Ec&KTj^iJeqcUFmSKm6YhaVpWl3PD}0WZoa-KNx!zXJS1$+-hAwTp zOnOJHNcl28S?B5W$Ek|+38&p=9L;+)LE5qG=)7GQc${YUskMrVpcAEQTp8p16K8MU z5;8ZsvY_e=d5MioblqKAT~eWN&52xcYy9{<4cXP{*x|W74tt~ReYf1Zc2s&-)Rr6- z+P(K9o9X8}9Hwpyd^S~Y>%q@jaKrl{c}O~E-g*J|y33|?MdTQ9;>?q4Ol6yVBK*%@ zjrSB4mxdmZZyHk{Ty)!g!m3%`3sgm%n%ax1wVtwaAGW95n9K5Z<)_8P8_OHNNUYPG zx_qX7}VS6=kR6(`xtE?CeO(YUDS}9}j(dxgn{24`sQu zzcu%6=bnMZ6D1esMTq*=Pn7<0GGd0Nakj^5(WO{n#?1w+AAR>cXq%o`dDfL(Q&YKk z_mQ1BMW`2abkGz$=UbwM2&+R+oop)PAhvPP+blhIys_BT&$&d~nW?kFSG3)CU zYu62$h6WbfJ+2OJsB3(@`TD|f#|3*-JsI;JJMk6YrEX7(y6M4hX@6SaW|^UxH#f&0cJgdrsEVtg{Kl)Df7X>7AAwhq|5|?9G2@ta19ZeW55+T zF-kNi9Tj8D0Dnh6v&2m5Nt{9$W->!-l$fPVE3QOql+ep;Cc|n%rAwKK@>oWQ&VV!c zEItc{!puY#m+9}w@H1d)NnB|72!sJsOPLyq(o5KElgY#~@mM-TDw`t~i`g)j&E-M{ zObr>cwG?88v_=ma;yFerZbS`)o+5Nw291fRbeWWt$#i5e7%%c8^>X=3c&%}S1yo0} z&4`}OVZm&YWRLbRQej!t-+LI9*?OEEhZ}X71{4p=!nKsgXb22_>95Z;WLV3=P&S@{ zlem^LvN?l?W303IrJHs}dtT z^(ZKr)<_{*6sMugq@G0(m_#TRAQ+5tA&xJmg7`uK4?gf`RsN}(i3TtOi;n;c)BNaQOP zh&V9cmjjRTUWglvgicFia$pu$WOb+8LKlN;DTJO=DU)MeH@D?!lbL5xTij#&e}RG}I~ zn~Gyn=E#J+a3TIrvv{zG&-JC7h42IrA4S9v!WUu?%HeW_2#Wa%aPjNtMxB~6AqG4s z71vTyW&}a%t<^BRtW%dk4#eR?uuuu}Bs`u3=0LEo1csUHk%HOuu6|Lm zAH5so^3j|;HyCvc(5H*lDK0eJ-_ei#^0*q|>>rkqUi`E2Hpm;vTe{vz-qQ6(@|LbQ zlDBldk-VkrjpXm>a(wl}gKIG<)5Hw$cWy{9001V%Mk~Vr0MhWN^z8iFy8537Zc8Dr zE&zZH6&Irbf&Ew2^oJ@cA`}#jof!!LaL`9483AB<(2tF|Iv@)GU`NU1VRpBi>>Os> z%;DYp0RS+A3QMFybR>PX2G$!NjxkIGrLkT@6AC6y2LO1;LW7j{SI{NEcFtHvMV~#^ o>@psP#kLOPkdW;zl_1mxctJLn`s$nm^v|0tEGBes@RH^K16kH+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;