Hello @all,
I write a new Wiki, which I want to use on my laptop and on my tablet.
I know, there are some plugins for better use on mobiles. But I prefer not
to install more Plugins for not to slow down the wiki.
I made two stylesheets- one for using the wiki on my laptop and one for
using the wiki on my tablet.
For toggling these two stylesheets by adding/removing the tag
"$:/tags/Stylesheet"
I made a button (which contains 4 buttons- I would like to have only one
button for toggling- for this question I'll open another thread).
I have now a problem with these two stylesheets: When toggling the sidebar
with the >>, the tiddlers should get very wide (almost 100% wide) and the
sidebar should be unvisible.
But the tiddlers do not get wider (the sidebar gets unvisible).
This happens on my laptop using the "Desktop"-Stylesheet. And it happens on
my tablet using the "mobil"-Stylesheet.
It doesn't happen, when I use the "mobil"-Stylesheet on my Laptop- then the
tiddlers get wide.
I think, I made a mistake in the Stylesheets.
The Stylesheet for the Laptop is:
.tc-page-controls { margin-top: 1px; font-size: 1.5em; }
.tc-story-river {
position: relative;
left: -35px;
top: -35px;
.tc-story-river {
width: calc(100% - -35px);
}
padding: 42px 42px 42px 42px;
}
.tc-sidebar-scrollable {
position: fixed;
top: - 75px;
left: 900px;
bottom: 0;
right: 0;
overflow-y: auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 0 0 -42px;
padding: 71px 0 28px 42px;
}
html .tc-rightmenu {
display: block;
padding: 40px 0px 0px 0px;
position: fixed;
right: 13px;
top: -50px;
width: 20px;
z-index: 98;
color: #000000;
font-size: 17px;
opacity: 1;
}
.tc-site-title {
font-weight: 500;
font-size: 1.5em;
line-height: 1.2em;
margin: -55px 0px -10px;}
.tc-site-subtitle {
margin: 3px 0px -10px;
}
.tc-titlebar {
font-size: 20px;
margin: 0px 0px -9px 0px;}
button, input, optgroup, select, textarea {
margin: 0px 0px -10px 0px;}
.tc-tags-wrapper {
margin: 3px 0px 4px;}
.tc-sidebar-lists .tc-tab-buttons {
margin-bottom: -2px;}
.tc-tab-buttons {
font-size: 0.85em;
padding-top: 0.2em;
margin-bottom: -2px;}
.tc-sidebar-lists a.tc-tiddlylink {
font-size: 0.9em;}
.tc-tiddler-frame {
width: 885px;
padding: 1px 5px 0px 10px;
border: 4px solid yellow;
border-radius: 1em;
-moz-border-radius: 1em;
webkit-border-radius: 1em;}
.tc-tiddler-title {
font-size: 10px;
line-height: 0.5em;}
.tc-subtitle {
font-size: 0.1em;
}
.tc-tiddler-info {
margin: 0 -5px 0 -5px;
line-height: 1.4;
font-size: 1.1em;
}
.tc-tags-wrapper {
margin: 1px 0px 1px px;}
.tc-btn-invisible {
margin: 0px -5px 1px 0px;}
.tc-topbar-left {
left: 2px;
top: 1px;}
.tc-topbar-right {
top: 45px;
right: 30px;}
.tc-topbar button {
padding: 5px;}
.tc-tab-buttons button {
padding: 6px 5px;}
.tc-tab-content.tc-vertical {
display: inline-block;
vertical-align: top;
padding-top: 0px;
padding-left: 5px;
border-left: 1px solid #CCC;
flex: 1 0 70%;}
.tc-tab-content {
margin-top: 4px;}
.lefttable { margin-left:auto; margin-right:0; float:left }
and the on for the tablet is:
.tc-page-controls { margin-top: 1px; font-size: 1.5em; }
.tc-story-river {
position: relative;
left: -35px;
top: -45px;
.tc-story-river {
width: calc(100% - -35px);
}
padding: 42px 42px 42px 42px;
}
.tc-sidebar-scrollable {
position: fixed;
top: - 75px;
left: 280px;
bottom: 0;
right: 0;
overflow-y: auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 0 0 -42px;
padding: 71px 0 28px 42px;
}
html .tc-rightmenu {
display: block;
padding: 40px 0px 0px 0px;
position: fixed;
right: 13px;
top: -50px;
width: 20px;
z-index: 98;
color: #000000;
font-size: 17px;
opacity: 1;
}
.tc-site-title {
font-weight: 500;
font-size: 1.5em;
line-height: 1.2em;
margin: 6px 0px -10px;}
.tc-site-subtitle {
margin: 3px 0px -10px;}
.tc-titlebar {
font-size: 20px;
margin: 0px 0px -9px 0px;}
button, input, optgroup, select, textarea {
margin: 0px 0px -10px 0px;}
.tc-tags-wrapper {
margin: 3px 0px 4px;}
.tc-sidebar-lists .tc-tab-buttons {
margin-bottom: -2px;}
.tc-tab-buttons {
font-size: 0.85em;
padding-top: 0.2em;
margin-bottom: -2px;}
.tc-sidebar-lists a.tc-tiddlylink {
font-size: 0.9em;}
.tc-tiddler-frame {
padding: 1px 5px 0px 10px;
border:2px solid yellow;
border-radius: 1em;
-moz-border-radius: 1em;
webkit-border-radius: 1em;}
.tc-tiddler-title {
font-size: 10px;
line-height: 0.5em;}
.tc-tags-wrapper {
margin: 1px 0px 1px px;}
.tc-btn-invisible {
margin: 0px -5px 1px 0px;}
.tc-topbar-left {
left: 2px;
top: 1px;}
.tc-topbar-right {
top: 45px;
right: 30px;}
.tc-topbar button {
padding: 5px;}
.tc-tab-buttons button {
padding: 6px 5px;}
.tc-tab-content.tc-vertical {
display: inline-block;
vertical-align: top;
padding-top: 0px;
padding-left: 5px;
border-left: 1px solid #CCC;
flex: 1 0 70%;}
.tc-tab-content {
margin-top: 4px;}
.lefttable { margin-left:auto; margin-right:0; float:left }
Could you please have look at them and find the mistake?
You can test and play with them at http://suryas-testwiki.tiddlyspot.com/
Thanks a lot for your help :-)
Surya
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/2b40c459-3428-4959-a86f-e1e74b994330%40googlegroups.com.
