Completed first pass of theming support
This commit is contained in:
Evan Steinkerchner
parent
20661300e7
commit
9f098bf796
|
|
@ -43,11 +43,20 @@ textarea {
|
|||
outline: none;
|
||||
font-size: 13px;
|
||||
padding-right: 360px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#box code {
|
||||
padding: 0px;
|
||||
background: transparent !important; /* don't hide hastebox */
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
body,
|
||||
#box code * {
|
||||
-webkit-transition: background-color 0.25s linear, color 0.25s linear;
|
||||
-moz-transition: background-color 0.25s linear, color 0.25s linear;
|
||||
-o-transition: background-color 0.25s linear, color 0.25s linear;
|
||||
transition: background-color 0.25s linear, color 0.25s linear;
|
||||
}
|
||||
|
||||
/* key */
|
||||
|
|
@ -111,7 +120,18 @@ textarea {
|
|||
right: 0px;
|
||||
}
|
||||
|
||||
#box3, #messages li {
|
||||
#box3 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
#box3 .function-info, #messages li {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background: #173e48;
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
|
|
@ -149,6 +169,106 @@ textarea {
|
|||
#box2 .function.enabled.twitter { background-position: -153px center; }
|
||||
#box2 .function.enabled.twitter:hover { background-position: -153px bottom; }
|
||||
|
||||
#box4 {
|
||||
height: 37px;
|
||||
background-color: #08323c;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#box4 .theme {
|
||||
pointer-events: none;
|
||||
background: url(function-icons.png);
|
||||
background-position: -190px center;
|
||||
width: 32px;
|
||||
height: 37px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
dl.dropdown {
|
||||
color: #c4dce3;
|
||||
text-decoration: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dropdown span.selected-theme {
|
||||
font-size: 37px;
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown li[selected] span.selected-theme {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown dt,
|
||||
.dropdown li {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown dd,
|
||||
.dropdown dt,
|
||||
.dropdown ul {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.dropdown dd {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown dt span {
|
||||
background-color: #08323c;
|
||||
display: block;
|
||||
width: 100%;
|
||||
line-height: 37px;
|
||||
height: 37px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown dt span,
|
||||
.dropdown dd ul li > span {
|
||||
padding-left: 37px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown dd ul li > span {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown dd ul {
|
||||
background-color: #08323c;
|
||||
display: none;
|
||||
list-style: none;
|
||||
padding: 5px 0px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dropdown span.value {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown dd ul li > span:hover {
|
||||
background-color: #173e48;
|
||||
}
|
||||
|
||||
#messages {
|
||||
position:fixed;
|
||||
top:0px;
|
||||
|
|
|
|||
|
|
@ -108,6 +108,20 @@ haste.prototype.setTitle = function(ext) {
|
|||
document.title = title;
|
||||
};
|
||||
|
||||
haste.prototype.setTheme = function(theme) {
|
||||
$('body').attr('class', theme);
|
||||
$('.dropdown dd ul li').removeAttr('selected');
|
||||
|
||||
var matchedTheme = $.grep($('.dropdown dd ul li > span'), function (elem) {
|
||||
return $(elem).find('.value').text() == theme;
|
||||
});
|
||||
|
||||
if (matchedTheme.length) {
|
||||
$('.dropdown dt span').html($(matchedTheme[0]).html());
|
||||
$(matchedTheme).parent().attr('selected', '');
|
||||
}
|
||||
};
|
||||
|
||||
// Show a message box
|
||||
haste.prototype.showMessage = function(msg, cls) {
|
||||
var msgBox = $('<li class="'+(cls || 'info')+'">'+msg+'</li>');
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB After Width: | Height: | Size: 8.8 KiB |
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
<title>hastebin</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="solarized_dark.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="themes.css"/>
|
||||
<link rel="stylesheet" type="text/css" href="application.css"/>
|
||||
|
||||
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
|
||||
|
|
@ -33,6 +33,17 @@
|
|||
$(function() {
|
||||
app = new haste('hastebin', { twitter: true });
|
||||
handlePop({ target: window });
|
||||
|
||||
$('.dropdown dt span').click(function() {
|
||||
$('.dropdown dd ul').toggle();
|
||||
});
|
||||
|
||||
$('.dropdown dd ul li > span').click(function() {
|
||||
$('.dropdown dd ul').hide();
|
||||
app.setTheme($(this).find('.value').text());
|
||||
});
|
||||
|
||||
app.setTheme($('.dropdown dd ul li:first > span .value').text());
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
@ -54,10 +65,26 @@
|
|||
<div class="twitter function"></div>
|
||||
</div>
|
||||
<div id="box3" style="display:none;">
|
||||
<div class="function-info">
|
||||
<div class="label"></div>
|
||||
<div class="shortcut"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="box4">
|
||||
<div class="theme"></div>
|
||||
<dl class="dropdown">
|
||||
<dt>
|
||||
<span>Theme</span></dt>
|
||||
<dd>
|
||||
<ul>
|
||||
<li><span><span class="selected-theme">•</span>Solarized Dark<span class="value">solarized-dark</span></span></li>
|
||||
<li><span><span class="selected-theme">•</span>Tomorrow<span class="value">tomorrow</span></span></li>
|
||||
<li><span><span class="selected-theme">•</span>Tomorrow Night<span class="value">tomorrow-night</span></span></li>
|
||||
</ul>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="linenos"></div>
|
||||
<pre id="box" style="display:none;" tabindex="0"><code></code></pre>
|
||||
|
|
|
|||
|
|
@ -1,101 +1,256 @@
|
|||
/*
|
||||
*
|
||||
* Solarized Dark
|
||||
* Orginal Style from ethanschoonover.com/solarized (c) Jeremy Hull <sourdrums@gmail.com>
|
||||
*
|
||||
*/
|
||||
|
||||
solarized-dark pre code {
|
||||
display: block; padding: 0.5em;
|
||||
background: #002b36; color: #92a0a0;
|
||||
.solarized-dark {
|
||||
background: #002b36;
|
||||
color: #92a0a0;
|
||||
}
|
||||
|
||||
solarized-dark pre .comment,
|
||||
solarized-dark pre .template_comment,
|
||||
solarized-dark pre .diff .header,
|
||||
solarized-dark pre .doctype,
|
||||
solarized-dark pre .lisp .string,
|
||||
solarized-dark pre .javadoc {
|
||||
.solarized-dark pre .comment,
|
||||
.solarized-dark pre .template_comment,
|
||||
.solarized-dark pre .diff .header,
|
||||
.solarized-dark pre .doctype,
|
||||
.solarized-dark pre .lisp .string,
|
||||
.solarized-dark pre .javadoc {
|
||||
color: #586e75;
|
||||
font-style: italic;
|
||||
display: inline-block;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
solarized-dark pre .keyword,
|
||||
solarized-dark pre .css .rule .keyword,
|
||||
solarized-dark pre .winutils,
|
||||
solarized-dark pre .javascript .title,
|
||||
solarized-dark pre .method,
|
||||
solarized-dark pre .addition,
|
||||
solarized-dark pre .css .tag,
|
||||
solarized-dark pre .lisp .title {
|
||||
.solarized-dark pre .keyword,
|
||||
.solarized-dark pre .css .rule .keyword,
|
||||
.solarized-dark pre .winutils,
|
||||
.solarized-dark pre .javascript .title,
|
||||
.solarized-dark pre .method,
|
||||
.solarized-dark pre .addition,
|
||||
.solarized-dark pre .css .tag,
|
||||
.solarized-dark pre .lisp .title {
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
solarized-dark pre .number,
|
||||
solarized-dark pre .command,
|
||||
solarized-dark pre .string,
|
||||
solarized-dark pre .tag .value,
|
||||
solarized-dark pre .phpdoc,
|
||||
solarized-dark pre .tex .formula,
|
||||
solarized-dark pre .regexp,
|
||||
solarized-dark pre .hexcolor {
|
||||
.solarized-dark pre .number,
|
||||
.solarized-dark pre .command,
|
||||
.solarized-dark pre .string,
|
||||
.solarized-dark pre .tag .value,
|
||||
.solarized-dark pre .phpdoc,
|
||||
.solarized-dark pre .tex .formula,
|
||||
.solarized-dark pre .regexp,
|
||||
.solarized-dark pre .hexcolor {
|
||||
color: #2aa198;
|
||||
}
|
||||
|
||||
solarized-dark pre .title,
|
||||
solarized-dark pre .localvars,
|
||||
solarized-dark pre .function .title,
|
||||
solarized-dark pre .chunk,
|
||||
solarized-dark pre .decorator,
|
||||
solarized-dark pre .builtin,
|
||||
solarized-dark pre .built_in,
|
||||
solarized-dark pre .lisp .title,
|
||||
solarized-dark pre .identifier,
|
||||
solarized-dark pre .title .keymethods,
|
||||
solarized-dark pre .id,
|
||||
solarized-dark pre .header {
|
||||
.solarized-dark pre .title,
|
||||
.solarized-dark pre .localvars,
|
||||
.solarized-dark pre .function .title,
|
||||
.solarized-dark pre .chunk,
|
||||
.solarized-dark pre .decorator,
|
||||
.solarized-dark pre .builtin,
|
||||
.solarized-dark pre .built_in,
|
||||
.solarized-dark pre .lisp .title,
|
||||
.solarized-dark pre .identifier,
|
||||
.solarized-dark pre .title .keymethods,
|
||||
.solarized-dark pre .id,
|
||||
.solarized-dark pre .header {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
solarized-dark pre .tag .title,
|
||||
solarized-dark pre .rules .property,
|
||||
solarized-dark pre .django .tag .keyword {
|
||||
.solarized-dark pre .tag .title,
|
||||
.solarized-dark pre .rules .property,
|
||||
.solarized-dark pre .django .tag .keyword {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
solarized-dark pre .attribute,
|
||||
solarized-dark pre .variable,
|
||||
solarized-dark pre .instancevar,
|
||||
solarized-dark pre .lisp .body,
|
||||
solarized-dark pre .smalltalk .number,
|
||||
solarized-dark pre .constant,
|
||||
solarized-dark pre .class .title,
|
||||
solarized-dark pre .parent,
|
||||
solarized-dark pre .haskell .label {
|
||||
.solarized-dark pre .attribute,
|
||||
.solarized-dark pre .variable,
|
||||
.solarized-dark pre .instancevar,
|
||||
.solarized-dark pre .lisp .body,
|
||||
.solarized-dark pre .smalltalk .number,
|
||||
.solarized-dark pre .constant,
|
||||
.solarized-dark pre .class .title,
|
||||
.solarized-dark pre .parent,
|
||||
.solarized-dark pre .haskell .label {
|
||||
color: #b58900;
|
||||
}
|
||||
|
||||
solarized-dark pre .preprocessor,
|
||||
solarized-dark pre .pi,
|
||||
solarized-dark pre .shebang,
|
||||
solarized-dark pre .symbol,
|
||||
solarized-dark pre .diff .change,
|
||||
solarized-dark pre .special,
|
||||
solarized-dark pre .keymethods,
|
||||
solarized-dark pre .attr_selector,
|
||||
solarized-dark pre .important,
|
||||
solarized-dark pre .subst,
|
||||
solarized-dark pre .cdata {
|
||||
.solarized-dark pre .preprocessor,
|
||||
.solarized-dark pre .pi,
|
||||
.solarized-dark pre .shebang,
|
||||
.solarized-dark pre .symbol,
|
||||
.solarized-dark pre .diff .change,
|
||||
.solarized-dark pre .special,
|
||||
.solarized-dark pre .keymethods,
|
||||
.solarized-dark pre .attr_selector,
|
||||
.solarized-dark pre .important,
|
||||
.solarized-dark pre .subst,
|
||||
.solarized-dark pre .cdata {
|
||||
color: #cb4b16;
|
||||
}
|
||||
|
||||
solarized-dark pre .deletion {
|
||||
.solarized-dark pre .deletion {
|
||||
color: #dc322f;
|
||||
}
|
||||
|
||||
solarized-dark pre .tex .formula,
|
||||
solarized-dark pre .code {
|
||||
.solarized-dark pre .tex .formula,
|
||||
.solarized-dark pre .code {
|
||||
background: #073642;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Tomorrow
|
||||
* http://jmblog.github.com/color-themes-for-google-code-highlightjs
|
||||
* Original theme - https://github.com/chriskempson/tomorrow-theme
|
||||
* http://jmblog.github.com/color-themes-for-google-code-highlightjs
|
||||
*/
|
||||
|
||||
.tomorrow pre .comment,
|
||||
.tomorrow pre .title {
|
||||
color: #8e908c;
|
||||
}
|
||||
|
||||
.tomorrow pre .variable,
|
||||
.tomorrow pre .attribute,
|
||||
.tomorrow pre .tag,
|
||||
.tomorrow pre .regexp,
|
||||
.tomorrow pre .ruby .constant,
|
||||
.tomorrow pre .xml .tag .title,
|
||||
.tomorrow pre .xml .pi,
|
||||
.tomorrow pre .xml .doctype,
|
||||
.tomorrow pre .html .doctype,
|
||||
.tomorrow pre .css .id,
|
||||
.tomorrow pre .css .class,
|
||||
.tomorrow pre .css .pseudo {
|
||||
color: #c82829;
|
||||
}
|
||||
|
||||
.tomorrow pre .number,
|
||||
.tomorrow pre .preprocessor,
|
||||
.tomorrow pre .built_in,
|
||||
.tomorrow pre .literal,
|
||||
.tomorrow pre .params,
|
||||
.tomorrow pre .constant {
|
||||
color: #f5871f;
|
||||
}
|
||||
|
||||
.tomorrow pre .class,
|
||||
.tomorrow pre .ruby .class .title,
|
||||
.tomorrow pre .css .rules .attribute {
|
||||
color: #eab700;
|
||||
}
|
||||
|
||||
.tomorrow pre .string,
|
||||
.tomorrow pre .value,
|
||||
.tomorrow pre .inheritance,
|
||||
.tomorrow pre .header,
|
||||
.tomorrow pre .ruby .symbol,
|
||||
.tomorrow pre .xml .cdata {
|
||||
color: #718c00;
|
||||
}
|
||||
|
||||
.tomorrow pre .css .hexcolor {
|
||||
color: #3e999f;
|
||||
}
|
||||
|
||||
.tomorrow pre .function,
|
||||
.tomorrow pre .python .decorator,
|
||||
.tomorrow pre .python .title,
|
||||
.tomorrow pre .ruby .function .title,
|
||||
.tomorrow pre .ruby .title .keyword,
|
||||
.tomorrow pre .perl .sub,
|
||||
.tomorrow pre .javascript .title,
|
||||
.tomorrow pre .coffeescript .title {
|
||||
color: #4271ae;
|
||||
}
|
||||
|
||||
.tomorrow pre .keyword,
|
||||
.tomorrow pre .javascript .function {
|
||||
color: #8959a8;
|
||||
}
|
||||
|
||||
.tomorrow {
|
||||
background: white;
|
||||
color: #4d4d4c;
|
||||
font-family: Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* Tomorrow Night
|
||||
* http://jmblog.github.com/color-themes-for-google-code-highlightjs
|
||||
* Original theme - https://github.com/chriskempson/tomorrow-theme
|
||||
* http://jmblog.github.com/color-themes-for-google-code-highlightjs
|
||||
*/
|
||||
|
||||
.tomorrow-night pre .comment,
|
||||
.tomorrow-night pre .title {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.tomorrow-night pre .variable,
|
||||
.tomorrow-night pre .attribute,
|
||||
.tomorrow-night pre .tag,
|
||||
.tomorrow-night pre .regexp,
|
||||
.tomorrow-night pre .ruby .constant,
|
||||
.tomorrow-night pre .xml .tag .title,
|
||||
.tomorrow-night pre .xml .pi,
|
||||
.tomorrow-night pre .xml .doctype,
|
||||
.tomorrow-night pre .html .doctype,
|
||||
.tomorrow-night pre .css .id,
|
||||
.tomorrow-night pre .css .class,
|
||||
.tomorrow-night pre .css .pseudo {
|
||||
color: #cc6666;
|
||||
}
|
||||
|
||||
.tomorrow-night pre .number,
|
||||
.tomorrow-night pre .preprocessor,
|
||||
.tomorrow-night pre .built_in,
|
||||
.tomorrow-night pre .literal,
|
||||
.tomorrow-night pre .params,
|
||||
.tomorrow-night pre .constant {
|
||||
color: #de935f;
|
||||
}
|
||||
|
||||
.tomorrow-night pre .class,
|
||||
.tomorrow-night pre .ruby .class .title,
|
||||
.tomorrow-night pre .css .rules .attribute {
|
||||
color: #f0c674;
|
||||
}
|
||||
|
||||
.tomorrow-night pre .string,
|
||||
.tomorrow-night pre .value,
|
||||
.tomorrow-night pre .inheritance,
|
||||
.tomorrow-night pre .header,
|
||||
.tomorrow-night pre .ruby .symbol,
|
||||
.tomorrow-night pre .xml .cdata {
|
||||
color: #b5bd68;
|
||||
}
|
||||
|
||||
.tomorrow-night pre .css .hexcolor {
|
||||
color: #8abeb7;
|
||||
}
|
||||
|
||||
.tomorrow-night pre .function,
|
||||
.tomorrow-night pre .python .decorator,
|
||||
.tomorrow-night pre .python .title,
|
||||
.tomorrow-night pre .ruby .function .title,
|
||||
.tomorrow-night pre .ruby .title .keyword,
|
||||
.tomorrow-night pre .perl .sub,
|
||||
.tomorrow-night pre .javascript .title,
|
||||
.tomorrow-night pre .coffeescript .title {
|
||||
color: #81a2be;
|
||||
}
|
||||
|
||||
.tomorrow-night pre .keyword,
|
||||
.tomorrow-night pre .javascript .function {
|
||||
color: #b294bb;
|
||||
}
|
||||
|
||||
.tomorrow-night {
|
||||
background: #1d1f21;
|
||||
color: #c5c8c6;
|
||||
font-family: Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue