worlio-themes/core/style.css

1768 lines
36 KiB
CSS
Raw Normal View History

2023-06-28 20:54:51 -04:00
/* == BUTTONS */ @import url('css/buttons.css');
/* = TABBED CONTAINERS */ @import url('css/tabbed-container.css');
2023-07-19 02:10:09 -04:00
/* = UserCards */ @import url('css/usercard.css');
2023-04-20 23:15:52 -04:00
2023-06-06 15:14:23 -04:00
/* Prevent automatic browser scaling and non-linear rendering */
.pixel,
nav,
.button,
.centerdiv,
.heading
{
2023-04-20 23:15:52 -04:00
image-rendering: crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
}
2023-06-06 15:14:23 -04:00
/* Remove Scrollbars */
.no-scroll,
nav
{
2023-04-21 20:39:19 -04:00
scrollbar-width: none;
-ms-overflow-style: none;
2023-04-20 23:15:52 -04:00
}
.no-scroll::-webkit-scrollbar,
nav::-webkit-scrollbar,
nav.top::-webkit-scrollbar {
2023-07-30 18:36:59 -04:00
display: none;
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
div.grower { flex-grow: 1; }
p img,
body > img {
max-width: 100%;
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
h1 img,
h2 img {
width: 32px;
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
table {
border-collapse: collapse;
width: 100%;
margin: 4px;
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
2023-06-27 18:57:44 -04:00
textarea {
resize: vertical;
width: 100%;
}
2023-06-06 15:14:23 -04:00
@media only screen and (orientation: landscape) {
:target::before {
content: "";
display: block;
height: 64px;
margin: -64px 0 0;
}
2023-06-06 15:38:01 -04:00
/* Center primary portion of page */
body > .page-container {
margin-left: auto;
margin-right: auto;
max-width: 1200px;
}
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
@media only screen and (orientation: portrait) {
:target::before {
content: "";
display: block;
height: 128px;
margin: -128px 0 0;
}
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
/* = STATUS */
.status.success, .output .success {color: var(--status-success);}
.status.error, .output .error {color: var(--status-error);}
2023-06-06 15:14:23 -04:00
/* = ARROW */
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;
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
hr.arrow.slideout { background-position: 0 0; }
hr.arrow.right { background-position: 100% 0; }
hr.arrow.up { background-position: 0 100%; }
hr.arrow.down { background-position: 100% 100%; }
/* = OVERLAY DIALOGS */
body > div.overlay {
position: fixed;
top: 0px; bottom: 0px; left: 0px; right: 0px;
z-index: 20;
background-color: #0006;
width: 100%;
height: 100%;
}
body > div.overlay .dialog {
background: linear-gradient(180deg, #ffffff 0%, #f3dca9 8px);
border: 1px outset #a48e65;
2023-06-20 19:48:21 -04:00
margin: 16px auto;
}
2023-06-21 03:23:45 -04:00
body > div.overlay .dialog.tiplist { max-width: 400px; max-height: 80%; }
body > div.overlay .dialog table {
width: 100%;
max-width: unset;
margin: 0px;
}
body > div.overlay .dialog table th, body > div.overlay .dialog table td { padding: 4px; }
body > div.overlay .dialog table.titlebox { font-family: var(--primary-font); }
body > div.overlay .dialog table.titlebox img.close-button {
cursor: pointer;
user-select: none;
}
body > div.overlay .dialog table tr th:nth-of-type(1) {
text-align: left;
}
body > div.overlay .dialog table:not(.titlebox) {
background: #b3b3b3;
border: 1px outset #636363;
display: block;
height: 400px;
overflow: auto;
}
2023-07-29 03:18:06 -04:00
/* = PAGE SELECTORS */
div.page-selector {
display: inline-flex;
margin: 2px;
2023-07-29 03:24:45 -04:00
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
2023-07-29 03:18:06 -04:00
}
div.page-selector div.pagebutton {
background: var(--default-button-background);
border: var(--default-button-border);
text-align: center;
2023-07-29 20:29:48 -04:00
padding: 0px;
2023-07-29 03:32:42 -04:00
min-width: 24px;
2023-07-29 03:18:06 -04:00
height: 24px;
}
div.page-selector div.pagebutton:hover {
background: var(--hover-button-background);
border: var(--hover-button-border);
}
div.page-selector div.pagebutton:active {
background: var(--active-button-background);
border: var(--active-button-border);
}
div.page-selector div.pagebutton.disabled {
background: var(--disabled-button-background);
border: var(--disabled-button-border);
}
div.page-selector div.pagebutton a,
div.page-selector div.pagebutton a:link,
div.page-selector div.pagebutton a:visited {
font-family: var(--primary-font);
font-size: 12px;
text-decoration: none;
color: var(--main-text);
2024-01-18 17:58:29 -05:00
display: inline-block;
width: 100%;
height: 100%;
2023-07-29 03:18:06 -04:00
}
div.page-selector div.pagebutton.curpage a,
div.page-selector div.pagebutton.curpage a:link,
div.page-selector div.pagebutton.curpage a:visited {
2023-07-29 03:24:45 -04:00
font-weight: bold;
2023-07-29 03:18:06 -04:00
color: var(--alert);
2023-07-29 03:24:45 -04:00
cursor: pointer;
2023-07-29 03:18:06 -04:00
}
div.page-selector div.pagebutton.backpage { border-right: none; }
div.page-selector div.pagebutton.forwpage { border-left: none; }
2023-06-06 15:14:23 -04:00
/* == MAIN BODY */
body {
background-color: var(--main-background);
background-image: var(--background-image);
color: var(--main-text, #000000);
margin: 8px;
position: absolute;
right: 0px;
bottom: 0px;
}
@media only screen and (orientation: landscape) {
body {
top: 0px;
left: 64px;
}
}
@media only screen and (orientation: portrait) {
body {
top: 64px;
left: 0px;
}
}
/* == NAVIGATION BARS */
nav {
background-color: var(--main-nav);
2023-04-26 18:57:59 -04:00
font-family: var(--primary-font);
2023-06-06 15:14:23 -04:00
position: fixed;
top: 0px;
left: 0px;
z-index: 10;
font-size: 14px;
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
body > div.navgap {
height: 34px;
}
nav .logo {
width: 48px;
padding: 0px;
2023-04-21 20:39:19 -04:00
margin: 2px;
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
/* = TOP BAR */
2023-04-20 23:15:52 -04:00
nav.top {
2023-08-01 20:59:46 -04:00
display: block;
2023-04-26 18:57:59 -04:00
background-image: var(--navbar-top);
2023-04-21 20:39:19 -04:00
background-position: 0px 100%;
2023-04-26 18:57:59 -04:00
background-color: var(--acc-nav);
2023-04-21 20:39:19 -04:00
background-repeat: repeat-x;
background-size: auto 64px;
position: fixed;
height: 36px;
padding: 0px;
z-index: 10;
white-space: nowrap;
2023-08-01 20:59:46 -04:00
flex-shrink: 1;
}
nav.top div.navcenter {
display: flex;
max-width: 1200px;
2023-09-06 17:55:28 -04:00
height: 36px;
2023-08-01 20:59:46 -04:00
margin: auto;
overflow: visible;
2023-08-02 01:03:19 -04:00
border-right: var(--acc-nav-separator);
2023-04-21 20:39:19 -04:00
}
2023-04-26 18:57:59 -04:00
nav.top .navbutton-bar {
padding-left: 4px;
overflow-x: scroll;
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout {
2023-04-21 20:39:19 -04:00
position: relative;
height: 32px;
z-index: 3;
2023-04-26 18:57:59 -04:00
margin: 2px;
2023-04-21 20:39:19 -04:00
transition-duration: 0.05s;
2023-04-23 22:26:03 -04:00
flex-shrink: 0;
2023-04-21 20:39:19 -04:00
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout:not(.active) {
2023-04-21 20:39:19 -04:00
cursor: pointer;
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout.active {
2023-04-21 20:39:19 -04:00
width: 264px;
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout .upbutton img { margin: 4px 8px; }
nav.top div.slideout .dropdown {
2023-04-26 18:57:59 -04:00
font-family: var(--primary-font);
2024-01-22 11:00:38 -05:00
background: var(--navbar-bg), linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, var(--acc-nav) 8px);
2023-04-21 20:39:19 -04:00
background-position: 0 0, 0px 100%;
2023-04-26 18:57:59 -04:00
background-color: var(--acc-nav);
2023-04-21 20:39:19 -04:00
background-repeat: repeat, repeat-x;
background-size: auto auto, auto 64px;
2023-04-26 18:57:59 -04:00
border: var(--acc-nav-separator);
border-top: none;
2023-04-21 20:39:19 -04:00
overflow: hidden;
width: 100%;
height: 32px;
position: relative;
z-index: 2;
2023-05-11 21:34:23 -04:00
padding: 1px 3px;
2023-04-21 20:39:19 -04:00
white-space: nowrap;
transition-duration: 0.05s;
}
2023-04-26 18:57:59 -04:00
nav.top div.slideout.account .dropdown {
margin: -2px -4px;
}
2023-04-21 20:39:19 -04:00
2023-04-23 22:26:03 -04:00
nav.top div.slideout:not(.active):hover .dropdown {
2024-01-22 11:00:38 -05:00
background: var(--navbar-bg), linear-gradient(0deg, var(--acc-nav) 0%, rgba(0,0,0,0.05) 8px);
2023-04-21 20:39:19 -04:00
}
2023-04-26 18:57:59 -04:00
nav.top div.slideout .dropdown .clicker {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
2023-07-30 18:36:59 -04:00
height: 34px;
2023-04-26 18:57:59 -04:00
}
2023-06-22 18:38:44 -04:00
nav.top div.slideout.account .panel {
display: flex;
2023-10-13 00:08:29 -04:00
flex-direction: column;
2023-06-22 18:38:44 -04:00
}
nav.top div.slideout.account .panel .user-column,
nav.top div.slideout.account .panel .button-column {
2023-10-13 00:08:29 -04:00
display: block;
height: 50%;
2023-04-26 18:57:59 -04:00
}
2023-06-22 18:42:35 -04:00
nav.top div.slideout.account .panel .user-column .avatar {
2023-04-26 18:57:59 -04:00
flex-shrink: 0;
2023-04-27 02:16:32 -04:00
background: var(--primary-container-background);
border: var(--primary-container-border);
2023-04-26 18:57:59 -04:00
}
2023-06-22 18:42:35 -04:00
nav.top div.slideout.account .panel .user-column .ninfo {
2023-04-26 18:57:59 -04:00
flex-grow: 1;
}
nav.top div.slideout.account.active .dropdown { height: 212px; }
2023-04-23 22:26:03 -04:00
nav.top.guest div.slideout.account.active .dropdown { height: 112px; }
nav.top div.slideout.mail.active .dropdown,
nav.top div.slideout.alerts.active .dropdown { height: 352px; }
2023-04-21 20:39:19 -04:00
2023-04-23 22:26:03 -04:00
nav.top div.slideout .dropdown .right {
2023-04-21 20:39:19 -04:00
pointer-events: none;
display: none;
opacity: 0;
float: right;
transition-duration: 1s;
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout.active .dropdown .right {
2023-04-21 20:39:19 -04:00
pointer-events: unset;
display: block;
opacity: 1;
}
2023-07-30 18:36:59 -04:00
nav.top div.slideout .dropdown .right.text {
margin: 8px;
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout.alerts .dropdown .alerts,
nav.top div.slideout.mail .dropdown .mail {
text-align: left;
2023-04-21 20:39:19 -04:00
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;
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout.alerts .dropdown .alerts .alert,
nav.top div.slideout.mail .dropdown .mail .message {
2023-04-21 20:39:19 -04:00
margin: 4px;
2023-04-26 18:57:59 -04:00
font-family: var(--primary-font);
2023-04-27 02:16:32 -04:00
background-color: var(--primary-container-background);
border: var(--primary-container-border);
2023-04-21 20:39:19 -04:00
padding: 4px;
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout.alerts .dropdown .alerts .alert.unread,
nav.top div.slideout.mail .dropdown .mail .message.unread {
2023-04-21 20:39:19 -04:00
background-color: #d0dadf;
outline: 1px solid #0088ff;
}
2023-07-30 17:33:59 -04:00
nav.top div.slideout.alerts.active .dropdown .clicker img,
nav.top div.slideout.mail.active .dropdown .clicker img {
float: left;
vertical-align: middle;
2023-07-30 18:40:43 -04:00
margin: 2px 4px;
2023-07-30 17:33:59 -04:00
}
nav.top div.slideout.alerts.active .dropdown .clicker .counter,
nav.top div.slideout.mail.active .dropdown .clicker .counter {
display: inline-block;
text-align: left;
2023-07-30 18:40:43 -04:00
width: 162px;
margin-top: 6px;
2023-07-30 17:33:59 -04:00
}
2023-04-21 20:39:19 -04:00
2023-04-23 22:26:03 -04:00
nav.top div.slideout.alerts .dropdown .alerts .alert a,
nav.top div.slideout.mail .dropdown .mail .message a {
2023-04-21 20:39:19 -04:00
text-decoration: underline;
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout.alerts .dropdown .alerts .alert .info,
nav.top div.slideout.mail .dropdown .mail .message .info {
2023-04-21 20:39:19 -04:00
display: flex;
color: var(--subtitle);
font-size: 12px;
2023-04-20 23:15:52 -04:00
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout.account { width: 132px; }
2023-10-13 00:08:29 -04:00
nav.top div.slideout.account.active { width: 256px; }
2023-04-23 22:26:03 -04:00
nav.top div.slideout.mail,nav.top div.slideout.alerts {
display: block;
width: 32px;
margin: 0px 2px;
text-align: center;
2023-04-20 23:15:52 -04:00
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout.active.mail,nav.top div.slideout.active.alerts { width: 262px; }
nav.top div.slideout.mail .dropdown,nav.top div.slideout.alerts .dropdown {
padding: 1px;
2023-04-20 23:15:52 -04:00
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout.mail .counter,nav.top div.slideout.alerts .counter {
margin-top: -8px;
display: block;
}
nav.top div.slideout.mail .counter.new,nav.top div.slideout.alerts .counter.new {
color: var(--alert);
2023-04-20 23:15:52 -04:00
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout.account .username {
2023-04-21 20:39:19 -04:00
display: block;
height: 38px;
margin: -1px;
2023-04-20 23:15:52 -04:00
}
2023-04-26 18:57:59 -04:00
nav.top div.slideout.account .dropdown .mycon {
2023-05-13 03:29:58 -04:00
margin: 2px 4px 0px 0px;
2023-04-20 23:15:52 -04:00
}
2023-04-26 18:57:59 -04:00
nav.top div.slideout.account .dropdown .username .currency {
2023-04-21 20:39:19 -04:00
height: 16px;
2023-04-20 23:15:52 -04:00
}
2023-04-26 18:57:59 -04:00
nav.top div.slideout.account .dropdown .username .currency img {
2023-04-21 20:39:19 -04:00
height: 100%;
margin: 0px 1px;
padding: 0px 2px;
2023-04-26 18:57:59 -04:00
vertical-align: center;
2023-04-20 23:15:52 -04:00
}
2023-04-26 18:57:59 -04:00
nav.top div.slideout.account .dropdown .username .currency a {
color: var(--currency);
2023-04-20 23:15:52 -04:00
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout .dropdown .username .userlink {
2023-04-21 20:39:19 -04:00
margin: 0px;
2023-04-20 23:15:52 -04:00
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout .username .arrow {
2023-04-21 20:39:19 -04:00
position: relative;
opacity: 0.3;
float: right;
margin: 2px auto !important;
width: 16px !important;
height: 16px !important;
2023-04-20 23:15:52 -04:00
}
2023-04-23 22:26:03 -04:00
nav.top div.slideout .username .user-icon {
2023-04-21 20:39:19 -04:00
vertical-align: top;
2023-04-20 23:15:52 -04:00
}
2023-04-23 22:26:03 -04:00
nav.acc .slideout.active .dropdown .currency a[type="short"] { display: none; }
2023-04-20 23:15:52 -04:00
nav.acc .dropdown .currency a[type="extended"] { display: none; }
2023-04-23 22:26:03 -04:00
nav.acc .slideout.active .dropdown .currency a[type="extended"] { display: unset; }
2023-04-20 23:15:52 -04:00
nav.top p {
margin: 0px;
text-align: center;
}
nav.top.alert {
2023-04-26 18:57:59 -04:00
background-color: var(--dialog-bg);
2023-04-21 20:39:19 -04:00
height: unset;
min-height: 28px;
max-height: 64px;
padding: 2px;
overflow: auto;
z-index: 5;
2023-04-20 23:15:52 -04:00
}
nav.top.alert .close {
2023-04-21 20:39:19 -04:00
background-image: url('//style.worlio.com/icons/close');
background-size: 100%;
width: 16px;
height: 16px;
padding: 4px;
cursor: pointer;
margin-right: 8px;
float: left;
2023-04-20 23:15:52 -04:00
}
nav.top.alert p {
2023-04-21 20:39:19 -04:00
text-align: unset;
white-space: pre-line;
2023-04-20 23:15:52 -04:00
}
2023-08-25 00:40:50 -04:00
/* Felt cute, might delete later. */
nav.top .navbutton-bar .button {
background-color: var(--active-button-background);
border-bottom: none;
width: unset;
margin-top: 2px;
padding: 6px;
2023-08-25 00:40:50 -04:00
}
nav.top .navbutton-bar .button:hover {
background-color: var(--hover-button-background);
}
nav.top .navbutton-bar .button.selected {
background-image: var(--background-image);
2023-08-25 00:40:50 -04:00
background-color: var(--default-button-background);
}
2023-06-06 15:14:23 -04:00
@media only screen and (orientation: landscape) {
nav {
width: 60px;
padding: 0px 2px;
background-image: var(--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;
}
nav .popbutton.selected:not(:hover) {
background-image: var(--background-image);
background-color: var(--default-button-background);
border-right: none;
width: 56px;
font-size: 0px;
}
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
@media only screen and (orientation: portrait) {
nav {
background-image: var(--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-x: unset;
overflow-y: 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;
}
nav.top div.slideout.account { width: 32px; }
nav.top div.slideout.account:not(.active) .dropdown .username *:not(.mycon) { display: none; }
nav.top div.slideout.account:not(.active) .dropdown .username .mycon { margin: 2px; }
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
/* == HEADING/HEADER */
2023-04-20 23:15:52 -04:00
2023-06-06 15:14:23 -04:00
.header {
display: flex;
margin-bottom: 8px;
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
.header > .gap { flex-grow: 1;}
2023-04-20 23:15:52 -04:00
2023-06-06 15:14:23 -04:00
.header > .title {
border: var(--primary-container-border);
border-top: none;
flex-shrink: 0; flex-grow: 0;
background-color: var(--primary-container-background);
padding: 8px;
font-family: var(--primary-font);
font-weight: bold;
margin: -8px 4px 8px 4px;
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
.tabbed-container > .header {
margin-bottom: 0;
margin-top: -8px;
padding-top: 8px;
2023-04-20 23:15:52 -04:00
}
.heading {
2023-04-21 20:39:19 -04:00
z-index: 10;
display: block;
2023-04-20 23:15:52 -04:00
background-repeat: repeat-x;
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
2023-04-21 20:39:19 -04:00
border: none;
2023-04-26 18:57:59 -04:00
font-family: var(--primary-font);
2023-04-20 23:15:52 -04:00
}
2023-06-30 22:39:52 -04:00
.heading > div.head-contents {
max-width: 1200px;
margin-left: auto; margin-right: auto;
}
2023-04-20 23:15:52 -04:00
.heading.main {
2023-04-21 20:39:19 -04:00
position: sticky;
2023-04-20 23:15:52 -04:00
background-size: 64px;
height: 60px;
}
.heading {
2023-04-26 18:57:59 -04:00
background-color: var(--header-bg);
background-image: var(--navbar-top);
2023-04-20 23:15:52 -04:00
}
.heading.sub,
.heading.section {
2023-04-21 20:39:19 -04:00
height: 28px;
2023-04-20 23:15:52 -04:00
}
.heading.sub {
background-size: 64px;
background-position-y: -32px;
}
.heading.section {
background-size: 32px;
2023-04-26 18:57:59 -04:00
background-image: var(--nav-db);
background-color: var(--header-bg);
2023-04-20 23:15:52 -04:00
font-size: 1.5em;
}
2023-06-30 22:39:52 -04:00
.heading.main > div.head-contents > a {
font-size: 2em;
2023-04-20 23:15:52 -04:00
}
2023-06-30 22:39:52 -04:00
.heading > div.head-contents > a {
2023-04-21 20:39:19 -04:00
margin: 0px 0px 0px 4px;
2023-04-20 23:15:52 -04:00
display: inline-block;
font-weight: bold;
height: 100%;
}
.heading p {
font-size: 0.75em;
display: inline-block;
}
.heading.main img {
height: 48px;
}
.heading.main i {
margin-left: 16px;
font-weight: normal;
font-size: 1.5em !important;
}
.heading hr {
margin: 0px 8px;
border: none;
2023-04-26 18:57:59 -04:00
border-left: var(--header-line);
2023-04-20 23:15:52 -04:00
width: 0px;
display: inline-block;
height: 75%;
}
2023-06-08 13:54:17 -04:00
.header div.buttontab {
2023-07-30 18:36:59 -04:00
background: var(--default-button-background);
border: var(--default-button-border);
margin: -12px 4px 8px 4px;
padding: 8px 4px 2px 4px;
font-size: 12px;
2023-06-08 13:54:17 -04:00
}
.header div.buttontab a {
2023-07-30 18:36:59 -04:00
color: var(--main-text);
display: inline-block;
text-decoration: none;
font-family: var(--primary-font);
height: 100%;
2023-06-08 13:54:17 -04:00
}
.header div.buttontab a img {
2023-07-30 18:36:59 -04:00
vertical-align: middle;
2023-06-08 13:54:17 -04:00
}
.header div.buttontab:hover {
2023-07-30 18:36:59 -04:00
background: var(--hover-button-background);
border: var(--hover-button-border);
2023-06-08 13:54:17 -04:00
}
.header div.buttontab:active {
2023-07-30 18:36:59 -04:00
background: var(--active-button-background);
border: var(--active-button-border);
2023-06-08 13:54:17 -04:00
}
2023-06-06 15:14:23 -04:00
@media only screen and (orientation: landscape) {
.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; }
body > .header-title {
top: -8px;
margin-bottom: -8px;
}
2023-06-06 17:36:34 -04:00
/* Center header */
body > .header {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
2023-04-20 23:15:52 -04:00
}
2023-06-06 15:14:23 -04:00
@media only screen and (orientation: portrait) {
.heading {
margin: -8px;
margin-top: -16px;
margin-bottom: 8px;
padding: 2px 0px;
width: 100%;
left: 0px;
}
2023-04-20 23:15:52 -04:00
2023-06-06 15:14:23 -04:00
.heading.main {
top: 64px;
}
.heading.sub {
top: 128px;
}
body > .header-title {
top: -16px;
margin-bottom: -16px;
}
2023-04-20 23:15:52 -04:00
}
/* == ACCFORM PAGES */
body.accform .page-container .formpart {
max-width: 400px;
margin: 32px;
text-align: center;
}
body.accform .page-container .formpart hr {
border: 1px inset rgba(0,0,0,0.5);
}
body.accform .page-container .formpart .assets,
body.accform .page-container .formpart .accinput {
flex-grow: 1;
padding: 8px;
}
body.accform .options .option { display: flex; }
body.accform .options .option .name {
font-family: var(--primary-font);
flex-shrink: 0;
flex-grow: 1;
text-align: right;
padding: 2px;
}
body.accform .options .option input,
body.accform .options .option select,
body.accform .options .option textarea, {
flex-grow: 0;
}
body.accform .page-container .formpart h2 {
font-family: var(--spfont1);
}
body.accform .page-container .formpart .error {
color: var(--error);
}
body.accform .page-container .formpart .buttonbar {
display: flex;
}
body.accform img.bg-icon-overlay {
position: absolute;
bottom: 0; right: 0;
width: 50vh; height: 50vh;
/* width: 100vh; height: 100vh; */
opacity: 0.25;
z-index: -100;
}
body.accform ul.errors {
text-align: left;
color: red;
}
2023-06-06 15:14:23 -04:00
/* == HOME PAGE */
2023-07-16 23:25:47 -04:00
@media (orientation: portrait) {
body.home .page-container {
display: flex;
2023-07-17 00:44:02 -04:00
flex-direction: column;
2023-07-16 23:25:47 -04:00
}
body.home .page-container .section {
width: 100%;
margin: 0px 4px;
}
}
2023-06-06 15:14:23 -04:00
2023-07-16 23:25:47 -04:00
@media (orientation: landscape) {
2023-07-17 00:44:02 -04:00
body.home .page-container .section { width: 50%; margin: 0px -2px; }
2023-07-16 23:25:47 -04:00
body.home .page-container .section .container { padding: 4px; }
}
2023-07-17 00:37:01 -04:00
body.home .logo img {
2023-06-06 15:14:23 -04:00
max-height: 256px;
max-width: 100%;
2023-04-20 23:15:52 -04:00
}
2023-07-17 00:37:01 -04:00
body.home .logo .slogan {
2023-06-06 15:14:23 -04:00
font-family: var(--primary-font);
font-weight: bold;
font-size: 24px;
2023-04-21 20:39:19 -04:00
text-align: center;
2023-06-06 15:14:23 -04:00
}
2023-07-16 23:25:47 -04:00
body.home .page-container .section .mainbox {
background: var(--primary-container-background);
border: var(--primary-container-border);
padding: 2px;
2023-06-06 15:14:23 -04:00
}
2023-07-16 23:25:47 -04:00
body.home .page-container .section {
display: inline-block;
vertical-align: top;
2023-06-06 15:14:23 -04:00
}
2023-07-16 23:25:47 -04:00
body.home .page-container .section .container {
margin: 8px 0px;
2023-06-06 15:14:23 -04:00
}
2023-07-16 23:25:47 -04:00
body.home .page-container .section .container .title {
2023-06-06 15:14:23 -04:00
border: var(--primary-container-border);
2023-07-16 23:25:47 -04:00
border-bottom: none;
background: var(--primary-container-background);
display: inline-block;
padding: 8px;
font-weight: bold;
font-family: var(--primary-font);
margin-bottom: -2px;
2023-06-06 15:14:23 -04:00
}
2023-04-20 23:15:52 -04:00
2023-07-16 23:25:47 -04:00
body.home .page-container .footer {
display: flex;
}
2023-07-17 00:44:02 -04:00
2023-06-30 22:39:52 -04:00
/* == BLOG */
body.blog .page-container .month {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
body.blog .page-container .article {
background: var(--primary-container-background);
border: var(--primary-container-border);
margin: 4px;
}
body.blog .page-container .article .date,
body.blog .page-container .article .link { padding: 4px; }
body.blog .page-container .article .date { text-align: right; }
body.blog .page-container .article .link { font-weight: bold; }
2023-06-06 15:14:23 -04:00
/* == LIBRARY */
/* == DASHBOARD */
@media (orientation: portrait) {
body.dashboard .dash-container {
display: flex;
flex-direction: column-reverse;
}
body.dashboard .section {
width: 100%;
margin: 0px 4px;
}
}
@media (orientation: landscape) {
body.dashboard .dash-container {
max-width: 1000px;
margin: auto;
}
body.dashboard .section { margin: 0px -2px; }
body.dashboard .section .container { padding: 4px; }
body.dashboard .primary { width: 60%; }
body.dashboard .sidebar { width: 40%; }
}
body.dashboard .dash-container .mainbox {
background: var(--primary-container-background);
border: var(--primary-container-border);
padding: 2px;
}
body.dashboard .profile-tag {
font-family: var(--primary-font);
display: flex;
}
body.dashboard .profile-tag img {
2023-07-30 18:36:59 -04:00
padding: 4px;
}
body.dashboard .section {
display: inline-block;
vertical-align: top;
}
body.dashboard .section .container {
margin: 8px 0px;
}
body.dashboard .dash-title {
border: var(--primary-container-border);
border-bottom: none;
background: var(--primary-container-background);
display: inline-block;
padding: 8px;
font-weight: bold;
font-family: var(--primary-font);
margin-bottom: -2px;
}
body.dashboard .dash-title.ulink { padding: 3px 3px 4px 3px; }
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 {
2023-07-30 18:36:59 -04:00
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(--primary-font);
font-size: 20px;
}
body.dashboard .stats .currency { color: var(--currency); }
body.dashboard .stats .unread { color: var(--alert); }
body.dashboard .userlink img.plan-icon {
position: relative;
margin: 0px 0px 0px -4px;
top: -2px;
}
body.dashboard .dash-container .primary .mainbox .alert {
padding: 4px;
margin: 4px;
background: var(--secondary-container-background);
border: var(--secondary-container-border);
border-style: inset;
}
body.dashboard .dash-container .primary .mainbox .alert.unread .content {
font-weight: bold;
}
body.dashboard .dash-container .primary .mainbox .alert .info {
text-align: right;
color: var(--subtitle);
font-family: var(--primary-font);
}
body.dashboard .dash-container .blogpost {
padding: 4px;
}
body.dashboard .dash-container .blogpost .info {
color: var(--subtitle);
font-family: var(--primary-font);
}
body.dashboard .dash-container .sidebar .container div.filespace meter { flex-grow: 1; margin: 0px 4px;}
body.dashboard .dash-container .sidebar .container div.filespace b { margin-right: 4px;}
body.dashboard .dash-container .sidebar .container div.filespace { display: flex; }
body.dashboard .dash-container .sidebar .container div.filespace a { font-family: var(--primary-font); margin: 0px 2px; }
body.dashboard .dash-container .container.lstann { font-family: var(--primary-font); }
/* == MAIL */
body.mail .page-container table tr:nth-of-type(even) {
background: var(--mail-content-bg);
}
2024-01-13 18:05:22 -05:00
body.message .box {
padding: 0px;
margin: 0px;
}
body.message .box table {
border-collapse: separate;
margin: 0px;
}
body.message .box table th {
text-align: left;
}
body.message .box table tr.title-row {
font-size: 20px;
position: sticky;
top: 0px;
}
body.message .box table tr.title-row th {
background: var(--forum-sub);
border: var(--forum-sub-border);
}
body.message .box table tr.header-row {
background: var(--post);
border-left: var(--post-border); border-right: var(--post-border);
}
body.message .box table:first-of-type(tr.header_row) {
border-top: var(--post-border);
}
body.message .box table:last-of-type(tr.header_row) {
border-bottom: var(--post-border);
}
/* == FORUM */
body.forum table.board-display {
background: var(--forum-header);
border: var(--forum-header-border);
font-family: var(--primary-font);
2023-06-09 04:32:04 -04:00
table-layout: fixed;
}
2023-06-21 17:11:30 -04:00
body.forum table.board-display tr.sub-row {
background: var(--forum-sub);
border: var(--forum-sub-border);
}
body.forum table.board-display th,
body.forum table.board-display td {
padding: 4px;
}
body.forum.index .page-container > table.board-display tr.title-row {
-webkit-user-select: none;
-moz-user-select: none;
2023-07-30 18:36:59 -04:00
-ms-user-select: none;
user-select: none;
cursor: pointer;
}
body.forum table.board-display tr.title-row .button { vertical-align: top; }
2023-06-21 17:12:38 -04:00
body.forum table.board-display tr:not(.title-row):not(.sub-row) {
background: var(--forum-content);
border: var(--forum-content-border);
}
body.forum table.board-display.collapsed tr:not(.title-row) {
2023-06-08 20:14:15 -04:00
display: none;
}
2023-06-06 15:14:23 -04:00
body.forum table.board-display tr td.counter-cell a img {
2023-06-08 22:55:08 -04:00
vertical-align: middle;
}
2023-04-20 23:15:52 -04:00
2023-06-08 23:04:11 -04:00
body.forum table.board-display .thread-status {
text-align: right;
2023-06-08 23:23:44 -04:00
position: relative;
height: 0px;
2023-06-08 23:34:10 -04:00
top: -16px;
2023-06-08 23:23:44 -04:00
left: 4px;
2023-06-08 23:04:11 -04:00
}
body.forum table tr.ralign th:last-child,
body.forum table tr.ralign td:last-child {
2023-06-09 02:57:53 -04:00
text-align: right;
}
2023-06-11 21:15:52 -04:00
2023-06-09 02:57:53 -04:00
body.forum table.board-display tr th:nth-of-type(2) {
text-align: left;
}
body.forum.thread table.board-display {
position: sticky;
}
2023-06-09 02:52:04 -04:00
body.forum.thread table.post-display {
background: var(--post);
border: var(--post-border);
margin: 8px 0px;
2023-06-09 04:32:04 -04:00
table-layout: fixed;
2023-06-09 02:52:04 -04:00
}
2023-06-09 21:51:47 -04:00
body.forum.thread table.post-display td.author-cell,
body.forum.thread table.post-display tr.author-row {
background-image: var(--usercard-image);
background-color: var(--usercard-color, var(--post-author));
2023-06-09 02:52:04 -04:00
border: var(--post-author-border);
2023-06-09 21:51:47 -04:00
}
body.forum.thread table.post-display td.author-cell {
2023-06-09 02:52:04 -04:00
vertical-align: top;
text-align: center;
}
2023-06-09 21:51:47 -04:00
body.forum.thread table.post-display td.author-cell img.avatar {
display: inline-block;
}
2023-06-09 02:52:04 -04:00
body.forum.thread table.post-display tr.button-row,
body.forum.thread table.post-display tr.info-row {
background: var(--post-bottombar);
font-family: var(--primary-font);
color: var(--subtitle);
2023-06-09 03:09:07 -04:00
height: 28px;
2023-06-09 02:52:04 -04:00
}
2023-08-23 17:54:39 -04:00
body.forum.thread table.post-display tr.author-row {
font-family: var(--primary-font);
color: var(--subtitle);
}
2023-06-09 02:52:04 -04:00
body.forum.thread table.post-display td { padding: 4px; }
body.forum.thread table.post-display tr.button-row td:nth-of-type(2) a {
padding: 8px;
}
2023-06-09 03:14:38 -04:00
body.forum.thread table.post-display tr.body-row td { vertical-align: top; }
2023-06-09 03:09:07 -04:00
body.forum.thread table.post-display tr.body-row td * {
max-width: 100%;
}
2023-04-20 23:15:52 -04:00
2023-06-09 04:27:33 -04:00
body.forum.thread table.post-display .author-cell { width: 168px; }
body.forum.thread table.post-display tr td:nth-of-type(3) { width: 168px; }
2024-01-17 14:30:04 -05:00
body.forum.thread table.poll-display {
background: var(--forum-sub);
border: var(--forum-sub-border);
text-align: left;
}
body.forum.thread table.poll-display tr th,
body.forum.thread table.poll-display tr td { padding: 2px; }
body.forum.thread table.poll-display tr td.bar {
2024-01-22 13:02:34 -05:00
background: linear-gradient(0deg, var(--poll-bar-color) 0%, var(--direct) 75%, var(--poll-bar-color) 100%);
background-size: var(--poll-bar-width) 100%;
color: var(--poll-bar-text);
2024-01-17 14:30:04 -05:00
background-repeat: no-repeat;
}
2024-01-17 14:33:46 -05:00
body.forum.thread table.poll-display tr td.bar.p1st { --poll-bar-color: var(--poll-first-bar); }
body.forum.thread table.poll-display tr td.bar.p2nd { --poll-bar-color: var(--poll-second-bar); }
body.forum.thread table.poll-display tr td.bar.p3rd { --poll-bar-color: var(--poll-third-bar); }
2024-01-17 14:30:04 -05:00
body.forum.thread table.poll-display tr:not(.title-row) {
background: var(--post);
border: var(--post-border);
}
body.forum.thread table.poll-display tr.title-row {
font-family: var(--primary-font);
}
body.forum.thread table.poll-display tr td.ralign { text-align: right; }
body.forum.thread table.poll-display tr.title-row th:nth-of-type(2) button {
background: none;
border: none;
text-decoration: underline;
color: #0000ff;
font-size: 16px;
vertical-align: middle;
cursor: pointer;
}
2023-06-09 21:20:11 -04:00
body.forum.thread table.reply-display {
background: var(--forum-sub);
border: var(--forum-sub-border);
}
body.forum.thread table.reply-display tr th,
body.forum.thread table.reply-display tr td { padding: 2px; }
body.forum.thread table.reply-display tr:not(.title-row) {
background: var(--post);
border: var(--post-border);
}
body.forum.thread table.reply-display tr.title-row th:nth-of-type(1) { text-align: left; }
2023-07-18 21:04:46 -04:00
body.forum.thread table.reply-display tr td:nth-of-type(2) { text-align: right; }
2023-06-09 21:20:11 -04:00
body.forum.thread table.reply-display tr.title-row {
font-family: var(--primary-font);
}
body.forum.thread table.reply-display tr.title-row th:nth-of-type(2) button {
background: none;
border: none;
text-decoration: underline;
color: #0000ff;
font-size: 16px;
vertical-align: middle;
cursor: pointer;
}
2023-06-11 21:15:52 -04:00
body.forum.new table.board-display tr.title-row input {
width: 100%;
margin: -4px;
2023-06-11 21:15:52 -04:00
}
2023-06-09 21:51:47 -04:00
@media only screen and (orientation: landscape) {
body.forum.index .page-container .newest {
display: flex;
}
body.forum.thread table.board-display {
top: -24px;
}
2023-07-18 18:53:58 -04:00
body.forum.thread table.board-display colgroup col:nth-of-type(4),
2023-06-09 21:51:47 -04:00
body.forum.thread table.post-display tr.author-row {
display: none;
}
}
2023-06-09 04:27:33 -04:00
2023-06-09 21:51:47 -04:00
@media only screen and (orientation: portrait) {
body.forum.index .page-container > table.board-display tr td:nth-of-type(4),
body.forum.index .page-container > table.board-display tr th:nth-of-type(2),
body.forum.index .page-container > table.board-display colgroup col:nth-of-type(4),
body.forum.board table.board-display tr td:nth-of-type(4),
2023-06-21 17:06:46 -04:00
body.forum.board table.board-display tr.sub-row td:nth-of-type(2),
2023-07-18 18:53:58 -04:00
body.forum.board table.board-display tr th:nth-of-type(2),
body.forum.board table.board-display colgroup col:nth-of-type(5),
2023-07-18 18:53:58 -04:00
body.forum.thread table.board-display colgroup col:nth-of-type(3),
2023-08-23 16:38:47 -04:00
body.forum.thread table.post-display colgroup col:nth-of-type(3),
body.forum.thread table.post-display colgroup col:nth-of-type(4),
body.forum.thread table.post-display td.author-cell,
body.forum.watched table.board-display tr td:nth-of-type(4),
body.forum.watched table.board-display tr th:nth-of-type(3),
body.forum.watched table.board-display colgroup col:nth-of-type(5),
body.forum.newest table.board-display tr td:nth-of-type(4),
body.forum.newest table.board-display tr th:nth-of-type(3),
body.forum.newest table.board-display colgroup col:nth-of-type(5) { display: none; }
2023-06-09 22:37:46 -04:00
body.forum.thread table.board-display {
top: 40px;
}
2023-08-23 16:38:47 -04:00
body.forum.thread table.post-display tr.author-row {
text-align: left;
vertical-align: top;
2023-06-09 21:51:47 -04:00
}
}
2023-06-09 04:27:33 -04:00
2023-06-28 18:24:48 -04:00
/* == USER PAGE */
body.userpage iframe#profile {
display: block;
position: absolute;
border: none;
margin: 0px;
top: 28px; right: 0px; bottom: 0px; left: -8px;
width: calc(100% + 16px);
height: calc(100% - 20px);
}
@media only screen and (orientation: landscape) {
}
@media only screen and (orientation: portrait) {
}
2023-04-20 23:15:52 -04:00
2023-04-20 23:15:52 -04:00
heading .button {
2023-04-21 20:39:19 -04:00
display: inline-block !important;
2023-04-20 23:15:52 -04:00
}
.file-table {
2023-04-21 20:39:19 -04:00
width: calc(100% - 8px);
2023-04-26 18:57:59 -04:00
border: 1px dotted var(--border-line);
2023-04-20 23:15:52 -04:00
}
.file-table tr {
2023-04-26 18:57:59 -04:00
border-bottom: 1px dotted var(--border-line);
2023-04-20 23:15:52 -04:00
}
.userlink {
2023-04-21 20:39:19 -04:00
display: inline-block;
margin: 4px 0px;
2023-04-20 23:15:52 -04:00
}
.userlink a {
2023-04-26 18:57:59 -04:00
color: var(--main-text);
2023-04-21 20:39:19 -04:00
text-decoration: none;
2023-04-20 23:15:52 -04:00
}
.userlink img {
2023-04-21 20:39:19 -04:00
vertical-align: bottom;
margin-right: 4px;
2023-04-20 23:15:52 -04:00
}
.message-container {
2023-04-26 18:57:59 -04:00
background-color: var(--main-background);
2023-04-27 02:16:32 -04:00
border: var(--primary-container-border);
2023-04-21 20:39:19 -04:00
display: block;
padding: 4px;
margin-right: 8px;
2023-04-20 23:15:52 -04:00
}
.message-container > div {
2023-04-21 20:39:19 -04:00
display: block;
2023-04-20 23:15:52 -04:00
}
.message-container .subject a {
2023-04-21 20:39:19 -04:00
font-size: 18px;
font-weight: bold;
vertical-align: top;
2023-04-20 23:15:52 -04:00
}
.message-container .body {
2023-04-27 02:16:32 -04:00
background-color: var(--primary-container-background);
border: var(--primary-container-border);
2023-04-21 20:39:19 -04:00
padding: 8px;
margin: 4px;
2023-04-20 23:15:52 -04:00
}
.message-container .date {
2023-04-21 20:39:19 -04:00
text-align: right;
2023-04-20 23:15:52 -04:00
}
.live-preview {
2023-04-21 20:39:19 -04:00
vertical-align: top;
overflow: auto;
2023-04-20 23:15:52 -04:00
}
.wrapper {
2023-04-21 20:39:19 -04:00
display: block;
padding: 8px;
2023-04-20 23:15:52 -04:00
}
.wrapper table input {
2023-04-21 20:39:19 -04:00
width: calc(100% - 20px);
2023-04-20 23:15:52 -04:00
}
.account-name {
2023-04-21 20:39:19 -04:00
vertical-align: top;
2023-04-20 23:15:52 -04:00
}
.account-name img {
2023-04-21 20:39:19 -04:00
vertical-align: middle !important;
width: 32px;
display: inline-block;
2023-04-20 23:15:52 -04:00
}
.dropdown:hover .menu, .dropdown:active .menu {
2023-04-21 20:39:19 -04:00
display: block;
2023-04-20 23:15:52 -04:00
}
2023-04-21 20:39:19 -04:00
2023-04-20 23:15:52 -04:00
.button.dropdown > a {
2023-04-21 20:39:19 -04:00
cursor: pointer;
2023-04-20 23:15:52 -04:00
}
.dropdown .menu {
2023-04-26 18:57:59 -04:00
background-image: var(--background-image);
2023-04-21 20:39:19 -04:00
display: none;
position: relative;
2023-04-27 02:16:32 -04:00
background-color: var(--primary-container-background);
border: var(--primary-container-border);
2023-04-21 20:39:19 -04:00
padding: 4px;
right: 152px;
width: 140px;
top: -28px;
}
2023-04-20 23:15:52 -04:00
.dropdown:hover {
2023-04-21 20:39:19 -04:00
background-position-y: 100%;
2023-04-20 23:15:52 -04:00
}
.dropdown .menu.below {
2023-04-21 20:39:19 -04:00
right: 124px;
top: 2px;
2023-04-20 23:15:52 -04:00
}
.upload-table {
2023-04-21 20:39:19 -04:00
width: 512px;
max-width: calc(100% - 32px);
margin: 0px auto;
2023-04-20 23:15:52 -04:00
}
.message-table {
2023-04-21 20:39:19 -04:00
width: 768px;
max-width: calc(100% - 32px);
margin: 0px auto;
2023-04-20 23:15:52 -04:00
}
.message-table input, .message-table textarea {
2023-04-21 20:39:19 -04:00
width: 100%;
2023-04-20 23:15:52 -04:00
}
.double-column-table tr td:nth-of-type(1),
.double-column-table tr th:nth-of-type(1) {
2023-04-21 20:39:19 -04:00
text-align: right;
vertical-align: top;
2023-04-20 23:15:52 -04:00
}
.mail-count {
2023-04-21 20:39:19 -04:00
color: var(--alert);
position: relative;
top: -6px;
right: 28px;
2023-04-20 23:15:52 -04:00
}
.form-container {
2023-04-27 02:16:32 -04:00
background-color: var(--primary-container-background);
border: var(--primary-container-border);
2023-04-21 20:39:19 -04:00
padding: 8px;
margin: 4px;
2023-04-20 23:15:52 -04:00
}
.mailbox a,
.mailbox a:link, .mailbox a:visited {
2023-04-26 18:57:59 -04:00
color: var(--main-text);
2023-04-21 20:39:19 -04:00
text-decoration: none;
2023-04-20 23:15:52 -04:00
}
.mailbox .message,
.userbox .member {
2023-04-27 02:16:32 -04:00
background-color: var(--primary-container-background);
border: var(--primary-container-border);
2023-04-21 20:39:19 -04:00
margin: 4px;
padding: 8px;
2023-04-20 23:15:52 -04:00
}
.emote {
2023-04-21 20:39:19 -04:00
image-rendering: crisp-edges;
2023-04-20 23:15:52 -04:00
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: pixelated;
}
.close {
2023-04-21 20:39:19 -04:00
position: absolute;
2024-02-23 18:52:31 -05:00
background-image: url('icons/deny');
2023-04-21 20:39:19 -04:00
background-size: 100%;
width: 48px;
height: 48px;
cursor: pointer;
top: 8px;
right: 8px;
2023-04-20 23:15:52 -04:00
}
.thricon {
2023-04-21 20:39:19 -04:00
height: 16px;
2023-04-20 23:15:52 -04:00
}
.errors .error {
2023-04-21 20:39:19 -04:00
color: var(--error);
display: block;
2023-04-20 23:15:52 -04:00
}
2023-04-26 18:57:59 -04:00
.userlink { font-family: var(--primary-font); }
2023-04-20 23:15:52 -04:00
.posteditor .editor-buttons .button a > input,
.posteditor .editor-buttons .button a > select {
2023-04-21 20:39:19 -04:00
background: none;
border: none;
height: 100%;
width: 100%;
2023-04-26 18:57:59 -04:00
font-family: var(--primary-font);
2023-04-21 20:39:19 -04:00
}
.posteditor .editbox {
display: flex;
2023-04-20 23:15:52 -04:00
}
2023-04-21 20:39:19 -04:00
.posteditor .editbox textarea#editor { flex-grow: 1; }
2023-04-20 23:15:52 -04:00
canvas#snow {
2023-04-21 20:39:19 -04:00
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
pointer-events: none;
z-index: 100;
2023-04-20 23:15:52 -04:00
}
div.emotebox {
2023-04-21 20:39:19 -04:00
width: 256px;
overflow-y: auto;
2023-04-20 23:15:52 -04:00
}
div.emotebox .emote-container {
2023-04-21 20:39:19 -04:00
padding: 2px;
cursor: pointer;
border: 1px solid transparent;
2023-04-20 23:15:52 -04:00
}
div.emotebox .emote-container:hover {
2023-04-21 20:39:19 -04:00
border: var(--menu-border, 1px solid #bdbdbd);
background: var(--menu-bg, #d0d0d0);
2023-04-20 23:15:52 -04:00
}
.mailcontainer {
}
.mailcontainer .subject {
2023-04-26 18:57:59 -04:00
font-family: var(--primary-font);
2023-04-21 20:39:19 -04:00
margin: 2px 2px 0px 2px;
background: var(--mail-subject-bg, #b7b7b7);
border: var(--mail-subject-border, 1px solid #8a8a8a);
padding: 2px;
2023-04-20 23:15:52 -04:00
}
.mailcontainer .subject img,
2023-04-21 20:39:19 -04:00
.mailcontainer .trade-icon {
vertical-align: middle;
2023-04-20 23:15:52 -04:00
}
.mailcontainer .sub {
2023-04-21 20:39:19 -04:00
margin: 0px 8px;
background: var(--mail-sub-bg, #cecece);
border: var(--mail-sub-border, 1px solid #a8a8a8);
border-top: none;
padding: 2px 8px;
2023-04-20 23:15:52 -04:00
}
.mailcontainer .content {
2023-04-21 20:39:19 -04:00
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;
2023-04-20 23:15:52 -04:00
}
.mailcontainer .buttonbar {
2023-04-21 20:39:19 -04:00
display: flex;
border-top: var(--mail-content-border, 1px solid #959595);
background: var(--mail-buttonbar, #cacaca);
margin: 4px -4px -4px -4px;
2023-04-20 23:15:52 -04:00
}
.mailcontainer .buttonbar .date {
2023-04-21 20:39:19 -04:00
flex-grow: 1;
2023-04-26 18:57:59 -04:00
font-family: var(--primary-font);
2023-04-21 20:39:19 -04:00
padding: 4px;
color: var(--subtitle, #525252);
2023-04-20 23:15:52 -04:00
}
.rating .star-container .stars {
2024-02-23 18:52:31 -05:00
background: url('icons/ratings/star');
2023-07-30 18:36:59 -04:00
height: 100%;
background-size: auto 100%;
max-width: 100%;
2023-04-20 23:15:52 -04:00
}
.rating .star-container {
2024-02-23 18:52:31 -05:00
background-image: url('icons/ratings/unstar');
2023-04-21 20:39:19 -04:00
background-size: 20% 100%;
height: 100%;
cursor: pointer;
2023-04-20 23:15:52 -04:00
}
.rating.large {
2023-07-30 18:36:59 -04:00
height: 48px;
display: inline-block;
2023-04-20 23:15:52 -04:00
}
.rating.large .star-container {
2023-04-21 20:39:19 -04:00
width: 240px;
2023-04-20 23:15:52 -04:00
}
.rating.medium {
2023-07-30 18:36:59 -04:00
height: 24px;
display: inline-block;
2023-04-20 23:15:52 -04:00
}
.rating.medium .star-container {
2023-04-21 20:39:19 -04:00
width: 120px;
2023-04-20 23:15:52 -04:00
}
.rating.small {
2023-07-30 18:36:59 -04:00
height: 12px;
display: inline-block;
2023-04-20 23:15:52 -04:00
}
.rating.small .star-container {
2023-04-21 20:39:19 -04:00
width: 60px;
2023-04-20 23:15:52 -04:00
}
2023-04-21 20:39:19 -04:00
a.thumbnail-box {
display: inline-block;
background-color: #0005;
background-size: cover;
background-repeat: no-repeat;
width: 150px;
height: 150px;
color: var(--main-text);
2023-04-26 18:57:59 -04:00
font-family: var(--primary-font);
2023-04-21 20:39:19 -04:00
text-decoration: none;
margin: 2px;
}
a.thumbnail-box::after {
display: block;
content: "View Image";
height: 20px;
margin: 130px 0px 0px 0px;
text-align: center;
2023-04-27 02:16:32 -04:00
border: var(--primary-container-border);
background-color: var(--primary-container-background);
2023-04-21 20:39:19 -04:00
}
button.user-input {
2023-04-27 02:16:32 -04:00
background: var(--primary-container-background);
border: var(--primary-container-border);
2023-04-21 20:39:19 -04:00
width: 180px;
height: 24px;
text-align: left;
2023-04-26 18:57:59 -04:00
font-family: var(--primary-font);
2023-04-21 20:39:19 -04:00
font-size: 14px;
vertical-align: middle;
cursor: pointer;
}
div.user-input-box {
2023-04-27 02:16:32 -04:00
background: var(--primary-container-background);
border: var(--primary-container-border);
2023-04-21 20:39:19 -04:00
display: flex;
flex-direction: column;
position: absolute;
max-height: 300px;
overflow-y: auto;
}
div.user-input-box .userlink > * {
pointer-events: none;
2023-05-11 23:48:57 -04:00
}
/* AD STYLING */
.adbanner img {
max-width: 100%;
2023-09-06 17:55:28 -04:00
}