2270 lines
42 KiB
CSS
2270 lines
42 KiB
CSS
/*
|
|
* | | |
|
|
* | | | {}
|
|
* | | ___ .__ | ___ __ ___ . .
|
|
* | /\ | / \ | \ | || / \ / \ / \ |\ /|
|
|
* | / \ | || || | | || || || || || || | \/ |
|
|
* |/ \| \___/ | | || \___/ () \__/ \___/ | |
|
|
* GLOBAL SITE STYLESHEET
|
|
* 07/20/2022
|
|
*/
|
|
@import url('//assets.worlio.com/style/css/theme.css');
|
|
|
|
.pixel, nav, nav.top, .button, .centerdiv, .heading {
|
|
image-rendering: crisp-edges;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.no-scroll, nav, nav.top {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
.no-scroll::-webkit-scrollbar,
|
|
nav::-webkit-scrollbar,
|
|
nav.top::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
body.home .home-container {}
|
|
body.home .home-container img.logo { max-height: 256px; max-width: 100%; }
|
|
body.home .home-container .slogan {
|
|
font-family: var(--spfont1);
|
|
font-weight: bold;
|
|
font-size: 24px;
|
|
text-align: center;
|
|
}
|
|
body.home .home-container .link-contents {
|
|
display: flex;
|
|
}
|
|
body.home .home-container .link-contents .link-item {
|
|
margin: 8px;
|
|
}
|
|
body.home .home-container .link-contents .link-item img {
|
|
margin: 2px;
|
|
vertical-align: middle;
|
|
}
|
|
div.grower { flex-grow: 1; }
|
|
|
|
body.home .home-container .footer {
|
|
max-width: 512px;
|
|
margin: auto;
|
|
text-align: right;
|
|
}
|
|
body.home .home-container .blog-contents {
|
|
max-width: 512px;
|
|
margin: auto;
|
|
border-bottom: 1px solid black;
|
|
}
|
|
body.home .home-container .blog-contents .title {
|
|
border-bottom: 1px solid black;
|
|
font-family: var(--spfont1);
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
padding: 2px;
|
|
}
|
|
body.home .home-container .blog-contents .blog-item {
|
|
background: var(--menu-bg);
|
|
border: var(--menu-border);
|
|
margin: 2px;
|
|
padding: 4px;
|
|
}
|
|
body.home .home-container .blog-contents .blog-item i { text-align: right; }
|
|
|
|
nav.top {
|
|
background-image: var(--navbar-top, url('//assets.worlio.com/style/navbar-top'));
|
|
background-position: 0px 100%;
|
|
background-color: var(--acc-nav, #f3dca9);
|
|
background-repeat: repeat-x;
|
|
background-size: auto 64px;
|
|
position: fixed;
|
|
height: 36px;
|
|
padding: 0px;
|
|
z-index: 10;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
nav.top div.left {
|
|
position: relative;
|
|
width: 132px;
|
|
height: 32px;
|
|
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: 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: 100%;
|
|
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 {
|
|
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.guest div.left.active .dropdown {
|
|
height: 112px;
|
|
}
|
|
|
|
nav.top div.left .dropdown .right {
|
|
pointer-events: none;
|
|
display: none;
|
|
opacity: 0;
|
|
float: right;
|
|
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 {
|
|
float: right;
|
|
width: 16px;
|
|
}
|
|
|
|
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 {
|
|
display: block;
|
|
width: 132px;
|
|
height: 38px;
|
|
margin: -1px;
|
|
}
|
|
|
|
nav.top div.left .dropdown .username .counters {
|
|
display: flex;
|
|
}
|
|
|
|
nav.top div.left .dropdown .username .counter {
|
|
flex-grow: 1;
|
|
height: 16px;
|
|
}
|
|
|
|
nav.top div.left .dropdown .username .counter a {
|
|
color: var(--inactive, #6e6e6e);
|
|
vertical-align: top;
|
|
font-size: 14px;
|
|
}
|
|
|
|
nav.top div.left .dropdown .username .counter img {
|
|
height: 100%;
|
|
margin: 0px 1px;
|
|
padding: 0px 2px;
|
|
}
|
|
|
|
nav.top div.left .dropdown .username .counter.alert a {
|
|
color: var(--alert, #ce0000);
|
|
}
|
|
|
|
nav.top div.left .dropdown .username .counter.currency a {
|
|
color: var(--currency, #89541A);
|
|
}
|
|
|
|
nav.top div.left .dropdown .username .userlink {
|
|
margin: 0px;
|
|
}
|
|
|
|
nav.top div.left .username .arrow {
|
|
position: relative;
|
|
opacity: 0.3;
|
|
float: right;
|
|
margin: 2px auto !important;
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
}
|
|
|
|
nav.top div.left .username .user-icon {
|
|
vertical-align: top;
|
|
}
|
|
|
|
nav.acc > div:nth-of-type(2) {
|
|
display: block;
|
|
overflow-y: visible;
|
|
overflow-x: auto;
|
|
height: 100%;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
margin: 0px 4px;
|
|
}
|
|
|
|
nav.acc .left.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.top p {
|
|
margin: 0px;
|
|
text-align: center;
|
|
}
|
|
|
|
nav.top.alert {
|
|
background-color: var(--dialog-bg, #fbebcc);
|
|
height: unset;
|
|
min-height: 28px;
|
|
max-height: 64px;
|
|
padding: 2px;
|
|
overflow: auto;
|
|
z-index: 5;
|
|
}
|
|
|
|
nav.top.alert .close {
|
|
background-image: url('//style.worlio.com/icons/close');
|
|
background-size: 100%;
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
margin-right: 8px;
|
|
float: left;
|
|
}
|
|
|
|
nav.top.alert p {
|
|
text-align: unset;
|
|
white-space: pre-line;
|
|
}
|
|
|
|
nav {
|
|
background-color: var(--main-nav, dodgerblue);
|
|
position: fixed;
|
|
top: 0px;
|
|
left: 0px;
|
|
z-index: 10;
|
|
font-size: 14px;
|
|
}
|
|
|
|
body > div.navgap {
|
|
height: 34px;
|
|
}
|
|
|
|
nav .logo {
|
|
width: 48px;
|
|
height: 48px;
|
|
padding: 0px;
|
|
margin: 2px;
|
|
}
|
|
|
|
.button, nav {
|
|
font-family: var(--spfont1, Pixio);
|
|
}
|
|
|
|
.button {
|
|
background: var(--default-button-background);
|
|
border: var(--default-button-border);
|
|
width: 44px;
|
|
height: 44px;
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.button:hover > a > img:nth-of-type(1) {
|
|
filter: contrast(50%);
|
|
}
|
|
|
|
.button:active > a > img:nth-of-type(1) {
|
|
filter: brightness(50%) saturate(0%);
|
|
}
|
|
|
|
.button a {
|
|
display: block;
|
|
width: 144px;
|
|
height: 48px;
|
|
}
|
|
|
|
.button > a > img:nth-of-type(1) {
|
|
display: inline;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin: -2px;
|
|
margin-right: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.popbutton {
|
|
width: 44px;
|
|
text-overflow: clip;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.longbutton, .smallbutton {
|
|
display: inline-block !important;
|
|
padding: 2px;
|
|
height: 20px;
|
|
}
|
|
|
|
.longbutton {
|
|
width: 116px;
|
|
margin: 2px 4px !important;
|
|
}
|
|
|
|
.smallbutton {
|
|
width: 20px;
|
|
margin: 2px !important;
|
|
}
|
|
|
|
.longbutton a, .smallbutton a {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.longbutton.txt a {
|
|
display: inline-block !important;
|
|
width: 100%; height: 100%;
|
|
font-family: var(--spfont1, Pixio);
|
|
text-decoration: none;
|
|
text-align: center;
|
|
color: var(--main-text, #000000);
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.longbutton > a > img, .smallbutton > a > img {
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
}
|
|
|
|
.longbutton > a, .smallbutton > a {
|
|
color: var(--main-text, #000000);
|
|
text-decoration: none;
|
|
display: flex !important;
|
|
align-items: center;
|
|
height: 24px;
|
|
width: 120px;
|
|
}
|
|
|
|
.longbutton > a img, .smallbutton > a img {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.oddbutton {
|
|
position: absolute;
|
|
}
|
|
|
|
.fakebutton {
|
|
display: inline-block !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body {
|
|
margin: 8px;
|
|
position: absolute;
|
|
right: 0px;
|
|
bottom: 0px;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.header > .gap { flex-grow: 1;}
|
|
|
|
.header > .title {
|
|
border: var(--menu-border, 1px solid #bdbdbd);
|
|
border-top: none;
|
|
flex-shrink: 0; flex-grow: 0;
|
|
background-color: var(--menu-bg, #d0d0d0);
|
|
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) {
|
|
:target::before {
|
|
content: "";
|
|
display: block;
|
|
height: 64px;
|
|
margin: -64px 0 0;
|
|
}
|
|
|
|
body {
|
|
top: 0px;
|
|
left: 64px;
|
|
}
|
|
|
|
.heading {
|
|
width: calc(100% + 8px);
|
|
padding: 2px 4px;
|
|
left: 64px;
|
|
}
|
|
|
|
.heading.main,
|
|
.heading.sub {
|
|
top: 0px;
|
|
}
|
|
|
|
.heading.main { margin: -8px; margin-bottom: 8px; }
|
|
.heading.sub { margin: -8px; margin-bottom: 8px; }
|
|
.heading.section { margin: 4px -8px; }
|
|
|
|
nav {
|
|
width: 60px;
|
|
padding: 0px 2px;
|
|
background-image: var(--navbar-left, url('//assets.worlio.com/style/navbar-left'));
|
|
background-repeat: repeat-y;
|
|
background-size: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
nav hr {
|
|
width: 100%;
|
|
border: 1px solid black;
|
|
}
|
|
|
|
nav .logo {
|
|
display: block;
|
|
}
|
|
|
|
nav.top {
|
|
width: calc(100% - 64px);
|
|
top: 0px;
|
|
left: 64px;
|
|
}
|
|
|
|
nav.top > .navRight .dropdown h3 {
|
|
width: 128px;
|
|
}
|
|
|
|
nav.top > .navRight .dropdown:hover h3 {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
nav.top.alert {
|
|
top: 36px;
|
|
}
|
|
|
|
.button {
|
|
display: block;
|
|
margin: 4px;
|
|
}
|
|
|
|
.button a {
|
|
display: block;
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
|
|
.popbutton {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.popbutton:hover {
|
|
width: 140px;
|
|
}
|
|
|
|
.popbutton > a {
|
|
color: var(--main-text, #000000);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 48px;
|
|
width: 144px;
|
|
}
|
|
|
|
.popbutton > a img {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.oddbutton {
|
|
top: 8px;
|
|
left: calc(64px + 8px);
|
|
}
|
|
|
|
body > .header-title {
|
|
top: -8px;
|
|
margin-bottom: -8px;
|
|
}
|
|
|
|
.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: "";
|
|
display: block;
|
|
height: 128px;
|
|
margin: -128px 0 0;
|
|
}
|
|
|
|
body {
|
|
top: 64px;
|
|
left: 0px;
|
|
}
|
|
|
|
.heading {
|
|
margin: -8px;
|
|
margin-top: -16px;
|
|
margin-bottom: 8px;
|
|
padding: 2px 0px;
|
|
width: 100%;
|
|
left: 0px;
|
|
}
|
|
|
|
.heading.main {
|
|
top: 64px;
|
|
}
|
|
|
|
.heading.sub {
|
|
top: 128px;
|
|
}
|
|
|
|
nav {
|
|
background-image: var(--navbar-top, url('//assets.worlio.com/style/navbar-top'));
|
|
background-repeat: repeat-x;
|
|
background-size: 64px;
|
|
width: 100%;
|
|
height: 60px;
|
|
padding: 2px 0px;
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
nav.top {
|
|
overflow-y: unset;
|
|
overflow-x: unset;
|
|
}
|
|
|
|
nav hr {
|
|
margin: 0px 2px;
|
|
border: none;
|
|
border: 1px solid black;
|
|
width: 0px;
|
|
display: inline-block;
|
|
height: 48px;
|
|
}
|
|
|
|
nav .logo {
|
|
display: inline-block;
|
|
}
|
|
|
|
nav > a {
|
|
transform: rotate(-90deg);
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
height: 100%;
|
|
}
|
|
|
|
nav.top {
|
|
width: 100%;
|
|
top: 64px;
|
|
left: 0px;
|
|
}
|
|
|
|
nav.top > .dropdown h3 {
|
|
width: 36px;
|
|
}
|
|
|
|
nav.top.alert {
|
|
top: 100px;
|
|
}
|
|
|
|
.button {
|
|
display: inline-block;
|
|
margin: 2px 4px;
|
|
}
|
|
|
|
.popbutton:hover {
|
|
width: 44px;
|
|
}
|
|
|
|
.popbutton a:nth-of-type(2) {
|
|
display: none;
|
|
}
|
|
|
|
.oddbutton {
|
|
top: calc(64px + 8px);
|
|
left: 8px;
|
|
}
|
|
|
|
.longbutton.collapse {
|
|
width: 20px;
|
|
margin: 2px !important;
|
|
font-size: 0px;
|
|
}
|
|
|
|
body > .header-title {
|
|
top: -16px;
|
|
margin-bottom: -16px;
|
|
}
|
|
|
|
.forum .thread .post, .forum .thread .reply, .errors {
|
|
margin: 8px;
|
|
}
|
|
|
|
.forum .thread .threadsub {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.forum .thread .threadsub .buttons {
|
|
text-align: right;
|
|
}
|
|
|
|
.forum .thread .post .bottombar {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.forum .thread .post .bottombar .buttons {
|
|
flex-direction: row;
|
|
}
|
|
}
|
|
|
|
body {
|
|
background-color: var(--main-background, #d3d3d3);
|
|
background-image: var(--background-image, url('//assets.worlio.com/style/background'));
|
|
color: var(--main-text, #000000);
|
|
}
|
|
|
|
nav,
|
|
nav.top,
|
|
.button,
|
|
.centerdiv,
|
|
.heading {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
|
|
p img,
|
|
body > img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.logo {
|
|
max-height: 128px;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
h1 img,
|
|
h2 img {
|
|
width: 32px;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.heading {
|
|
z-index: 10;
|
|
display: block;
|
|
background-repeat: repeat-x;
|
|
overflow-y: hidden;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
border: none;
|
|
font-family: var(--spfont1, Pixio);
|
|
}
|
|
|
|
.heading.main {
|
|
position: sticky;
|
|
background-size: 64px;
|
|
height: 60px;
|
|
}
|
|
|
|
.heading {
|
|
background-color: var(--header-bg, #ffffff);;
|
|
background-image: var(--navbar-top, url('//assets.worlio.com/style/navbar-top'));
|
|
}
|
|
|
|
.heading.sub,
|
|
.heading.section {
|
|
height: 28px;
|
|
}
|
|
|
|
.heading.sub {
|
|
background-size: 64px;
|
|
background-position-y: -32px;
|
|
}
|
|
|
|
.heading.section {
|
|
background-size: 32px;
|
|
background-image: var(--nav-db, url('//assets.worlio.com/style/navbar-db'));;
|
|
background-color: var(--header-bg, #ffffff);;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
.heading.main > a {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.heading.main > a {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.heading > a {
|
|
margin: 0px 0px 0px 4px;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
height: 100%;
|
|
}
|
|
|
|
.heading p {
|
|
font-size: 0.75em;
|
|
display: inline-block;
|
|
}
|
|
|
|
.heading.main img {
|
|
height: 48px;
|
|
}
|
|
|
|
.heading > img {
|
|
filter: drop-shadow(0px 0px 2px black);
|
|
}
|
|
|
|
.heading.main i {
|
|
margin-left: 16px;
|
|
font-weight: normal;
|
|
font-size: 1.5em !important;
|
|
}
|
|
|
|
.heading hr {
|
|
margin: 0px 8px;
|
|
border: none;
|
|
border-left: var(--header-line, 2px solid #000000);
|
|
width: 0px;
|
|
display: inline-block;
|
|
height: 75%;
|
|
}
|
|
|
|
hr.arrow {
|
|
border: none; border-left: none;
|
|
background-image: url('//style.worlio.com/icons/arrow/arrows');
|
|
background-size: 200% 200%;
|
|
height: 24px;
|
|
width: 24px;
|
|
margin: 22px 2px 2px 2px;
|
|
}
|
|
|
|
hr.arrow.left { 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%; }
|
|
|
|
c, code, .codeblock:not(.title) {
|
|
background-color: var(--code-bg, #ffffff63);
|
|
color: var(--code-text, #000000);
|
|
display: inline-block;
|
|
max-width: calc(100% - 4px);
|
|
/*white-space: pre-wrap;*/
|
|
word-wrap: anywhere;
|
|
font-family: Courier New;
|
|
padding: 2px;
|
|
}
|
|
|
|
code p {
|
|
margin: 2px;
|
|
}
|
|
|
|
.centerdiv {
|
|
padding: 8px;
|
|
text-align: center;
|
|
margin: auto;
|
|
max-width: 50%;
|
|
width: 50%;
|
|
}
|
|
|
|
.centerdiv img {
|
|
width: 100%;
|
|
}
|
|
|
|
.lib {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.lib.large {
|
|
max-width: 256px;
|
|
text-align: center;
|
|
}
|
|
|
|
.lib a {
|
|
margin: 4px 8px;
|
|
display: inline-block;
|
|
|
|
}
|
|
|
|
.lib a:hover {
|
|
text-shadow: 0px 0px 4px white;
|
|
}
|
|
|
|
.lib a > img {
|
|
margin: auto;
|
|
filter: brightness(90%);
|
|
transition-duration: 0.1s;
|
|
}
|
|
|
|
.lib a:hover > img {
|
|
filter: drop-shadow(0px 0px 4px white) brightness(100%);
|
|
}
|
|
|
|
.lib.main a img {
|
|
max-height: 64px;
|
|
min-width: 64px;
|
|
max-width: 192px;
|
|
}
|
|
|
|
.lib.small,
|
|
.lib.tiny {
|
|
display: block;
|
|
}
|
|
|
|
.lib.small > a,
|
|
.lib.tiny > a {
|
|
margin: 4px 8px;
|
|
}
|
|
|
|
.lib.small > a img,
|
|
.lib.tiny > a img {
|
|
max-height: 16px;
|
|
min-width: 16px;
|
|
max-width: 48px;
|
|
}
|
|
|
|
.lib.small > a {
|
|
width: 368px;
|
|
}
|
|
|
|
.lib.tiny > a {
|
|
min-width: 64px;
|
|
}
|
|
|
|
.comments {
|
|
max-width: 100%;
|
|
overflow: auto;
|
|
margin: unset;
|
|
border-collapse: unset;
|
|
border: none;
|
|
}
|
|
|
|
.love {
|
|
display: inline-block;
|
|
transform: none;
|
|
height: unset;
|
|
color: #FF0000;
|
|
opacity: 0.1;
|
|
text-decoration: none;
|
|
z-index: 15;
|
|
width: 48px;
|
|
}
|
|
|
|
.link {
|
|
text-decoration: underline;
|
|
color: blue;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.link:hover {
|
|
color: blueviolet;
|
|
}
|
|
|
|
input[type="button"],
|
|
input[type="checkbox"],
|
|
input[type="color"],
|
|
input[type="date"],
|
|
input[type="datetime-local"],
|
|
input[type="email"],
|
|
input[type="image"],
|
|
input[type="month"],
|
|
input[type="number"],
|
|
input[type="password"],
|
|
input[type="radio"],
|
|
input[type="range"],
|
|
input[type="reset"],
|
|
input[type="search"],
|
|
input[type="submit"],
|
|
input[type="tel"],
|
|
input[type="text"],
|
|
input[type="time"],
|
|
input[type="url"],
|
|
input[type="week"],
|
|
textarea {
|
|
background-color: var(--input-bg, #ffffff);
|
|
color: var(--input-text, #000);
|
|
}
|
|
|
|
input[type="file"] {
|
|
color: var(--input-text, #000);
|
|
}
|
|
|
|
.styled-table > tbody > tr {
|
|
border-bottom: 1px dashed var(--border-line, #000000);
|
|
}
|
|
|
|
.styled-table > tbody > tr th {
|
|
background-color: rgba(255,255,255,0.4);
|
|
border-bottom: 1px solid var(--border-header, #ffffff);
|
|
}
|
|
|
|
.styled-table > tbody > tr td { border: 1px dotted var(--border-line, #000000); }
|
|
|
|
.status.success, .output .success {color: var(--status-success, #458e1c);}
|
|
.status.error, .output .error {color: var(--status-error, #ff0000);}
|
|
|
|
heading .button {
|
|
display: inline-block !important;
|
|
}
|
|
|
|
.file-table {
|
|
width: calc(100% - 8px);
|
|
border: 1px dotted var(--border-line, #000000);
|
|
}
|
|
|
|
.file-table tr {
|
|
border-bottom: 1px dotted var(--border-line, #000000);
|
|
}
|
|
|
|
.userlink {
|
|
display: inline-block;
|
|
margin: 4px 0px;
|
|
}
|
|
|
|
.userlink a {
|
|
color: var(--main-text, #000000);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.userlink img {
|
|
vertical-align: bottom;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.message-container {
|
|
background-color: var(--main-background, #d3d3d3);
|
|
border: var(--menu-border, 1px solid #bdbdbd);
|
|
display: block;
|
|
padding: 4px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.message-container > div {
|
|
display: block;
|
|
}
|
|
|
|
.message-container .subject a {
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.message-container .body {
|
|
background-color: var(--menu-bg, #d0d0d0);
|
|
border: var(--menu-border, 1px solid #bdbdbd);
|
|
padding: 8px;
|
|
margin: 4px;
|
|
}
|
|
|
|
.message-container .date {
|
|
text-align: right;
|
|
}
|
|
|
|
.live-preview {
|
|
vertical-align: top;
|
|
overflow: auto;
|
|
}
|
|
|
|
.wrapper {
|
|
display: block;
|
|
padding: 8px;
|
|
}
|
|
|
|
.formbutton button {
|
|
background: none;
|
|
color: var(--main-text, #000000);
|
|
text-decoration: none;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
font-family: var(--spfont1, Pixio);
|
|
border: none;
|
|
box-sizing: content-box;
|
|
padding: 0px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
width: calc(100% - 8px);
|
|
}
|
|
|
|
.wrapper table input {
|
|
width: calc(100% - 20px);
|
|
}
|
|
|
|
.account-name {
|
|
vertical-align: top;
|
|
}
|
|
|
|
.account-name img {
|
|
vertical-align: middle !important;
|
|
width: 32px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.dropdown:hover .menu, .dropdown:active .menu {
|
|
display: block;
|
|
}
|
|
|
|
.button.dropdown > a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dropdown .menu {
|
|
background-image: var(--background-image, url('//assets.worlio.com/style/background'));
|
|
display: none;
|
|
position: relative;
|
|
background-color: var(--menu-bg, #d0d0d0);
|
|
border: var(--menu-border, 1px solid #bdbdbd);
|
|
padding: 4px;
|
|
right: 152px;
|
|
width: 140px;
|
|
top: -28px;
|
|
}
|
|
|
|
.dropdown:hover {
|
|
background-position-y: 100%;
|
|
}
|
|
|
|
.dropdown .menu.below {
|
|
right: 124px;
|
|
top: 2px;
|
|
}
|
|
|
|
.upload-table {
|
|
width: 512px;
|
|
max-width: calc(100% - 32px);
|
|
margin: 0px auto;
|
|
}
|
|
|
|
.message-table {
|
|
width: 768px;
|
|
max-width: calc(100% - 32px);
|
|
margin: 0px auto;
|
|
}
|
|
|
|
.message-table input, .message-table textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.double-column-table tr td:nth-of-type(1),
|
|
.double-column-table tr th:nth-of-type(1) {
|
|
text-align: right;
|
|
vertical-align: top;
|
|
}
|
|
|
|
table {
|
|
max-width: calc(100% - 8px);
|
|
}
|
|
|
|
.mail-count {
|
|
color: var(--alert);
|
|
position: relative;
|
|
top: -6px;
|
|
right: 28px;
|
|
}
|
|
|
|
.form-container {
|
|
background-color: var(--menu-bg, #d0d0d0);
|
|
border: var(--menu-border, 1px solid #bdbdbd);
|
|
padding: 8px;
|
|
margin: 4px;
|
|
}
|
|
|
|
.tabbed-container {
|
|
}
|
|
|
|
.tabbed-container .tablist .tab,
|
|
.tabbed-container .tablist .faketab {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.mailbox a,
|
|
.mailbox a:link, .mailbox a:visited,
|
|
.tablist a,
|
|
.tablist a:link, .tablist a:visited {
|
|
color: var(--main-text, #000000);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tabbed-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.tabbed-container .tablist {
|
|
position: relative;
|
|
bottom: -1px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-shrink: 0;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.tabbed-container .tablist .tab,
|
|
.tabbed-container .tablist .faketab {
|
|
background-color: var(--tab-inactive, #bdbdbd);
|
|
border: var(--menu-border, 1px solid #bdbdbd);
|
|
display: inline-block;
|
|
padding: 8px;
|
|
position: relative;
|
|
margin: 0px 2px;
|
|
bottom: -1px;
|
|
text-align: center;
|
|
font-family: var(--spfont1, Pixio);
|
|
}
|
|
|
|
.tabbed-container .tablist .tab *:not(.userlink) img,
|
|
.tabbed-container .tablist .faketab img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.tabbed-container .tablist .tab.selected,
|
|
.tabbed-container .tablist .faketab.selected {
|
|
background: var(--tab-selected, #d3d3d3);
|
|
background: -moz-linear-gradient(0deg, var(--tab-selected, #d3d3d3) 50%, var(--tab-gradient, #dedede) 100%);
|
|
background: -webkit-linear-gradient(0deg, var(--tab-selected, #d3d3d3) 50%, var(--tab-gradient, #dedede) 100%);
|
|
background: linear-gradient(0deg, var(--tab-selected, #d3d3d3) 50%, var(--tab-gradient, #dedede) 100%);
|
|
bottom: -2px;
|
|
/*border-bottom: none;*/
|
|
}
|
|
|
|
.tabbed-container .box,
|
|
.tabbed-container .dropdown {
|
|
background-color: var(--tab-selected, #d3d3d3);
|
|
border: var(--menu-border, 1px solid #bdbdbd);
|
|
padding: 4px;
|
|
display: block;
|
|
flex: auto;
|
|
}
|
|
|
|
/* JS should handle positions and shit */
|
|
.tabbed-container .dropdown {
|
|
position: absolute;
|
|
border-top: none;
|
|
}
|
|
|
|
.mailbox .message,
|
|
.userbox .member {
|
|
background-color: var(--menu-bg, #d0d0d0);
|
|
border: var(--menu-border, 1px solid #bdbdbd);
|
|
margin: 4px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.emote {
|
|
image-rendering: crisp-edges;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: pixelated;
|
|
}
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
top: 0px; bottom: 0px; left: 0px; right: 0px;
|
|
z-index: 20;
|
|
background-color: #000a;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.overlay .box,
|
|
.overlay .attachment {
|
|
background: var(--main-background, #d3d3d3);
|
|
border: 2px inset gray;
|
|
padding: 8px;
|
|
|
|
margin-left: auto; margin-right: auto;
|
|
}
|
|
.overlay .box {
|
|
position: fixed;
|
|
left: 0; right: 0;
|
|
}
|
|
|
|
.overlay .popup {
|
|
min-width: 128px;
|
|
/*height: 80px;*/
|
|
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;
|
|
background: var(--main-background, #d3d3d3);
|
|
border: var(--menu-border);
|
|
padding: 8px;
|
|
box-shadow: #0005 5px 5px 4px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.dragbox textarea {
|
|
resize: both;
|
|
}
|
|
|
|
.overlay .popup .titlebar,
|
|
.overlay .attachment .titlebar,
|
|
.dragbox .titlebar {
|
|
display: flex;
|
|
position: sticky;
|
|
top: -8px;
|
|
margin: -8px;
|
|
margin-bottom: 8px;
|
|
padding: 4px;
|
|
background: var(--popup-title-bg);
|
|
border-bottom: var(--popup-title-border);
|
|
font-family: var(--spfont1, Pixio);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.dragbox .button-row {
|
|
display: flex;
|
|
border-top: var(--menu-border);
|
|
margin: -8px; margin-top: 0px;
|
|
padding: 4px;
|
|
}
|
|
|
|
.dragbox .content {display: flex;}
|
|
.dragbox#rename .content,
|
|
.dragbox#new-folder .content {
|
|
flex-direction: column;
|
|
}
|
|
|
|
@media only screen and (orientation: portrait) {
|
|
.overlay .box {
|
|
left: 4px;
|
|
right: 4px;
|
|
}
|
|
|
|
.overlay .box, .overlay .attachment {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.overlay .popup, .overlay .attachment {
|
|
max-height: 90%;
|
|
}
|
|
|
|
.forum .thread .threadsub {
|
|
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) {
|
|
.overlay .popup {
|
|
max-width: 512px;
|
|
max-height:90%;
|
|
}
|
|
|
|
.tabbed-container.vertical {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tabbed-container.vertical > .tablist {
|
|
position: relative;
|
|
right: -1px;
|
|
bottom: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tabbed-container.vertical > .tablist .tab,
|
|
.tabbed-container.vertical > .tablist .faketab {
|
|
margin: 2px 0px;
|
|
right: -1px;
|
|
bottom: 0px;
|
|
}
|
|
|
|
.tabbed-container.vertical > .tablist .tab.selected,
|
|
.tabbed-container.vertical > .tablist .faketab.selected {
|
|
background: var(--tab-selected, #d3d3d3);
|
|
background: -moz-linear-gradient(-90deg, var(--tab-selected, #d3d3d3) 25%, var(--tab-gradient, #dedede) 100%);
|
|
background: -webkit-linear-gradient(-90deg, var(--tab-selected, #d3d3d3) 25%, var(--tab-gradient, #dedede) 100%);
|
|
background: linear-gradient(-90deg, var(--tab-selected, #d3d3d3) 25%, var(--tab-gradient, #dedede) 100%);
|
|
border: var(--menu-border, 1px solid #bdbdbd);
|
|
}
|
|
|
|
.forum .thread .threadsub {
|
|
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/deny');
|
|
background-size: 100%;
|
|
width: 48px;
|
|
height: 48px;
|
|
cursor: pointer;
|
|
top: 8px;
|
|
right: 8px;
|
|
}
|
|
|
|
.verinfo {
|
|
display: inline;
|
|
position: fixed;
|
|
bottom: 4px;
|
|
right: 4px;
|
|
opacity: 0.3;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* FORUM */
|
|
table.board { font-family: var(--spfont1, Pixio); }
|
|
|
|
table.board th {
|
|
text-align: left;
|
|
padding: 4px;
|
|
background-color: var(--forum-header, #f3dca9);
|
|
}
|
|
|
|
body.forum_board table.board tr:nth-child(0) { border: var(--forum-header-border, 1px solid #a89b7f); }
|
|
|
|
body.forum_board table.board tr:not(.subboard) td:nth-child(4),
|
|
body.forum_board table.board tr:not(.subboard) th:nth-child(3) { text-align: right; }
|
|
|
|
body.forum table.board td:nth-child(3) * { vertical-align: middle; }
|
|
|
|
body.forum table.board th {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
border: var(--forum-header-border, 1px solid #a89b7f);
|
|
}
|
|
|
|
table.board tr {
|
|
text-align: left;
|
|
padding: 4px;
|
|
background-color: var(--forum-content, #d9d4c9);
|
|
border: var(--forum-content-border, 1px solid #a29c8d);
|
|
}
|
|
|
|
body.forum_board table.board th {
|
|
font-weight: normal;
|
|
}
|
|
|
|
body.forum table.board.collapsed td { display: none; }
|
|
|
|
@media only screen and (max-width: 1024px) {
|
|
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),
|
|
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 .status {
|
|
position: relative;
|
|
height: 0px;
|
|
top: -20px;
|
|
text-align: right;
|
|
}
|
|
|
|
.forum .category {
|
|
font-family: var(--spfont1, Pixio);
|
|
}
|
|
|
|
.forum > .category,
|
|
.forum > .board,
|
|
.forum > .thread {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.forum .category.collapsed .board {
|
|
display: none;
|
|
}
|
|
|
|
.forum .category.collapsed name {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.forum .board name,
|
|
.forum .category name,
|
|
.forum .thread name {
|
|
display: flex;
|
|
background-color: var(--forum-header, #f3dca9);
|
|
border: var(--forum-header-border, 1px solid #a89b7f);
|
|
font-family: var(--spfont1, Pixio);
|
|
padding: 4px;
|
|
}
|
|
|
|
.forum .category name {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.forum .board name .info,
|
|
.forum .category name .info,
|
|
.forum .thread name .info {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.forum .board name .info i,
|
|
.forum .category name .info i,
|
|
.forum .thread name .info i {
|
|
font-size: 12px;
|
|
color: var(--subtitle, #525252);
|
|
}
|
|
|
|
.forum .board name .buttons,
|
|
.forum .category name .buttons,
|
|
.forum .thread name .buttons {
|
|
flex-grow: 0;
|
|
padding: 2px;
|
|
}
|
|
|
|
.forum .thread name .infobox {
|
|
flex-grow:1;
|
|
}
|
|
|
|
.forum .thread name .infobox .author {
|
|
color: var(--subtitle);
|
|
}
|
|
|
|
.forum .category .board.sub {
|
|
margin-left: 16px;
|
|
}
|
|
|
|
.forum .category .board {
|
|
display: flex;
|
|
background-color: var(--forum-content, #d9d4c9);
|
|
border: var(--forum-content-border, 1px solid #a29c8d);
|
|
padding: 8px;
|
|
margin-left: 8px;
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
.forum .category .board .details1 {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.forum .category .board .details2 {
|
|
flex-grow: 0;
|
|
text-align: center;
|
|
padding: 0px 4px;
|
|
}
|
|
|
|
.forum .category .board .desc {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.forum .board .thread {
|
|
display: flex;
|
|
background-color: var(--forum-content, #d9d4c9);
|
|
border: var(--forum-content-border, 1px solid #a29c8d);
|
|
border-top: none;
|
|
margin-left: 8px;
|
|
margin-right: 8px;
|
|
padding: 8px;
|
|
font-family: var(--spfont1, Pixio);
|
|
}
|
|
|
|
.forum .board .thread .userlink {
|
|
margin: unset;
|
|
}
|
|
|
|
.forum .board .thread .details1 {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.forum .board .thread .details1 .post-count {
|
|
color: var(--subtitle, #525252);
|
|
}
|
|
|
|
.forum .board .thread .details2 {
|
|
flex-grow: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.forum .board .thread .author {
|
|
display: inline-block;
|
|
height: 16px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.forum .board .thread .time {
|
|
color: var(--subtitle, #525252);
|
|
}
|
|
|
|
.forum .thread .post .post-content,
|
|
.forum .thread .reply,
|
|
.forum .errors {
|
|
background-color: var(--post, #d9d9d9);
|
|
border: var(--post-border, 1px solid #bfb9a9);
|
|
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 .reply .title,
|
|
.forum .errors .title {
|
|
display: flex;
|
|
font-family: var(--spfont1, Pixio);
|
|
padding: 4px;
|
|
margin: -8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.forum .thread .reply .title {
|
|
display: flex;
|
|
}
|
|
|
|
.forum .thread .reply .title input {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.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 .authorbar .author {
|
|
display: flex;
|
|
flex-grow:1;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/*.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);
|
|
}
|
|
|
|
.forum .thread .threadsub {
|
|
background-color: var(--forum-sub, #d7ccb6);
|
|
position: sticky;
|
|
border: var(--forum-sub-border, 1px solid #99907b);
|
|
border-top: none;
|
|
display: flex;
|
|
padding: 2px;
|
|
margin: 0px 16px;
|
|
font-family: var(--spfont1, Pixio);
|
|
z-index: 5;
|
|
}
|
|
|
|
.forum .thread .threadsub .author {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.forum .thread .post img,
|
|
.forum .thread .post video,
|
|
.forum .thread .post audio,
|
|
.forum .thread .post iframe {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.forum .thread .post .topbar {
|
|
/*border: var(--post-border, 1px solid #bfb9a9);*/
|
|
border-bottom: none;
|
|
background-color: var(--post-bottombar, #d2d2d2);
|
|
padding: 4px;
|
|
display: flex;
|
|
font-family: var(--spfont1, Pixio);
|
|
margin: -4px; margin-bottom: 4px;
|
|
}
|
|
|
|
.forum .thread .post .topbar .timestamp {
|
|
color: var(--subtitle, #525252);
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.forum .thread .post .topbar .idtag {
|
|
color: var(--subtitle, #525252);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.forum .thread .options .option .name {
|
|
font-family: var(--spfont1, Pixio);
|
|
}
|
|
|
|
.forum .thread name .thricon {
|
|
margin: 0px 4px;
|
|
}
|
|
|
|
.thricon {
|
|
height: 16px;
|
|
}
|
|
|
|
div.page-buttons {
|
|
display: inline-flex;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
div.page-buttons .button#first-page,
|
|
div.page-buttons .button#page-selector,
|
|
div.page-buttons .button#last-page {
|
|
cursor: pointer;
|
|
}
|
|
|
|
div.page-buttons .button#first-page div,
|
|
div.page-buttons .button#page-selector div,
|
|
div.page-buttons .button#last-page div {
|
|
display: inline-block;
|
|
width: 100%;
|
|
margin: 4px 0px;
|
|
}
|
|
div.page-buttons .button#first-page div a,
|
|
div.page-buttons .button#page-selector div a,
|
|
div.page-buttons .button#last-page div a {
|
|
color: var(--alert);
|
|
display: inline-block !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.errors .error {
|
|
color: var(--error);
|
|
display: block;
|
|
}
|
|
|
|
.userlink { font-family: var(--spfont1, Pixio); }
|
|
|
|
.posteditor .editor-buttons .button a > input,
|
|
.posteditor .editor-buttons .button a > select {
|
|
background: none;
|
|
border: none;
|
|
height: 100%;
|
|
width: 100%;
|
|
font-family: var(--spfont1, Pixio);
|
|
}
|
|
|
|
.posteditor .editbox {
|
|
display: flex;
|
|
}
|
|
|
|
.posteditor .editbox textarea#editor { flex-grow: 1; }
|
|
|
|
canvas#snow {
|
|
position: fixed;
|
|
top: 0px;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
right: 0px;
|
|
pointer-events: none;
|
|
z-index: 100;
|
|
}
|
|
|
|
div.emotebox {
|
|
width: 256px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
div.emotebox .emote-container {
|
|
padding: 2px;
|
|
cursor: pointer;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
div.emotebox .emote-container:hover {
|
|
border: var(--menu-border, 1px solid #bdbdbd);
|
|
background: var(--menu-bg, #d0d0d0);
|
|
}
|
|
|
|
.mailcontainer {
|
|
}
|
|
|
|
.mailcontainer .subject {
|
|
font-family: var(--spfont1, Pixio);
|
|
margin: 2px 2px 0px 2px;
|
|
background: var(--mail-subject-bg, #b7b7b7);
|
|
border: var(--mail-subject-border, 1px solid #8a8a8a);
|
|
padding: 2px;
|
|
}
|
|
|
|
.mailcontainer .subject img,
|
|
.mailcontainer .trade-icon {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.mailcontainer .sub {
|
|
margin: 0px 8px;
|
|
background: var(--mail-sub-bg, #cecece);
|
|
border: var(--mail-sub-border, 1px solid #a8a8a8);
|
|
border-top: none;
|
|
padding: 2px 8px;
|
|
}
|
|
|
|
.mailcontainer .content {
|
|
background: var(--mail-content-bg, #dbdbdb);
|
|
border: var(--mail-content-border, 1px solid #959595);
|
|
border-top: none;
|
|
margin: 0px 16px;
|
|
padding: 8px 4px 4px 4px;
|
|
}
|
|
|
|
.mailcontainer .buttonbar {
|
|
display: flex;
|
|
border-top: var(--mail-content-border, 1px solid #959595);
|
|
background: var(--mail-buttonbar, #cacaca);
|
|
margin: 4px -4px -4px -4px;
|
|
}
|
|
|
|
.mailcontainer .buttonbar .date {
|
|
flex-grow: 1;
|
|
font-family: var(--spfont1, Pixio);
|
|
padding: 4px;
|
|
color: var(--subtitle, #525252);
|
|
}
|
|
|
|
.rating .star-container .stars {
|
|
background: url('//assets.worlio.com/style/icons/ratings/star');
|
|
height: 100%;
|
|
background-size: auto 100%;
|
|
max-width: 100%;
|
|
}
|
|
.rating .star-container {
|
|
background-image: url('//assets.worlio.com/style/icons/ratings/unstar');
|
|
background-size: 20% 100%;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.rating.large {
|
|
height: 48px;
|
|
display: inline-block;
|
|
}
|
|
.rating.large .star-container {
|
|
width: 240px;
|
|
}
|
|
|
|
.rating.medium {
|
|
height: 24px;
|
|
display: inline-block;
|
|
}
|
|
.rating.medium .star-container {
|
|
width: 120px;
|
|
}
|
|
|
|
.rating.small {
|
|
height: 12px;
|
|
display: inline-block;
|
|
}
|
|
.rating.small .star-container {
|
|
width: 60px;
|
|
}
|
|
|
|
.tabbed-container > .tablist > .tab > .tab-close {
|
|
display: inline-block;
|
|
width: 16px; height: 16px;
|
|
margin-left: 4px;
|
|
background-image: url('//assets.worlio.com/style/icons/close');
|
|
background-size: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
body.forum .main { display: flex; margin: 4px; gap: 4px; }
|
|
@media only screen and (orientation: portrait) {
|
|
body.forum .main { flex-direction: column; }
|
|
}
|
|
@media only screen and (orientation: landscape) {
|
|
body.forum .sidebar {
|
|
width: 512px;
|
|
}
|
|
}
|
|
|
|
body.forum .main .forum {
|
|
flex-grow: 1;
|
|
}
|
|
body.forum .sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 4px;
|
|
gap: 4px;
|
|
margin-top: 8px;
|
|
}
|
|
body.forum .sidebar .box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
body.forum .sidebar .box .content {
|
|
background: var(--menu-bg);
|
|
border: var(--menu-border);
|
|
padding: 4px;
|
|
border-top: 0;
|
|
}
|
|
|
|
body.forum .sidebar .box .content .subject {font-family: var(--spfont1);}
|
|
body.forum .sidebar .box name {
|
|
background: var(--post-author);
|
|
border: var(--post-author-border);
|
|
font-family: var(--spfont1);
|
|
font-weight: bold;
|
|
padding: 4px;
|
|
}
|
|
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:hover, .button.selected {
|
|
background: var(--hover-button-background);
|
|
border: var(--hover-button-border);
|
|
}
|
|
|
|
.button:active {
|
|
background: var(--active-button-background);
|
|
border: var(--active-button-border);
|
|
}
|
|
|
|
.button.disabled, .longbutton.disabled, .smallbutton.disabled {
|
|
background: var(--disabled-button-background);
|
|
border: var(--disabled-button-border);
|
|
}
|
|
|
|
/* DASHBOARD / HOME */
|
|
@media (orientation: portrait) {
|
|
body.dashboard .dash-container {
|
|
flex-direction: column-reverse;
|
|
}
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
body.dashboard .dash-container {
|
|
flex-direction: row;
|
|
}
|
|
|
|
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) {
|
|
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;
|
|
}
|