mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-02 14:29:55 +00:00
Code Issues Releases Wiki Activity

add flexible-form-styles to theme directory

Browse Source
This commit is contained in:
pmario 2024-04-29 14:55:30 +02:00
parent 4f187e451c
commit 0da81d616d
1 changed files with 123 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
themes/tiddlywiki/vanilla/flexible-form-styles.tid Normal file
View File

@ -0,0 +1,123 @@
title: /core/template/flexible-form/styles
tags: $:/tags/Stylesheet
.tc-flexible-form {
<!-- outline: 1px solid blue; -->
overflow: auto;
margin-bottom: 1em;
}
.tc-flexible-checkbox-container {
padding: 4px 3px 3px 3px;
border-bottom: 1px dotted black;
display: grid;
grid-column-gap: 0.3em;
grid-row-gap: 0.2em;
grid-template-columns: 5.3em 3em 3em 3em 4em 5em 5em 5em 8em 10em 1fr;
grid-template-areas:
"t-txt c-all c-fn c-var c-proc c-macro c-widget sel-txt sel-drop ex-btn";
}
<!-- TODO Try this without a media query!!! -->
@media (max-width:
<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]]
[{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}removesuffix[px]]
:reduce[<currentTiddler>add<accumulator>addsuffix[px]] }}}
/>) {
.tc-flexible-checkbox-container {
grid-column-gap: 0.1em;
grid-template-columns: 3em 3em 3em 3em 4em 5em 5em 5em 8em 10em 1fr;
grid-template-areas:
"t-txt c-all c-fn c-var c-proc c-macro c-widget"
"sel-txt sel-drop sel-drop sel-drop ex-btn ex-btn ex-btn";
}
}
.tc-flexible-input-container {
padding: 4px 3px 3px 3px;
display: grid;
grid-row-gap: 0.2em;
grid-column-gap: 0.3em;
grid-template-columns: 1em 4em 1fr 1.5em 1.5em;
grid-template-areas:
"btn-fld x-txt x-inp btn-x btn-xx"
"btn-fld y-txt y-inp btn-y btn-yy";
}
.btn-fld-has-exluded button:hover svg,
.btn-fld-has-exluded button svg {
fill: <<colour dirty-indicator>>;
}
.btn-fld {
padding: 0 2px;
grid-area: btn-fld;
}
.x-inp {
grid-area: x-inp;
}
.y-inp {
grid-area: y-inp;
}
.t-txt,
.x-txt,
.y-txt {
text-align: right;
}
.t-txt {
grid-area: t-txt;
}
.x-txt {
grid-area: x-txt;
}
.y-txt {
grid-area: y-txt;
}
.btn-t {
grid-area: btn-t;
}
.btn-x {
grid-area: btn-x;
}
.btn-y {
grid-area: btn-y;
}
.btn-xx {
grid-area: btn-xx;
}
.btn-yy {
grid-area: btn-yy;
}
.c-all {
grid-area: c-all;
}
.c-fn {
grid-area: c-fn;
}
.c-var {
grid-area: c-var;
}
.c-proc {
grid-area: c-proc;
}
.c-macro {
grid-area: c-macro;
}
.c-widget {
grid-area: c-widget;
}
.sel-txt {
text-align: right;
grid-area: sel-txt;
}
.sel-drop {
grid-area: sel-drop;
border: none;
}
.ex-btn {
grid-area: ex-btn;
}