Merge pull request #19 from TheOtterlord/v0.7.0

V0.7.0

Author: TheOtterlord

CHANGELOG.md

@@ -6,6 +6,23 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## 0.7.0
+
+This update improves the overall UI adding themes & custom css while also adding autocomplete for YCB card ids.
+
+### Added
+
+- A theme system with a few different themes
+- Custom css that can be changed in settings
+- Autocomplete for YCB card ids
+- Discord connect & disconnect notifications
+- New notifications API with better animations
+
+### Changed
+
+- Upgraded electron to 11.2.1 minimum
+- Updated the start screen UI (now only displays the name of the file, not the path)
+
 ## 0.6.4
 
 Deck saving bug fix

bg.png

@@ -6,7 +6,7 @@
 .combo-editor .col {
   height: 100%;
   float: left;
-  border-right: 2px solid #181818;
+  border-right: 2px solid rgba(0,0,0,0.2);
 }
 
 .combo-editor .col .scroller {
@@ -19,18 +19,16 @@
   outline: none;
   border: none;
   margin: 0;
-  color: #fff;
+  color: var(--color);
   padding: 12px 20px;
   box-sizing: border-box;
   transition: border 0.2s;
-  background: #262626;
+  background: var(--elevated);
 }
 
 .collapse-btn.active {
-  background: #303030;
-}
-.collapse-btn:hover {
-  background: #343434;
+  background: var(--primary);
+  color: var(--on-primary);
 }
 
 .collapse {
@@ -44,42 +42,62 @@
   outline: none;
   border: none;
   margin: 0;
-  color: #fff;
+  color: var(--color);
   padding: 12px 20px;
   box-sizing: border-box;
   transition: 0.2s;
 }
 .array-item:hover, .array-item.active {
   background-color: rgba(0,0,0,0.2);
-  color: #0ef;
+  color: var(--secondary);
 }
 
 .array-list {
   width: 100%;
-  border: 2px solid #181818;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   border-radius: 16px;
   overflow: hidden;
+  background: var(--elevated);
 }
 
 .array-list .item {
-  background: #242424;
   outline: none;
   border: none;
-  color: #fff;
+  color: var(--color);
   width: 100%;
   padding: 12px 20px;
   box-sizing: border-box;
 }
 
 .array-list .item:nth-child(even) {
-  background-color: #202020;
+  background-color: var(--hover-shade);
 }
 
-/* Maybe add back if you can click it for action */
-/* .array-list .item:hover {
-  background-color: #343443;
-} */
-
 .array-list .item span {
   cursor: pointer;
 }
+
+.suggestions {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 100%;
+  transform: translateY(-10px);
+  background-color: var(--elevated);
+  color: var(--color);
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+}
+
+.suggestions div {
+  padding: 8px;
+  cursor: pointer;
+}
+
+.suggestions div:hover {
+  background-color: var(--hover-shade);
+}
+
+.suggestions div.active {
+  background-color: var(--primary);
+  color: var(--on-primary);
+}

bg.webp

@@ -60,7 +60,7 @@
 }
 
 .deckbox {
-  border: 1px solid #fff;
+  border: 1px solid var(--primary);
   padding: 4px;
   height: 100%;
 }
@@ -114,6 +114,7 @@
 
 .card {
   transition: padding 0.2s;
+  cursor: pointer;
 }
 
 .card.drag {
@@ -137,25 +138,26 @@
   background: transparent;
   outline: none;
   border: none;
-  color: #fff;
-  border-bottom: 1px solid #fff;
+  color: var(--color);
+  border-bottom: 1px solid var(--primary);
   padding: 4px;
 }
 
 .editor .search .padding .filter button {
   width: calc(50% - 8px);
   outline: none;
   border: none;
-  background: rgba(255,0,255,0.4);
-  color: #fff;
+  background: var(--elevated);
+  color: var(--color);
   float: left;
   margin: 4px;
   border-radius: 4px;
-  transition: background 0.4s;
+  transition: 0.2s;
 }
 
 .editor .search .padding .filter button:active {
-  background-color: rgba(255,0,255,0.6);
+  background-color: var(--primary);
+  color: var(--on-primary);
 }
 
 .editor .search .padding .maxwidth {
@@ -200,7 +202,7 @@
 }
 
 .editor .search .padding .pagination a.active, .editor .search .padding .pagination a:active {
-  background-color: rgba(255,0,255,0.4);
+  background-color: var(--primary);
 }
 
 .fade {
@@ -227,7 +229,7 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: #242424;
+  background-color: var(--elevated);
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   overflow: hidden;
   transition: height 0.4s;
@@ -241,18 +243,19 @@
 .filter-panel button {
   outline: none;
   border: none;
-  background: rgba(255,0,255,0.4);
-  color: #fff;
+  background: var(--background);
+  color: var(--color);
   float: left;
   margin: 4px;
   padding-left: 12px;
   padding-right: 12px;
   border-radius: 4px;
-  transition: background 0.4s;
+  transition: 0.2s;
 }
 
 .filter-panel button:active {
-  background-color: rgba(255,0,255,0.6);
+  background: var(--primary);
+  color: var(--on-primary);
 }
 
 /* Information box above deck */
@@ -261,51 +264,60 @@
   background-color: transparent;
   outline: none;
   border: none;
-  color: #fff;
-  border-bottom: 1px solid #fff;
+  color: var(--color);
+  border-bottom: 1px solid var(--primary);
   padding: 4px;
+  transition: border 0.2s;
+}
+
+.cell.info input:focus {
+  border-bottom-color: var(--secondary);
 }
 
 .btn50 {
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   outline: none;
   border: none;
-  background: rgba(255,0,255,0.4);
-  color: #fff;
+  background: var(--elevated);
+  color: var(--color);
   float: left;
   margin: 4px;
   padding-left: 6px;
   padding-right: 6px;
   border-radius: 4px;
-  transition: background 0.4s;
   width: calc(50% - 8px);
+  transition: 0.2s;
 }
 
 .btn50:active {
-  background-color: rgba(255,0,255,0.6);
+  background: var(--primary);
+  color: var(--on-primary);
 }
 
 .btn33 {
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   outline: none;
   border: none;
-  background: rgba(255,0,255,0.4);
-  color: #fff;
+  background: var(--elevated);
+  color: var(--color);
   float: left;
   margin: 2px;
   padding-left: 6px;
   padding-right: 6px;
   border-radius: 4px;
-  transition: background 0.4s;
   width: calc(50% - 4px);
+  transition: 0.2s;
 }
 
 .btn33:active {
-  background-color: rgba(255,0,255,0.6);
+  background-color: var(--primary);
+  color: var(--on-primary);
 }
 
 /* Combo Widget */
 
 .combo-widget {
-  border: 1px solid #fff;
+  border: 1px solid var(--primary);
   overflow-x: hidden;
   overflow-y: auto;
   position: relative;
@@ -318,7 +330,7 @@
 }
 
 .combo-widget h4:hover {
-  background-color: #282828;
+  background-color: var(--hover-shade);
 }
 
 .combo-widget .btn-grp {
@@ -328,14 +340,8 @@
   min-width: 66%;
 }
 
-.combo-widget .btn50.disabled {
-  cursor: not-allowed;
-  background-color: #282828;
-  color: #555;
-}
-
 .combo-widget h4.active {
-  background-color: #3a3a3a;
+  background-color: var(--elevated);
 }
 
 .combo-widget ul {
@@ -363,7 +369,7 @@
   z-index: 9;
   transform: translate(-50%, -50%) scale(0);
   transition: .5s ease-in-out;
-  background-color: #282828;
+  background-color: var(--elevated);
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 }
 

css/combo.css

@@ -1,8 +1,8 @@
 select {
-  background: #555;
+  background: var(--primary);
   outline: none;
   border: none;
-  color: white;
+  color: var(--color);
   padding: 8px;
   font-weight: bold;
   width: 100%;
@@ -13,11 +13,15 @@ input[type=text] {
   background: transparent;
   outline: none;
   border: none;
-  color: #fff;
-  border-bottom: 1px solid #fff;
+  color: var(--color);
+  border-bottom: 1px solid var(--primary);
   padding: 4px;
 }
 
+input[type=text]:focus {
+  border-bottom-color: var(--secondary);
+}
+
 input[type=text]:disabled {
   border-bottom: 1px solid #555;
 }