Update button handling

This commit is contained in:
Wirlaburla 2023-04-21 19:39:19 -05:00
parent 6dcbc67ac6
commit 7ef492df12
2 changed files with 1350 additions and 939 deletions

View File

@ -109,11 +109,20 @@
--direct: #ffffff;
--background-image: url('//assets.worlio.com/style/background');
/* DEPRECATED
--button-large: url('//assets.worlio.com/style/button-large');
--button-wide: url('//assets.worlio.com/style/button-wide');
--button-long: url('//assets.worlio.com/style/button-long');
--button-med: url('//assets.worlio.com/style/button-med');
--button-small: url('//assets.worlio.com/style/button-small');
*/
--default-button-background: #d4d4d4;
--default-button-border: 2px outset #dfdfdf;
--hover-button-background: #99d4ab;
--hover-button-border: 2px outset #b6e0c3;
--active-button-background: #9e9e9e;
--active-button-border: 2px inset #bfbfbf;
--navbar-left: url('//assets.worlio.com/style/navbar-left');
--navbar-right: url('//assets.worlio.com/style/navbar-right');

602
style.css
View File

@ -94,19 +94,47 @@ nav.top div.left {
z-index: 3;
float: left;
margin: 2px 4px;
transition-duration: 0.05s;
}
nav.top div.left:not(.active) {
cursor: pointer;
}
nav.top div.left.active {
width: 264px;
}
nav.top div.left .upbutton {
width: 32px;
height: 16px;
margin: 0 auto;
background: var(--navbar-bg), rgb(196, 187, 166);
border: 1px outset black;
display: none;
opacity: 0;
transition-duration: 0.05s;
}
nav.top div.left.active .upbutton {
display: block;
opacity: 1;
}
nav.top div.left .upbutton img { margin: 4px 8px; }
nav.top div.left .dropdown {
font-family: var(--spfont1, Pixio);
background-image: var(--navbar-bg, url('//assets.worlio.com/style/navbar-bg')), var(--navbar-gradient);
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-color: var(--acc-nav, #f3dca9);
background-repeat: repeat, repeat-x;
background-size: auto auto, auto 64px;
border-right: var(--acc-nav-separator, 2px solid #000000);
border-bottom: var(--acc-nav-separator, 2px solid #000000);
overflow: hidden;
width: 132px;
height: 34px;
width: 100%;
height: 32px;
position: relative;
z-index: 2;
margin: -2px -4px;
@ -115,14 +143,65 @@ nav.top div.left .dropdown {
transition-duration: 0.05s;
}
nav.top div.left:hover .dropdown {
width: 264px;
nav.top div.left: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 .dropdown .flag {
nav.top div.left.active .dropdown {
height: 412px;
}
nav.top.guest div.left.active .dropdown {
height: 112px;
}
nav.top div.left .dropdown .right {
pointer-events: none;
display: none;
opacity: 0;
float: right;
height: 16px;
margin: -2px -4px;
transition-duration: 1s;
}
nav.top div.left.active .dropdown .right {
pointer-events: unset;
display: block;
opacity: 1;
}
nav.top div.left .dropdown .alerts {
border: 2px inset var(--acc-nav);
background: #2221;
margin: 2px;
height: 300px;
overflow-y: auto;
overflow-x: hidden;
width: 256px;
white-space: break-spaces;
white-space: pre-wrap;
}
nav.top div.left .dropdown .alerts .alert {
margin: 4px;
font-family: var(--spfont1);
background-color: var(--menu-bg);
border: var(--menu-border);
padding: 4px;
}
nav.top div.left .dropdown .alerts .alert.unread {
background-color: #d0dadf;
outline: 1px solid #0088ff;
}
nav.top div.left .dropdown .alerts .alert a {
text-decoration: underline;
}
nav.top div.left .dropdown .alerts .alert .info {
display: flex;
color: var(--subtitle);
font-size: 12px;
}
nav.top div.left .dropdown .flag img {
@ -136,7 +215,7 @@ nav.top div.left .dropdown .flag a {
height: 16px;
}
nav.top div.left:hover .dropdown .flag a {
nav.top div.left.active .dropdown .flag a {
opacity: 1;
display: inline;
}
@ -151,6 +230,8 @@ 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;
width: 132px;
height: 38px;
margin: -1px;
}
@ -211,9 +292,9 @@ nav.acc > div:nth-of-type(2) {
margin: 0px 4px;
}
nav.acc .dropdown:hover .currency a[type="short"] { display: none; }
nav.acc .left.active .dropdown .currency a[type="short"] { display: none; }
nav.acc .dropdown .currency a[type="extended"] { display: none; }
nav.acc .dropdown:hover .currency a[type="extended"] { display: unset; }
nav.acc .left.active .dropdown .currency a[type="extended"] { display: unset; }
nav.top p {
margin: 0px;
@ -271,11 +352,10 @@ nav .logo {
}
.button {
background-size: auto 300% !important;
background-image: var(--button-large, url('//assets.worlio.com/style/button-large'));
border: none;
width: 48px;
height: 48px;
background: var(--default-button-background);
border: var(--default-button-border);
width: 44px;
height: 44px;
font-size: 14px;
flex-shrink: 0;
}
@ -298,12 +378,13 @@ nav .logo {
display: inline;
width: 48px;
height: 48px;
margin: -2px;
margin-right: 2px;
flex-shrink: 0;
}
.popbutton {
background-image: var(--button-large, url('//assets.worlio.com/style/button-large'));
width: 48px;
width: 44px;
text-overflow: clip;
overflow: hidden;
}
@ -311,18 +392,16 @@ nav .logo {
.longbutton, .smallbutton {
display: inline-block !important;
padding: 2px;
height: 24px;
height: 20px;
}
.longbutton {
background-image: var(--button-long, url('//assets.worlio.com/style/button-long'));
width: 120px;
width: 116px;
margin: 2px 4px !important;
}
.smallbutton {
background-image: var(--button-small, url('//assets.worlio.com/style/button-small'));
width: 24px;
width: 20px;
margin: 2px !important;
}
@ -377,14 +456,28 @@ body {
bottom: 0px;
}
body > .header-title {
.header {
display: flex;
margin-bottom: 8px;
}
.header > .gap { flex-grow: 1;}
.header > .title {
border: var(--menu-border, 1px solid #bdbdbd);
border-top: none;
display: inline-block;
flex-shrink: 0; flex-grow: 0;
background-color: var(--menu-bg, #d0d0d0);
position: relative;
padding: 8px;
font-family: var(--spfont1, Pixio);
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) {
@ -463,11 +556,11 @@ body > .header-title {
}
.popbutton {
font-size: 1.5em;
font-size: 16px;
}
.popbutton:hover {
width: 144px;
width: 140px;
}
.popbutton > a {
@ -493,11 +586,17 @@ body > .header-title {
margin-bottom: -8px;
}
.forum .thread .post, .forum .thread .reply, .forum .errors {
.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: "";
@ -507,7 +606,7 @@ body > .header-title {
}
body {
top: 68px;
top: 64px;
left: 0px;
}
@ -587,7 +686,7 @@ body > .header-title {
}
.popbutton:hover {
width: 48px;
width: 44px;
}
.popbutton a:nth-of-type(2) {
@ -600,8 +699,7 @@ body > .header-title {
}
.longbutton.collapse {
background-image: var(--button-small, url('//assets.worlio.com/style/button-small'));
width: 24px;
width: 20px;
margin: 2px !important;
font-size: 0px;
}
@ -1140,7 +1238,7 @@ table {
font-family: var(--spfont1, Pixio);
}
.tabbed-container .tablist .tab img,
.tabbed-container .tablist .tab *:not(.userlink) img,
.tabbed-container .tablist .faketab img {
vertical-align: middle;
}
@ -1196,14 +1294,18 @@ table {
align-items: center;
}
.overlay .box {
position: fixed;
.overlay .box,
.overlay .attachment {
background: var(--main-background, #d3d3d3);
border: 2px inset gray;
padding: 8px;
left: 0; right: 0;
margin-left: auto; margin-right: auto;
}
.overlay .box {
position: fixed;
left: 0; right: 0;
}
.overlay .popup {
min-width: 128px;
@ -1211,6 +1313,31 @@ table {
overflow: auto;
}
.overlay .popup.box .embedder .embed-item {
display: inline-block;
padding: 4px;
cursor: pointer;
border: 1px solid transparent;
height: 30px;
font-family: var(--spfont1);
}
.overlay .popup.box .embedder .embed-item img {
padding: 2px;
margin: 2px;
vertical-align: middle;
}
.overlay .popup.box .embedder .embed-item:hover {
border: var(--menu-border, 1px solid #bdbdbd);
background: var(--menu-bg, #d0d0d0);
}
.overlay .popup.box .embedder .embed-item.selected {
border: 1px outset #65aad2;
background: #b6dfe6;
}
.dragbox {
position: absolute;
z-index: 10;
@ -1226,6 +1353,7 @@ table {
}
.overlay .popup .titlebar,
.overlay .attachment .titlebar,
.dragbox .titlebar {
display: flex;
position: sticky;
@ -1239,11 +1367,13 @@ table {
}
.overlay .popup .titlebar .title,
.overlay .attachment .titlebar .title,
.dragbox .titlebar .title {
flex-grow: 1;
}
.overlay .popup .titlebar .closebtn,
.overlay .attachment .titlebar .closebtn,
.dragbox .titlebar .closebtn {
cursor: pointer;
}
@ -1267,17 +1397,22 @@ table {
right: 4px;
}
.overlay .box {
.overlay .box, .overlay .attachment {
max-width: 100%;
}
.overlay .popup {
.overlay .popup, .overlay .attachment {
max-height: 90%;
}
.forum .thread .threadsub {
top: 72px;
top: 100px;
}
.forum .thread .post .authorbar .user-stat {flex-direction: row;}
.forum .thread .post .authorbar .user-stat b {flex-grow: 1;}
.forum .thread .post .authorbar .avatar { width: 64px; height: 64px;}
.forum .thread .post-anchor { top: -10px; }
}
@media only screen and (orientation: landscape) {
@ -1318,16 +1453,27 @@ table {
}
.forum .thread .threadsub {
top: 34px;
top: 35px;
}
.forum .thread .post .authorbar {
width: 150px;
flex-shrink: 0;
text-align: center;
flex-direction: column;
}
.forum .thread .post .authorbar .user-stat {flex-direction: column;}
.forum .thread .post .authorbar .avatar { width: 128px; height: 128px;}
.forum .thread .post-anchor { top: -74px; }
}
.close {
position: absolute;
background-image: url('//assets.worlio.com/style/icons/close');
background-image: url('//assets.worlio.com/style/icons/deny');
background-size: 100%;
width: 32px;
height: 32px;
width: 48px;
height: 48px;
cursor: pointer;
top: 8px;
right: 8px;
@ -1381,7 +1527,9 @@ body.forum table.board.collapsed td { display: none; }
body.forum table.board td:nth-child(4),
body.forum table.board col:nth-child(4) { display: none; }
body.forum_board table.board td:nth-child(4),
body.forum_board table.board col:nth-child(4) { display: none; }
body.forum_board table.board col:nth-child(4),
body.forum_watched table.board td:nth-child(4),
body.forum_watched table.board col:nth-child(4) { display: none; }
table.board td:nth-child(3) { border-right: var(--forum-content-border, 1px solid #a29c8d); }
}
@ -1446,6 +1594,14 @@ table.board .status {
padding: 2px;
}
.forum .thread name .infobox {
flex-grow:1;
}
.forum .thread name .infobox .author {
color: var(--subtitle);
}
.forum .category .board.sub {
margin-left: 16px;
}
@ -1511,7 +1667,7 @@ table.board .status {
color: var(--subtitle, #525252);
}
.forum .thread .post,
.forum .thread .post .post-content,
.forum .thread .reply,
.forum .errors {
background-color: var(--post, #d9d9d9);
@ -1519,11 +1675,18 @@ table.board .status {
padding: 4px;
}
.forum .thread .post .post-sig {
margin: 0px -4px;
margin-top: 8px;
padding: 4px;
max-height: 128px;
overflow-y: hidden;
}
.forum .thread .reply .submit {
display: flex;
}
.forum .thread .post .topbar,
.forum .thread .reply .title,
.forum .errors .title {
display: flex;
@ -1541,24 +1704,37 @@ table.board .status {
flex-grow: 1;
}
.forum .thread .post .topbar {
.forum .thread .post .authorbar {
background-color: var(--post-author, #b4b6b7);
border: var(--post-author-border, 1px solid #84775a);
display: flex;
min-height: 64px;
padding: 2px;
}
.forum .thread .post .topbar .userlink {
flex-grow: 1;
.forum .thread .post .authorbar .author {
display: flex;
flex-grow:1;
flex-direction: column;
}
.forum .thread .post .topbar .idtag {
color: var(--subtitle, #525252);
/*.forum .thread .post .authorbar .userlink { text-align: center: }*/
.forum .thread .post .authorbar .user-stat {
font-family: var(--spfont1);
color: var(--subtitle);
display: flex;
}
.forum .thread .post .authorbar img.avatar {
margin: 10px;
border: var(--menu-border);
}
.forum .thread .reply .title,
.forum .errors .title {
background-color: var(--forum-sub, #d7ccb6);
border: var(--forum-sub-border, 1px solid #99907b)
border: var(--forum-sub-border, 1px solid #99907b);
}
.forum .thread .threadsub {
@ -1570,6 +1746,7 @@ table.board .status {
padding: 2px;
margin: 0px 16px;
font-family: var(--spfont1, Pixio);
z-index: 5;
}
.forum .thread .threadsub .author {
@ -1583,25 +1760,46 @@ table.board .status {
max-width: 100%;
}
.forum .thread .post .bottombar {
border-top: var(--post-border, 1px solid #bfb9a9);
.forum .thread .post .topbar {
/*border: var(--post-border, 1px solid #bfb9a9);*/
border-bottom: none;
background-color: var(--post-bottombar, #d2d2d2);
padding: 4px;
display: flex;
margin: 8px -4px -4px -4px;
font-family: var(--spfont1, Pixio);
margin: -4px; margin-bottom: 4px;
}
.forum .thread .post .bottombar .timestamp {
.forum .thread .post .topbar .timestamp {
color: var(--subtitle, #525252);
flex-grow: 1;
}
.forum .thread .post .bottombar .buttons {
display: flex;
.forum .thread .post .topbar .idtag {
color: var(--subtitle, #525252);
}
.forum .thread .post .bottombar .buttons a {
.forum .thread .post .post-content {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.forum .thread .post-anchor {
pointer-events: none;
position: relatve;
}
.forum .thread .post .post-content .post-body { flex-grow: 1; }
.forum .thread .post .buttonbar {
background-color: var(--post-bottombar, #d2d2d2);
display: flex;
margin: -4px; margin-top: 8px;
font-family: var(--spfont1, Pixio);
}
.forum .thread .post .buttonbar a {
padding: 2px 4px;
}
@ -1660,6 +1858,12 @@ div.page-buttons .button#last-page div a {
font-family: var(--spfont1, Pixio);
}
.posteditor .editbox {
display: flex;
}
.posteditor .editbox textarea#editor { flex-grow: 1; }
canvas#snow {
position: fixed;
top: 0px;
@ -1671,8 +1875,8 @@ canvas#snow {
}
div.emotebox {
width: 100%;
margin: auto;
width: 256px;
overflow-y: auto;
}
div.emotebox .emote-container {
@ -1698,7 +1902,7 @@ div.emotebox .emote-container:hover {
}
.mailcontainer .subject img,
.mailcontainer .sub img {
.mailcontainer .trade-icon {
vertical-align: middle;
}
@ -1821,67 +2025,265 @@ body.forum .sidebar .box .thread .info {font-family: var(--spfont1);}
body.forum .sidebar .box .thread .info .loc {font-size: 12px;}
body.forum .sidebar .box .thread .info .timestamp {color: var(--subtitle);}
.button {
background-position: 0 0;
}
.button:hover, .button.selected {
background-position: 0 100%;
background: var(--hover-button-background);
border: var(--hover-button-border);
}
.button:active {
background-position: 0 200%;
background: var(--active-button-background);
border: var(--active-button-border);
}
.button.disabled, .longbutton.disabled, .smallbutton.disabled {
background: #808080;
}
.popbutton {
background-position: 0 0;
}
.longbutton {
background-position: 0 0;
}
.popbutton,
.longbutton,
.smallbutton {
background-position: 0 0;
}
.longbutton:hover, .smallbutton:hover {
background-position: 0 100%;
}
.longbutton:active, .smallbutton:active {
background-position: 0 200%;
background: var(--default-button-background);
border: var(--default-button-border);
}
.longbutton:hover,
.smallbutton:hover,
.dark-switch:hover {
background-position: 0 100%;
background: var(--hover-button-background);
border: var(--hover-button-border);
}
.longbutton:active,
.smallbutton:active,
.dark-switch:actice {
background-position: 0 200%;
background: var(--active-button-background);
border: var(--active-button-border);
}
/* DASHBOARD / HOME */
@media (orientation: portrait) {
body.dashboard .dash-container {
flex-direction: column-reverse;
}
}
@media (orientation: landscape) {
.popbutton:hover {
background: var(--button-wide) 0 100%;
body.dashboard .dash-container {
flex-direction: row;
}
.popbutton:active, .popbutton.disabled {
background: var(--button-wide) 0 200%;
body.dashboard .sidebar {
width: 400px;
flex-shrink: 0;
}
}
body.dashboard .dash-container {
display: flex;
gap: 8px;
max-width: 1000px;
margin: auto;
}
body.dashboard .dash-container .mainbox {
background: var(--menu-bg);
border: var(--menu-border);
padding: 2px;
}
body.dashboard .profile-tag {
font-family: var(--spfont1);
display: flex;
}
body.dashboard .profile-tag img {
padding: 4px;
}
body.dashboard .sidebar {
display: flex;
flex-direction: column;
gap: 8px;
}
body.dashboard .primary {
flex-grow: 1;
}
body.dashboard .dash-title {
border: var(--menu-border);
border-bottom: none;
background: var(--menu-bg);
display: inline-block;
padding: 8px;
font-weight: bold;
font-family: var(--spfont1);
margin-bottom: -1px;
}
body.dashboard .dash-title.currency-mark { position: relative; float: right; top: 24px; }
body.dashboard .dash-title.rlink { float: right; }
body.dashboard .profile-text {
display: flex;
flex-direction: column;
gap: 2px;
}
body.dashboard .profile-role {
font-size: 0.8em;
}
body.dashboard .dash-container .sidebar .userlink.online a {
color: green;
}
body.dashboard .dash-container .sidebar .userlink.invisible {
opacity: 0.3;
}
body.dashboard .stats {
font-family: var(--spfont1);
font-size: 20px;
}
body.dashboard .stats .currency { color: var(--currency); }
body.dashboard .stats .unread { color: var(--alert); }
.userlink img.plan-icon {
position: relative;
margin: 0px 0px 0px -4px;
top: -2px;
}
.dash-container .primary .mainbox .alert {
padding: 4px;
margin: 4px;
background: var(--quote-bg);
border: var(--quote-border);
}
.dash-container .primary .mainbox .alert.unread .content {
font-weight: bold;
}
.dash-container .primary .mainbox .alert .info {
text-align: right;
color: var(--subtitle);
font-family: var(--spfont1);
}
.dash-container .blogpost {
padding: 4px;
}
.dash-container .blogpost .info {
color: var(--subtitle);
font-family: var(--spfont1);
}
.dash-container .sidebar .container div.filespace meter { flex-grow: 1; margin: 0px 4px;}
.dash-container .sidebar .container div.filespace b { margin-right: 4px;}
.dash-container .sidebar .container div.filespace { display: flex; }
.dash-container .sidebar .container div.filespace a { font-family: var(--spfont1); margin: 0px 2px; }
/* USER PROFILE PAGE */
body.user-profile .user-infobox {
width: 180px;
background: var(--menu-bg);
margin: 2px;
border: var(--menu-border);
}
body.user-profile iframe.box {
padding: 0px;
margin: -34px -8px auto -8px;
height: calc(100% - 36px);
flex-grow: 1;
}
body.user-profile .tabbed-container .tablist {
margin: -7px -4px auto -8px;
white-space: nowrap;
}
@media (orientation: portrait) {
.popbutton:hover {
background-position: 0 100%;
}
.popbutton:active, .popbutton.disabled {
background-position: 0 200%;
}
body.user-profile iframe.box { margin-top: -46px; }
body.user-profile .tabbed-container .tablist { margin: -12px -4px auto -8px; }
}
body.user-profile .tabbed-container .tablist .tab {padding:4px;bottom: 0px;}
body.user-profile .tabbed-container .tablist .tab.selected {bottom: -1px;}
body.user-profile .tabbed-container .tablist .tab.selected[name="profile"] {
--tab-selected-mid: #d3d3d3AA;
background: linear-gradient(0deg, #0000 0%, var(--tab-selected-mid) 10%,var(--tab-selected) 50%, var(--tab-gradient, #dedede) 100%);
}
body.user-profile .tabbed-container {
height: calc(100% - 26px);
}
body.user-profile .tabbed-container .tablist {white-space: nowrap;}
body.user-profile .tabbed-container .box[name='stats'] .stat.role-stat,
body.user-profile .tabbed-container .box[name='stats'] .stat.plan-stat { font-family: var(--spfont1); }
body.user-profile .tabbed-container .stat b {
font-family: var(--spfont1);
font-size: 12px;
}
/* TAB */
.tabbed-container .tablist .tab.special {
--menu-border: 1px outset #ffe301;
}
a.thumbnail-box {
display: inline-block;
background-color: #0005;
background-size: cover;
background-repeat: no-repeat;
width: 150px;
height: 150px;
color: var(--main-text);
font-family: var(--spfont1);
text-decoration: none;
margin: 2px;
}
a.thumbnail-box::after {
display: block;
content: "View Image";
height: 20px;
margin: 130px 0px 0px 0px;
text-align: center;
border: var(--menu-border);
background-color: var(--menu-bg);
}
button.user-input {
background: var(--menu-bg);
border: var(--menu-border);
width: 180px;
height: 24px;
text-align: left;
font-family: var(--spfont1);
font-size: 14px;
vertical-align: middle;
cursor: pointer;
}
div.user-input-box {
background: var(--menu-bg);
border: var(--menu-border);
display: flex;
flex-direction: column;
position: absolute;
max-height: 300px;
overflow-y: auto;
}
div.user-input-box .userlink > * {
pointer-events: none;
}