codimd/public/css/cover.css

413 lines
7.0 KiB
CSS

/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none;
/* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html {
height: 100%;
}
html,
body {
background-color: #333;
}
body {
min-height: 100%;
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
padding: 10px;
display: table;
width: 100%;
height: 100vh;
/* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
box-shadow: inset 0 0 100px rgba(0, 0, 0, .5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: middle;
}
.cover-container {
width: 100%;
padding-top: 80px;
margin-right: auto;
margin-left: auto;
}
/* Padding for spacing */
.inner {
padding: 10px;
}
/*
* Header
*/
.masthead {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.masthead-brand {
margin-top: 10px;
margin-bottom: 10px;
}
.masthead-nav {
text-align: left;
max-width: 1000px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
}
.masthead-nav > li {
display: inline-block;
}
.masthead-nav > li + li {
margin-left: 20px;
}
.masthead-nav > li > a {
padding-right: 0;
padding-left: 0;
font-size: 16px;
font-weight: bold;
color: #fff;
/* IE8 proofing */
color: rgba(255, 255, 255, .75);
border-bottom: 2px solid transparent;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
background-color: transparent;
border-bottom-color: #a9a9a9;
border-bottom-color: rgba(255, 255, 255, .25);
}
.masthead-nav > .active > a,
.masthead-nav > .active > a:hover,
.masthead-nav > .active > a:focus {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 768px) {
.masthead-brand {
float: left;
}
.masthead-nav {
float: none;
}
.inner {
padding: 30px 25px;
}
}
/*
* Cover
*/
.cover {
padding: 0 20px;
}
.cover .btn-lg {
padding: 10px 20px;
font-weight: bold;
}
/*
* Footer
*/
.mastfoot {
color: #999;
/* IE8 proofing */
color: rgba(255, 255, 255, .5);
}
/*
* Affix and center
*/
@media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
}
.mastfoot {
position: fixed;
bottom: 0;
}
/* Start the vertical centering */
.site-wrapper-inner {
vertical-align: middle;
}
/* Handle the widths */
.masthead,
.mastfoot,
.cover-container {
width: 100%;
/* Must be percentage or pixels for horizontal alignment */
}
}
@media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 1000px;
}
}
.section ul {
list-style: none;
}
/* custom */
html,
body {
overflow-x: hidden;
}
input {
color: black;
}
.mastfoot {
position: relative;
}
.select2-container-multi .select2-choices .select2-search-field input {
font-family: inherit;
padding: 5px 12px;
}
.select2-container {
margin: 0 auto !important;
}
.list {
width: 100%;
padding-left: 0;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flex;
display: -o-inline-flex;
display: inline-flex;
-webkit-flex-direction: row;
-moz-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-flow: row wrap;
-moz-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: flex-start;
-moz-justify-content: flex-start;
-ms-justify-content: flex-start;
justify-content: flex-start;
}
.list {
margin: 20px 0;
}
.list li {
padding: 0 10px;
}
.list li * {
word-break: break-word;
word-wrap: break-word;
}
.list li a {
text-decoration: none;
}
.list li p {
color: gray;
}
.list li .item {
padding: 5px 25px;
margin: 10px 0;
background: white;
border-radius: 5px;
color: black;
text-shadow: none;
min-height: 134px;
display: table;
min-width: 100%;
}
.list li .item .content {
display: table-cell;
vertical-align: middle;
}
.list li .item .content .tags {
line-height: 25px;
}
.list li .item .content .tags span {
display: inline-block;
line-height: 15px;
}
.form-inline {
padding: 0 10px;
}
.sort.asc {
text-decoration: overline;
}
.sort.desc {
text-decoration: underline;
}
.ui-avatar {
display: inline-block;
overflow: hidden;
line-height: 1;
vertical-align: middle;
border-radius: 3px;
}
.ui-avatar.circle {
border-radius: 50%;
}
.ui-history-close {
position: absolute;
right: 14px;
top: 15px;
font-size: 16px;
opacity: 0.5;
}
.ui-history-close:hover {
opacity: 1;
}
.ui-history-pin {
position: absolute;
left: 14px;
top: 15px;
font-size: 16px;
opacity: 0.2;
transition: opacity 0.2s ease-in-out;
-webkit-transition: opacity 0.2s ease-in-out;
}
.item:hover .ui-history-pin:hover {
opacity: 1;
}
.item .ui-history-pin.active {
opacity: 1;
color: #d43f3a;
}
.ui-or {
margin: 5px;
}
.ui-use-tags {
min-width: 172px;
max-width: 344px;
}
.modal-title {
text-align: left;
color: black;
}
.modal-body {
color: black;
}
.btn-file {
position: relative;
overflow: hidden;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
.social-foot {
line-height: 30px;
}
.social-foot > * {
line-height: 20px;
vertical-align: middle !important;
display: inline-block !important;
}
.btn-link, .btn-link:hover, .btn-link:focus, .btn-link:active {
color: white;
}
.screenshot {
margin: 30px auto;
width: 100%;
border-radius: 3px;
}
select {
color: black;
}
@media (max-width: 768px) {
span.ui-or {
display: block;
}
.ui-use-tags {
max-width: 100%;
}
}
.btn-mattermost {
background-color: #2179ec;
border-color: rgba(0,0,0,0.2);
color: #fff;
}
.btn-gitlab {
background-color: #e35431;
border-color: rgba(0,0,0,0.2);
color: #fff;
}
.btn-mattermost:hover, .btn-mattermost:active {
background-color: #105fc6;
border-color: rgba(0,0,0,0.2);
color: #fff;
}
.btn-gitlab:hover, .btn-gitlab:active {
background-color: #c23b1a;
border-color: rgba(0,0,0,0.2);
color: #fff;
}
a.btn.btn-social > i.oauth-icon {
display: inline-flex;
height: 45px;
width: 45px;
line-height: inherit;
padding: 6px;
}
a.btn.btn-social > i.oauth-icon > img {
width: 100%;
height: 100%;
line-height: inherit;
}