adding my suggestion for the i18n example, and the beginnings of a WebExtension storage example

2026-04-19 15:54:00 +02:00 · 2016-04-07 13:08:14 +01:00
parent 4c567ae945
commit e03ef78697
12 changed files with 233 additions and 1 deletions
@@ -0,0 +1,109 @@
+/* General styling */
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  font-size: 10px;
+  background: white;
+}
+
+body {
+  width: 300px;
+  background: rgb(240,240,240);
+  border: 1px solid #ccc;
+  margin: 0 auto;
+  padding: 2px;
+}
+
+.outer-wrapper {
+  overflow: auto;
+  width: 100%;
+  height: 300px;
+}
+
+.clearfix {
+  clear: both;
+}
+
+/* form control styling */
+
+input, textarea, button {
+  border: 1px solid rgb(218,218,218);
+  padding: 4px;
+  background: white;
+  border-radius: 3px;
+}
+
+button {
+  background: #ccc;
+  box-shadow: inset -2px -2px 1px rgba(0,0,0,0.2);
+  transition: 0.1s all;
+}
+
+button:hover, button:focus {
+  background: #ddd;
+}
+
+button:active {
+  box-shadow: inset -2px -2px 1px rgba(0,0,0,0.05);
+}
+
+input, textarea {
+  font-family: sans-serif;
+  box-shadow: inset 2px 2px 1px rgba(0,0,0,0.10);
+}
+
+/* Typography */
+
+h2 {
+  font-size: 1.3rem;
+}
+
+p, input, textarea {
+  font-size: 1.2rem;
+  line-height: 1.5;
+}
+
+/* New notes entry box */
+
+.new-note {
+  width: 100%;
+  margin-bottom: 5px;
+  padding: 2px;
+}
+
+.new-note input {
+  width: 100%;
+  margin-bottom: 2px;
+}
+
+.new-note textarea {
+  width: 100%;
+  margin-bottom: 4px;
+  resize: none;
+}
+
+.clear {
+  float: left;
+}
+
+.add {
+  float: right;
+}
+
+/* Notes display box(es) */
+
+.note {
+  padding: 2px;
+}
+
+.delete {
+  float: right;
+}
+
+p {
+  margin: 0;
+}