4e84d4d458
Summary: Ref T13151. See PHI685. When you haunt the panel, we only let it take up part of the screen. Let it take up slightly more of the screen so that it's more likely to fit completely on-screen without needing to scroll. The behavior when it does scroll is fine (you get a scrollbar if your OS/browser is set up to show them) so this is a bit trivial/silly, but seems fine and doesn't have a big JS maintenance cost or anything. Test Plan: Pressed "Z", resized my window to a weird tiny useless size, got slightly better (I guess) behavior. Reviewers: amckinley Reviewed By: amckinley Maniphest Tasks: T13151 Differential Revision: https://secure.phabricator.com/D19480
913 lines
19 KiB
CSS
913 lines
19 KiB
CSS
/**
|
|
* @provides phabricator-remarkup-css
|
|
*/
|
|
|
|
.phabricator-remarkup {
|
|
line-height: 1.7em;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.phabricator-remarkup p {
|
|
margin: 0 0 12px;
|
|
}
|
|
|
|
.PhabricatorMonospaced,
|
|
.phabricator-remarkup .remarkup-code-block .remarkup-code {
|
|
font: 11px/15px "Menlo", "Consolas", "Monaco", monospace;
|
|
}
|
|
|
|
.platform-windows .PhabricatorMonospaced,
|
|
.platform-windows .phabricator-remarkup .remarkup-code-block .remarkup-code {
|
|
font: 12px/15px "Menlo", "Consolas", "Monaco", monospace;
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-code-block {
|
|
margin: 12px 0;
|
|
white-space: pre;
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-code-header {
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
background: rgba({$alphablue},0.08);
|
|
display: table-cell;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phabricator-remarkup .code-block-counterexample .remarkup-code-header {
|
|
background-color: {$sh-redbackground};
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-code-block .remarkup-code-header + pre {
|
|
border-top-left-radius: 0;
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-code-block pre {
|
|
background: rgba({$alphablue},0.08);
|
|
display: block;
|
|
color: {$blacktext};
|
|
overflow: auto;
|
|
padding: 12px;
|
|
border-radius: 3px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.phabricator-remarkup kbd {
|
|
display: inline-block;
|
|
min-width: 1em;
|
|
padding: 4px 5px 5px;
|
|
font-weight: normal;
|
|
font-size: 0.8rem;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
line-height: 0.6rem;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 -1px 0 rgba({$alphablue},0.08);
|
|
user-select: none;
|
|
background: {$lightgreybackground};
|
|
border: 1px solid {$lightgreyborder};
|
|
}
|
|
|
|
.phabricator-remarkup .kbd-join {
|
|
padding: 0 4px;
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.phabricator-remarkup pre.remarkup-counterexample {
|
|
background-color: {$sh-redbackground};
|
|
}
|
|
|
|
.phabricator-remarkup tt.remarkup-monospaced {
|
|
color: {$blacktext};
|
|
background: rgba({$alphablue},0.1);
|
|
padding: 1px 4px;
|
|
border-radius: 3px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* NOTE: You can currently produce this with [[link | `name`]]. Restore the
|
|
link color. */
|
|
.phabricator-remarkup a tt.remarkup-monospaced {
|
|
color: {$anchor};
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-header tt.remarkup-monospaced {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.phabricator-remarkup ul.remarkup-list {
|
|
list-style: disc;
|
|
margin: 12px 0 12px 30px;
|
|
}
|
|
|
|
.phabricator-remarkup ol.remarkup-list {
|
|
list-style: decimal;
|
|
margin: 12px 0 12px 30px;
|
|
}
|
|
|
|
.phabricator-remarkup ol ol.remarkup-list {
|
|
list-style: upper-alpha;
|
|
}
|
|
|
|
.phabricator-remarkup ol ol ol.remarkup-list {
|
|
list-style: lower-alpha;
|
|
}
|
|
|
|
.phabricator-remarkup ol ol ol ol.remarkup-list {
|
|
list-style: lower-roman;
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-list-with-checkmarks .remarkup-checked-item,
|
|
.phabricator-remarkup .remarkup-list-with-checkmarks .remarkup-unchecked-item {
|
|
list-style: none;
|
|
margin-left: -20px;
|
|
position: relative;
|
|
padding-left: 22px;
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-list-with-checkmarks input {
|
|
visibility: hidden;
|
|
width: 0;
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-list-with-checkmarks
|
|
.remarkup-list-item::before {
|
|
height: 16px;
|
|
width: 16px;
|
|
background-size: 16px;
|
|
display: inline-block;
|
|
content: '';
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 0;
|
|
}
|
|
|
|
.remarkup-list-with-checkmarks .remarkup-checked-item::before {
|
|
background-image: url(rsrc/image/controls/checkbox-checked.png);
|
|
}
|
|
|
|
.remarkup-list-with-checkmarks .remarkup-unchecked-item::before {
|
|
background-image: url(rsrc/image/controls/checkbox-unchecked.png);
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-list-with-checkmarks .remarkup-checked-item {
|
|
color: {$lightgreytext};
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.phabricator-remarkup ul.remarkup-list ol.remarkup-list,
|
|
.phabricator-remarkup ul.remarkup-list ul.remarkup-list,
|
|
.phabricator-remarkup ol.remarkup-list ol.remarkup-list,
|
|
.phabricator-remarkup ol.remarkup-list ul.remarkup-list {
|
|
margin: 4px 0 4px 24px;
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-list-item {
|
|
line-height: 1.7em;
|
|
}
|
|
|
|
.phabricator-remarkup li.phantom-item,
|
|
.phabricator-remarkup li.phantom-item {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.phabricator-remarkup h1.remarkup-header {
|
|
font-size: 24px;
|
|
line-height: 1.625em;
|
|
margin: 24px 0 4px;
|
|
}
|
|
|
|
.phabricator-remarkup h2.remarkup-header {
|
|
font-size: 20px;
|
|
line-height: 1.5em;
|
|
margin: 20px 0 4px;
|
|
}
|
|
|
|
.phabricator-remarkup h3.remarkup-header {
|
|
font-size: 18px;
|
|
line-height: 1.375em;
|
|
margin: 20px 0 4px;
|
|
}
|
|
|
|
.phabricator-remarkup h4.remarkup-header {
|
|
font-size: 16px;
|
|
line-height: 1.25em;
|
|
margin: 12px 0 4px;
|
|
}
|
|
|
|
.phabricator-remarkup h5.remarkup-header {
|
|
font-size: 15px;
|
|
line-height: 1.125em;
|
|
margin: 8px 0 4px;
|
|
}
|
|
|
|
.phabricator-remarkup h6.remarkup-header {
|
|
font-size: 14px;
|
|
line-height: 1em;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.phabricator-remarkup blockquote {
|
|
border-left: 3px solid {$sh-blueborder};
|
|
color: {$darkbluetext};
|
|
font-style: italic;
|
|
margin: 4px 0 12px 0;
|
|
padding: 8px 12px;
|
|
background-color: {$lightbluebackground};
|
|
}
|
|
|
|
.phabricator-remarkup blockquote *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.phabricator-remarkup blockquote blockquote {
|
|
background-color: rgba(175,175,175, .1);
|
|
}
|
|
|
|
.phabricator-remarkup blockquote em {
|
|
/* In blockquote bodies, default text is italic so emphasized text should
|
|
be normal. */
|
|
font-style: normal;
|
|
}
|
|
|
|
.phabricator-remarkup blockquote div.remarkup-reply-head {
|
|
font-style: normal;
|
|
padding-bottom: 4px;
|
|
}
|
|
|
|
.phabricator-remarkup blockquote div.remarkup-reply-head em {
|
|
/* In blockquote headers, default text is normal so emphasized text should
|
|
be italic. See T10686. */
|
|
font-style: italic;
|
|
}
|
|
|
|
.phabricator-remarkup blockquote div.remarkup-reply-head
|
|
.phui-tag-core {
|
|
background-color: transparent;
|
|
border: none;
|
|
padding: 0;
|
|
color: {$darkbluetext};
|
|
}
|
|
|
|
.phabricator-remarkup img.remarkup-proxy-image {
|
|
max-width: 640px;
|
|
max-height: 640px;
|
|
}
|
|
|
|
.phabricator-remarkup audio {
|
|
display: block;
|
|
margin: 16px auto;
|
|
min-width: 240px;
|
|
width: 50%;
|
|
}
|
|
|
|
video.phabricator-media {
|
|
background: {$greybackground};
|
|
}
|
|
|
|
.phabricator-remarkup video {
|
|
display: block;
|
|
margin: 0 auto;
|
|
max-width: 95%;
|
|
}
|
|
|
|
.phabricator-remarkup-mention-exists {
|
|
font-weight: bold;
|
|
background: #e6f3ff;
|
|
}
|
|
|
|
.phabricator-remarkup-mention-disabled {
|
|
font-weight: bold;
|
|
background: #dddddd;
|
|
}
|
|
|
|
.phui-remarkup-preview .phabricator-remarkup-mention-unknown,
|
|
.aphront-panel-preview .phabricator-remarkup-mention-unknown {
|
|
font-weight: bold;
|
|
background: #ffaaaa;
|
|
}
|
|
|
|
.phabricator-remarkup .phriction-link {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.phabricator-remarkup .phriction-link-missing {
|
|
color: {$red};
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.phabricator-remarkup .phriction-link-lock {
|
|
color: {$greytext};
|
|
}
|
|
|
|
.phabricator-remarkup-mention-nopermission .phui-tag-core {
|
|
background: {$lightgreybackground};
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-note {
|
|
margin: 16px 0;
|
|
padding: 12px;
|
|
border-left: 3px solid {$blue};
|
|
background: {$lightblue};
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-warning {
|
|
margin: 16px 0;
|
|
padding: 12px;
|
|
border-left: 3px solid {$yellow};
|
|
background: {$lightyellow};
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-important {
|
|
margin: 16px 0;
|
|
padding: 12px;
|
|
border-left: 3px solid {$red};
|
|
background: {$lightred};
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-note .remarkup-monospaced,
|
|
.phabricator-remarkup .remarkup-important .remarkup-monospaced,
|
|
.phabricator-remarkup .remarkup-warning .remarkup-monospaced {
|
|
background-color: rgba(150,150,150,.2);
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-note-word {
|
|
font-weight: bold;
|
|
color: {$darkbluetext};
|
|
}
|
|
|
|
.phabricator-remarkup-toc {
|
|
float: right;
|
|
border-left: 1px solid {$lightblueborder};
|
|
background: {$page.content};
|
|
width: 160px;
|
|
padding-left: 8px;
|
|
margin: 0 0 4px 8px;
|
|
}
|
|
|
|
.phabricator-remarkup-toc-header {
|
|
font-size: 13px;
|
|
line-height: 13px;
|
|
color: {$darkbluetext};
|
|
font-weight: bold;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.phabricator-remarkup-toc ul {
|
|
padding: 0;
|
|
margin: 0;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.phabricator-remarkup-toc ul ul {
|
|
margin: 0 0 0 8px;
|
|
}
|
|
|
|
.phabricator-remarkup-toc ul li {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-layout-right {
|
|
text-align: right;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-layout-center {
|
|
text-align: center;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-layout-inline {
|
|
display: inline;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-float-right {
|
|
float: right;
|
|
margin: .5em 1em 0;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-layout-link {
|
|
padding: 6px 6px 6px 42px;
|
|
border-radius: 3px;
|
|
margin: 0 0 4px;
|
|
display: inline-block;
|
|
font-weight: bold;
|
|
-webkit-font-smoothing: antialiased;
|
|
border: 1px solid {$lightblueborder};
|
|
border-radius: 3px;
|
|
color: {$blacktext};
|
|
min-width: 256px;
|
|
position: relative;
|
|
line-height: 20px;
|
|
overflow: hidden;
|
|
min-height: 38px;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-layout-icon {
|
|
font-size: 28px;
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-layout-info {
|
|
color: {$lightgreytext};
|
|
font-size: {$smallerfontsize};
|
|
font-weight: normal;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-layout-link:hover {
|
|
border-color: {$violet};
|
|
cursor: pointer;
|
|
}
|
|
|
|
.device-desktop .phabricator-remarkup-embed-layout-link:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-layout-link:hover
|
|
.phabricator-remarkup-embed-layout-icon {
|
|
color: {$violet};
|
|
}
|
|
|
|
.phabricator-remarkup-embed-layout-info-block {
|
|
display: block;
|
|
}
|
|
|
|
.embed-download-form {
|
|
display: inline-block;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-layout-link
|
|
.phabricator-remarkup-embed-layout-download {
|
|
color: {$lightgreytext};
|
|
border: none;
|
|
background: rgba(0, 0, 0, 0);
|
|
box-shadow: none;
|
|
outline: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align: left;
|
|
text-shadow: none;
|
|
border-radius: 0;
|
|
font: inherit;
|
|
display: inline;
|
|
min-width: 0;
|
|
font-weight: normal !important;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-layout-download:hover {
|
|
color: {$anchor};
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-float-left {
|
|
float: left;
|
|
margin: .5em 1em 0;
|
|
}
|
|
|
|
.phabricator-remarkup-image-error {
|
|
border: 1px solid {$redborder};
|
|
background: {$sh-redbackground};
|
|
padding: 8px 12px;
|
|
color: {$darkgreytext};
|
|
}
|
|
|
|
.phabricator-remarkup-embed-image {
|
|
display: inline-block;
|
|
border: 3px solid white;
|
|
box-shadow: 1px 1px 2px rgba({$alphablack}, 0.20);
|
|
}
|
|
|
|
.phabricator-remarkup-embed-image-full,
|
|
.phabricator-remarkup-embed-image-wide {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.phabricator-remarkup-embed-image-full img,
|
|
.phabricator-remarkup-embed-image-wide img {
|
|
height: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.phabricator-remarkup table.remarkup-table {
|
|
border-collapse: separate;
|
|
border-spacing: 1px;
|
|
background: {$lightblueborder};
|
|
margin: 12px 0;
|
|
word-break: normal;
|
|
}
|
|
|
|
.phabricator-remarkup table.remarkup-table th {
|
|
font-weight: bold;
|
|
padding: 4px 6px;
|
|
background: {$lightbluebackground};
|
|
}
|
|
|
|
.phabricator-remarkup table.remarkup-table td {
|
|
background: {$page.content};
|
|
padding: 3px 6px;
|
|
}
|
|
|
|
body div.phabricator-remarkup.remarkup-has-toc
|
|
.phabricator-remarkup-toc + .remarkup-header {
|
|
margin-top: 0;
|
|
padding-top: 0;
|
|
}
|
|
|
|
body .phabricator-standard-page div.phabricator-remarkup *:first-child,
|
|
body .phabricator-standard-page div.phabricator-remarkup .remarkup-header + * {
|
|
margin-top: 0;
|
|
}
|
|
|
|
body div.phabricator-remarkup > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.remarkup-assist-textarea {
|
|
border-left-color: {$greyborder};
|
|
border-right-color: {$greyborder};
|
|
border-bottom-color: {$greyborder};
|
|
border-top-color: {$thinblueborder};
|
|
border-radius: 0;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
|
|
box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
|
|
/* Set line height explicitly so the metrics <var /> and the real textarea
|
|
are forced to the same value. */
|
|
line-height: 1.25em;
|
|
|
|
/* Prevent Safari and Chrome users from dragging the textarea any wider,
|
|
because the top bar won't resize along with it. */
|
|
resize: vertical;
|
|
}
|
|
|
|
var.remarkup-assist-textarea {
|
|
/* This is an invisible element used to measure the size of text in the
|
|
textarea so we can float typeaheads over the cursor position. */
|
|
display: block;
|
|
border-color: orange;
|
|
box-sizing: border-box;
|
|
padding: 4px 6px;
|
|
white-space: pre-wrap;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.remarkup-assist-textarea:focus {
|
|
border: 1px solid rgba(82, 168, 236, 0.8);
|
|
}
|
|
|
|
.remarkup-assist-bar {
|
|
height: 32px;
|
|
border-width: 1px 1px 0;
|
|
border-style: solid;
|
|
border-top-color: {$greyborder};
|
|
border-left-color: {$greyborder};
|
|
border-right-color: {$greyborder};
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
padding: 0 4px;
|
|
|
|
background: {$lightbluebackground};
|
|
overflow: hidden;
|
|
}
|
|
|
|
.remarkup-assist-button {
|
|
display: block;
|
|
margin-top: 4px;
|
|
height: 20px;
|
|
padding: 2px 5px 3px;
|
|
line-height: 18px;
|
|
width: 16px;
|
|
float: left;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.remarkup-assist-button:hover .phui-icon-view.phui-font-fa {
|
|
color: {$sky};
|
|
}
|
|
|
|
.remarkup-assist-button:active {
|
|
outline: none;
|
|
}
|
|
|
|
.remarkup-assist-button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.remarkup-assist-separator {
|
|
display: block;
|
|
float: left;
|
|
|
|
height: 18px;
|
|
margin: 7px 6px;
|
|
|
|
width: 0px;
|
|
border-right: 1px solid {$lightgreyborder};
|
|
}
|
|
|
|
.remarkup-interpreter-error {
|
|
padding: 8px;
|
|
border: 1px solid {$sh-redborder};
|
|
background-color: {$sh-redbackground};
|
|
}
|
|
|
|
.remarkup-cowsay {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.remarkup-figlet {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.remarkup-assist {
|
|
width: 14px;
|
|
height: 14px;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.remarkup-assist-right {
|
|
float: right;
|
|
}
|
|
|
|
.jx-order-mask {
|
|
background: white;
|
|
opacity: 1.0;
|
|
}
|
|
|
|
.phabricator-image-macro-hero {
|
|
margin: auto;
|
|
max-width: 95%;
|
|
}
|
|
|
|
.phabricator-remarkup-macro {
|
|
height: auto;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.remarkup-nav-sequence-arrow {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.phabricator-remarkup hr {
|
|
background: {$thinblueborder};
|
|
margin: 24px 0;
|
|
clear: both;
|
|
}
|
|
|
|
.phabricator-remarkup .remarkup-highlight {
|
|
background-color: {$lightviolet};
|
|
padding: 0 4px;
|
|
}
|
|
|
|
.device .remarkup-assist-nodevice {
|
|
display: none;
|
|
}
|
|
|
|
/* - Autocomplete ----------------------------------------------------------- */
|
|
|
|
.phuix-autocomplete {
|
|
position: absolute;
|
|
width: 300px;
|
|
box-shadow: {$dropshadow};
|
|
background: {$page.content};
|
|
border: 1px solid {$lightgreyborder};
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.phuix-autocomplete-head {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 6px 8px;
|
|
background: {$lightgreybackground};
|
|
color: {$darkgreytext};
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.phuix-autocomplete-head .phui-icon-view {
|
|
margin-right: 4px;
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.phuix-autocomplete-echo {
|
|
margin-left: 4px;
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.phuix-autocomplete-list a.jx-result {
|
|
display: block;
|
|
padding: 5px 8px;
|
|
font-size: {$normalfontsize};
|
|
border-top: 1px solid {$thinblueborder};
|
|
font-weight: bold;
|
|
color: {$darkgreytext};
|
|
}
|
|
|
|
.phuix-autocomplete-list a.jx-result .tokenizer-result-closed {
|
|
color: {$lightgreytext};
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.phuix-autocomplete-list a.jx-result .phui-icon-view {
|
|
margin-right: 4px;
|
|
color: {$lightbluetext};
|
|
}
|
|
|
|
.phuix-autocomplete-list a.jx-result:hover {
|
|
text-decoration: none;
|
|
background: {$sh-bluebackground};
|
|
color: {$blacktext};
|
|
}
|
|
|
|
.phuix-autocomplete-list a.jx-result.focused,
|
|
.phuix-autocomplete-list a.jx-result.focused:hover {
|
|
background: {$sh-bluebackground};
|
|
color: {$blacktext};
|
|
}
|
|
|
|
|
|
/* - Pinned ----------------------------------------------------------------- */
|
|
|
|
.phui-box.phui-object-box.phui-comment-form-view.remarkup-assist-pinned {
|
|
position: fixed;
|
|
background-color: {$page.content};
|
|
border-top: 1px solid {$lightblueborder};
|
|
box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
|
|
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0;
|
|
|
|
overflow: auto;
|
|
max-height: 60vh;
|
|
}
|
|
|
|
.remarkup-assist-pinned-spacer {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
/* - Preview ---------------------------------------------------------------- */
|
|
|
|
.remarkup-inline-preview {
|
|
display: block;
|
|
position: relative;
|
|
background: {$page.content};
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
resize: vertical;
|
|
padding: 8px;
|
|
border: 1px solid {$lightblueborder};
|
|
border-top: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
.remarkup-control-fullscreen-mode .remarkup-inline-preview {
|
|
resize: none;
|
|
}
|
|
|
|
.remarkup-inline-preview * {
|
|
resize: none;
|
|
}
|
|
|
|
.remarkup-assist-button.preview-active {
|
|
background: {$sky};
|
|
}
|
|
|
|
.remarkup-assist-button.preview-active .phui-icon-view {
|
|
color: {$page.content};
|
|
}
|
|
|
|
.remarkup-assist-button.preview-active:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.remarkup-assist-button.preview-active:hover .phui-icon-view {
|
|
color: {$page.content};
|
|
}
|
|
|
|
.remarkup-preview-active .remarkup-assist,
|
|
.remarkup-preview-active .remarkup-assist-separator {
|
|
opacity: .2;
|
|
transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
|
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
|
}
|
|
|
|
.remarkup-preview-active .remarkup-assist-button {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
|
|
.remarkup-preview-active .remarkup-assist-button.preview-active {
|
|
pointer-events: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.remarkup-preview-active .remarkup-assist.fa-eye {
|
|
opacity: 1;
|
|
transition: all 100ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
|
transition-timing-function: cubic-bezier(0.250, 0.250, 0.750, 0.750);
|
|
}
|
|
|
|
|
|
/* - Fullscreen ------------------------------------------------------------- */
|
|
|
|
.remarkup-fullscreen-mode {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.remarkup-control-fullscreen-mode {
|
|
position: fixed;
|
|
border: none;
|
|
top: 32px;
|
|
bottom: 32px;
|
|
left: 64px;
|
|
right: 64px;
|
|
border-radius: 3px;
|
|
box-shadow: 0px 4px 32px #555;
|
|
}
|
|
|
|
.remarkup-control-fullscreen-mode .remarkup-assist-button {
|
|
padding: 1px 6px 4px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.remarkup-control-fullscreen-mode .remarkup-assist-button .remarkup-assist {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
.aphront-form-input .remarkup-control-fullscreen-mode .remarkup-assist-bar {
|
|
border: none;
|
|
border-top-left-radius: 3px;
|
|
border-top-right-radius: 3px;
|
|
height: 32px;
|
|
padding: 4px 8px;
|
|
background: {$bluebackground};
|
|
}
|
|
|
|
.aphront-form-control .remarkup-control-fullscreen-mode
|
|
textarea.remarkup-assist-textarea {
|
|
position: absolute;
|
|
top: 39px;
|
|
left: 0;
|
|
right: 0;
|
|
height: calc(100% - 36px) !important;
|
|
padding: 16px;
|
|
font-size: {$biggerfontsize};
|
|
line-height: 1.51em;
|
|
border-width: 1px 0 0 0;
|
|
outline: none;
|
|
resize: none;
|
|
background: {$page.content} !important;
|
|
}
|
|
|
|
.remarkup-control-fullscreen-mode textarea.remarkup-assist-textarea:focus {
|
|
border-color: {$thinblueborder};
|
|
box-shadow: none;
|
|
}
|
|
|
|
.remarkup-control-fullscreen-mode .remarkup-inline-preview {
|
|
font-size: {$biggerfontsize};
|
|
border: none;
|
|
padding: 16px;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
.remarkup-control-fullscreen-mode .remarkup-assist-button .fa-arrows-alt {
|
|
color: {$sky};
|
|
}
|
|
|
|
.device-phone .remarkup-control-fullscreen-mode {
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|