diff --git a/themes/theGarbz/BigFingers/README.md b/themes/theGarbz/BigFingers/README.md index f801218b9..4500d95d9 100644 --- a/themes/theGarbz/BigFingers/README.md +++ b/themes/theGarbz/BigFingers/README.md @@ -1,7 +1,7 @@ -# BigFingers theme v0.1 +# BigFingers theme v0.2 -This variation on the standard theme increases the width of the scroll bars to make them easier to touch on small displays. -No special requirements exist for this theme, however it is intended for small low resolution displays. +This variation on the standard theme increases the width of the scroll bars to make them easier to touch on small displays. +No special requirements exist for this theme, however it is intended for small low resolution displays. To install copy the custom-styles.css file into the octodash config folder: ``` @@ -22,3 +22,13 @@ To install copy the custom-styles.css file into the octodash config folder: 3. Settings: ![Settings](screenshots/screenshot_settings.png) + + +### Version History: + +__v0.2:__ +* Hitbox of settings button increased. + +__v0.1:__ +* Initial Issue +* Larger vertical scrollbar width. \ No newline at end of file diff --git a/themes/theGarbz/BigFingers/custom-styles.css b/themes/theGarbz/BigFingers/custom-styles.css index c761791b7..6a75bd883 100644 --- a/themes/theGarbz/BigFingers/custom-styles.css +++ b/themes/theGarbz/BigFingers/custom-styles.css @@ -65,6 +65,12 @@ app-filament .scroll__thumb-inactive { width: 58vw!important; } +/**** Make settings button easier to hit ****/ + +.main-menu__settings-icon { + padding: 5vh 5vw 4vh!important; +} + /**** Update Settings ****/ .settings-container { @@ -79,7 +85,7 @@ app-filament .scroll__thumb-inactive { } .settings__made::after { - content: "BigFingers theme v0.1 by theGarbz"; + content: "BigFingers theme v0.2 by theGarbz"; width: auto!important; font-size: 73%; display: inline-block; diff --git a/themes/theGarbz/BigFingers/screenshots/icon.png b/themes/theGarbz/BigFingers/screenshots/icon.png new file mode 100755 index 000000000..70f7e21c0 Binary files /dev/null and b/themes/theGarbz/BigFingers/screenshots/icon.png differ diff --git a/themes/theGarbz/Focus/README.md b/themes/theGarbz/Focus/README.md new file mode 100644 index 000000000..8457cd174 --- /dev/null +++ b/themes/theGarbz/Focus/README.md @@ -0,0 +1,56 @@ +# Focus theme v0.1 + +This theme is based on the classy [NOX theme](../../NOX/) by NoxHirsch and has been modified to Focus on highlighting the most important information for a user. The goal was to create a theme that could easily be read from a distance. Some of the features are listed below: +* High contrast display of relevant information (e.g. print time, temperature) +* Low contrast display of all other info (e.g. units, time elapsed) +* Large horizontal and vertical progress bars readable from a distance. +* Large print time remaining indicators +* Pre-printing screen highlighting buttons. +* Full screen menus and adjustments with coloured backgrounds for context. +* Red highlighting of error messages + +To install copy the custom-styles.css file into the octodash config folder: +``` +~/.config/octodash/custom-styles.css +``` + +Please note: This theme like the theme it was based on makes use of more CSS effects than the default theme and does not perform as smoothly on under powered hardware such as older Raspberry Pis. If you have a problem with Octodash performance please try using the default theme before reporting any issues. This theme performs well on a Raspbery Pi4 with a 7" LCD. + +###### Theme by theGarbz. + +## Screenshots: + +1. Printing with the Horizontal Progressbar: + + ![Horizontal Progressbar](screenshots/screenshot_print.png) + +2. Printing with Circular Progressbar: + + ![Round Progressbar](screenshots/screenshot_print2.png) + +4. File Selection: + + ![File Selection](screenshots/screenshot_fileselect.png) + +5. Pre-print screen: + + ![Pre-print screen](screenshots/screenshot_filequeue.png) + +6. Adjustments mid print: + + ![Adjustments](screenshots/screenshot_adjust.png) + +7. Errors: + + ![Errors](screenshots/screenshot_error.png) + +8. Main Screen: + + ![Main Screen](screenshots/screenshot_main.png) + +9. Settings: + + ![Settings](screenshots/screenshot_menu.png) + + + diff --git a/themes/theGarbz/Focus/custom-styles.css b/themes/theGarbz/Focus/custom-styles.css new file mode 100644 index 000000000..cd6559cda --- /dev/null +++ b/themes/theGarbz/Focus/custom-styles.css @@ -0,0 +1,789 @@ +@font-face { + font-family: 'Product Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Product Sans'), local('ProductSans-Regular'), url(https://fonts.gstatic.com/s/productsans/v12/pxiDypQkot1TnFhsFMOfGShVE9eOcEg.woff2) format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-family: 'Product Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Product Sans'), local('ProductSans-Regular'), url(https://fonts.gstatic.com/s/productsans/v12/pxiDypQkot1TnFhsFMOfGShVFNeOcEg.woff2) format('woff2'); + unicode-range: U+0370-03FF; + } + /* latin-ext */ + @font-face { + font-family: 'Product Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Product Sans'), local('ProductSans-Regular'), url(https://fonts.gstatic.com/s/productsans/v12/pxiDypQkot1TnFhsFMOfGShVGdeOcEg.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-family: 'Product Sans'; + font-style: normal; + font-weight: 400; + font-display: swap; + src: local('Product Sans'), local('ProductSans-Regular'), url(https://fonts.gstatic.com/s/productsans/v12/pxiDypQkot1TnFhsFMOfGShVF9eO.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + } + /* cyrillic */ + @font-face { + font-family: 'Product Sans'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: local('Product Sans Medium'), local('ProductSans-Medium'), url(https://fonts.gstatic.com/s/productsans/v12/pxicypQkot1TnFhsFMOfGShd5PSbS2lBkm8.woff2) format('woff2'); + unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; + } + /* greek */ + @font-face { + font-family: 'Product Sans'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: local('Product Sans Medium'), local('ProductSans-Medium'), url(https://fonts.gstatic.com/s/productsans/v12/pxicypQkot1TnFhsFMOfGShd5PSbTGlBkm8.woff2) format('woff2'); + unicode-range: U+0370-03FF; + } + /* latin-ext */ + @font-face { + font-family: 'Product Sans'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: local('Product Sans Medium'), local('ProductSans-Medium'), url(https://fonts.gstatic.com/s/productsans/v12/pxicypQkot1TnFhsFMOfGShd5PSbQWlBkm8.woff2) format('woff2'); + unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; + } + /* latin */ + @font-face { + font-family: 'Product Sans'; + font-style: normal; + font-weight: 500; + font-display: swap; + src: local('Product Sans Medium'), local('ProductSans-Medium'), url(https://fonts.gstatic.com/s/productsans/v12/pxicypQkot1TnFhsFMOfGShd5PSbT2lB.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; + } + +/**************************************** GLOBAL ****************************************/ + +[hidden]{ + display:block!important; +} + +*:not(path):not(svg) { + font-family: 'Product Sans', sans-serif; +} + +app-root { + background-color: #000000; +} + +:root { + --dark-text: rgba(128, 128, 128, 1); + --light-text: rgb(245, 246, 250, 1); + --green: rgb(65, 170, 27); + --dark-green: rgb(65, 170, 27, 0.75); +} + +::-webkit-scrollbar { + width: 3.7vw!important; +} + +::-webkit-scrollbar-track-piece:end { + margin-bottom: 1.8vh; +} + +::-webkit-scrollbar-track-piece:start { + margin-top: 3.7vh; +} + +::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.5); +} + + +/**************************************** HOME PAGE *****************************************/ +app-main-screen .printer-status{ + margin-top: 6vh!important; +} + +/**************************************** BOTTOM BAR ****************************************/ + +app-job-status ~ app-bottom-bar .bottom-bar{ + left: 4vw!important; + width: calc(100% - 4vw - 4vw)!important; +} + +.bottom-bar__printer-name, .bottom-bar__current-status { + color: var(--dark-text); +} + +app-job-status ~ app-bottom-bar .bottom-bar td{ + font-size:3vw!important; +} +app-job-status ~ app-bottom-bar .bottom-bar__enclosure-temperature-icon { + width: 2vw!important; + display: inline-block; + margin-bottom: -0.8vh; + margin-right: 1vw; + filter: brightness(0.5); +} + +app-job-status ~ app-bottom-bar .bottom-bar__enclosure-temperature { + color: var(--dark-text); +} + +/**************************************** NOTIFICATION ****************************************/ + +.notification { + background-color: rgba(60, 0, 0, .85)!important; + backdrop-filter: blur(8px)!important; + border-radius: 1vw; + transition: top .2s ease-in-out!important; +} + +/**************************************** FILES ****************************************/ + +ngx-spinner .overlay{ + background: rgba(255, 255, 255, 0)!important; + backdrop-filter: blur(5px); +} + +.files__object{ + background-color: #555555!important; + width: 89vw!important; +} + +.files__name { + font-weight: normal!important; + font-size: 3.1vw!important; +} + +.files::before { + display:none!important; +} + +.files__info { + float: right; + padding-left: .7vw; + line-height: 6vw; +} + +.files__info-value:first-of-type, .files__info-value:nth-of-type(2){ + display:none!important; /* hide size and filament use */ +} + +.sorting { + backdrop-filter: blur(8px); + background-color: rgba(0, 0, 40, .8)!important; + transition: opacity ease-in-out .2s!important; +} + +.sorting-wrapper{ + background: transparent!important; +} + +.sorting-close { + position: fixed!important; + right: 3.5vw!important; + top: 5.5vh!important; + width: 5vw!important; +} + +/************************************** FILAMENT **************************************/ + +.filament-filaments::before { + display:none!important; +} + +.filament tr{ + background-color: #555555!important; + width: 87.5vw!important; +} + +.filament-filaments { + width: 95.5vw!important; +} + +.filament-filaments__name { + width: 62vw!important; +} + +app-filament .scroll__thumb-inactive { + background-color: rgba(127, 143, 166, 0.3); + width: 3.7vw; + height: 61.7vh!important; + position: fixed; + right: 2.5vw!important; + top: 35.8vh!important; +} + + + +/**************************************** FILE ****************************************/ + +.file{ + backdrop-filter: blur(8px); + background-color: rgba(0, 0, 40, .8)!important; + left:0!important; + right:0!important; + top:0!important; + bottom:0!important; + width:auto!important; + height:auto!important; + transition: opacity ease-in-out .2s!important; +} + +.file__wrapper{ + left: 0!important; + top: 0!important; + right:0!important; + bottom:0!important; + width: auto!important; + height: auto!important; + padding: 6vh 5vw!important; + background: transparent!important; +} + +.file__name { + width: 94%!important; +} + +.file__close { + position: fixed!important; + right: 3.5vw!important; + top: 5.5vh!important; + width: 5vw!important; +} + +.file__render { + height: 50vh!important; + margin-left: 0!important; + margin-right: 0!important; + margin-bottom: 1.5vh!important; + display:inline-block!important; + background: black; +} + +.file__details { + width: auto!important; + height: 45vh!important; + display:inline-block!important; + position:relative; + top:-4vw; + margin-top:0!important; + margin-right: auto!important; + margin-left: 3vw!important; +} + +.file__details td { + width: 100%!important; + margin-bottom: 1vw!important; + text-align: left!important; + display:block; +} + +.file__details td:nth-of-type(1)::before { + content: "File Size: "; + font-size: 3vw; + color: var(--dark-text); +} + +.file__details td:nth-of-type(2)::before { + content: "Est Print Time:"; + font-size: 3vw; + color: var(--dark-text); +} + +.file__details td:nth-of-type(3)::before { + content: "Est Filament Use:"; + font-size: 3vw; + color: var(--dark-text); +} + +.file__details-name, .file__directory, .file__creation-date { + color: var(--dark-text); +} + +.job-info__filename { + position: fixed; + top:0; + left:0; + font-size: 4vw!important; + padding-left: 4vw; + padding-right: 4vw; + padding-top: 4vh!important; + width: 100vw!important; + text-overflow: ellipsis; +} + +app-files .scroll__thumb-inactive { + background-color: rgba(127, 143, 166, 0.3); + width: 3.7vw; + height: 71.4vh!important; + position: fixed; + right: 2.5vw!important; + top: 27.8vh!important; +} + +/**************************************** PRINTER STATUS ****************************************/ + +.quick-control { + backdrop-filter: blur(8px); + background-color: rgba(0, 0, 40, .8)!important; + transition: opacity ease-in-out .2s!important; +} +.quick-control__controller { + border: solid 0.2vw!important; + border-radius: 1vw!important; +} +.quick-control__controller-set { + border-top: solid 0.2vw!important; +} + +/**************************************** FILE LOADED ****************************************/ + +.job-info__preview { + position:absolute!important; + top: 19vh!important; + left: 4vw!important; + width: 30vw!important; +} + +.job-info__preview-image { + width: 30vw!important; + margin:0!important; + display:block!important; + height:50vh!important; +} + +.job-info__preview-discard { + font-size: 2.5vw!important; + width: 40vw!important; + position:fixed!important; + top: 74vh!important; + left: 31vw!important; +} + +.job-info__print-details { + position:absolute!important; + top: 19vh!important; + left: 37vw!important; + margin:0!important; + overflow:hidden!important; + height:15vh!important; +} + + + +.job-info__actions-item-heat{ + position:fixed!important; + top: 17vh!important; + right: 20vw!important; + height: 11vw!important; + width: 11vw!important; + margin:0!important; + z-index: 10000000000; + background-color: var(--dark-green)!important; + border-radius: 2vw!important; +} + +.job-info__actions-item-heat-icon{ + width: 6vw!important; + padding: 2.5vw!important; +} + +.job-info__actions-item-print{ + position:fixed!important; + top: 17vh!important; + right: 5vw!important; + height: 11vw!important; + width: 11vw!important; + margin:0!important; + z-index: 10000000000; + background-color: var(--dark-green)!important; + border-radius: 2vw!important; +} + +.job-info__print-details span br{ + display: none; +} + +.job-info__print-details-value{ + margin-top: 0!important; + margin-bottom: 0!important; + padding-bottom: 0!important; +} + +.job-info__print-details-finish-state{ + display: table; + position: relative; + left: 5vw!important; + margin-bottom:2vh!important; +} + + + +/**************************************** FILE LOADED - PRINTER STATUS ****************************************/ + +app-job-status ~ app-printer-status .printer-status{ + position:absolute; + top: 0vh!important; + left: 0vw!important; +} + +app-job-status ~ app-printer-status .printer-status__set-value { + display:inline!important; + font-size: 3.5vw!important; + color: var(--dark-text); +} + +app-job-status ~ app-printer-status .printer-status__actual-value{ + display:inline!important; + font-size: 5vw!important; +} + +app-job-status ~ app-printer-status .printer-status__unit, app-job-status ~ app-printer-status .printer-status .unit{ + font-size: 3vw!important; + color: var(--dark-text); +} + +app-job-status ~ app-printer-status .printer-status__value span:nth-last-child(2) .printer-status__unit{ + display:none!important; +} + +app-job-status ~ app-printer-status .printer-status__value { + height: 11vh!important; +} + +app-job-status ~ app-printer-status .printer-status__value img { + width: 6vw!important; + float: left; + padding-top: 1.7vh; + padding-right: 2vw; + filter: brightness(0.8); +} + +app-job-status ~ app-printer-status .printer-status__value-1 { + width: auto!important; + padding-left: 0!important; + padding-right: 0!important; + position: absolute; + top: 37vh; + left: 38vw; +} +app-job-status ~ app-printer-status .printer-status__value-1 img { + margin-top:-3vh!important; +} + +app-job-status ~ app-printer-status .printer-status__value-2 { + width: auto!important; + padding-left: 0!important; + padding-right: 0!important; + position: absolute; + top: 37vh; + left: 69vw; + +} +app-job-status ~ app-printer-status .printer-status__value-2 img { + margin-top:-3vh!important; +} + +app-job-status ~ app-printer-status .printer-status__value-3 { + width: auto!important; + padding-left: 0!important; + padding-right: 0!important; + position: absolute; + top: 53vh; + left: 38vw; + +} +app-job-status ~ app-printer-status .printer-status__value-3 img { + margin-top:-1.6vh!important; +} + +/**************************************** FILE LOADED - LAYER PROGRESS ****************************************/ + +app-job-status ~ app-layer-progress .layer-indication{ + position:absolute!important; + top: 60vh; + left: 68.8vw; + visibility: hidden; + width:auto!important; + margin:0!important; + letter-spacing: -1em; +} + +app-job-status ~ app-layer-progress .layer-indication__current-layer{ + position: relative; + top:-0.5vh!important; + visibility: visible!important; + font-size: 5vw!important; + letter-spacing: normal!important; +} + +app-job-status ~ app-layer-progress .layer-indication__total-layers{ + position: relative; + top: -0.5vh!important; + visibility: visible!important; + font-size: 3.5vw!important; + letter-spacing: normal!important; + color: var(--dark-text); +} + +app-job-status ~ app-layer-progress .layer-indication::before{ + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADaUlEQVRo3tXZTYhVZRgHcJ1JncyYGEyldKOZRB+QRtGiCVEioWRIQVdthNkKbdy2EHLbUsgWSghtpE0RUQYV1sawD/qAMFIKk/FjRKYanV+Le4Y5HJ/33HvPPddz54G7ued5/s//fd73/d/nuWfJkj4ZVuAojmNlv/L0i/wGfGPBzmJj07w6Jb8LU+60a5homl8Z8aU4hNvSNocjGGqab5H8GD7SuX2GNU3znie/FecDkrN4I/vMBs/PY2vT5F/HzYDc39iR83sBfwZ+/+BgE8TnJTKyL/BQELMGnyZi7p7UBhKZt6NYXhJ7T3aJ54LY/kuttETewL4ucCa0ZLVo/ZFa5RL5C56ogLkFPwR49Uqtcon8AA/0gH0/3k9g9y61eBq/BeC3sh1ZWlORJvFfkOcPPFcVtEwid9ZBvJBvXAWprXLOaql6l9gzVatSdoTerOMIZQJxsOQIPdtrglGcauASf4ixXguUr1JKRn/FkxUwt+DHAK9/HSu241KQ9Ab2d4EzgesBzhRerp14IfkGfJ3Y9k5bicju3tSm1cy9nSDypUFq5rAcjyWeHcBMQOgvjOf8xrPvijaDAwnsp8p2s1Py63FG68dkMuFT+0BjQVbPYH1V8i8GVTsRbbVyqY0slEiswsmC72W8VGUBh8V9+7fYFPgPaf24lQ31tzOfoSC+rDs9XHUXXsGVAPQ6XkvEpKQ2KZHYjatBzDT2VCKfA38E5xKVOYLhIKYotaFEYjjbkWinf5IQjyqLWJmd/8g+wYNBzAjeyT4jwfO1OJ3ADO9aHQuZxL9Bwgt4vgucZ/B7gDOLQ7UTLyTfJi2bbZOXFOFiN0XodRGr8XFi+9/DfUHMvXg3EfM51vWL7JhAh7ML+FbiAn6HzTnfR/F94DeXYURC8Kpe22kLA82cVu+zLPBJSe009mZEriae7wnw8g1fTzNx1OecxtrAd3NW9ajCbXcoh/Mwvir4JvuldgtIDfWXsD3wH8Ex7S11R1INX7IP6+YIFS2pONIqE8ZoeCY+hdEgpii1oUQakJn4ZzwexMxLbSiRGpqJU3/uTmNv4D8slsj9WnN00aawq3biheTtZuJlJbGLYiYe7BccBVJ1vGKqJpE1LmLxvuTLLWJUDTNx04tYvC+6CwvpeiYeONPhTDzQps1MXJf9D/8DEmah7Y5IAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIwLTA1LTIxVDE3OjUxOjUyKzAwOjAw6dTVAQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMC0wNS0yMVQxNzo1MTo1MiswMDowMJiJbb0AAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAAAAElFTkSuQmCC'); + visibility: visible!important; + background-size: 6vw 6vh; + display: inline-block; + width: 6vw; + height: 6vh; + content:""; + margin-right: 2vw; + filter: brightness(0.7); +} + +app-job-status ~ app-layer-progress .layer-indication__current-layer::after{ + content: '/'; + font-weight: normal; + padding-left: 0.5vw; + padding-right: 0.5vw; + color: var(--dark-text); +} + +/**************************************** PRINTING ****************************************/ + +.job-info__progress { + position: fixed!important; + width: 27vw!important; + height: 28vw!important; + top: 14vh!important; +} + +round-progress svg path{ + stroke-linecap:butt!important; + stroke-width: 50!important; + transform: scale(0.9); + transform-origin: center; + stroke: var(--green)!important; +} +round-progress svg circle{ + stroke-width: 50!important; + transform: scale(0.9); + transform-origin: center; + stroke: rgba(255, 255, 255, 0.2)!important; +} + +.job-info__progress-preview { + position:fixed!important; + top: 18vh!important; + left: 4vw!important; + width: 29vw!important; + margin:0!important; + display:block!important; +} + +.job-info__progress-percentage { + position:fixed!important; + top: 35vh!important; + left: 9vw!important; + margin:0!important; + display:block!important; + font-size: 9.5vw!important; + width: 20vw!important; +} + +#progress-preview-bar + .job-info__progress-percentage { + margin-top: -1.4vh!important; + margin-left: 0vw!important; + font-size: 8.7vh!important; + font-weight: 500!important; + display:block!important; + position:fixed!important; + left: 40vw!important; + top: 77vh!important; + z-index:1!important; + color:white!important; + visibility: visible!important; + text-shadow: -2px 0 2px black, 0 2px 2px black, 2px 0 2px black, 0 -2px 2px black; +} + + +.job-info__progress-bar { + height: 8vh!important; + border-radius: 1.7vw!important; + background-color: var(--green)!important; +} + +.job-info__progress-bar__wrapper { + position:fixed!important; + top: 78vh!important; + left: 3vw!important; + width: 92vw!important; + height: 8vh!important; + border-radius: 2vw!important; + background-color: rgb(127, 143, 166, 0.25); + border-style: solid!important; +} + +.job-info__filament{ + visibility: hidden; +} + +.job-info__time{ + position: absolute!important; + top: 18vh!important; + left: 38vw!important; + margin:0!important; + font-size:4vw!important; + color: var(--dark-text)!important; +} + +.job-info__time-left { + color: var(--light-text)!important; + font-size: 8vw!important; +} +.job-info__time-left::after{ + content: " "; +} + +.job-info__time span:first-of-type { + color: var(--dark-text); +} + +/**************************************** PRINT CONTROLL ****************************************/ + +.print-control__container { + backdrop-filter: blur(8px); + background-color: rgba(0, 0, 40, .8)!important; + transition: opacity ease-in-out .2s!important; +} +.print-control__adjust__controller { + border: solid 0.2vw!important; + border-radius: 1vw!important; +} +.print-control__adjust__save { + border: 0.2vw solid!important; + border-radius: 1vw!important; +} + +.print-control__cancel__action:first-child{ + background-color: rgba(194, 54, 22, 0.85); + text-align: center; + padding: 2vh 7vw!important; + margin: 9vh 6vw!important; + border-radius: 1vw; +} + +.print-control__cancel__action:last-child{ + background-color: var(--dark-green)!important; + text-align: center; + padding: 2vh 7vw!important; + margin: 9vh 6vw!important; + border-radius: 0.8vw; +} + +/**************************************** SETTINGS ****************************************/ + +.settings__made::after{ + content: " \00a0 | \00a0 Focus theme by theGarbz"; + width: auto!important; +} + +.settings__version::after{ + content: " \00a0 | \00a0 Focus theme v0.1"; + width: auto!important; +} + +.settings-wrapper{ + backdrop-filter: blur(8px); + background-color: rgba(0, 0, 40, .8)!important; +} + +.settings-container{ + left:0!important; + right:0!important; + top:0!important; + bottom:0!important; + width:auto!important; + height:auto!important; + background:none!important; +} + +.settings__content { + width: 95vw!important; + height: 95vh!important; +} + +.settings__scroll{ + height: 85vh!important; +} + +.settings__save{ + background-color: rgba(194, 54, 22, 0.85); + width: 30vw; + text-align: center; + padding: 1vh 0; + border-radius: 0.8vw; +} + +.settings__input{ + margin-top: 1.5vh; + padding: 1.5vw 3vh; + border-radius: 0.5vw!important; + width: 82.5vw!important; + font-size: 3vw!important; + margin-bottom: 2vh; +} + +.settings__input-small { + width: 15vw!important; +} + +#octoprintURLName{ + width: 34.8vw!important; /* 23.2vw*1.5 */ +} + +#octoprintURLPort{ + width: 12vw!important; /* 8vw*1.5 */ +} + +#accessToken, #printerName, #api-polling-interval, #action-command, #enclosure-ambient-id{ + width: 67.41vw!important; /* 44.94vw*1.5 */ +} + +#xySpeed, #zSpeed, #defaultHotendTemperature, #defaultHeatbedTemperature, #defaultFanSpeed, #filament-feed-length, #filament-purge-distance, #filament-feed-speed, #filament-feed-speed-slow, #filament-thickness, #filament-density{ + width: 28.5vw!important; /* 19vw*1.5 */ +} + +.settings__input-label { + font-size: 2.5vw!important; + padding-top: 4vh!important; +} + +#action-icon, #action-color{ + width: 21vw!important; /* 14vw*1.5 */ +} + +.settings__checkbox-descriptor{ + padding-right: 3vw; +} + +.settings__list li{ + padding-top: 1.8vw!important; + padding-bottom: 1.8vw!important; +} + + +.settings__close { + position: fixed!important; + right: 3vw!important; + top: 5.1vh!important; + width: 5vw!important; +} \ No newline at end of file diff --git a/themes/theGarbz/Focus/screenshots/icon.png b/themes/theGarbz/Focus/screenshots/icon.png new file mode 100755 index 000000000..f5d13b496 Binary files /dev/null and b/themes/theGarbz/Focus/screenshots/icon.png differ diff --git a/themes/theGarbz/Focus/screenshots/screenshot_adjust.png b/themes/theGarbz/Focus/screenshots/screenshot_adjust.png new file mode 100755 index 000000000..c843dcc27 Binary files /dev/null and b/themes/theGarbz/Focus/screenshots/screenshot_adjust.png differ diff --git a/themes/theGarbz/Focus/screenshots/screenshot_error.png b/themes/theGarbz/Focus/screenshots/screenshot_error.png new file mode 100755 index 000000000..ac52a1b02 Binary files /dev/null and b/themes/theGarbz/Focus/screenshots/screenshot_error.png differ diff --git a/themes/theGarbz/Focus/screenshots/screenshot_filequeue.png b/themes/theGarbz/Focus/screenshots/screenshot_filequeue.png new file mode 100755 index 000000000..3dd925716 Binary files /dev/null and b/themes/theGarbz/Focus/screenshots/screenshot_filequeue.png differ diff --git a/themes/theGarbz/Focus/screenshots/screenshot_fileselect.png b/themes/theGarbz/Focus/screenshots/screenshot_fileselect.png new file mode 100755 index 000000000..9110d212e Binary files /dev/null and b/themes/theGarbz/Focus/screenshots/screenshot_fileselect.png differ diff --git a/themes/theGarbz/Focus/screenshots/screenshot_main.png b/themes/theGarbz/Focus/screenshots/screenshot_main.png new file mode 100755 index 000000000..6887aa10f Binary files /dev/null and b/themes/theGarbz/Focus/screenshots/screenshot_main.png differ diff --git a/themes/theGarbz/Focus/screenshots/screenshot_menu.png b/themes/theGarbz/Focus/screenshots/screenshot_menu.png new file mode 100755 index 000000000..544bba75b Binary files /dev/null and b/themes/theGarbz/Focus/screenshots/screenshot_menu.png differ diff --git a/themes/theGarbz/Focus/screenshots/screenshot_print.png b/themes/theGarbz/Focus/screenshots/screenshot_print.png new file mode 100755 index 000000000..71b61c15f Binary files /dev/null and b/themes/theGarbz/Focus/screenshots/screenshot_print.png differ diff --git a/themes/theGarbz/Focus/screenshots/screenshot_print2.png b/themes/theGarbz/Focus/screenshots/screenshot_print2.png new file mode 100755 index 000000000..813dead83 Binary files /dev/null and b/themes/theGarbz/Focus/screenshots/screenshot_print2.png differ diff --git a/themes/theGarbz/Glanceable/custom-styles.css b/themes/theGarbz/Glanceable/custom-styles.css index 3ab23a0d7..ba84b73d5 100644 --- a/themes/theGarbz/Glanceable/custom-styles.css +++ b/themes/theGarbz/Glanceable/custom-styles.css @@ -3,15 +3,20 @@ app-job-status ~ app-printer-status .printer-status{ position:absolute!important; - top: 43vh!important; + top: 42vh!important; left: 0vw!important; } +app-job-status ~ app-printer-status .printer-status__set-value { + margin-top: -2vh!important; + font-size: 3.9vw!important; +} + /**** Job-Info Layer Progress ****/ .layer-indication{ position:absolute!important; - top: 65vh!important; + top: 66vh!important; left: 0vw!important; font-size: 3vw!important; } diff --git a/themes/theGarbz/Glanceable/screenshots/icon.png b/themes/theGarbz/Glanceable/screenshots/icon.png new file mode 100755 index 000000000..11d72c6ac Binary files /dev/null and b/themes/theGarbz/Glanceable/screenshots/icon.png differ diff --git a/themes/theGarbz/README.md b/themes/theGarbz/README.md new file mode 100644 index 000000000..8d69f318a --- /dev/null +++ b/themes/theGarbz/README.md @@ -0,0 +1,16 @@ +# A collection of themes by Garbz + +### [Focus](Focus/) ### +This theme focuses on important information for the user. A variation on the NOX theme, it reduces the contrast of non-important elements and incorporates large very easy to see progress bars giving the user quick access to the most important of information. + +![Icon Focus Theme](Focus/screenshots/icon.png) + +### [Big-Fingers](BigFingers/) ### +A variation on the default theme with wider vertical scrollbars. This is optimised for smaller screens and makes navigating files and filaments easier. + +![Icon BigFingers Theme](BigFingers/screenshots/icon.png) + +### [Glanceable](Glanceable/) ### +A variation on the default theme which introduces the option of a horizontal progress bar during printing. This alternate view allows for easier view of print progress from a distance while retaining the look and feel of the rest of the default OctoDash theme. + +![Icon Glanceable Theme](Glanceable/screenshots/icon.png) \ No newline at end of file