This repository has been archived on 2021-07-02. You can view files and clone it, but cannot push or open issues or pull requests.
chie/public/style.css
2021-05-05 15:31:51 +00:00

484 lines
8.1 KiB
CSS

* {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
outline-style: none;
}
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
color: #9DAAD9;
background-color: #0F1528;
font-size: 12px;
line-height: 20px;
}
h1 {
color: #9DAAD9;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
h2 {
font-weight: bold;
font-size: 22px;
text-decoration: none;
line-height: 120%;
}
h3 {
font-size: 1.3em;
font-weight: bold;
line-height: 120%;
}
h4 {
margin: 0;
font-size: 1.1em;
font-weight: bold;
}
p {
font-size: 1.1em;
}
a {
color: #567194;
text-decoration: none;
transition: color .1s;
}
a:active {
color: #4C5A8E;
text-decoration: none;
}
a:hover {
color: #FFFFFF;
text-decoration: underline;
}
h3 > a {
display: inline-block;
padding: 2px 5px;
}
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="submit"],
input[type="reset"],
input[type="button"] {
color: #9daad9;
font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: 400;
padding: 2px;
border: 1px solid #9daad9;
background-color: #191E33;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
padding: 2px 4px;
}
input[type="submit"] {
font-weight: 700;
}
textarea {
background-color: #191E33;
color: #9DAAD9;
font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
font-weight: normal;
border: 1px solid #A9B8C2;
padding: 2px;
font-size: 12px;
}
select {
color: #9DAAD9;
background-color: #191E33;
font-family: Tahoma, Geneva, 'Dejavu Sans', Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
border: 1px solid #A9B8C2;
padding: 1px;
}
option {
padding: 0 1em 0 0;
}
.wrapper {
margin: 0 auto;
max-width: 1000px;
width: 100%;
}
.wrapper.scrollbeyond {
padding-bottom: 100vh;
}
.footer {
color: #567194;
font-weight: normal;
font-size: 11px;
line-height: 14px;
text-align: center;
padding: 2px 5px;
}
.header h1 {
padding: 10px;
padding-bottom: 5px;
}
.header a {
color: #567194;
text-decoration: none;
padding: 5px 10px;
display: inline-block;
}
.header a:hover {
color: #9DAAD9;
text-decoration: underline;
}
.header-wrap {
display: flex;
justify-content: space-between;
}
.forum-category,
.topics {
border: 1px solid #000;
background-color: #191e33;
color: #cecece;
margin: 4px 0;
}
.forum-category-title,
.topics-header {
font-weight: 700;
display: flex;
align-items: center;
}
.forum-category-title-info,
.topics-header-info {
flex: 1 1 auto;
padding: 4px 5px;
}
.forum-category-board,
.topics-item {
border-top: 1px solid #000;
background-color: #1a2237;
display: flex;
align-items: center;
min-height: 40px;
}
.forum-category-board-indicator,
.topics-item-indicator,
.topics-item-indicator-closed,
.topics-item-indicator-locked {
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #000;
flex: 0 0 auto;
margin: 5px;
background-color: #1a2237;
}
.topics-item-indicator-closed {
background-color: #0c0;
margin-left: 0;
}
.topics-item-indicator-locked {
background-color: #c00;
margin-left: 0;
}
.forum-category-board-indicator.unread,
.topics-item-indicator.unread {
background-color: #4D556A;
}
.topics-item-indicator,
.topics-item-indicator-closed,
.topics-item-indicator-locked {
width: 16px;
height: 16px;
line-height: 16px;
}
.forum-category-board-info,
.topics-item-info {
flex: 1 1 auto;
}
.forum-category-count,
.topics-item-count {
width: 60px;
text-align: center;
padding: 4px 5px;
}
.forum-category-latest,
.topics-item-author,
.topics-item-created,
.topics-item-latest {
width: 120px;
text-align: center;
}
.topics-item-created time,
.forum-category-latest time,
.topics-item-latest time {
font-size: .9em;
line-height: 1.2em;
display: inline-block;
}
.forum-category-latest-header,
.topics-item-latest-header {
padding: 4px 5px;
}
.forum-category-board-desc {
font-size: .9em;
line-height: 1.2em;
}
.topics-item-status {
display: inline-block;
margin-right: 4px;
}
.auth-form {
max-width: 300px;
margin: 5px auto;
}
.auth-header {
padding: 5px 0;
}
.auth-field {
margin: 5px 0;
display: block;
}
.auth-field-value input {
width: 100%;
}
.auth-buttons {
text-align: center;
padding: 5px;
}
.auth-message {
text-align: center;
}
.auth-message-error {
color: #f00;
}
.forum-title {
padding: 2px 5px;
}
.posting-header {
display: flex;
padding: 4px 0;
}
.posting-title {
flex: 1 1 auto;
}
.posting-submit {
margin-left: 4px;
}
.posting-text {
display: block;
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 500px;
}
.posting-message {
padding: 0 3px;
}
.posting-message-error {
color: #f00;
}
.createtopicbtn,
.topic-btns a {
display: inline-block;
color: #9daad9;
font-size: 12px;
font-weight: 400;
margin: 4px 6px 2px 0;
padding: 1px 8px;
border: 1px solid #9daad9;
background-color: #191E33;
cursor: pointer;
}
.search-form {
display: flex;
}
.search-input {
flex: 1 1 auto;
}
.search-submit {
margin-left: 4px;
}
.post {
display: flex;
border: 1px solid #000;
background-color: #191e33;
color: #cecece;
margin: 2px 0;
}
.post-details {
flex: 0 0 auto;
width: 120px;
display: flex;
flex-direction: column;
align-items: center;
border: 0 solid #000;
border-right-width: 1px;
}
.post-permalink-wrap {
text-align: center;
font-size: .9em;
line-height: 1.4em;
}
.post-username {
font-size: 1.2em;
line-height: 1.5em;
}
.post-details * {
margin: 1px 0;
}
/*@media(max-width: 600px) {*/
.post {
flex-direction: column;
}
.post-details {
border-right-width: 0;
border-bottom-width: 1px;
width: 100%;
flex-direction: row;
}
.post-avatar {
width: 40px;
height: 40px;
order: 1;
margin: 5px;
}
.post-username {
order: 2;
padding: 10px;
}
.post-permalink-wrap {
order: 3;
flex: 1 1 auto;
text-align: right !important;
}
.post-permalink {
padding: 10px;
}
/*}*/
.post-text {
flex: 1 1 auto;
background-color: #1a2237;
min-height: 160px;
padding: 2px 5px;
display: flex;
flex-direction: column;
}
.post-text-inner {
flex: 1 1 auto;
padding: 3px 0;
word-wrap: normal;
word-break: break-word;
}
.post-footer {
display: flex;
flex: 0 0 auto;
font-size: .9em;
}
.post-edited {
flex: 1 1 auto;
font-style: italic;
}
.post-options {
flex: 0 0 auto;
}
.post-options a {
margin: 0 5px;
}
.post-deleted .post-text {
min-height: 0;
}
.setting {
margin: 10px 0;
}
.setting-head h3 {
line-height: 1.5em;
}
.setting-value input[type="text"],
.setting-value input[type="password"],
.setting-value input[type="email"],
.setting-value select {
min-width: 400px;
margin: 1px 0;
}
.settings-message {
padding: 0 3px;
}
.settings-message-error {
color: #f00;
}
.settings-option {
margin: 2px 0;
padding: 0 4px;
display: block;
}
.event {
display: block;
border: 1px solid #000;
background-color: #191e33;
color: #cecece;
margin: 2px 0;
}
.event-msg {
margin: 4px;
display: flex;
}
.event-msg img {
vertical-align: bottom;
}
.event-msg time {
font-size: .9em;
margin: 0 4px;
}
.event-msg-text {
flex: 1 1 auto;
margin: 0 4px;
}
.notice {
display: block;
border: 1px solid #000;
background-color: #1a2237;
color: #cecece;
margin: 2px 0;
padding: 4px;
}
.forum-shutdown {
background-color: #37221a;
padding: 5px 7px;
font-weight: bold;
color: #D9AA9D;
border: 1px solid #000;
}