microblog.pub/sass/base_theme.scss

330 lines
5.5 KiB
SCSS
Raw Normal View History

2018-05-18 13:41:41 -05:00
.note-container p:first-child {
margin-top: 0;
}
html, body {
height: 100%;
}
2018-07-17 17:11:05 -05:00
@media only screen and (max-width: 480px) {
#menu-item-following {
display: none;
}
}
2018-05-18 13:41:41 -05:00
body {
background-color: $background-color;
color: $color;
display: flex;
flex-direction: column;
}
.base-container {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
a, h1, h2, h3, h4, h5, h6 {
color: $color-title-link;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.gold {
color: $primary-color;
}
2018-07-01 05:49:16 -05:00
.pcolor {
color: $primary-color;
}
.lcolor {
color: $color-light;
}
.older-link, .newer-linker, .older-link:hover, .newer-link:hover {
text-decoration: none;
padding: 3px;
}
.newer-link { float: right }
.clear { clear: both; }
2018-07-01 05:49:16 -05:00
.remote-follow-button {
background: $color-menu-background;
color: $color-light;
text-decoration: none;
padding: 5px 8px;
margin-top: 5px;
border-radius: 2px;
}
.remote-follow-button:hover {
text-decoration: none;
background: $primary-color;
color: $background-color;
}
2018-07-15 15:20:38 -05:00
#admin-menu-wrapper {
padding: 10px;
margin:0 auto;
width: 100%;
background: $color-menu-background;
max-width: 720px;
2018-07-01 16:25:26 -05:00
#admin-menu {
list-style-type: none;
display: inline;
padding: 10px;
color: $color-light;
border-radius-bottom-left: 2px;
border-radius-bottom-right: 2px;
.left { float: left; }
.right { float: right; }
li {
a { text-decoration: none; }
.admin-title {
text-transform: uppercase;
font-weight: bold;
}
padding-right:10px;
.selected, a:hover {
color: $primary-color;
}
}
}
2018-07-15 15:20:38 -05:00
}
2018-05-18 13:41:41 -05:00
#header {
margin-bottom: 70px;
2018-05-18 13:41:41 -05:00
.title {
font-size: 1.2em;
padding-right: 15px;
color: $color-title-link;
}
.title:hover {
text-decoration: none;
}
.subtitle-username {
color: $color;
}
.menu {
clear: both;
padding: 0 0 10px 0;
2018-05-18 13:41:41 -05:00
ul {
display: inline;
list-style-type: none;
padding: 0;
li {
2018-07-03 16:43:34 -05:00
float: left;
margin-bottom: 10px;
margin-right: 10px;
2018-05-18 13:41:41 -05:00
}
}
a {
padding: 5px 10px;
small.badge {
background-color: $color-menu-background;
color: $color-light;
border-radius: 2px;
margin-left: 5px;
padding: 3px 5px 0px 5px;
font-weight: bold;
}
2018-05-18 13:41:41 -05:00
}
a.selected {
background: $primary-color;
color: $background-color;
border-radius:2px;
2018-06-22 15:51:11 -05:00
.badge {
color: $primary-color;
background: $background-color;
}
2018-05-18 13:41:41 -05:00
}
a:hover {
background: $primary-color;
color: $background-color;
text-decoration: none;
border-radius: 2px;
.badge {
color: $primary-color;
background: $background-color;
}
2018-05-18 13:41:41 -05:00
}
}
}
#container {
width: 90%;
max-width: 720px;
2018-07-03 16:43:34 -05:00
margin: 30px auto;
2018-05-18 13:41:41 -05:00
}
#container #notes {
margin-top: 20px;
}
.actor-box {
display: block;
text-decoration: none;
margin-bottom: 40px;
.actor-icon {
width: 120px;
2018-05-18 13:41:41 -05:00
border-radius:2px;
}
2018-06-22 02:35:18 -05:00
2018-05-18 13:41:41 -05:00
h3 { margin: 0; }
2018-06-22 02:35:18 -05:00
.actor-inline {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
2018-05-18 13:41:41 -05:00
}
.actor-box-big {
2018-06-22 03:01:05 -05:00
display: block;
text-decoration: none;
.actor-box-wrapper {
margin-bottom:40px;
.actor-icon {
width:120px;
border-radius:2px;
}
h3 { margin: 0; }
}
}
2018-07-21 16:16:40 -05:00
.note-box {
margin-bottom: 70px;
}
2018-05-18 13:41:41 -05:00
.note {
display: flex;
.l {
color: $color-note-link;
}
.h-card {
flex: initial;
width: 50px;
}
.u-photo {
width: 50px;
border-radius: 2px;
}
.note-wrapper {
flex: 1;
padding-left: 15px;
}
.bottom-bar { margin-top:10px; }
.img-attachment {
max-width:100%;
border-radius:2px;
}
h3 {
font-size: 1.1em;
color: $color-light;
}
strong { font-weight:600; }
.note-container {
clear: right;
padding:10px 0;
2018-07-29 14:45:17 -05:00
word-break: normal;
2018-05-18 13:41:41 -05:00
}
}
2018-07-21 16:16:40 -05:00
.color-menu-background {
background: $color-menu-background;
}
.og-link { text-decoration: none; }
.og-link:hover { text-decoration: none; }
2018-07-01 05:49:16 -05:00
.bar-item-no-hover {
cursor: default;
2018-07-01 05:49:16 -05:00
background: $color-menu-background;
padding: 5px;
color: $color-light;
margin-right:5px;
border-radius:2px;
}
.bar-item-no-hover:hover {
cursor: default;
}
.bar-item-pinned {
cursor: default;
background: $color-menu-background;
color: $color-light;
padding: 5px;
margin-right:5px;
border-radius:2px;
}
.bar-item-pinned:hover {
cursor: default;
}
2018-05-18 13:41:41 -05:00
.bar-item {
background: $color-menu-background;
padding: 5px;
color: $color-light;
margin-right:5px;
border-radius:2px;
}
2018-07-01 05:49:16 -05:00
.bar-item:hover {
background: $primary-color;
color: $background-color;
}
button.bar-item {
border: 0
}
form.action-form {
display: inline;
}
2018-06-03 14:28:06 -05:00
.perma {
font-size: 1.25em;
}
2018-05-18 13:41:41 -05:00
.bottom-bar .perma-item {
2018-06-03 14:28:06 -05:00
margin-right: 5px;
2018-05-18 13:41:41 -05:00
}
.bottom-bar a.bar-item:hover {
text-decoration: none;
}
.footer > div {
width: 90%;
max-width: 720px;
margin: 40px auto;
}
.footer a, .footer a:hover, .footer a:visited {
text-decoration: underline;
color: $color;
}
.summary {
color: $color-summary;
font-size: 1.1em;
2018-06-22 15:51:11 -05:00
margin-top: 10px;
margin-bottom: 30px;
2018-05-18 13:41:41 -05:00
}
.summary a, .summay a:hover {
color: $color-summary;
text-decoration: underline;
2018-05-18 13:41:41 -05:00
}
#followers, #following, #new {
margin-top: 50px;
2018-05-18 13:41:41 -05:00
}
#admin {
margin-top: 50px;
2018-05-18 13:41:41 -05:00
}
textarea, input {
background: $color-menu-background;
padding: 10px;
color: $color-light;
border: 0px;
border-radius: 2px;
}
input {
padding: 10px;
}
input[type=submit] {
color: $primary-color;
text-transform: uppercase;
}
2018-09-02 12:43:09 -05:00
.note-video {
margin: 30px 0 10px 0;
}