| 1 |
/*! Licensed under MIT, https://github.com/sofish/pen */ |
| 2 |
|
| 3 |
/* basic reset */ |
| 4 |
.pen, .pen-menu, .pen-input, .pen textarea{font:400 1.16em/1.45 Palatino, Optima, Georgia, serif;color:#331;} |
| 5 |
.pen:focus{outline:none;} |
| 6 |
.pen fieldset, img {border: 0;} |
| 7 |
.pen blockquote{padding-left:10px;margin-left:-14px;border-left:4px solid #1abf89;} |
| 8 |
.pen a{color:#1abf89;} |
| 9 |
.pen del{text-decoration:line-through;} |
| 10 |
.pen sub, .pen sup {font-size:75%;position:relative;vertical-align:text-top;} |
| 11 |
:root .pen sub, :root .pen sup{vertical-align:baseline; /* for ie9 and other mordern browsers */} |
| 12 |
.pen sup {top:-0.5em;} |
| 13 |
.pen sub {bottom:-0.25em;} |
| 14 |
.pen hr{border:none;border-bottom:1px solid #cfcfcf;margin-bottom:25px;*color:pink;*filter:chroma(color=pink);height:10px;*margin:-7px 0 15px;} |
| 15 |
.pen small{font-size:0.8em;color:#888;} |
| 16 |
.pen em, .pen b, .pen strong{font-weight:700;} |
| 17 |
.pen pre{white-space:pre-wrap;padding:0.85em;background:#f8f8f8;} |
| 18 |
|
| 19 |
/* block-level element margin */ |
| 20 |
.pen p, .pen pre, .pen ul, .pen ol, .pen dl, .pen form, .pen table, .pen blockquote{margin-bottom:16px;} |
| 21 |
|
| 22 |
/* headers */ |
| 23 |
.pen h1, .pen h2, .pen h3, .pen h4, .pen h5, .pen h6{margin-bottom:16px;font-weight:700;line-height:1.2;} |
| 24 |
.pen h1{font-size:2em;} |
| 25 |
.pen h2{font-size:1.8em;} |
| 26 |
.pen h3{font-size:1.6em;} |
| 27 |
.pen h4{font-size:1.4em;} |
| 28 |
.pen h5, .pen h6{font-size:1.2em;} |
| 29 |
|
| 30 |
/* list */ |
| 31 |
.pen ul, .pen ol{margin-left:1.2em;} |
| 32 |
.pen ul, .pen-ul{list-style:disc;} |
| 33 |
.pen ol, .pen-ol{list-style:decimal;} |
| 34 |
.pen li ul, .pen li ol, .pen-ul ul, .pen-ul ol, .pen-ol ul, .pen-ol ol{margin:0 2em 0 1.2em;} |
| 35 |
.pen li ul, .pen-ul ul, .pen-ol ul{list-style: circle;} |
| 36 |
|
| 37 |
/* pen menu */ |
| 38 |
.pen-menu [class^="icon-"], .pen-menu [class*=" icon-"] { /* reset to avoid conflicts with Bootstrap */ |
| 39 |
background: transparent; |
| 40 |
background-image: none; |
| 41 |
} |
| 42 |
.pen-menu { min-width: 320px; } |
| 43 |
.pen-menu, .pen-input{font-size:14px;line-height:1;} |
| 44 |
.pen-menu{white-space:nowrap;box-shadow:1px 2px 3px -2px #222;background:#333;background-image:linear-gradient(to bottom, #222, #333);opacity:0.9;position:fixed;height:36px;border:1px solid #333;border-radius:3px;display:none;z-index:1000;} |
| 45 |
.pen-menu:after {top:100%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;} |
| 46 |
.pen-menu:after {border-color:rgba(51, 51, 51, 0);border-top-color:#333;border-width:6px;left:50%;margin-left:-6px;} |
| 47 |
.pen-menu-below:after {top: -11px; display:block; -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);} |
| 48 |
.pen-icon{font:normal 900 16px/40px Georgia serif;min-width:20px;display:inline-block;padding:0 10px;height:36px;overflow:hidden;color:#fff;text-align:center;cursor:pointer;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;} |
| 49 |
.pen-icon:first-of-type{border-top-left-radius:3px;border-bottom-left-radius:3px;} |
| 50 |
.pen-icon:last-of-type{border-top-right-radius:3px;border-bottom-right-radius:3px;} |
| 51 |
.pen-icon:hover{background:#000;} |
| 52 |
.pen-icon.active{color:#1abf89;background:#000;box-shadow:inset 2px 2px 4px #000;} |
| 53 |
.pen-input{position:absolute;width:100%;left:0;top:0;height:36px;line-height:20px;background:#333;color:#fff;border:none;text-align:center;display:none;font-family:arial, sans-serif;} |
| 54 |
.pen-input:focus{outline:none;} |
| 55 |
|
| 56 |
.pen-textarea{display:block;background:#f8f8f8;padding:20px;} |
| 57 |
.pen textarea{font-size:14px;border:none;background:none;width:100%;_height:200px;min-height:200px;resize:none;} |
| 58 |
|
| 59 |
.pen-menu [class^="icon-"]:before, .pen-menu [class*=" icon-"]:before { |
| 60 |
font-family: "Font Awesome 5 Free"; |
| 61 |
font-style: normal; |
| 62 |
font-weight: 900; |
| 63 |
speak: none; |
| 64 |
display: inline-block; |
| 65 |
text-decoration: inherit; |
| 66 |
width: 1em; |
| 67 |
margin-right: .2em; |
| 68 |
text-align: center; |
| 69 |
font-variant: normal; |
| 70 |
text-transform: none; |
| 71 |
line-height: 1em; |
| 72 |
margin-left: .2em; |
| 73 |
} |
| 74 |
.pen-menu .icon-location:before { content: '\e815'; } /* '' */ |
| 75 |
.pen-menu .icon-fit:before { content: '\e80f'; } /* '' */ |
| 76 |
.pen-menu .icon-bold:before { content: "\f032"; } /* '� |
| 77 |
' */ |
| 78 |
.pen-menu .icon-italic:before { content: "\f033"; } /* '' */ |
| 79 |
.pen-menu .icon-justifyleft:before { content: '\e80a'; } /* '' */ |
| 80 |
.pen-menu .icon-justifycenter:before { content: '\e80b'; } /* '' */ |
| 81 |
.pen-menu .icon-justifyright:before { content: '\e80c'; } /* '' */ |
| 82 |
.pen-menu .icon-justifyfull:before { content: '\e80d'; } /* '' */ |
| 83 |
.pen-menu .icon-outdent:before { content: '\e800'; } /* '' */ |
| 84 |
.pen-menu .icon-indent:before { content: '\e801'; } /* '' */ |
| 85 |
.pen-menu .icon-mode:before { content: '\e813'; } /* '' */ |
| 86 |
.pen-menu .icon-fullscreen:before { content: '\e80e'; } /* '' */ |
| 87 |
.pen-menu .icon-insertunorderedlist:before { content: '\e802'; } /* '' */ |
| 88 |
.pen-menu .icon-insertorderedlist:before { content: '\e803'; } /* '' */ |
| 89 |
.pen-menu .icon-strikethrough:before { content: "\f0cc"; } /* '' */ |
| 90 |
.pen-menu .icon-strike:before { content: "\f0cc"; } /* '' */ |
| 91 |
.pen-menu .icon-underline:before { content: "\f0cd"; } /* '' */ |
| 92 |
.pen-menu .icon-blockquote:before { content: '\e814'; } /* '' */ |
| 93 |
.pen-menu .icon-undo:before { content: '\e817'; } /* '' */ |
| 94 |
.pen-menu .icon-code:before { content: '\e816'; } /* '' */ |
| 95 |
.pen-menu .icon-pre:before { content: '\e816'; } /* '' */ |
| 96 |
.pen-menu .icon-unlink:before { content: '\e811'; } /* '' */ |
| 97 |
.pen-menu .icon-superscript:before { content: '\e808'; } /* '' */ |
| 98 |
.pen-menu .icon-subscript:before { content: '\e809'; } /* '' */ |
| 99 |
.pen-menu .icon-inserthorizontalrule:before { content: '\e818'; } /* '' */ |
| 100 |
.pen-menu .icon-pin:before { content: '\e812'; } /* '' */ |
| 101 |
.pen-menu .icon-createlink:before { content: '\e810'; } /* '' */ |
| 102 |
.pen-menu .icon-h1:before { content: 'H1'; } |
| 103 |
.pen-menu .icon-h2:before { content: 'H2'; } |
| 104 |
.pen-menu .icon-h3:before { content: 'H3'; } |
| 105 |
.pen-menu .icon-h4:before { content: 'H4'; } |
| 106 |
.pen-menu .icon-h5:before { content: 'H5'; } |
| 107 |
.pen-menu .icon-h6:before { content: 'H6'; } |
| 108 |
.pen-menu .icon-p:before { content: 'P'; } |
| 109 |
.pen-menu .icon-insertimage:before { width:1.8em;margin:0;position:relative;top:-2px;content:'IMG';font-size:12px;border:1px solid #fff;padding:2px;border-radius:2px; } |
| 110 |
.pen { |
| 111 |
position: relative; |
| 112 |
} |
| 113 |
.pen.hinted h1:before, |
| 114 |
.pen.hinted h2:before, |
| 115 |
.pen.hinted h3:before, |
| 116 |
.pen.hinted h4:before, |
| 117 |
.pen.hinted h5:before, |
| 118 |
.pen.hinted h6:before, |
| 119 |
.pen.hinted blockquote:before, |
| 120 |
.pen.hinted hr:before { |
| 121 |
color: #eee; |
| 122 |
position: absolute; |
| 123 |
right: 100%; |
| 124 |
white-space: nowrap; |
| 125 |
padding-right: 10px; |
| 126 |
} |
| 127 |
.pen.hinted blockquote { border-left: 0; margin-left: 0; padding-left: 0; } |
| 128 |
.pen.hinted blockquote:before { |
| 129 |
color: #1abf89; |
| 130 |
content: ">"; |
| 131 |
font-weight: bold; |
| 132 |
vertical-align: center; |
| 133 |
} |
| 134 |
.pen.hinted h1:before { content: "#";} |
| 135 |
.pen.hinted h2:before { content: "##";} |
| 136 |
.pen.hinted h3:before { content: "###";} |
| 137 |
.pen.hinted h4:before { content: "####";} |
| 138 |
.pen.hinted h5:before { content: "#####";} |
| 139 |
.pen.hinted h6:before { content: "######";} |
| 140 |
.pen.hinted hr:before { content: "﹘﹘﹘"; line-height: 1.2; vertical-align: bottom; } |
| 141 |
|
| 142 |
.pen.hinted pre:before, .pen.hinted pre:after { |
| 143 |
content: "```"; |
| 144 |
display: block; |
| 145 |
color: #ccc; |
| 146 |
} |
| 147 |
|
| 148 |
.pen.hinted ul { list-style: none; } |
| 149 |
.pen.hinted ul li:before { |
| 150 |
content: "*"; |
| 151 |
color: #999; |
| 152 |
line-height: 1; |
| 153 |
vertical-align: bottom; |
| 154 |
margin-left: -1.2em; |
| 155 |
display: inline-block; |
| 156 |
width: 1.2em; |
| 157 |
} |
| 158 |
|
| 159 |
.pen.hinted b:before, .pen.hinted b:after { content: "**"; color: #eee; font-weight: normal; } |
| 160 |
.pen.hinted i:before, .pen.hinted i:after { content: "*"; color: #eee; } |
| 161 |
|
| 162 |
.pen.hinted a { text-decoration: none; } |
| 163 |
.pen.hinted a:before {content: "["; color: #ddd; } |
| 164 |
.pen.hinted a:after { content: "](" attr(href) ")"; color: #ddd; } |
| 165 |
|
| 166 |
.pen-placeholder:after { position: absolute; top: 0; left: 0; content: attr(data-placeholder); color: #999; cursor: text; } |
| 167 |
|
