mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2026-09-20 16:42:02 +00:00
Code Issues Releases Wiki Activity

Improve styling and reusability of palette, language, and theme switchers (#1954)

Browse Source 
allows to override styles more easily via new class tc-chosen

----

updated all of storyview, theme, palette, language

» both in ControlPanel as well as PageControls
» removed "current ..." form switchers as it's redundant
» streamlined toolbar buttons in ControlPanel, especially less spacing

----

fixed dropdown hover colour override

if I wouldn't then it would go blank owed to default drop-down styles

----

polished styles

» chosen items now more emphasized while curspor not indicating a link
» removed underline when hovering, used highlighted border colours instead

----

use snippets languageswitcher for pagecontrols button, after all

----

wrap all switchers in tc-chooser

----

apply big font only to buttons, not reveals in pagecontrols

----

moved language switcher wrapper class to snippet

improved language switcher image alignment

----

make tiddler and ControlPanel view behave the same. add generic tc-check-list setting. add generic input type checklist, vertical alignment.

now using css rem to address drop-downs for pagecontrols

thanks @pmario

removed css artefacts in vanilla/base from before merging @pmario's PR

with comments being baked-in I don't think we want these in the code

css simplification for .tc-chosen and tc-chooser-item
This commit is contained in:
Tobias Beer
2018-04-06 17:26:54 +01:00
committed by Jeremy Ruston
parent 67bab83902
commit 02529a51d0
10 changed files with 126 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/tiddlywiki/vanilla/base.tid
+62 -14
View File
@@ -185,6 +185,10 @@ input:not([type]) {
background: <<colour background>>;
}
input[type="checkbox"] {
vertical-align: middle;
}
.tc-muted {
color: <<colour muted-foreground>>;
}
@@ -702,6 +706,10 @@ button.tc-untagged-label {
font-size: 1.5em;
}
.tc-page-controls .tc-drop-down {
font-size: 1rem;
}
.tc-page-controls button {
margin-right: 0.5em;
}
@@ -1397,11 +1405,6 @@ html body.tc-body.tc-single-tiddler-window {
width: 1em;
}
.tc-drop-down-language-chooser img {
width: 2em;
vertical-align: baseline;
}
.tc-drop-down a, .tc-drop-down button {
display: block;
padding: 0 14px 0 14px;
@@ -2062,6 +2065,14 @@ a.tc-tiddlylink.tc-plugin-info:hover .tc-plugin-info > .tc-plugin-info-chunk > s
padding: 1em 1em 1em 1em;
}
.tc-check-list {
line-height: 2em;
}
.tc-check-list .tc-image-button {
height: 1.5em;
}
/*
** Message boxes
*/
@@ -2104,25 +2115,62 @@ a.tc-tiddlylink.tc-plugin-info:hover .tc-plugin-info > .tc-plugin-info-chunk > s
*/
.tc-chooser {
border: 1px solid <<colour table-border>>;
border-right: 1px solid <<colour table-header-background>>;
border-left: 1px solid <<colour table-header-background>>;
}
.tc-chooser-item {
border: 8px;
padding: 2px 4px;
border-bottom: 1px solid <<colour table-header-background>>;
border-top: 1px solid <<colour table-header-background>>;
padding: 2px 4px 2px 14px;
}
.tc-chooser-item a.tc-tiddlylink {
.tc-drop-down .tc-chooser-item {
padding: 2px;
}
.tc-chosen,
.tc-chooser-item:hover {
background-color: <<colour table-header-background>>;
border-color: <<colour table-footer-background>>;
}
.tc-chosen .tc-tiddlylink {
cursor:default;
}
.tc-chooser-item .tc-tiddlylink {
display: block;
text-decoration: none;
color: <<colour tiddler-link-foreground>>;
background-color: <<colour tiddler-link-background>>;
background-color: transparent;
}
.tc-chooser-item a.tc-tiddlylink:hover {
.tc-chooser-item:hover .tc-tiddlylink:hover {
text-decoration: none;
color: <<colour tiddler-link-background>>;
background-color: <<colour tiddler-link-foreground>>;
}
.tc-drop-down .tc-chosen .tc-tiddlylink,
.tc-drop-down .tc-chooser-item .tc-tiddlylink:hover {
color: <<colour foreground>>;
}
.tc-chosen > .tc-tiddlylink:before {
margin-left: -10px;
position: relative;
content: "» ";
}
.tc-chooser-item svg,
.tc-chooser-item img{
width: 1em;
height: 1em;
vertical-align: middle;
}
.tc-language-chooser .tc-image-button img {
width: 2em;
vertical-align: -0.15em;
}
/*