Iteam cleanup + less migration

less/variables.less

@@ -0,0 +1,51 @@
+// ============================================================
+// VARIABLES — Oath Hammer LESS
+// ============================================================
+
+// Fonts
+@font-primary:   "Sherwood", "Palatino Linotype", serif;
+@font-secondary: "BlueDragon", "Palatino Linotype", serif;
+@font-body:      "Calibri", "Segoe UI", sans-serif;
+@font-size-base: 0.82rem;
+
+// Colors
+@color-blue:     #1a4a7a;
+@color-olive:    #5a5a2a;
+@color-gold:     #c8a84b;
+@color-dark:     #2a1a0a;
+@color-paper:    #f5ead0;
+
+// Derived
+@color-olive-faint:   rgba(90, 90, 42, 0.2);
+@color-blue-hover:    rgba(26, 74, 122, 0.08);
+@color-input-bg:      rgba(255, 255, 255, 0.3);
+@color-disabled-bg:   rgba(0, 0, 0, 0.08);
+
+// Layout
+@portrait-height:    150px;
+@left-panel-width:   180px;
+@npc-left-width:     160px;
+@item-img-size:      24px;
+@item-sheet-img:     52px;
+@label-min-width:    9rem;
+@input-min-width:    10rem;
+@input-max-width:    12rem;
+
+// Fonts sizes
+@font-size-sm:   calc(@font-size-base * 0.85);
+@font-size-xs:   calc(@font-size-base * 0.9);
+@font-size-lg:   calc(@font-size-base * 1.1);
+@font-size-xl:   calc(@font-size-base * 1.2);
+
+// Mixins
+.sheet-background() {
+  background-image: var(--oh-background-image);
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.transition-opacity() {
+  opacity: 0.6;
+  transition: opacity 0.2s;
+  &:hover { opacity: 1; }
+}