diff --git a/core/styles/tiddlywiki.css b/core/styles/tiddlywiki.css index d65cf69c7..477123e9b 100644 --- a/core/styles/tiddlywiki.css +++ b/core/styles/tiddlywiki.css @@ -5023,31 +5023,6 @@ body { font-weight: normal; } -.tw-ticked-menu-item::before { - position: absolute; - left: 4px; - content: "\2022"; -} - -.dropdown-menu { - position: static; -} - -.dropdown-menu a { - position: relative; -} - -.btn-invisible { - padding: 0; - margin: 0; - background: none; - border: none; -} - -.tw-tags-wrapper .label { - margin-right: 6px; -} - .tw-edit-field { border: 1px dotted #888; } @@ -5086,14 +5061,39 @@ a.tw-tiddlylink-missing { font-style: inherit; } -/* This is needed to make the dropdown arrows abutt to the dropdown itself */ +.tw-ticked-menu-item::before { + position: absolute; + left: 4px; + content: "\2022"; +} + +.dropdown-menu { + position: static; +} + +.dropdown-menu a { + position: relative; +} + +/* This is needed to make the dropdown arrows abut to the dropdown itself */ .navbar .dropdown-menu::before { - top: -5px; + top: -4px; } .navbar .dropdown-menu::after { - top: -4px; + top: -3px; +} + +.btn-invisible { + padding: 0; + margin: 0; + background: none; + border: none; +} + +.tw-tags-wrapper .label { + margin-right: 6px; } .splitLabel { @@ -5171,9 +5171,9 @@ a.tw-tiddlylink-missing { } .javascript-source .javascript-block-comment { - font-family: Helvetica, Arial, sans-serif; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } .javascript-source .javascript-line-comment { - font-family: Helvetica, Arial, sans-serif; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } diff --git a/cssbuild/javascript.less b/cssbuild/javascript.less new file mode 100644 index 000000000..9d1b309ad --- /dev/null +++ b/cssbuild/javascript.less @@ -0,0 +1,60 @@ +// JavaScript syntax highlighting + +.javascript-source { + border: 1px solid #888; + padding: 18px 18px 18px 18px; + .box-shadow(inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2)); +// TODO: Less doesn't seem to like my tab-size mixin +// .tab-size(4); +} + +.javascript-source .javascript-boolean { + color: #066; +} + +.javascript-source .javascript-identifier { + color: #606; +} + +.javascript-source .javascript-keyword { + color: #008; + font-weight: bold; +} + +.javascript-source .javascript-null { + color: #080; +} + +.javascript-source .javascript-numeric { + color: #066; +} + +.javascript-source .javascript-punctuator { + color: #660; +} + +.javascript-source .javascript-string { + color: #080; +} + +.javascript-source .javascript-comment { + color: #800; + padding: 4px 4px 4px 4px; + border: 1px solid #feed77; + background: #feed77; + background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#dede80),color-stop(7%,#feed77),color-stop(92%,#feed77),color-stop(100%,#dede80)); + background: -webkit-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%),-webkit-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%); + background: -moz-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%), -moz-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%); + background: -o-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%), -o-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%); + background: -ms-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%), -ms-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%); + background: linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%), linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%); + .box-shadow(1px 1px 6px rgba(0,0,0,0.4)); +} + +.javascript-source .javascript-block-comment { + font-family: @sansFontFamily; +} + +.javascript-source .javascript-line-comment { + font-family: @sansFontFamily; +} diff --git a/cssbuild/tiddlywiki.less b/cssbuild/tiddlywiki.less index 86982d96f..faacff996 100644 --- a/cssbuild/tiddlywiki.less +++ b/cssbuild/tiddlywiki.less @@ -5,9 +5,7 @@ @import "twitter-bootstrap/less/bootstrap.less"; - -// TiddlyWiki Overrides - +// TiddlyWiki overrides of Bootstrap variables @baseFontSize: 14px; @baseLineHeight: 20px; @@ -30,14 +28,16 @@ -o-tab-size: @size; } -// TiddlyWiki definitions +// Base re-definitions body { - position: relative; // So that height: 100% will fit to the body - background: @grayLighter; - padding-top: @navbarHeight; + position: relative; // So that height: 100% will fit to the body + background: @grayLighter; // So that the tiddlers pop out more + padding-top: @navbarHeight; // Allow for the navbar } +// Tiddler styles + .tw-story-element { position: relative; margin: 30px 5px 30px 5px; @@ -71,31 +71,6 @@ body { font-weight: normal; } -.tw-ticked-menu-item::before { - position: absolute; - content: "\2022"; - left: 4px; -} - -.dropdown-menu { - position: static; -} - -.dropdown-menu a { - position: relative; -} - -.btn-invisible { - border: none; - background: none; - margin: 0; - padding: 0; -} - -.tw-tags-wrapper .label { - margin-right: 6px; -} - .tw-edit-field { border: 1px dotted #888; } @@ -133,14 +108,45 @@ a.tw-tiddlylink-missing { font-style: inherit; } -/* This is needed to make the dropdown arrows abutt to the dropdown itself */ +// Dropdown menus + +.tw-ticked-menu-item::before { + position: absolute; + content: "\2022"; + left: 4px; +} + +.dropdown-menu { + position: static; +} + +.dropdown-menu a { + position: relative; +} + +/* This is needed to make the dropdown arrows abut to the dropdown itself */ .navbar .dropdown-menu::before { -top: -5px; + top: -4px; } .navbar .dropdown-menu::after { -top: -4px; + top: -3px; } +// Buttons + +.btn-invisible { + border: none; + background: none; + margin: 0; + padding: 0; +} + +.tw-tags-wrapper .label { + margin-right: 6px; +} + +// Split label + .splitLabel { font-size: 9.5px; margin-right: 5px; @@ -162,63 +168,6 @@ top: -4px; background-color: #eee; } -.javascript-source { - border: 1px solid #888; - padding: 18px 18px 18px 18px; - .box-shadow(inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2)); -// TODO: Less doesn't seem to like my tab-size mixin -// .tab-size(4); -} +// Includes -.javascript-source .javascript-boolean { - color: #066; -} - -.javascript-source .javascript-identifier { - color: #606; -} - -.javascript-source .javascript-keyword { - color: #008; - font-weight: bold; -} - -.javascript-source .javascript-null { - color: #080; -} - -.javascript-source .javascript-numeric { - color: #066; -} - -.javascript-source .javascript-punctuator { - color: #660; -} - -.javascript-source .javascript-string { - color: #080; -} - -.javascript-source .javascript-comment { - color: #800; - padding: 4px 4px 4px 4px; - border: 1px solid #feed77; - background: #feed77; - background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#dede80),color-stop(7%,#feed77),color-stop(92%,#feed77),color-stop(100%,#dede80)); - background: -webkit-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%),-webkit-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%); - background: -moz-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%), -moz-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%); - background: -o-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%), -o-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%); - background: -ms-linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%), -ms-linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%); - background: linear-gradient(72deg,rgba(255, 255, 255, 0.5) 8%,rgba(255, 255, 255, 0.1) 80%), linear-gradient(top,#dede80 0,#feed77 7%,#feed77 92%,#dede80 100%); - -webkit-box-shadow: 1px 1px 6px rgba(0,0,0,0.4); - -moz-box-shadow: 1px 1px 6px rgba(0,0,0,0.4); - box-shadow: 1px 1px 6px rgba(0,0,0,0.4); -} - -.javascript-source .javascript-block-comment { - font-family: Helvetica, Arial, sans-serif; -} - -.javascript-source .javascript-line-comment { - font-family: Helvetica, Arial, sans-serif; -} +@import "javascript.less";