tooty/public/style.css
2017-04-24 21:21:43 +02:00

358 lines
5.2 KiB
CSS

body {
font-family: Roboto, sans-serif;
padding-top: 10px;
}
.status, .follow-profile {
min-height: 50px;
clear: both;
}
.follow-profile .status-text {
opacity: .8;
}
.nsfw {
background: #493438;
}
.reblog > p:first-of-type,
.notification > p:first-of-type {
color: #999;
margin-bottom: 8px;
}
.status-info, .status-info a {
color: #ccc;
line-height: 1.6em;
}
.status-info > .avatars img {
width: 24px;
height: 24px;
margin-right: 5px;
border-radius: 2px;
}
.status-info-text {
clear: left;
padding-top: 6px;
}
.notification.reblog,
.notification.favourite {
opacity: .75;
}
.notification.follow > p {
margin-bottom: 0;
}
.panel-heading {
font-weight: bold;
}
.panel-heading > .glyphicon,
.panel-heading > .row > .heading > .glyphicon {
margin-right: 8px;
}
.avatar {
display: block;
float: left;
width: 50px;
border-radius: 5%;
margin-top: 2px;
}
.username {
font-weight: bold;
margin-left: 65px;
margin-bottom: 4px;
}
.acct {
font-size: 97%;
font-weight: normal;
color: #a0a0a0;
}
.reblogger {
color: #ccc;
}
.status-text {
margin-left: 65px;
color: #efefef;
}
.status-text a, .u-url, .status .mention, .hashtag, .tag {
color: #9baec8;
}
/* Status actions */
.actions {
margin-left: 65px;
width: calc(100% - 65px);
}
.actions > .btn {
border: none;
background: transparent;
color: #aaa;
padding: 0 2.4em 0 0;
text-align: left;
}
.actions > .btn > .glyphicon {
margin-right: 5px;
}
.actions .favourited {
color: #d1ac0e;
}
.actions .reblogged {
color: #d56344;
}
/* Attachments */
.attachments {
margin: 0 0 15px 0;
padding: 0;
list-style-type: none;
overflow: hidden;
width: 100%;
box-sizing: border-box;
position: relative;
}
.attachment-entry {
margin-top: 5px;
transition: 0.3s;
opacity: .9;
}
.attachment-entry:hover {
opacity: 1;
}
.attachment-entry input {
display: none;
}
.attachment-entry label {
display: block;
background: #111;
opacity: .95;
font-weight: normal;
font-size: 95%;
height: 10vh;
margin-bottom: -10vh;
text-align: center;
padding-top: 2rem;
cursor: pointer;
border-radius: 2px;
}
.attachment-entry input:checked + label {
display: none;
}
.attachment-image {
display: block;
width: 100%;
height: 10vh;
text-decoration: none;
cursor: zoom-in;
border-radius: 2px;
}
/* Spoiler */
.spoiled input[type=checkbox] {
display: none;
}
.spoiled input[type=checkbox] + label {
display: block;
text-align: center;
margin-top: .5em;
font-weight: normal;
background: #252525;
color: #fff;
padding: .3em;
border: 1px solid #363636;
cursor: pointer;
}
.spoiled input[type=checkbox] + label + .spoiled-content {
display: none;
}
.spoiled input[type=checkbox]:checked + label + .spoiled-content {
display: block;
height: auto;
opacity: 1;
padding: 10px;
}
.spoiled .spoiled-content {
height: 0;
overflow: hidden;
opacity: 0;
padding: 10px;
background: #333;
border: 1px solid #444;
border-radius: 4px;
transition: all .6s;
margin-bottom: 5px;
}
/* Draft form */
.in-reply-to .attachments {
margin: 0;
}
.in-reply-to .attachments li {
display: none;
}
.in-reply-to .attachments:after {
content: "[attachments hidden]";
font-size: .9em;
color: #555;
}
/* Status text content rules */
.attachment {
white-space: pre-wrap;
word-wrap: break-word;
}
.ellipsis {
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.invisible {
display: none;
}
/* Account rules */
.account-detail {
text-align:center;
}
.account-detail .opacity-layer{
background: rgba(49,53,67,0.9);
}
.account-detail img {
border-radius: 90px;
padding:20px;
display: block;
margin:0 auto 0;
}
.account-detail .account-display-name {
display: block;
font-size: 130%;
font-weight: bold;
}
.account-detail .account-username {
display: block;
}
.account-detail .account-note {
display: block;
padding: 5px 15px 15px 15px;
}
.account-infos {
text-align:center;
padding: 15px;
}
/* Viewer */
.viewer {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
/* Modal Content (Image) */
.viewer-content {
display: block;
margin: auto;
max-width: 80vw;
max-height: 90vh;
animation-name: zoom;
animation-duration: 0.1s;
}
@keyframes zoom {
from { transform: scale(.9) }
to { transform: scale(1) }
}
.viewer > .close {
position: absolute;
top: 15px;
right: 35px;
color: #eee;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
text-shadow: initial;
opacity: 1;
}
.viewer > .close:hover,
.viewer > .close:focus {
color: #fff;
text-decoration: none;
cursor: pointer;
}
.prev, .next {
font-size: 72px;
opacity: .5;
transition: opacity .5s;
text-decoration: none;
margin: 0 10px;
}
.prev:hover,
.next:hover {
opacity: 1;
}
.prev:active, .prev:focus, .prev:hover,
.next:active, .next:focus, .next:hover {
text-decoration: none;
}
/* 100% image width on smaller screens */
@media only screen and (max-width: 700px) {
.viewer-content {
width: 100%;
}
}