Update button handling
This commit is contained in:
parent
6dcbc67ac6
commit
7ef492df12
|
|
@ -109,11 +109,20 @@
|
||||||
--direct: #ffffff;
|
--direct: #ffffff;
|
||||||
|
|
||||||
--background-image: url('//assets.worlio.com/style/background');
|
--background-image: url('//assets.worlio.com/style/background');
|
||||||
|
|
||||||
|
/* DEPRECATED
|
||||||
--button-large: url('//assets.worlio.com/style/button-large');
|
--button-large: url('//assets.worlio.com/style/button-large');
|
||||||
--button-wide: url('//assets.worlio.com/style/button-wide');
|
--button-wide: url('//assets.worlio.com/style/button-wide');
|
||||||
--button-long: url('//assets.worlio.com/style/button-long');
|
--button-long: url('//assets.worlio.com/style/button-long');
|
||||||
--button-med: url('//assets.worlio.com/style/button-med');
|
--button-med: url('//assets.worlio.com/style/button-med');
|
||||||
--button-small: url('//assets.worlio.com/style/button-small');
|
--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-left: url('//assets.worlio.com/style/navbar-left');
|
||||||
--navbar-right: url('//assets.worlio.com/style/navbar-right');
|
--navbar-right: url('//assets.worlio.com/style/navbar-right');
|
||||||
|
|
|
||||||
594
style.css
594
style.css
|
|
@ -94,19 +94,47 @@ nav.top div.left {
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
float: left;
|
float: left;
|
||||||
margin: 2px 4px;
|
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 {
|
nav.top div.left .dropdown {
|
||||||
font-family: var(--spfont1, Pixio);
|
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-position: 0 0, 0px 100%;
|
||||||
background-color: var(--acc-nav, #f3dca9);
|
background-color: var(--acc-nav, #f3dca9);
|
||||||
background-repeat: repeat, repeat-x;
|
background-repeat: repeat, repeat-x;
|
||||||
background-size: auto auto, auto 64px;
|
background-size: auto auto, auto 64px;
|
||||||
border-right: var(--acc-nav-separator, 2px solid #000000);
|
border-right: var(--acc-nav-separator, 2px solid #000000);
|
||||||
|
border-bottom: var(--acc-nav-separator, 2px solid #000000);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 132px;
|
width: 100%;
|
||||||
height: 34px;
|
height: 32px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
margin: -2px -4px;
|
margin: -2px -4px;
|
||||||
|
|
@ -115,14 +143,65 @@ nav.top div.left .dropdown {
|
||||||
transition-duration: 0.05s;
|
transition-duration: 0.05s;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.top div.left:hover .dropdown {
|
nav.top div.left:not(.active):hover .dropdown {
|
||||||
width: 264px;
|
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;
|
float: right;
|
||||||
height: 16px;
|
transition-duration: 1s;
|
||||||
margin: -2px -4px;
|
}
|
||||||
|
|
||||||
|
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 {
|
nav.top div.left .dropdown .flag img {
|
||||||
|
|
@ -136,7 +215,7 @@ nav.top div.left .dropdown .flag a {
|
||||||
height: 16px;
|
height: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav.top div.left:hover .dropdown .flag a {
|
nav.top div.left.active .dropdown .flag a {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
display: inline;
|
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 .dropdown .flag[role="100"] a { color: var(--rankflag7); }
|
||||||
|
|
||||||
nav.top div.left .username {
|
nav.top div.left .username {
|
||||||
|
display: block;
|
||||||
|
width: 132px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
margin: -1px;
|
margin: -1px;
|
||||||
}
|
}
|
||||||
|
|
@ -211,9 +292,9 @@ nav.acc > div:nth-of-type(2) {
|
||||||
margin: 0px 4px;
|
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 .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 {
|
nav.top p {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
|
@ -271,11 +352,10 @@ nav .logo {
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
background-size: auto 300% !important;
|
background: var(--default-button-background);
|
||||||
background-image: var(--button-large, url('//assets.worlio.com/style/button-large'));
|
border: var(--default-button-border);
|
||||||
border: none;
|
width: 44px;
|
||||||
width: 48px;
|
height: 44px;
|
||||||
height: 48px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
@ -298,12 +378,13 @@ nav .logo {
|
||||||
display: inline;
|
display: inline;
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
|
margin: -2px;
|
||||||
|
margin-right: 2px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popbutton {
|
.popbutton {
|
||||||
background-image: var(--button-large, url('//assets.worlio.com/style/button-large'));
|
width: 44px;
|
||||||
width: 48px;
|
|
||||||
text-overflow: clip;
|
text-overflow: clip;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
@ -311,18 +392,16 @@ nav .logo {
|
||||||
.longbutton, .smallbutton {
|
.longbutton, .smallbutton {
|
||||||
display: inline-block !important;
|
display: inline-block !important;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
height: 24px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.longbutton {
|
.longbutton {
|
||||||
background-image: var(--button-long, url('//assets.worlio.com/style/button-long'));
|
width: 116px;
|
||||||
width: 120px;
|
|
||||||
margin: 2px 4px !important;
|
margin: 2px 4px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.smallbutton {
|
.smallbutton {
|
||||||
background-image: var(--button-small, url('//assets.worlio.com/style/button-small'));
|
width: 20px;
|
||||||
width: 24px;
|
|
||||||
margin: 2px !important;
|
margin: 2px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -377,14 +456,28 @@ body {
|
||||||
bottom: 0px;
|
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: var(--menu-border, 1px solid #bdbdbd);
|
||||||
border-top: none;
|
border-top: none;
|
||||||
display: inline-block;
|
flex-shrink: 0; flex-grow: 0;
|
||||||
background-color: var(--menu-bg, #d0d0d0);
|
background-color: var(--menu-bg, #d0d0d0);
|
||||||
position: relative;
|
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
font-family: var(--spfont1, Pixio);
|
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) {
|
@media only screen and (orientation: landscape) {
|
||||||
|
|
@ -463,11 +556,11 @@ body > .header-title {
|
||||||
}
|
}
|
||||||
|
|
||||||
.popbutton {
|
.popbutton {
|
||||||
font-size: 1.5em;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popbutton:hover {
|
.popbutton:hover {
|
||||||
width: 144px;
|
width: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popbutton > a {
|
.popbutton > a {
|
||||||
|
|
@ -493,10 +586,16 @@ body > .header-title {
|
||||||
margin-bottom: -8px;
|
margin-bottom: -8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum .thread .post, .forum .thread .reply, .forum .errors {
|
.forum .thread .reply, .forum .errors {
|
||||||
margin: 8px 32px;
|
margin: 8px 32px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.forum .thread .post {
|
||||||
|
display: flex;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.forum .thread .post { margin: 8px; }
|
||||||
|
|
||||||
@media only screen and (orientation: portrait) {
|
@media only screen and (orientation: portrait) {
|
||||||
:target::before {
|
:target::before {
|
||||||
|
|
@ -507,7 +606,7 @@ body > .header-title {
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
top: 68px;
|
top: 64px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -587,7 +686,7 @@ body > .header-title {
|
||||||
}
|
}
|
||||||
|
|
||||||
.popbutton:hover {
|
.popbutton:hover {
|
||||||
width: 48px;
|
width: 44px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popbutton a:nth-of-type(2) {
|
.popbutton a:nth-of-type(2) {
|
||||||
|
|
@ -600,8 +699,7 @@ body > .header-title {
|
||||||
}
|
}
|
||||||
|
|
||||||
.longbutton.collapse {
|
.longbutton.collapse {
|
||||||
background-image: var(--button-small, url('//assets.worlio.com/style/button-small'));
|
width: 20px;
|
||||||
width: 24px;
|
|
||||||
margin: 2px !important;
|
margin: 2px !important;
|
||||||
font-size: 0px;
|
font-size: 0px;
|
||||||
}
|
}
|
||||||
|
|
@ -1140,7 +1238,7 @@ table {
|
||||||
font-family: var(--spfont1, Pixio);
|
font-family: var(--spfont1, Pixio);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabbed-container .tablist .tab img,
|
.tabbed-container .tablist .tab *:not(.userlink) img,
|
||||||
.tabbed-container .tablist .faketab img {
|
.tabbed-container .tablist .faketab img {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
@ -1196,14 +1294,18 @@ table {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay .box {
|
.overlay .box,
|
||||||
position: fixed;
|
.overlay .attachment {
|
||||||
background: var(--main-background, #d3d3d3);
|
background: var(--main-background, #d3d3d3);
|
||||||
border: 2px inset gray;
|
border: 2px inset gray;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
left: 0; right: 0;
|
|
||||||
margin-left: auto; margin-right: auto;
|
margin-left: auto; margin-right: auto;
|
||||||
}
|
}
|
||||||
|
.overlay .box {
|
||||||
|
position: fixed;
|
||||||
|
left: 0; right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.overlay .popup {
|
.overlay .popup {
|
||||||
min-width: 128px;
|
min-width: 128px;
|
||||||
|
|
@ -1211,6 +1313,31 @@ table {
|
||||||
overflow: auto;
|
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 {
|
.dragbox {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
|
@ -1226,6 +1353,7 @@ table {
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay .popup .titlebar,
|
.overlay .popup .titlebar,
|
||||||
|
.overlay .attachment .titlebar,
|
||||||
.dragbox .titlebar {
|
.dragbox .titlebar {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
|
|
@ -1239,11 +1367,13 @@ table {
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay .popup .titlebar .title,
|
.overlay .popup .titlebar .title,
|
||||||
|
.overlay .attachment .titlebar .title,
|
||||||
.dragbox .titlebar .title {
|
.dragbox .titlebar .title {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay .popup .titlebar .closebtn,
|
.overlay .popup .titlebar .closebtn,
|
||||||
|
.overlay .attachment .titlebar .closebtn,
|
||||||
.dragbox .titlebar .closebtn {
|
.dragbox .titlebar .closebtn {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
@ -1267,17 +1397,22 @@ table {
|
||||||
right: 4px;
|
right: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay .box {
|
.overlay .box, .overlay .attachment {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.overlay .popup {
|
.overlay .popup, .overlay .attachment {
|
||||||
max-height: 90%;
|
max-height: 90%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum .thread .threadsub {
|
.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) {
|
@media only screen and (orientation: landscape) {
|
||||||
|
|
@ -1318,16 +1453,27 @@ table {
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum .thread .threadsub {
|
.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 {
|
.close {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background-image: url('//assets.worlio.com/style/icons/close');
|
background-image: url('//assets.worlio.com/style/icons/deny');
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
width: 32px;
|
width: 48px;
|
||||||
height: 32px;
|
height: 48px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
right: 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 td:nth-child(4),
|
||||||
body.forum table.board col:nth-child(4) { display: none; }
|
body.forum table.board col:nth-child(4) { display: none; }
|
||||||
body.forum_board table.board td:nth-child(4),
|
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); }
|
table.board td:nth-child(3) { border-right: var(--forum-content-border, 1px solid #a29c8d); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1446,6 +1594,14 @@ table.board .status {
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.forum .thread name .infobox {
|
||||||
|
flex-grow:1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.forum .thread name .infobox .author {
|
||||||
|
color: var(--subtitle);
|
||||||
|
}
|
||||||
|
|
||||||
.forum .category .board.sub {
|
.forum .category .board.sub {
|
||||||
margin-left: 16px;
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
|
|
@ -1511,7 +1667,7 @@ table.board .status {
|
||||||
color: var(--subtitle, #525252);
|
color: var(--subtitle, #525252);
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum .thread .post,
|
.forum .thread .post .post-content,
|
||||||
.forum .thread .reply,
|
.forum .thread .reply,
|
||||||
.forum .errors {
|
.forum .errors {
|
||||||
background-color: var(--post, #d9d9d9);
|
background-color: var(--post, #d9d9d9);
|
||||||
|
|
@ -1519,11 +1675,18 @@ table.board .status {
|
||||||
padding: 4px;
|
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 {
|
.forum .thread .reply .submit {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum .thread .post .topbar,
|
|
||||||
.forum .thread .reply .title,
|
.forum .thread .reply .title,
|
||||||
.forum .errors .title {
|
.forum .errors .title {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -1541,24 +1704,37 @@ table.board .status {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum .thread .post .topbar {
|
.forum .thread .post .authorbar {
|
||||||
background-color: var(--post-author, #b4b6b7);
|
background-color: var(--post-author, #b4b6b7);
|
||||||
border: var(--post-author-border, 1px solid #84775a);
|
border: var(--post-author-border, 1px solid #84775a);
|
||||||
display: flex;
|
display: flex;
|
||||||
|
min-height: 64px;
|
||||||
|
padding: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum .thread .post .topbar .userlink {
|
.forum .thread .post .authorbar .author {
|
||||||
|
display: flex;
|
||||||
flex-grow:1;
|
flex-grow:1;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum .thread .post .topbar .idtag {
|
/*.forum .thread .post .authorbar .userlink { text-align: center: }*/
|
||||||
color: var(--subtitle, #525252);
|
|
||||||
|
.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 .thread .reply .title,
|
||||||
.forum .errors .title {
|
.forum .errors .title {
|
||||||
background-color: var(--forum-sub, #d7ccb6);
|
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 {
|
.forum .thread .threadsub {
|
||||||
|
|
@ -1570,6 +1746,7 @@ table.board .status {
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
margin: 0px 16px;
|
margin: 0px 16px;
|
||||||
font-family: var(--spfont1, Pixio);
|
font-family: var(--spfont1, Pixio);
|
||||||
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum .thread .threadsub .author {
|
.forum .thread .threadsub .author {
|
||||||
|
|
@ -1583,25 +1760,46 @@ table.board .status {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum .thread .post .bottombar {
|
.forum .thread .post .topbar {
|
||||||
border-top: var(--post-border, 1px solid #bfb9a9);
|
/*border: var(--post-border, 1px solid #bfb9a9);*/
|
||||||
|
border-bottom: none;
|
||||||
background-color: var(--post-bottombar, #d2d2d2);
|
background-color: var(--post-bottombar, #d2d2d2);
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 8px -4px -4px -4px;
|
|
||||||
font-family: var(--spfont1, Pixio);
|
font-family: var(--spfont1, Pixio);
|
||||||
|
margin: -4px; margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum .thread .post .bottombar .timestamp {
|
.forum .thread .post .topbar .timestamp {
|
||||||
color: var(--subtitle, #525252);
|
color: var(--subtitle, #525252);
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.forum .thread .post .bottombar .buttons {
|
.forum .thread .post .topbar .idtag {
|
||||||
display: flex;
|
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;
|
padding: 2px 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1660,6 +1858,12 @@ div.page-buttons .button#last-page div a {
|
||||||
font-family: var(--spfont1, Pixio);
|
font-family: var(--spfont1, Pixio);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.posteditor .editbox {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.posteditor .editbox textarea#editor { flex-grow: 1; }
|
||||||
|
|
||||||
canvas#snow {
|
canvas#snow {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
|
@ -1671,8 +1875,8 @@ canvas#snow {
|
||||||
}
|
}
|
||||||
|
|
||||||
div.emotebox {
|
div.emotebox {
|
||||||
width: 100%;
|
width: 256px;
|
||||||
margin: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.emotebox .emote-container {
|
div.emotebox .emote-container {
|
||||||
|
|
@ -1698,7 +1902,7 @@ div.emotebox .emote-container:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
.mailcontainer .subject img,
|
.mailcontainer .subject img,
|
||||||
.mailcontainer .sub img {
|
.mailcontainer .trade-icon {
|
||||||
vertical-align: middle;
|
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 .loc {font-size: 12px;}
|
||||||
body.forum .sidebar .box .thread .info .timestamp {color: var(--subtitle);}
|
body.forum .sidebar .box .thread .info .timestamp {color: var(--subtitle);}
|
||||||
|
|
||||||
|
|
||||||
.button {
|
|
||||||
background-position: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:hover, .button.selected {
|
.button:hover, .button.selected {
|
||||||
background-position: 0 100%;
|
background: var(--hover-button-background);
|
||||||
|
border: var(--hover-button-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button:active {
|
.button:active {
|
||||||
background-position: 0 200%;
|
background: var(--active-button-background);
|
||||||
|
border: var(--active-button-border);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button.disabled, .longbutton.disabled, .smallbutton.disabled {
|
.button.disabled, .longbutton.disabled, .smallbutton.disabled {
|
||||||
background: #808080;
|
background: #808080;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popbutton {
|
.popbutton,
|
||||||
background-position: 0 0;
|
.longbutton,
|
||||||
}
|
|
||||||
|
|
||||||
.longbutton {
|
|
||||||
background-position: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.smallbutton {
|
.smallbutton {
|
||||||
background-position: 0 0;
|
background: var(--default-button-background);
|
||||||
}
|
border: var(--default-button-border);
|
||||||
|
|
||||||
.longbutton:hover, .smallbutton:hover {
|
|
||||||
background-position: 0 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.longbutton:active, .smallbutton:active {
|
|
||||||
background-position: 0 200%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.longbutton:hover,
|
||||||
|
.smallbutton:hover,
|
||||||
.dark-switch: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 {
|
.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) {
|
@media (orientation: landscape) {
|
||||||
.popbutton:hover {
|
body.dashboard .dash-container {
|
||||||
background: var(--button-wide) 0 100%;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popbutton:active, .popbutton.disabled {
|
body.dashboard .sidebar {
|
||||||
background: var(--button-wide) 0 200%;
|
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) {
|
@media (orientation: portrait) {
|
||||||
.popbutton:hover {
|
body.user-profile iframe.box { margin-top: -46px; }
|
||||||
background-position: 0 100%;
|
body.user-profile .tabbed-container .tablist { margin: -12px -4px auto -8px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.popbutton:active, .popbutton.disabled {
|
body.user-profile .tabbed-container .tablist .tab {padding:4px;bottom: 0px;}
|
||||||
background-position: 0 200%;
|
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;
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user