vue-markdown/src/markdown/css/common.less

232 lines
5.0 KiB
Plaintext

@charset "utf-8";
/*
*Author zhaoxuhui
*/
.markdown-preview {
max-width: 960px;
margin: 0 auto !important;
flex: 1;
overflow: hidden;
overflow-y: scroll;
background: #fff;
>div{
padding: 10px 12px !important;
background: #fff;
&::-webkit-scrollbar {
display: none;
}
}
&::-webkit-scrollbar {
display: none;
}
ul {
list-style: none;
padding: 0 20px;
li {
position: relative;
&:after {
display: block;
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
position: absolute;
z-index: 99;
top: 7px;
left: -20px;
background: @content;
}
}
}
ol,
ul {
margin: 20px 0;
padding: 0 40px;
li {
font-size: 14px !important;
color: @content;
margin-bottom: 10px;
line-height: 24px;
padding-left: 12px;
input[type="checkbox"] {
position: relative;
cursor: pointer;
overflow: visible;
position: absolute;
left: 0;
top: 0;
&:after {
display: block;
content: "";
width: 16px;
height: 16px;
position: absolute;
z-index:99999;
background: #fff;
top: 0;
right: 0;
}
&:before {
display: block;
width: 18px;
height: 18px;
position: absolute;
content: '';
top: 2px;
left: -25px;
z-index: 999999;
background: url("../img/notChecked.jpg") no-repeat;
background-size: contain;
}
}
input[type="checkbox"]:checked {
&:before {
background: url("../img/checked.jpg") no-repeat;
background-size: contain;
}
}
}
}
ol {
list-style-type: decimal;
}
hr {
color: @border;
height: 1px;
border: 0;
border-top: 1px solid @border;
margin: 20px 0;
padding: 0;
}
del,
em,
strong {
display: inline-block;
margin: @margin;
}
blockquote {
position: relative;
background: @background;
padding: 6px 12px;
border-left: 5px solid @divider;
border-radius: 2px;
margin: @margin;
}
/*基本样式*/
h1,
h2,
h3,
h4,
h5,
h6 {
color: @title;
}
h1 {
font-size: 28px;
border-bottom: 1px solid @border;
//text-align: center;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 18px;
}
h4 {
font-size: 16px;
}
h5 {
font-size: 14px;
}
h6 {
font-size: 12px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
/* border-bottom: 1px solid @border; */
padding: 8px 0;
font-weight: 600;
}
p {
font-size: 14px !important;
color: @content;
margin: @margin;
line-height: @line-height;
}
img {
display: block;
width: 90%;
margin: 20px auto;
}
table {
width: 100%;
border: 1px solid @border;
border-bottom: 0;
background: #fff;
border-spacing: 0;
border-collapse: collapse;
margin: 20px 0;
tr {
-webkit-transition: background 0.1s;
transition: background 0.1s;
text-align: nav;
}
tr td,
tr th {
padding: 0 8px;
font-size: 14px;
line-height: 39px;
color: #333;
border-bottom: 1px solid @border;
cursor: pointer;
}
th {
background: #f8f8f9;
text-align: left;
font-weight: bold;
}
tr:nth-of-type(even) {
td {
background: #f8f8f9;
}
}
tr {
&:hover {
td {
background: #eaf5f6;
}
}
}
td,
th {
border: 1px solid @border;
}
}
input[type="checkbox"] {
display: inline-block;
border-radius: 0;
margin-right: 8px;
}
a {
text-decoration: none;
color: @info;
font-size: 14px;
line-height: @line-height;
}
}
@media only screen and (min-width: 1600px ) {
.markdown-preview {
max-width: 60%;
margin: 0 auto !important;
}
}