Apply testing branch
This commit is contained in:
parent
4e6868e381
commit
f59af072d9
|
|
@ -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;
|
||||
|
|
|
|||
130
style.css
130
style.css
|
|
@ -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%; }
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user