Apply testing branch

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

View File

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

132
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; }
nav.top {
display: flex;
background-image: var(--navbar-top, url('//assets.worlio.com/style/navbar-top'));
background-position: 0px 100%;
background-color: var(--acc-nav, #f3dca9);
@ -86,26 +87,24 @@ nav.top {
white-space: nowrap;
}
nav.top div.left {
nav.top div.slideout {
position: relative;
width: 132px;
height: 32px;
z-index: 3;
float: left;
margin: 2px 4px;
transition-duration: 0.05s;
flex-shrink: 0;
}
nav.top div.left:not(.active) {
nav.top div.slideout:not(.active) {
cursor: pointer;
}
nav.top div.left.active {
nav.top div.slideout.active {
width: 264px;
}
nav.top div.left .upbutton {
nav.top div.slideout .upbutton {
width: 32px;
height: 16px;
margin: 0 auto;
@ -116,14 +115,16 @@ nav.top div.left .upbutton {
transition-duration: 0.05s;
}
nav.top div.left.active .upbutton {
nav.top div.slideout.active .upbutton {
display: block;
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);
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%;
@ -137,25 +138,23 @@ nav.top div.left .dropdown {
height: 32px;
position: relative;
z-index: 2;
margin: -2px -4px;
padding: 1px 4px;
white-space: nowrap;
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);
}
nav.top div.left.active .dropdown {
height: 412px;
}
nav.top div.slideout.account.active .dropdown { height: 112px; }
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;
display: none;
opacity: 0;
@ -163,13 +162,15 @@ nav.top div.left .dropdown .right {
transition-duration: 1s;
}
nav.top div.left.active .dropdown .right {
nav.top div.slideout.active .dropdown .right {
pointer-events: unset;
display: block;
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);
background: #2221;
margin: 2px;
@ -181,7 +182,8 @@ nav.top div.left .dropdown .alerts {
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;
font-family: var(--spfont1);
background-color: var(--menu-bg);
@ -189,87 +191,85 @@ nav.top div.left .dropdown .alerts .alert {
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;
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;
}
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;
color: var(--subtitle);
font-size: 12px;
}
nav.top div.left .dropdown .flag img {
float: right;
width: 16px;
nav.top div.slideout.account { width: 132px; }
nav.top div.slideout.account.active { width: 264px; }
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 {
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 {
nav.top div.slideout.account .username {
display: block;
width: 132px;
height: 38px;
margin: -1px;
}
nav.top div.left .dropdown .username .counters {
nav.top div.slideout .dropdown .username .counters {
display: flex;
}
nav.top div.left .dropdown .username .counter {
nav.top div.slideout .dropdown .username .counter {
flex-grow: 1;
height: 16px;
}
nav.top div.left .dropdown .username .counter a {
nav.top div.slideout .dropdown .username .counter a {
color: var(--inactive, #6e6e6e);
vertical-align: top;
font-size: 14px;
}
nav.top div.left .dropdown .username .counter img {
nav.top div.slideout .dropdown .username .counter img {
height: 100%;
margin: 0px 1px;
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);
}
nav.top div.left .dropdown .username .counter.currency a {
nav.top div.slideout .dropdown .username .counter.currency a {
color: var(--currency, #89541A);
}
nav.top div.left .dropdown .username .userlink {
nav.top div.slideout .dropdown .username .userlink {
margin: 0px;
}
nav.top div.left .username .arrow {
nav.top div.slideout .username .arrow {
position: relative;
opacity: 0.3;
float: right;
@ -278,11 +278,11 @@ nav.top div.left .username .arrow {
height: 16px !important;
}
nav.top div.left .username .user-icon {
nav.top div.slideout .username .user-icon {
vertical-align: top;
}
nav.acc > div:nth-of-type(2) {
/*nav.acc > div:nth-of-type(2) {
display: block;
overflow-y: visible;
overflow-x: auto;
@ -290,11 +290,11 @@ nav.acc > div:nth-of-type(2) {
scrollbar-width: none;
-ms-overflow-style: none;
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 .left.active .dropdown .currency a[type="extended"] { display: unset; }
nav.acc .slideout.active .dropdown .currency a[type="extended"] { display: unset; }
nav.top p {
margin: 0px;
@ -368,17 +368,17 @@ nav .logo {
filter: brightness(50%) saturate(0%);
}
.button a {
.button > a {
display: block;
width: 144px;
height: 48px;
margin: -2px;
}
.button > a > img:nth-of-type(1) {
display: inline;
width: 48px;
height: 48px;
margin: -2px;
margin-right: 2px;
flex-shrink: 0;
}
@ -859,7 +859,7 @@ hr.arrow {
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.up { background-position: 0 100%; }
hr.arrow.down { background-position: 100% 100%; }
@ -2266,4 +2266,4 @@ div.user-input-box {
div.user-input-box .userlink > * {
pointer-events: none;
}
}