Viewing source of musou/zenburn-sans
Revision ID:
d3997ec4-
Hierarchy
- Default
- musou/zenburn-sans
Common CSS
/*! https://gitlab.com/edgyemma/Postmill */
html {
background:#2b2b2b;
box-sizing:border-box;
color:#dcdccc;
font-family:Helvetica Neue,Helvetica,Arial,sans-serif;
font-size:14px;
height:100%;
line-height:1.5
}
*,:after,:before {
box-sizing:inherit
}
body {
display:flex;
flex-direction:column;
min-height:100%;
margin:0
}
a {
color:#7f9f7f;
text-decoration:none
}
a:hover {
text-decoration:underline
}
blockquote,dl,h1,h2,h3,h4,h5,h6,ol,p,ul {
margin-top:0;
margin-bottom:1rem
}
ol ol,ol ul,ul ol,ul ul {
margin-bottom:0
}
button,input,optgroup,option,select,textarea {
font:inherit
}
pre {
overflow-x:auto
}
select {
background-color: #3f3f3f;
color: #dcdccc;
}
.alert {
border-radius:.5rem;
display:flex;
flex-direction:column;
margin-bottom:1rem;
padding:1rem 1rem 0
}
.alert--animate {
animation:alert-fadein 1s
}
.alert--notice {
background:#4f4f4f
}
.alert--success {
background:#7f9f7f
}
@keyframes alert-fadein {
0% {
opacity:0
}
to {
opacity:1
}
}
.button {
border:none;
background:transparent;
padding:0;
background-color:#6f8f6f;
border-radius:4px;
color:#dcdccc;
cursor:pointer;
display:inline-block;
font-size:120%;
padding:.5rem 1rem;
text-align:center;
white-space:nowrap
}
.button:hover {
background-color:#7f9f7f;
text-decoration:none
}
.button:active {
color:#ffffef
}
.button--inline {
font-size:100%;
display:inline;
padding:.25rem .5rem
}
.button--secondary {
background:transparent;
color:#6f8f6f;
border:1px solid #7f9f7f;
padding:calc(.5rem - 1px) calc(1rem - 1px)
}
.button--secondary.button--inline {
padding:calc(.25rem - 1px) calc(.5rem - 1px)
}
.button--secondary:hover {
background:transparent;
color:#7f9f7f;
border-color:#7f9f7f
}
.clear-notification-button {
border:none;
background:transparent;
padding:0;
background-color:#7f9f7f;
border-radius:4px;
color:#dcdccc;
cursor:pointer;
display:inline-block;
font-size:120%;
padding:.5rem 1rem;
text-align:center;
white-space:nowrap;
font-size:90%;
float:right;
padding:.25rem .5rem
}
.clear-notification-button:hover {
background-color:#7f9f7f;
text-decoration:none
}
.clear-notification-button:active {
color:#efefef
}
.clear-notification-button--inline {
font-size:100%;
display:inline;
padding:.25rem .5rem
}
.clear-notification-button--secondary {
background:transparent;
color:#7f9f7f;
border:1px solid #7f9f7f;
padding:calc(.5rem - 1px) calc(1rem - 1px)
}
.clear-notification-button--secondary.button--inline {
padding:calc(.25rem - 1px) calc(.5rem - 1px)
}
.clear-notification-button--secondary:hover {
background:transparent;
color:#7f9f7f;
border-color:#7f9f7f
}
.diff-table {
border-collapse:collapse;
margin-bottom:1rem;
width:100%
}
.diff-table__line-group {
border-bottom:.5rem solid #fff
}
.diff-table__line-no {
background:#d3d3d3;
padding:.25rem .5rem;
text-align:right;
vertical-align:top;
width:5%
}
.diff-table__content {
padding:.25rem .5rem;
min-width:4rem;
vertical-align:top;
width:45%
}
.diff-table__content--changed {
background:#ddf
}
.diff-table__content--removed {
background:#fdd
}
.diff-table__content--added {
background:#dfd
}
.form button,.form input,.form select,.form textarea {
display:inline-block
}
.form input:not([type]),.form input[type=date],.form input[type=datetime-local],.form input[type=datetime],.form input[type=email],.form input[type=number],.form input[type=password],.form input[type=search],.form input[type=tel],.form input[type=text],.form input[type=time],.form input[type=url],.form textarea {
background-color:#3f3f3f;
border:1px solid #aaa;
border-radius:2px;
line-height:1.35;
color:#dcdccc;
padding:.5rem
}
.form input:not([type]):focus,.form input[type=date]:focus,.form input[type=datetime-local]:focus,.form input[type=datetime]:focus,.form input[type=email]:focus,.form input[type=number]:focus,.form input[type=password]:focus,.form input[type=search]:focus,.form input[type=tel]:focus,.form input[type=text]:focus,.form input[type=time]:focus,.form input[type=url]:focus,.form textarea:focus {
border:1px solid #dcdccc;
outline:none
}
.form input:not([type])[disabled],.form input[type=date][disabled],.form input[type=datetime-local][disabled],.form input[type=datetime][disabled],.form input[type=email][disabled],.form input[type=number][disabled],.form input[type=password][disabled],.form input[type=search][disabled],.form input[type=tel][disabled],.form input[type=text][disabled],.form input[type=time][disabled],.form input[type=url][disabled],.form textarea[disabled] {
background-color:#000000;
color:#656555
}
.form__errors {
margin:0;
padding:0
}
.form__error {
color:red;
font-weight:700;
list-style-position:inside;
margin:0
}
.form__row {
max-width:40rem;
margin-bottom:1rem
}
.form__row input:not([type]),.form__row input[type=date],.form__row input[type=datetime-local],.form__row input[type=datetime],.form__row input[type=email],.form__row input[type=number],.form__row input[type=password],.form__row input[type=search],.form__row input[type=tel],.form__row input[type=text],.form__row input[type=time],.form__row input[type=url],.form__row textarea {
width:100%
}
.form__row--markdown {
margin-bottom:0
}
.form__group {
border:1px solid #aaa;
margin-bottom:1rem;
padding:0 1rem
}
.form__help {
color:dimgray;
font-size:.8rem
}
.form__label {
display:inline-block;
margin-right:1ex
}
.form__markdown-help {
font-size:smaller;
text-align:right;
margin-bottom:0
}
.form__button-row {
display:flex;
min-width:0
}
@media screen and (max-width:767px) {
.form__button-row {
flex-direction:column
}
}
.form__button-row .button {
margin:0 1rem 0 0
}
@media screen and (max-width:767px) {
.form__button-row .button {
margin:0 0 1rem
}
}
.icon {
vertical-align:middle
}
.icon svg {
fill:currentColor;
height:1em;
width:1em
}
.icon__alt {
width:0;
height:0;
position:absolute
}
.markdown-input__preview {
background:#3f3f3f;
border-radius:4px;
display:flex;
flex-direction:column;
margin:1rem 0;
padding:1rem 1rem 0
}
@media screen and (min-width:768px) {
.site-nav {
background-color:#3f3f3f;
display:flex;
margin-bottom:1rem;
padding:0 1rem
}
.site-nav__mobile-toggle {
display:none
}
.site-nav__link,.site-nav__logo {
color:#dcdccc;
display:block;
font-size:16px;
padding:1rem
}
.site-nav__logo {
font-weight:700
}
.site-nav__inner {
display:flex;
justify-content:space-between;
width:100%
}
.site-nav__menu {
display:flex;
padding:0;
margin:0
}
.site-nav__item {
display:block
}
.site-nav__item--has-notifications {
background:#06f
}
.site-nav__item.dropdown-container.expanded,.site-nav__item.dropdown-container:not(.js):hover {
background:#7f9f7f
}
}
@media screen and (max-width:767px) {
.site-nav {
background-color:#3f3f3f;
margin-bottom:1rem
}
.site-nav__logo {
font-weight:700
}
.site-nav__link,.site-nav__logo,.site-nav__mobile-toggle {
color:#dcdccc;
font-size:16px;
padding:1rem
}
.site-nav__mobile-toggle--has-notifications {
background:#06f
}
.site-nav__header {
display:flex;
justify-content:space-between
}
.site-nav__menu {
margin:0;
padding:0
}
.site-nav__item--has-notifications {
background:#06f
}
.site-nav__item.dropdown-container.expanded,.site-nav__item.dropdown-container:not(.js):hover {
background:#7f9f7f
}
.site-nav__link {
display:block
}
.site-nav__inner {
background-color:#7f9f7f;
display:none
}
.site-nav__inner--mobile-visible {
display:block
}
}
.sidebar {
display:flex;
flex-direction:column
}
@media screen and (min-width:768px) {
.sidebar {
margin-left:1rem;
float:right;
max-width:20rem
}
}
.sidebar__section {
background:#3f3f3f;
padding:1rem 1rem 0;
margin-bottom:1rem
}
.sidebar__title {
font-size:1.5rem
}
.sidebar:empty {
display:none
}
.source-code {
border:1px solid;
max-height:25em;
white-space:pre-wrap
}
.subscribe-button {
border:none;
background:transparent;
padding:0;
cursor:pointer;
display:inline-block
}
.subscribe-button__inner {
display:flex
}
.subscribe-button__label,.subscribe-button__subscriber-count {
background-color:#6f8f6f;
color:#dcdccc;
padding:.5rem 1rem
}
.subscribe-button__label {
border-radius:4px 0 0 4px
}
.subscribe-button__subscriber-count {
border-radius:0 4px 4px 0;
margin-left:1px
}
.subscribe-button:active .subscribe-button__label {
color:#efefef
}
.subscribe-button:hover .subscribe-button__label {
background-color:#7f9f7f
}
.subscribe-button--inline {
vertical-align:top;
display:inline
}
.subscribe-button--inline .subscribe-button__label,.subscribe-button--inline .subscribe-button__subscriber-count {
padding:.25rem .5rem
}
.table {
border-collapse:collapse;
margin-bottom:1rem;
width:100%
}
.table--fixed-columns {
table-layout:fixed
}
.table>thead {
border-bottom:2px solid #aaa
}
.table>tbody>tr>th,.table>tfoot>tr>th,.table>thead>tr>th,.table>tr>th {
text-align:left
}
.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th,.table>tr>td,.table>tr>th {
padding:.25rem
}
@media screen and (min-width:768px) {
.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th,.table>tr>td,.table>tr>th {
padding:.5rem
}
}
.table>tbody>tr:nth-child(2n)>td,.table>tbody>tr:nth-child(2n)>th {
background-color:#2f2f2f
}
.tabs {
display:flex;
flex-wrap:wrap;
margin-right:-1rem
}
.tabs__bar {
display:flex;
margin:0 1rem 1rem 0;
padding:0
}
.tabs__tab {
background-color: #3f3f3f;
display:block;
padding:0
}
.tabs__link {
border:1px solid transparent;
color: #dcdccc;
background-color: #3f3f3f;
display:block;
padding:.5rem 1rem
}
.tabs__link--active {
background:#494949;
border-color:#366060;
color: unset
}
.user-bio__title {
margin-bottom:0
}
.user-bio__registered {
font-size:.85rem
}
.comment {
border:1px solid #d3d3d3;
padding-top:.5rem
}
.comment:target>.comment-row {
background:#f0f0ff;
border:1px dotted
}
.comment-replies .comment {
margin:0 .5rem .5rem
}
.comment .comment-body {
padding-right:.5rem;
word-wrap:break-word
}
.comment-info {
color:#606070;
font-size:.85rem;
padding:.075rem 0;
font-weight:400
}
.comment-info form {
display:inline
}
.comment-info a,.comment-info button {
color:inherit;
cursor:pointer;
font-weight:700
}
.comment-info a:hover,.comment-info button:hover {
text-decoration:underline
}
.comment-info button {
border:none;
background:transparent;
padding:0
}
.comment-row {
display:flex;
flex-flow:row nowrap
}
.comment-row>:first-child {
flex:none;
min-width:0
}
.comment-row>:last-child {
flex:1 1 auto;
min-width:0
}
.comment-nav {
color:#606070;
font-size:.85rem;
padding:.075rem 0
}
.comment-nav>ul {
padding:0
}
.comment-nav>ul>li {
display:inline-block;
padding:0
}
.comment-nav form {
display:inline
}
.comment-nav a,.comment-nav button {
color:inherit;
cursor:pointer;
font-weight:700
}
.comment-nav a:hover,.comment-nav button:hover {
text-decoration:underline
}
.comment-nav button {
border:none;
background:transparent;
padding:0
}
.comment-nav li:not(:last-child) {
margin-right:1rem
}
.comment-nav ul {
margin-bottom:.5rem
}
.comment-form .comment-row label {
display:none
}
.comment-user.submitter {
background:#c00;
border-radius:2px;
color:#dcdccc;
padding:0 .25rem
}
.content-wrapper {
display:flex;
margin:0 1rem
}
@media screen and (max-width:767px) {
.content-wrapper {
flex-direction:column
}
}
.content-wrapper>.body {
flex:1 1 auto;
min-width:0
}
.content-wrapper>.sidebar {
flex:none;
min-width:0
}
.site-alerts {
margin:0 1rem
}
.site-alerts:empty {
display:none
}
.site-footer {
margin-top:auto;
padding:1rem 1rem 0
}
.site-footer .site-footer-version {
display:table;
margin-left:auto;
margin-right:auto;
opacity:.35;
font-size:.8rem;
text-align:center
}
.site-footer .site-footer-version:hover {
opacity:1
}
.notification-head {
font-size:1rem;
margin-bottom:0
}
.user-flag:before {
content:"["
}
.user-flag:after {
content:"]"
}
.user-flag-admin {
color:crimson
}
.user-flag-moderator {
color:#9370db
}
.forum-group-heading a {
color:#000
}
.grouped-forum-listing {
padding:0
}
@media screen and (min-width:544px) {
.grouped-forum-listing {
columns:2;
column-rule:solid 1px #789
}
}
@media screen and (min-width:736px) {
.grouped-forum-listing {
columns:3;
column-rule:solid 1px #789
}
}
@media screen and (min-width:928px) {
.grouped-forum-listing {
columns:4;
column-rule:solid 1px #789
}
}
@media screen and (min-width:1120px) {
.grouped-forum-listing {
columns:5;
column-rule:solid 1px #789
}
}
.grouped-forum-listing li {
list-style:none;
margin:0
}
.grouped-forum-listing ul {
padding:0;
margin:0 0 1rem
}
.grouped-forum-listing .forum-group-heading {
font-size:1.2rem
}
.message-reply,.message-thread-inner {
border:1px solid #d3d3d3;
margin-bottom:1rem;
padding:1rem 1rem 0
}
.message-head {
color:#606070;
font-size:.85rem;
padding:.075rem 0;
font-weight:400
}
.message-head form {
display:inline
}
.message-head a,.message-head button {
color:inherit;
cursor:pointer;
font-weight:700
}
.message-head a:hover,.message-head button:hover {
text-decoration:underline
}
.message-head button {
border:none;
background:transparent;
padding:0
}
.dropdown-container {
position:relative
}
.dropdown-container.expanded .dropdown-menu,.dropdown-container:not(.js) .dropdown-menu:hover,.dropdown-container:not(.js) .dropdown-toggle:hover+.dropdown-menu {
display:block
}
.dropdown-toggle:after {
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid;
content:"";
display:inline-block;
margin-left:5px;
vertical-align:middle
}
.dropdown-menu {
background:#3f3f3f;
border:1px solid #789;
border-top:none;
box-shadow:0 0 1px #789;
display:none;
margin-top:-1px;
min-width:12rem;
padding:0;
position:absolute;
left:0;
right:auto
}
.right-nav .dropdown-menu {
left:auto;
right:0
}
.dropdown-menu>li {
display:block;
padding:0;
white-space:pre
}
.dropdown-menu>li>a {
display:block;
padding:.5rem 1rem
}
.dropdown-menu>li>a:not(:hover)>.icon {
color:#dcdccc
}
.dropdown-menu>li>a:hover {
background:#7f9f7f;
color:#fff;
text-decoration:none
}
.horizontal-nav>ul {
padding:0
}
.horizontal-nav>ul>li {
display:inline-block;
padding:0
}
.pagination>ul {
padding:0
}
.pagination>ul>li {
display:inline-block;
padding:0
}
.pagination a {
border:none;
background:transparent;
padding:0;
background-color:#7f9f7f;
border-radius:4px;
color:#fff;
cursor:pointer;
display:inline-block;
font-size:120%;
padding:.5rem 1rem;
text-align:center;
white-space:nowrap;
font-size:1rem
}
.pagination a:hover {
background-color:#7f9f7f;
text-decoration:none
}
.pagination a:active {
color:#efefef
}
.pagination a--inline {
font-size:100%;
display:inline;
padding:.25rem .5rem
}
.pagination a--secondary {
background:transparent;
color:#7f9f7f;
border:1px solid #7f9f7f;
padding:calc(.5rem - 1px) calc(1rem - 1px)
}
.pagination a--secondary.button--inline {
padding:calc(.25rem - 1px) calc(.5rem - 1px)
}
.pagination a--secondary:hover {
background:transparent;
color:#7f9f7f;
border-color:#7f9f7f
}
.submission {
margin-bottom:1rem
}
.submission-header>* {
margin-bottom:0
}
.submission-row {
display:flex;
flex-flow:row nowrap
}
.submission-row>:first-child {
flex:none;
min-width:0
}
.submission-row>:last-child {
flex:1 1 auto;
min-width:0
}
.submission-title {
font-size:1.33rem;
font-weight:400;
margin:0
}
.submission-image,.submission-thumbnail {
display:block
}
.submission-image-container {
margin-right:1rem
}
@media screen and (max-width:480px) {
.submission-image-container {
display:none
}
}
.submission-link {
color: #6f8f6f;
}
.submission-link:visited {
color:#0000a9
}
.submission-sticky .submission-link {
color:green
}
.submission-info {
color:#606070;
font-size:.85rem;
padding:.075rem 0
}
.submission-info form {
display:inline
}
.submission-info a,.submission-info button {
color:inherit;
cursor:pointer;
font-weight:700
}
.submission-info a:hover,.submission-info button:hover {
text-decoration:underline
}
.submission-info button {
border:none;
background:transparent;
padding:0
}
.submission-nav {
color:#606070;
font-size:.85rem;
padding:.075rem 0
}
.submission-nav>ul {
padding:0
}
.submission-nav>ul>li {
display:inline-block;
padding:0
}
.submission-nav form {
display:inline
}
.submission-nav a,.submission-nav button {
color:inherit;
cursor:pointer;
font-weight:700
}
.submission-nav a:hover,.submission-nav button:hover {
text-decoration:underline
}
.submission-nav button {
border:none;
background:transparent;
padding:0
}
.submission-nav li:not(:last-child) {
margin-right:1rem
}
.submission-nav ul {
margin-bottom:0
}
.submission-body {
word-wrap:break-word;
padding-top:1rem
}
.submission-host {
font-size:.75rem
}
.submission-permalink-nav>ul {
padding:0
}
.submission-permalink-nav>ul>li {
display:inline-block;
padding:0
}
.submission-has-body.submission-body-hidden:not(.submission-has-url) a.submission-link:after {
content:" [Aa]";
color:#000001
}
.vote {
padding:.5rem 1.5rem;
text-align:center
}
.vote * {
display:block
}
.vote-score {
font-weight:700
}
.vote-button {
border:none;
background:transparent;
padding:0;
color:#4f4f4f;
line-height:1.15;
white-space:nowrap
}
.vote-user-upvoted .vote-up {
color: #7f9f7f;
}
.vote-user-downvoted .vote-down {
color:#9f7f7f;
}
@media (max-width:768px) {
input,text,textarea {
font-size:16px
}
}
.tabs__tab {
border-bottom:1px solid #999
}
.tabs__tab.tabs__tab--active {
border-bottom:3px solid #7f9f7f
}
.tabs__link {
padding:.4rem .7rem .2rem
}
.tabs__link--active {
border:0;
padding-top:.48em
}
.comment-body,.submission-body,.wiki-page-body {
max-width:46em
}
@media (min-width:768px) {
.sidebar {
width:20em
}
}
.comment {
border:0;
border-left:2px solid #d3d3d3;
padding-top:0
}
.comment-top-level.comment {
border-left:0
}
.comment-body p:last-child,.submission-body {
margin-bottom:.25em
}
.submission-body {
padding-top:0;
margin:.4em 0
}
h1.comment-info {
margin-bottom:.2em
}
.vote {
padding:.35rem 1rem
}
.comment-replies .comment:first-child {
margin-top:1em
}
.comment-replies .comment {
padding-top:1em
}
.comment-replies article:first-child {
padding-top:0
}
.comment,.user-page .comment {
margin-bottom:1rem
}
.comment-nav ul {
margin-bottom:0
}
.comment-replies .comment {
margin:0 0 0 1em
}
.comment-form {
margin-top:1em
}
@media (max-width:768px) {
.comment-replies .comment {
margin:0 0 0 .5em
}
}
.comment-info,.comment-nav,.submission-info,.submission-nav {
padding:0
}
.comment-nav a,.comment-nav button,.submission-nav a,.submission-nav button {
font-weight:400
}
.comment-nav li:not(:last-child),.submission-nav li:not(:last-child) {
margin-right:.8rem
}
.comment-nav-reply a,.submission-nav ul li:first-child a {
font-weight:700;
color:#6f8f6f;
}
.comment-info,.comment-nav,.submission-info,.submission-nav {
color:#8a8a8a
}
.submission-comments {
margin-top:2em
}
.submission-body,.wiki-page-body {
padding:0
}
.submission-body p:last-child,.wiki-page-body p:last-child {
margin-bottom:0
}
.comment-user.submitter {
background:transparent;
color:#4b4b4b;
padding:0
}
.submission-body p a,.submission:not(.submission-sticky) h1.submission-title a,.wiki-page-body p a {
color:#7f9f7f;
}
.submission-body p a:visited,.submission:not(.submission-sticky) h1.submission-title a:visited,.wiki-page-body p a:visited {
color:#8c5353;
}
.submission-body p a:active,.submission:not(.submission-sticky) h1.submission-title a:active,.wiki-page-body p a:active {
color:#8c5353;
}
.submission-body-hidden.submission-has-body:not(.submission-has-url) a.submission-link:after,.submission-body-hidden.submission-has-url.submission-has-body .submission-nav ul li:first-child a:after {
content:" [Aa]";
color:#8c5353;
}
.sidebar__title a,.sidebar__title a:visited {
color:#8c5353;
}
.tabs__bar {
background:#efefef
}
a.comment-user,a.submission-forum,a.submission-submitter {
color:#6f8f6f;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
background-color: #3f3f3f;
color: #dcdccc;
border: 1px solid #656566;
border-radius: 4px;
}
.select2-dropdown {
background-color: #3f3f3f !important;
color: #dcdccc !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid #dcdccc;
background-color: #3f3f3f !important;
color: #dcdccc !important;
}
.select2-search--dropdown {
background-color: #3f3f3f !important;
color: #dcdccc !important;
}
select2-container--default .select2-results__option[aria-selected="true"] {
background-color: #494949 !important;
color: #dcdccc !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
background-color: #494949 !important;
color: #dcdccc !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #7f9f7f !important;
color: #dcdccc !important;
}