Tyyli 55
alchemilla1
:root {
--transparency: .8;
--imageurl: url(https://i.imgur.com/v7MTtJj.jpg);
--base-color-0: transparent !important;
--base-color-1: transparent !important;
--base-color-2: transparent !important;
--base-color-3: transparent !important;
--base-color-4: transparent !important;
--base-color-5: transparent !important;
--base-color-6: transparent !important;
}
html {
width: calc(100vw - 34px);
overflow-y: overlay;
}
body {
background-image: var(--imageurl) !important;
background-size: cover;
background-repeat: no-repeat;
background-position: top center !important;
background-attachment: fixed;
padding-top: 40px !important;
padding-bottom: 40px !important;
padding-left: calc(100vw - 100%) !important;
padding-right: 0px !important;
font-family: tahoma, verdana, arial, sans-serif !important;
}
#main-body p {
font-size: 13px;
}
#channel-basic-info, .user-basic-info, #user-channels, body {
line-height: 1.42857143 !important;
}
#main-header {
background-color:#bf0000 !important;
height: 60px !important;
border: none !important;
margin: 0px auto !important;
padding: 20px 25px !important;
}
#main-header a {
color:#fff;
font-weight:bold;
text-decoration: none !important;
}
#main-header a:hover {
text-decoration: underline !important;
}
#main-header *, .menu-group {
font-size: 1.0em !important;
}
#main-header .menu-group {
text-shadow: 0px -1px #333;
}
#main-header, #main-container {
width: 70% !important;
min-width: 960px !important;
max-width: 1440px !important;
border: none !important;
}
#main-container {
background-color: rgba(255,255,255,var(--transparency)) !important;
box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.5), 0px 10px 40px 0px rgba(0,0,0,0.5);
border: 2px solid #a90000 !important;
border-top: none !important;
margin: 0px auto !important;
}
#main-container .bordered {
border: 1px solid transparent !important;
}
#main-container .bordered-bot {
border: 1px solid transparent !important;
}
#main-container *, .user-basic-info {
background: transparent !important;
border-width: 1px;
border-color: #afafaf;
}
#main-container a {
color: #06a;
text-decoration: none !important;
}
#main-container a:hover {
color: #c00;
}
.fa-spinner {
display: block !important;
text-align: center !important;
padding: 30px;
}
.action {
text-decoration: none !important;
}
#channel-meta {
width: 25%;
}
#channel-meta.bordered div {
width: auto !important;
min-width: 160px;
max-width: 250px;
}
.info-item {
font-weight: bold;
}
.info-item-value {
font-weight: normal;
}
#style-page {
background: #fff;
}
#style-page thead tr {
background: #eee;
}
#style-page tr {
background: #fff;
}
.status-new {
width: calc(100% - 400px) !important;
margin: 10px !important;
}
#status-update-input.bordered {
background: #fff;
height: 100px !important;
border: 1px solid #afafaf !important;
}
.status-new textarea {
max-width: 500px !important;
min-width: 250px !important;
}
#status-list-contaner {
width: -webkit-fill-available !important;
margin: 10px !important;
}
.status-user {
margin-bottom: 10px;
}
#main-body .status-update.bordered {
background: #fff;
border: 1px solid #afafaf !important;
border-radius: 4px;
}
.feeds-container > div > .medias > a {
margin-top: auto !important;
display: inline-block !important;
}
#message-input.unrounded {
background: #fff;
min-height: 100px !important;
}
#media-search {
width: 100%;
text-indent: 10px;
border-radius: 10px !important;
border: 1px solid #afafaf !important;
}
input[type="text"] {
border: 1px solid #afafaf !important;
}
#message-submit, #submitMessage, #mediaUpload, #chat-submit, #submit {
border-radius: 3px !important;
padding: 3px 5px 3px 5px;
font-weight: normal;
border: 1px solid #b20000;
vertical-align: middle;
text-shadow: #760000 0px -1px 0px;
background-color: #b20000 !important;
background-repeat: repeat-x;
background-position: center top;
color: #ffffff;
cursor: pointer;
text-decoration: none !important;
}
.message-container a {
font-size: smaller;
color: #aaa !important;
}
.message-article {
background: #fff !important;
border: 1px solid #afafaf !important;
margin-top: 4px !important;
margin-bottom: 4px !important;
border-radius: 4px;
}
.message-article .date-added {
font-size: smaller;
}
.message-article .date-edited {
font-size: smaller;
font-style: italic;
}
.message-article .action {
font-weight: bold;
}
span.message-header {
padding: 4px !important;
margin-bottom: 8px !important;
}
.message-content {
border-top: 1px solid #afafaf !important;
padding: 8px !important;
}
#channel-content-container .message.op-message {
background: #fff;
padding: 2px !important;
border: 1px solid #afafaf !important;
margin-bottom: 5px !important;
}
.status-user a {
font-weight: bold;
}
.status-actions a {
color: #aaa !important;
font-size: smaller;
text-decoration: underline !important;
}
.status-actions .rates-container, #status-hide {
color: #aaa !important;
font-size: smaller;
}
.status-update, article{
padding: 0.5em !important;
}
tr, article, .status-update {
border-bottom: 1px solid #eee !important;
}
#user-info {
width: 25%;
min-width: 160px;
max-width: 250px;
}
.user-basic-info.bordered {
width: auto !important;
}
.user-basic-info.bordered h4 {
margin-bottom: 10px !important;
}
.user-basic-info.bordered img {
margin-bottom: 10px !important;
}
#mahti-modal-container {
background-color: #eee !important;
}
#chat-container {
width: 80% !important;
margin: auto;
border: 1px solid #afafaf !important;
border-radius: 4px;
}
#chat-body-container {
height: 500px !important;
margin: 4px !important;
font-size: 13px;
}
#chat-messages-container {
word-break: break-word !important;
}
#chat-page-messages.bordered.chat-messages-container {
background: #fff !important;
padding: 0px !important;
overflow-x: hidden !important;
border: 1px solid #afafaf !important;
word-break: break-word !important;
}
#chat-container div {
justify-content: normal !important;
}
input#chat-page-input.bordered.unrounded {
background: #fff;
width: 80% !important;
margin: 0px 10px 10px 10px !important;
overflow: unset !important;
border: 1px solid #afafaf !important;
}
#chat-submit.unrounded.bordered {
margin: 0px 5px 8px 4px !important;
border: 1px solid #afafaf !important;
border-radius: 2px !important;
}
#chat-container.bordered div {
border: 1px solid #afafaf !important;
}
#chat-container.feeds-container.bordered {
width: 100% !important;
}
.medias a {
width: 160px !important;
height: 160px !important;
}
.medias img {
width: 160px !important;
height: 160px !important;
margin: auto !important;
border: 1px solid #afafaf !important;
padding: 1px;
object-fit: cover !important;
transition: all .2s ease-in-out;
}
.medias a img {
position: unset !important;
transform: none !important;
-webkit-transform: none !important;
}
.medias img:hover {
filter: drop-shadow(0px 2px 5px rgba(0,0,0,0.5));
}
div.media-file {
background-color: #eee !important;
padding: 2px !important;
}
.content-container.text-center {
width: 100% !important;
}
.media-file {
width: 100% !important;
}
.media-file > .embedded-media {
width: 100% !important;
height: 26vw !important;
}
#media-modal-container {
position: absolute !important;
}
#media-modal {
overflow-y: auto !important;
max-height: initial !important;
box-shadow: 0px 0px 100vw rgba(0,0,0,1);
}
#media-modal img {
max-width: 90vw !important;
}
#media-actions {
float: none !important;
}
#media-box.bordered img {
max-height: 100px !important;
border: 1px solid #afafaf;
padding: 1px;
}
#media-right-items {
min-width: 220px;
max-width: 25%;
margin: auto !important;
}
#media-right-items .bordered {
display: block !important;
}
#media-right-items .bordered div {
width: 100% !important;
}
#media-right-items .bordered.action {
text-align: center !important;
}
#info-box {
text-align: center !important;
}
#info-box #media-date {
float: inherit !important;
display: inherit !important;
}
#media-right-items .bordered.spoiler {
min-height: 2.0em !important;
max-height: 6.0em !important;
overflow-x: hidden !important;
}
#new_tag.unrounded {
background: #fff;
width: 100%;
max-width: 225px;
}
#media-right-items .bordered label {
width: 100%;
}
#media-channel.unrounded {
background: #fff;
max-width: 90%;
}
#media-right-items .medias {
height: -webkit-fill-available;
height: -moz-available;
overflow-y: overlay;
}
#media-right-items > div > .action-container > .medias > a {
margin-top: 0px !important;
}
#media-right-items > div > .action-container > .medias > a > img, #media-right-items > div > .action-container > .medias > a {
max-width: -webkit-fill-available !important;
max-height: -webkit-fill-available !important;
}
#preview {
width: 400px !important;
height: auto;
max-width: 400px !important;
min-height: 100px;
max-height: 400px;
background-color: #fff !important;
box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.5), 0px 10px 40px 0px rgba(0,0,0,0.5);
overflow: hidden !important;
position: absolute;
font-family: tahoma, verdana, arial, sans-serif !important;
}
#preview p {
font-size: 13px;
}
#preview .message-article.message {
background-color: #fff !important;
border: 1px solid #afafaf !important;
}
#preview .message-meta {
max-width: 100px !important;
background-color: #fff !important;
border-right: 1px solid #afafaf;
}
#preview .message-header {
background-color: #fff !important;
border-bottom: 1px solid #afafaf;
}
#preview .message-container {
width: 100% !important;
border-top; 1px solid #afafaf;
}
#preview #op-info {
background-color: #fff !important;
}
#preview #op-info img {
max-height: 100px !important;
max-width: 100px !important;
}
#preview #op-info.bordered-right.bordered-top {
border-right: 1px solid #afafaf !important;
border-top: 1px solid #afafaf !important;
}
#preview #thread-container {
background-color: #fff !important;
}
#preview #forum-thread-message.bordered {
background-color: #fff !important;
border: 1px solid #afafaf !important;
border-radius: 4px !important;
}
#footer {
background: #afafaf !important;
}