Add buttontab
This commit is contained in:
parent
83d4bf4377
commit
e6855498e3
552
style.css
552
style.css
|
|
@ -573,6 +573,21 @@ nav.top.alert p {
|
|||
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) {
|
||||
.button {
|
||||
display: block;
|
||||
|
|
@ -751,6 +766,35 @@ nav.top.alert p {
|
|||
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) {
|
||||
.heading {
|
||||
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; }
|
||||
|
||||
|
||||
|
||||
@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 */
|
||||
|
||||
body.library .lib {
|
||||
|
|
@ -964,63 +967,9 @@ body.library .lib.tiny > a {
|
|||
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.error, .output .error {color: var(--status-error);}
|
||||
|
|
@ -1402,15 +1351,6 @@ table {
|
|||
.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) {
|
||||
|
|
@ -1449,21 +1389,6 @@ table {
|
|||
background: linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
|
||||
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 {
|
||||
|
|
@ -1477,336 +1402,6 @@ table {
|
|||
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 {
|
||||
height: 16px;
|
||||
}
|
||||
|
|
@ -1978,66 +1573,7 @@ div.emotebox .emote-container:hover {
|
|||
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 */
|
||||
body.user-profile .user-infobox {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user