diff --git a/src/renderer/styles/preview.component.scss b/src/renderer/styles/preview.component.scss index fe776b209a..de2374a8fb 100644 --- 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,21 +117,21 @@ 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); } @@ -140,7 +139,8 @@ 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 index ea38a6dbc5..2eb5bca389 100644 --- 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 index 7cf1c0018f..fd0ac897b5 100644 --- a/src/renderer/templates/preview.component.html +++ b/src/renderer/templates/preview.component.html @@ -240,7 +240,7 @@