fixes themes (#646)

SteamGridDB · Apr 13, 2024 · f0f35a5 · f0f35a5
1 parent 65f5716
commit f0f35a5
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 53 deletions.
diff --git a/src/renderer/styles/preview.component.scss b/src/renderer/styles/preview.component.scss
@@ -1,11 +1,11 @@
-@import 'mixins';
+@import "mixins";
 //$image-height-max: 430px;
 //$image-width-max: 920px;
 
 :host {
   display: grid;
   overflow-y: auto;
-  overflow:hidden;
+  overflow: hidden;
   background-color: var(--color-preview-background);
 
   --preview-image-size: 0.4;
@@ -24,12 +24,12 @@
   --details-width: 0%;
   grid-area: route;
   grid-template-areas:
-  'upperMenu upperMenu'
-  'excludes excludes'
-  'detailsUpper detailsUpper'
-  'urls urls'
-  'entries detailsLower'
-  'lowerMenu lowerMenu';
+    "upperMenu upperMenu"
+    "excludes excludes"
+    "detailsUpper detailsUpper"
+    "urls urls"
+    "entries detailsLower"
+    "lowerMenu lowerMenu";
   grid-template-rows: auto auto auto auto 1fr auto;
   grid-template-columns: auto var(--details-width);
   .loadingSpinner {
@@ -50,7 +50,7 @@
       border-radius: 50%;
     }
   }
-  .preview-description{
+  .preview-description {
     height: 100%;
     grid-area: entries;
     z-index: 3;
@@ -63,17 +63,16 @@
     + div + div {
       background: transparent;
     }
-    .fake-btn{
-
+    .fake-btn {
       @include button();
       @include clickButtonColor(click-button);
       color: var(--color-click-button-text-hover);
       background-color: var(--color-click-button-background-hover);
     }
-    strong{
+    strong {
       color: var(--color-markdown-h1);
     }
-    h1{
+    h1 {
       line-height: 1.25;
       margin: var(--margin-markdown-hx);
       padding-bottom: 0.3em;
@@ -83,13 +82,13 @@
       color: var(--color-markdown-h1);
       margin-top: 0;
     }
-    p{
+    p {
       margin: 0 0 1rem 0;
       color: var(--color-markdown-text);
     }
-    ol{
-      li{
-        margin-bottom: 12px
+    ol {
+      li {
+        margin-bottom: 12px;
       }
     }
   }
@@ -105,8 +104,8 @@
     grid-template-rows: auto;
 
     ng-select,
-    ng-text-input{
-      margin-bottom: 0
+    ng-text-input {
+      margin-bottom: 0;
     }
 
     .imageCounter {
@@ -118,29 +117,30 @@
       grid-column: 2;
       width: var(--width-preview-select-type);
       font-size: 1em;
-      margin-right: .75em;
+      margin-right: 0.75em;
       color: var(--color-preview-text);
     }
     .selectCategories {
       grid-column: 2;
       width: var(--width-preview-select-cats);
       font-size: 1em;
-      margin-right: .75em;
+      margin-right: 0.75em;
       color: var(--color-preview-text);
     }
     .selectParsers {
       grid-column: 2;
       width: 9em;
       font-size: 1em;
-      margin-right: .75em;
+      margin-right: 0.75em;
       color: var(--color-preview-text);
     }
 
     .slider {
       display: flex;
       align-items: center;
       grid-column: 3;
-      > div, > input {
+      > div,
+      > input {
         margin: 0 0.25em;
       }
       > div {
@@ -199,7 +199,7 @@
     > .buttonGroup {
       display: flex;
       justify-content: right;
-      margin-right:0.5em;
+      margin-right: 0.5em;
       > .excludeButton {
         @include button();
         @include clickButtonColor(click-button);
@@ -238,8 +238,8 @@
     grid-area: detailsLower;
     display: grid;
     grid-template-areas:
-    'detailsOptions'
-    'detailsList';
+      "detailsOptions"
+      "detailsList";
     grid-template-rows: auto 1fr;
     overflow-y: auto;
     @keyframes loadingSpinner {
@@ -276,7 +276,8 @@
         background-color: var(--color-preview-user-background);
         color: var(--color-preview-text);
         margin-bottom: 1em;
-        &:hover, &.selected {
+        &:hover,
+        &.selected {
           background-color: var(--color-ng-select-option-background-hover);
           color: var(--color-ng-select-option-text-hover);
         }
@@ -359,14 +360,14 @@
             color: var(--color-preview-text);
           }
         }
-        > .apps{
+        > .apps {
           margin: 0.75em;
           display: flex;
           flex-wrap: wrap;
           align-items: center;
           align-content: space-around;
           justify-content: left;
-          margin-left:1vw;
+          margin-left: 1vw;
           > .title {
             padding: 0.5em 0.25em;
             flex-basis: 100%;
@@ -444,15 +445,15 @@
             }
 
             > .appOverlay {
-              --row-height: calc(var(--preview-image-size) * 106px);
+              --row-height: calc(var(--preview-image-size) * 120px);
 
               height: 100%;
               display: grid;
 
               grid-template-areas:
-              "appInfo appInfo"
-              "imageSelector imageSelector"
-              "bottomPanel bottomPanel";
+                "appInfo appInfo"
+                "imageSelector imageSelector"
+                "bottomPanel bottomPanel";
 
               grid-template-rows: var(--row-height) 1fr var(--row-height);
 
@@ -472,8 +473,8 @@
                 grid-area: appInfo;
 
                 grid-template-areas:
-                "title title"
-                "provider imageIndex";
+                  "title title"
+                  "provider imageIndex";
 
                 grid-template-rows: 1fr auto;
                 grid-template-columns: 1fr auto;
@@ -527,7 +528,8 @@
 
                 grid-template-columns: auto 1fr auto;
 
-                > .previous, > .next {
+                > .previous,
+                > .next {
                   width: var(--row-height);
                   height: 100%;
                 }
@@ -545,14 +547,14 @@
                 display: grid;
                 grid-area: bottomPanel;
                 grid-template-areas:
-                "title"
-                "buttons";
+                  "title"
+                  "buttons";
                 grid-gap: 2px;
                 grid-auto-flow: row;
                 grid-auto-columns: 1fr;
                 grid-auto-rows: 50% 50%;
 
-                > .configTitle{
+                > .configTitle {
                   grid-area: title;
                   text-align: right;
                   padding: 0.1em;
@@ -588,6 +590,17 @@
                   > .separator {
                     flex: 1 1 auto;
                   }
+                  .classic-buttons {
+                    display: flex;
+                    width: 100%;
+                    align-items: flex-end;
+                    flex-direction: row;
+                    flex-wrap: nowrap;
+                    justify-content: space-around;
+                    .separator {
+                      flex-basis: 50%;
+                    }
+                  }
                 }
               }
             }

diff --git a/src/renderer/styles/themes.global.scss b/src/renderer/styles/themes.global.scss
@@ -408,12 +408,12 @@
         stroke-width: var(--select-arrow-left-width, 55);
       }
     }
-	& > .appInfo .title{
-		min-height: 20px;
-		span{
-			text-overflow: ellipsis;
-		}
-	}
+    & > .appInfo .title {
+      min-height: 20px;
+      span {
+        text-overflow: ellipsis;
+      }
+    }
     & > .appInfo > div.imageIndex {
       text-align: right !important;
       padding: 6px 8px 0 0 !important;
@@ -427,7 +427,7 @@
       @include button();
       @include clickButtonColor(click-button);
       display: initial;
-      padding: 12px;
+      padding: 5px;
       flex: 1;
       font-size: 12px;
       border-radius: 0;
@@ -571,9 +571,9 @@
             img {
               margin-right: 0;
               width: 100%;
-			  max-width: 120px;
+              max-width: 120px;
               max-height: 68px;
-			  object-fit: contain;
+              object-fit: contain;
             }
             small {
               font-weight: 600;
@@ -1594,7 +1594,7 @@
       @include button();
       @include clickButtonColor(click-button);
       display: initial;
-      padding: 12px;
+      padding: 5px;
       flex: 1;
       font-size: 12px;
       border-radius: 0;

diff --git a/src/renderer/templates/preview.component.html b/src/renderer/templates/preview.component.html
@@ -240,7 +240,7 @@ <h1>Add your games to Steam</h1>
                                 </ng-container>
                               </div>
                               <div class="bottomPanel">
-                                <div text-scroll class="configTitle not-emudeck">
+                                <div text-scroll class="configTitle">
                                   {{
                                     app.configurationTitle +
                                       (app.steamCategories.length > 0
@@ -278,7 +278,7 @@ <h1>Add your games to Steam</h1>
                                     Refresh
                                   </div>
 
-                                  <div class="not-emudeck not-deck">
+                                  <div class="not-emudeck not-deck classic-buttons">
                                     <svg
                                       class="button"
                                       title="Fix match"
@@ -531,8 +531,12 @@ <h1>Add your games to Steam</h1>
       <div class="only-emudeck" (click)="generatePreviewData(false)">Refresh</div>
       <div (click)="save()">{{ lang.saveAppList }}</div>
       <div class="dangerousButton" (click)="remove()">{{ lang.removeAppList }}</div>
-      <div class="not-emudeck" (click)="exportSelection()" [attr.title]="'Export image choices'">{{ lang.exportSelections }}</div>
-      <div class="not-emudeck" (click)="importSelection()" [attr.title]="'Import image choices'">{{ lang.importSelections }}</div>
+      <div class="not-emudeck" (click)="exportSelection()" [attr.title]="'Export image choices'">
+        {{ lang.exportSelections }}
+      </div>
+      <div class="not-emudeck" (click)="importSelection()" [attr.title]="'Import image choices'">
+        {{ lang.importSelections }}
+      </div>
       <div (click)="showExclusions()" *ngIf="!this.detailsApp">{{ "Exclude Games" }}</div>
     </ng-container>
     <div