refactoring card display

[confetti] / style.css

diff --git a/style.css b/style.css
new file mode 100644 (file)
index 0000000..e466cb7
--- /dev/null
+++ b/style.css
@@ -0,0 +1,101 @@
+* {
+  font-family: sans-serif;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  z-index: 0;
+}
+body {
+  background: #EEE;
+  margin: 0;
+  padding: 0;
+  padding-top: 2.5em;
+  position: absolute;
+  min-height: 100%;
+  width: 100%;
+  padding-bottom: 2em;
+}
+.NAVIGATION {
+  position: fixed;
+  top: 0;
+  display: inline-block;
+  border-style: none solid solid solid;
+  border-width: 0 1px 1px 1px;
+  border-radius: 0 0 4px 4px;
+  margin: 0 2em;
+  padding: .5em 1ex;
+  background: #FFF;
+  z-index: 1;
+}
+.NAVIGATION label,
+.NAVIGATION a {
+  color: #008;
+  border: solid 1px #BBF;
+  margin: .5em .5ex .25em .5ex;
+  padding: .2em 3ex .2em 3ex;
+  background: #EFF;
+}
+.NAVIGATION label:hover,
+.NAVIGATION a:hover {
+  border-width: 2px 1px;
+  background: #F3FFFF;
+}
+
+#CONFIGURE        label[for="navigationconfig"] { display: none; }
+#CONFIGURE:target label[for="navigationconfig"] { display: inline; }
+
+.NAVIGATION input#navigationconfig { display: none; }
+.NAVIGATION input + form.config {
+  position: static;
+  display: none;
+}
+
+.NAVIGATION .config a { display: block; }
+.NAVIGATION .config a:hover { border-width: 1px 2px; }
+.NAVIGATION input:checked + form.config { display: block; }
+.NAVIGATION .config input[type=text],
+.NAVIGATION .config button {
+  font-size: .875em;
+  line-height: 1.5em;
+  height: 1.75em;
+  padding: 0 .25em;
+  vertical-align: bottom;
+  border: 1px solid #000;
+  background-color: #FFF;
+}
+.NAVIGATION .config input[type=text] {
+  margin: .25em 0 0 .375em;
+  border-right: none;
+  width: 70%;
+}
+.NAVIGATION .config button {
+  min-width: 2.5em;
+  text-align: center;
+  max-width: 30%;
+}
+.NAVIGATION .config button[value=del] {
+  background: #FCC;
+}
+
+
+.trailbtn { display: none; }
+.trailbtn + .trailbox { display: none; }
+.trailbtn:checked + .trailbox { display: inline-block; }
+.trailbtn:checked + .trailbox + .trailbtn { display: block; }
+.trailbtn:checked + .trailbox + .trailbtn:before {
+   display: block; content: '+';
+   width: 3ex; text-align: center;
+   margin-top: .25em; padding: .25em 0;
+   background-color: #FFF;
+   border-width: 1px; border-style: solid;
+}
+.trailbtn:checked + .trailbox + .trailbtn:checked,
+.trailbtn:checked { display: none; }
+
+#footer {
+  width: 100%;
+  background-color: #FFF;
+  border-top: 1px solid #BBF;
+  margin: 0; padding: .5em 2em;
+  position: absolute; bottom: 0;
+}