Add buttontab

This commit is contained in:
Wirlaburla 2023-06-08 12:54:17 -05:00
parent 83d4bf4377
commit e6855498e3

552
style.css
View File

@ -573,6 +573,21 @@ nav.top.alert p {
cursor: pointer; cursor: pointer;
} }
.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);
}
@media only screen and (orientation: landscape) { @media only screen and (orientation: landscape) {
.button { .button {
display: block; display: block;
@ -751,6 +766,35 @@ nav.top.alert p {
height: 75%; height: 75%;
} }
.header div.buttontab {
background: var(--default-button-background);
border: var(--default-button-border);
margin: -8px 4px 4px 4px;
padding: 8px 4px 2px 4px;
}
.header div.buttontab a {
color: var(--main-text);
display: inline-block;
text-decoration: none;
font-family: var(--primary-font);
height: 100%;
}
.header div.buttontab a img {
vertical-align: top;
}
.header div.buttontab:hover {
background: var(--hover-button-background);
border: var(--hover-button-border);
}
.header div.buttontab:active {
background: var(--active-button-background);
border: var(--active-button-border);
}
@media only screen and (orientation: landscape) { @media only screen and (orientation: landscape) {
.heading { .heading {
width: calc(100% + 8px); width: calc(100% + 8px);
@ -860,47 +904,6 @@ body.home .home-container .blog-contents .blog-item {
} }
body.home .home-container .blog-contents .blog-item i { text-align: right; } body.home .home-container .blog-contents .blog-item i { text-align: right; }
@media only screen and (orientation: landscape) {
body.forum .main{
max-width: 1200px;
margin: 4px auto;
}
.forum .thread .reply, .forum .errors {
margin: 8px 32px;
}
.forum .thread .post {
display: flex;
}
}
.forum .thread .post { margin: 8px; }
@media only screen and (orientation: portrait) {
.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;
}
}
/* == LIBRARY */ /* == LIBRARY */
body.library .lib { body.library .lib {
@ -964,63 +967,9 @@ body.library .lib.tiny > a {
min-width: 64px; min-width: 64px;
} }
c, code, .codeblock:not(.title) {
background: var(--code-bg);
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%;
}
.comments {
max-width: 100%;
overflow: auto;
margin: unset;
border-collapse: unset;
border: none;
}
.link {
text-decoration: underline;
color: blue;
cursor: pointer;
}
.link:hover {
color: blueviolet;
}
.styled-table > tbody > tr {
border-bottom: 1px dashed var(--border-line);
}
.styled-table > tbody > tr th {
background-color: rgba(255,255,255,0.4);
border-bottom: 1px solid var(--border-header);
}
.styled-table > tbody > tr td { border: 1px dotted var(--border-line); }
.status.success, .output .success {color: var(--status-success);} .status.success, .output .success {color: var(--status-success);}
.status.error, .output .error {color: var(--status-error);} .status.error, .output .error {color: var(--status-error);}
@ -1402,15 +1351,6 @@ table {
.overlay .popup, .overlay .attachment { .overlay .popup, .overlay .attachment {
max-height: 90%; 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) { @media only screen and (orientation: landscape) {
@ -1449,21 +1389,6 @@ table {
background: linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%); background: linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
border: var(--tab-border); border: var(--tab-border);
} }
.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 { .close {
@ -1477,336 +1402,6 @@ table {
right: 8px; right: 8px;
} }
.verinfo {
display: inline;
position: fixed;
bottom: 4px;
right: 4px;
opacity: 0.3;
pointer-events: none;
}
/* FORUM */
table.board { font-family: var(--primary-font); }
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); }
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);
}
table.board tr {
text-align: left;
padding: 4px;
background-color: var(--forum-content);
border: var(--forum-content-border);
}
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); }
}
table.board .status {
position: relative;
height: 0px;
top: -20px;
text-align: right;
}
.forum .category {
font-family: var(--primary-font);
}
.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);
border: var(--forum-header-border);
font-family: var(--primary-font);
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);
}
.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);
border: var(--forum-content-border);
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);
border: var(--forum-content-border);
border-top: none;
margin-left: 8px;
margin-right: 8px;
padding: 8px;
font-family: var(--primary-font);
}
.forum .board .thread .userlink {
margin: unset;
}
.forum .board .thread .details1 {
flex-grow: 1;
}
.forum .board .thread .details1 .post-count {
color: var(--subtitle);
}
.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);
}
.forum .thread .post .post-content,
.forum .thread .reply,
.forum .errors {
background-color: var(--post);
border: var(--post-border);
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(--primary-font);
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);
border: var(--post-author-border);
display: flex;
min-height: 64px;
padding: 2px;
}
.forum .thread .post .authorbar .author {
display: flex;
flex-grow:1;
flex-direction: column;
}
.forum .thread .post .authorbar .user-stat {
font-family: var(--primary-font);
color: var(--subtitle);
display: flex;
}
.forum .thread .post .authorbar img.avatar {
margin: 10px;
border: var(--primary-container-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(--primary-font);
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(--primary-font);
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(--primary-font);
}
.forum .thread .post .buttonbar a {
padding: 2px 4px;
}
.forum .thread .options .option .name {
font-family: var(--primary-font);
}
.forum .thread name .thricon {
margin: 0px 4px;
}
.thricon { .thricon {
height: 16px; height: 16px;
} }
@ -1978,66 +1573,7 @@ div.emotebox .emote-container:hover {
cursor: pointer; cursor: pointer;
} }
body.forum .main { display: flex; 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 {
background: var(--primary-container-background);
border: var(--primary-container-border);
padding: 4px;
}
body.forum .sidebar .box .content .thread {
background: var(--secondary-container-background);
border: var(--secondary-container-border);
padding: 2px;
margin: 4px 0px;
}
body.forum .sidebar .box .content .subject {font-family: var(--primary-font);}
body.forum .sidebar .box name {
font-family: var(--primary-font);
font-weight: bold;
}
body.forum .sidebar .box .thread .info {font-family: var(--primary-font);}
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);
}
/* USER PROFILE PAGE */ /* USER PROFILE PAGE */
body.user-profile .user-infobox { body.user-profile .user-infobox {