mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-06-26 07:13:15 +00:00
Code Issues Releases Wiki Activity

Some styling changes

Browse Source 
The idea of moving the sidebar to the right is so that it can grow into
the otherwise empty space to the right of the story column.

Still a work in progress: needs to be responsive, amongst other things
This commit is contained in:
Jeremy Ruston 2013-04-26 18:02:02 +01:00
parent 18d34eec3b
commit 88b7c53972
3 changed files with 33 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
core/styles/base.tid
View File

@ -19,8 +19,10 @@ module-type: stylesheet
{{$:/core/styles/reset}}
* {
*, input[type="search"] {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
html {
@ -78,7 +80,19 @@ a.tw-tiddlylink {
}
.sidebar-header a.tw-tiddlylink {
color: #69699B;
color: #d00;
}
.sidebar-header a.tw-tiddlylink:hover {
color: #f66;
}
.tw-sidebar-lists a.tw-tiddlylink {
color: #999;
}
.tw-sidebar-lists a.tw-tiddlylink:hover {
color: #444;
}
a.tw-tiddlylink:hover {
@ -159,13 +173,12 @@ a.tw-tiddlylink-missing {
.sidebar-header {
position: fixed;
top: 0;
left: 0;
left: 55em;
bottom: 0;
width: {{$:/core/styles/metrics##sidebarwidth}};
overflow-y: auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding: 5em 0em 2em 2em;
padding: 6em 0 2em 0;
margin: 0;
text-shadow: 0 1px 0 rgba(255,255,255, 0.8);
}
@ -185,8 +198,8 @@ a.tw-tiddlylink-missing {
}
.story-river {
margin-left: {{$:/core/styles/metrics##sidebarwidth}};
padding: 2em 2em 2em 0;
width: 55em;
padding: 3em;
}
@media print {
@ -199,7 +212,6 @@ a.tw-tiddlylink-missing {
padding: 3em;
margin-bottom: 2em;
background-color: {{$:/core/styles/colourmappings##tiddlerbackground}};
max-width: 50em;
<<box-shadow "5px 5px 5px rgba(0, 0, 0, 0.1)">>
}
@ -220,8 +232,12 @@ a.tw-tiddlylink-missing {
}
.tw-tiddler-controls .tw-button {
margin: 0 0 0 0.5em;
vertical-align: middle;
margin: 0 0 0 0.33em;
vertical-align: baseline;
}
.tw-tiddler-controls .tw-button img {
height: 0.75em;
}
.tw-tiddler-help {
@ -356,7 +372,7 @@ a.tw-tiddlylink-missing {
padding: 0 0.5em 0 0.5em;
}
.tw-edit-texteditor input, .tw-edit-texteditor textarea {
.tw-tiddler-frame .tw-edit-texteditor input, .tw-tiddler-frame .tw-edit-texteditor textarea {
width: 100%;
padding: 3px 3px 3px 3px;
border: 1px solid #888;
@ -365,15 +381,11 @@ a.tw-tiddlylink-missing {
margin: 0.25em 0 0.25em 0;
}
.tw-edit-texteditor input {
.tw-tiddler-frame .tw-edit-texteditor input {
background-color: #f8f8f8;
<<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">>
}
.sidebar-header .tw-edit-texteditor input, .sidebar-header .tw-edit-texteditor textarea {
width: 80%;
}
canvas.tw-edit-bitmapeditor {
cursor: crosshair;
-moz-user-select: none;

2
core/templates/SideBar.tid
View File

@ -2,6 +2,7 @@ title: $:/templates/SideBar
<!-- The implementation of tabs here is currently a bit unreadable -->
<div class="tw-sidebar-lists">
@@.search-query
<$edit tiddler="$:/temp/search" type="search" requireFocus="yes"/>
@@
@ -40,3 +41,4 @@ title: $:/templates/SideBar
</div>
</$reveal>
</div>

9
core/templates/ViewTemplate.tid
View File

@ -1,14 +1,11 @@
title: $:/templates/ViewTemplate
modifier: JeremyRuston
<span class="tw-tiddler-controls"><$button popup="$:/state/tiddlerDropdown" qualifyTiddlerTitles="yes" class="btn-invisible">{{$:/core/images/info-button.svg}}</$button>
<$button message="tw-edit-tiddler" class="btn-invisible">{{$:/core/images/edit-button.svg}}</$button>
<$button message="tw-close-tiddler" class="btn-invisible">{{$:/core/images/close-button.svg}}</$button>
<$reveal type="popup" state="$:/state/tiddlerDropdown" position="belowleft" qualifyTiddlerTitles="yes"><div class="tw-drop-down"><$transclude template="$:/templates/TiddlerDropdown"></$transclude></div>
<span class="title"><span class="tw-tiddler-controls"><$button popup="$:/state/tiddlerDropdown" qualifyTiddlerTitles="yes" class="btn-invisible">{{$:/core/images/info-button.svg}}</$button><$button message="tw-edit-tiddler" class="btn-invisible">{{$:/core/images/edit-button.svg}}</$button><$button message="tw-close-tiddler" class="btn-invisible">{{$:/core/images/close-button.svg}}</$button><$reveal type="popup" state="$:/state/tiddlerDropdown" position="belowleft" qualifyTiddlerTitles="yes"><div class="tw-drop-down"><$transclude template="$:/templates/TiddlerDropdown"></$transclude></div>
</$reveal>
</span>
<span class="title"><$view field="title"/></span>
</span><$view field="title"/></span>
<div class="small"><$view field="modifier" format="link"/> <$view field="modified" format="relativedate"/></div>