Worlio/worlio-themes
4
0
Fork 0
Code Issues Pull Requests Wiki Activity

Apply testing branch

Browse Source
This commit is contained in:
Wirlaburla 2023-04-23 21:26:03 -05:00
parent 4e6868e381
commit f59af072d9
2 changed files with 70 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
css/theme.css
View File

@ -1,17 +1,3 @@
/*
* | | |
* | | | {}
* | | ___ .__ | ___
* | /\ | / \ | \ | || / \
* | / \ | || || | | || || ||
* |/ \| \___/ | | || \___/
* DEFAULT THEME v1.2.1
* 04/28/2022
*
* Created Internally at Worlio by:
* - Nicholas "Wirlaburla" G.
*/
:root { :root {
--main-background: #d3d3d3; --main-background: #d3d3d3;
--main-text: #000000; --main-text: #000000;
@ -25,8 +11,8 @@
--context-menu-border: 1px outset #a4a4a4; --context-menu-border: 1px outset #a4a4a4;
--context-menu-hover: #bfbfbf; --context-menu-hover: #bfbfbf;
--menu-border: 1px outset #bdbdbd; --menu-border: 1px outset #c8b793;
--menu-bg: #d0d0d0; --menu-bg: #dbd1bb;
--header-bg: #ffffff; --header-bg: #ffffff;
--header-text: #000000; --header-text: #000000;
@ -46,8 +32,8 @@
--staff: #d500d1; --staff: #d500d1;
--tab-inactive: #bdbdbd; --tab-inactive: #aeafb9;
--tab-selected: #d3d3d3; --tab-selected: #bfcfdd;
--tab-gradient: #dedede; --tab-gradient: #dedede;
--popup-title-bg: #b3b3b3; --popup-title-bg: #b3b3b3;

130
style.css
View File

@ -74,6 +74,7 @@ body.home .home-container .blog-contents .blog-item {
body.home .home-container .blog-contents .blog-item i { text-align: right; } body.home .home-container .blog-contents .blog-item i { text-align: right; }
nav.top { nav.top {
display: flex;
background-image: var(--navbar-top, url('//assets.worlio.com/style/navbar-top')); background-image: var(--navbar-top, url('//assets.worlio.com/style/navbar-top'));
background-position: 0px 100%; background-position: 0px 100%;
background-color: var(--acc-nav, #f3dca9); background-color: var(--acc-nav, #f3dca9);
@ -86,26 +87,24 @@ nav.top {
white-space: nowrap; white-space: nowrap;
} }
nav.top div.slideout {
nav.top div.left {
position: relative; position: relative;
width: 132px;
height: 32px; height: 32px;
z-index: 3; z-index: 3;
float: left;
margin: 2px 4px; margin: 2px 4px;
transition-duration: 0.05s; transition-duration: 0.05s;
flex-shrink: 0;
} }
nav.top div.left:not(.active) { nav.top div.slideout:not(.active) {
cursor: pointer; cursor: pointer;
} }
nav.top div.left.active { nav.top div.slideout.active {
width: 264px; width: 264px;
} }
nav.top div.left .upbutton { nav.top div.slideout .upbutton {
width: 32px; width: 32px;
height: 16px; height: 16px;
margin: 0 auto; margin: 0 auto;
@ -116,14 +115,16 @@ nav.top div.left .upbutton {
transition-duration: 0.05s; transition-duration: 0.05s;
} }
nav.top div.left.active .upbutton { nav.top div.slideout.active .upbutton {
display: block; display: block;
opacity: 1; opacity: 1;
} }
nav.top div.left .upbutton img { margin: 4px 8px; } nav.top div.slideout .upbutton img { margin: 4px 8px; }
nav.top div.left .dropdown { nav.top div.slideout.account .dropdown { margin: -2px -4px; }
nav.top div.slideout .dropdown {
font-family: var(--spfont1, Pixio); font-family: var(--spfont1, Pixio);
background: var(--navbar-bg), linear-gradient(0deg, rgba(162,147,112,1) 0%, rgba(243,220,169,1) 8px); background: var(--navbar-bg), linear-gradient(0deg, rgba(162,147,112,1) 0%, rgba(243,220,169,1) 8px);
background-position: 0 0, 0px 100%; background-position: 0 0, 0px 100%;
@ -137,25 +138,23 @@ nav.top div.left .dropdown {
height: 32px; height: 32px;
position: relative; position: relative;
z-index: 2; z-index: 2;
margin: -2px -4px;
padding: 1px 4px; padding: 1px 4px;
white-space: nowrap; white-space: nowrap;
transition-duration: 0.05s; transition-duration: 0.05s;
} }
nav.top div.left:not(.active):hover .dropdown { nav.top div.slideout:not(.active):hover .dropdown {
background: var(--navbar-bg), linear-gradient(0deg, rgba(243,220,169,1) 0%, rgba(210,190,143,1) 8px); background: var(--navbar-bg), linear-gradient(0deg, rgba(243,220,169,1) 0%, rgba(210,190,143,1) 8px);
} }
nav.top div.left.active .dropdown { nav.top div.slideout.account.active .dropdown { height: 112px; }
height: 412px; nav.top.guest div.slideout.account.active .dropdown { height: 112px; }
} nav.top div.slideout.mail.active .dropdown,
nav.top div.slideout.alerts.active .dropdown { height: 352px; }
nav.top.guest div.left.active .dropdown {
height: 112px;
}
nav.top div.left .dropdown .right {
nav.top div.slideout .dropdown .right {
pointer-events: none; pointer-events: none;
display: none; display: none;
opacity: 0; opacity: 0;
@ -163,13 +162,15 @@ nav.top div.left .dropdown .right {
transition-duration: 1s; transition-duration: 1s;
} }
nav.top div.left.active .dropdown .right { nav.top div.slideout.active .dropdown .right {
pointer-events: unset; pointer-events: unset;
display: block; display: block;
opacity: 1; opacity: 1;
} }
nav.top div.left .dropdown .alerts { nav.top div.slideout.alerts .dropdown .alerts,
nav.top div.slideout.mail .dropdown .mail {
text-align: left;
border: 2px inset var(--acc-nav); border: 2px inset var(--acc-nav);
background: #2221; background: #2221;
margin: 2px; margin: 2px;
@ -181,7 +182,8 @@ nav.top div.left .dropdown .alerts {
white-space: pre-wrap; white-space: pre-wrap;
} }
nav.top div.left .dropdown .alerts .alert { nav.top div.slideout.alerts .dropdown .alerts .alert,
nav.top div.slideout.mail .dropdown .mail .message {
margin: 4px; margin: 4px;
font-family: var(--spfont1); font-family: var(--spfont1);
background-color: var(--menu-bg); background-color: var(--menu-bg);
@ -189,87 +191,85 @@ nav.top div.left .dropdown .alerts .alert {
padding: 4px; padding: 4px;
} }
nav.top div.left .dropdown .alerts .alert.unread { nav.top div.slideout.alerts .dropdown .alerts .alert.unread,
nav.top div.slideout.mail .dropdown .mail .message.unread {
background-color: #d0dadf; background-color: #d0dadf;
outline: 1px solid #0088ff; outline: 1px solid #0088ff;
} }
nav.top div.left .dropdown .alerts .alert a { nav.top div.slideout.alerts .dropdown .alerts .alert a,
nav.top div.slideout.mail .dropdown .mail .message a {
text-decoration: underline; text-decoration: underline;
} }
nav.top div.left .dropdown .alerts .alert .info { nav.top div.slideout.alerts .dropdown .alerts .alert .info,
nav.top div.slideout.mail .dropdown .mail .message .info {
display: flex; display: flex;
color: var(--subtitle); color: var(--subtitle);
font-size: 12px; font-size: 12px;
} }
nav.top div.left .dropdown .flag img { nav.top div.slideout.account { width: 132px; }
float: right; nav.top div.slideout.account.active { width: 264px; }
width: 16px; nav.top div.slideout.mail,nav.top div.slideout.alerts {
display: block;
width: 32px;
margin: 0px 2px;
text-align: center;
}
nav.top div.slideout.active.mail,nav.top div.slideout.active.alerts { width: 262px; }
nav.top div.slideout.mail .dropdown,nav.top div.slideout.alerts .dropdown {
padding: 1px;
}
nav.top div.slideout.mail .counter,nav.top div.slideout.alerts .counter {
margin-top: -8px;
display: block;
}
nav.top div.slideout.mail .counter.new,nav.top div.slideout.alerts .counter.new {
color: var(--alert);
} }
nav.top div.left .dropdown .flag a { nav.top div.slideout.account .username {
opacity: 0;
transition-duration: 0.1s;
height: 16px;
}
nav.top div.left.active .dropdown .flag a {
opacity: 1;
display: inline;
}
nav.top div.left .dropdown .flag[role="0"] a { color: var(--rankflag0); }
nav.top div.left .dropdown .flag[role="5"] a { color: var(--rankflag1); }
nav.top div.left .dropdown .flag[role="10"] a { color: var(--rankflag2); }
nav.top div.left .dropdown .flag[role="15"] a { color: var(--rankflag3); }
nav.top div.left .dropdown .flag[role="30"] a { color: var(--rankflag4); }
nav.top div.left .dropdown .flag[role="40"] a { color: var(--rankflag5); }
nav.top div.left .dropdown .flag[role="50"] a { color: var(--rankflag6); }
nav.top div.left .dropdown .flag[role="100"] a { color: var(--rankflag7); }
nav.top div.left .username {
display: block; display: block;
width: 132px; width: 132px;
height: 38px; height: 38px;
margin: -1px; margin: -1px;
} }
nav.top div.left .dropdown .username .counters { nav.top div.slideout .dropdown .username .counters {
display: flex; display: flex;
} }
nav.top div.left .dropdown .username .counter { nav.top div.slideout .dropdown .username .counter {
flex-grow: 1; flex-grow: 1;
height: 16px; height: 16px;
} }
nav.top div.left .dropdown .username .counter a { nav.top div.slideout .dropdown .username .counter a {
color: var(--inactive, #6e6e6e); color: var(--inactive, #6e6e6e);
vertical-align: top; vertical-align: top;
font-size: 14px; font-size: 14px;
} }
nav.top div.left .dropdown .username .counter img { nav.top div.slideout .dropdown .username .counter img {
height: 100%; height: 100%;
margin: 0px 1px; margin: 0px 1px;
padding: 0px 2px; padding: 0px 2px;
} }
nav.top div.left .dropdown .username .counter.alert a { nav.top div.slideout .dropdown .username .counter.alert a {
color: var(--alert, #ce0000); color: var(--alert, #ce0000);
} }
nav.top div.left .dropdown .username .counter.currency a { nav.top div.slideout .dropdown .username .counter.currency a {
color: var(--currency, #89541A); color: var(--currency, #89541A);
} }
nav.top div.left .dropdown .username .userlink { nav.top div.slideout .dropdown .username .userlink {
margin: 0px; margin: 0px;
} }
nav.top div.left .username .arrow { nav.top div.slideout .username .arrow {
position: relative; position: relative;
opacity: 0.3; opacity: 0.3;
float: right; float: right;
@ -278,11 +278,11 @@ nav.top div.left .username .arrow {
height: 16px !important; height: 16px !important;
} }
nav.top div.left .username .user-icon { nav.top div.slideout .username .user-icon {
vertical-align: top; vertical-align: top;
} }
nav.acc > div:nth-of-type(2) { /*nav.acc > div:nth-of-type(2) {
display: block; display: block;
overflow-y: visible; overflow-y: visible;
overflow-x: auto; overflow-x: auto;
@ -290,11 +290,11 @@ nav.acc > div:nth-of-type(2) {
scrollbar-width: none; scrollbar-width: none;
-ms-overflow-style: none; -ms-overflow-style: none;
margin: 0px 4px; margin: 0px 4px;
} }*/
nav.acc .left.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 .left.active .dropdown .currency a[type="extended"] { display: unset; } nav.acc .slideout.active .dropdown .currency a[type="extended"] { display: unset; }
nav.top p { nav.top p {
margin: 0px; margin: 0px;
@ -368,17 +368,17 @@ nav .logo {
filter: brightness(50%) saturate(0%); filter: brightness(50%) saturate(0%);
} }
.button a { .button > a {
display: block; display: block;
width: 144px; width: 144px;
height: 48px; height: 48px;
margin: -2px;
} }
.button > a > img:nth-of-type(1) { .button > a > img:nth-of-type(1) {
display: inline; display: inline;
width: 48px; width: 48px;
height: 48px; height: 48px;
margin: -2px;
margin-right: 2px; margin-right: 2px;
flex-shrink: 0; flex-shrink: 0;
} }
@ -859,7 +859,7 @@ hr.arrow {
margin: 22px 2px 2px 2px; margin: 22px 2px 2px 2px;
} }
hr.arrow.left { background-position: 0 0; } hr.arrow.slideout { background-position: 0 0; }
hr.arrow.right { background-position: 100% 0; } hr.arrow.right { background-position: 100% 0; }
hr.arrow.up { background-position: 0 100%; } hr.arrow.up { background-position: 0 100%; }
hr.arrow.down { background-position: 100% 100%; } hr.arrow.down { background-position: 100% 100%; }