From 54999e3577fe30f84a0652a2d0d8f7c0470759dc Mon Sep 17 00:00:00 2001 From: Natan Date: Fri, 6 Jun 2025 17:57:16 -0300 Subject: [PATCH 1/4] Fix indentation --- themes/XP/_progressbar.scss | 297 ++++++++++++++++++------------------ 1 file changed, 148 insertions(+), 149 deletions(-) diff --git a/themes/XP/_progressbar.scss b/themes/XP/_progressbar.scss index d8e6b70..98626f0 100644 --- a/themes/XP/_progressbar.scss +++ b/themes/XP/_progressbar.scss @@ -3,159 +3,158 @@ \*-------------------------------------------*/ @keyframes sliding { - 0% { - transform: translateX(-30px); + 0% { + transform: translateX(-30px); + } + 100% { + transform: translateX(100%); + } +} + +progress { + &, + &[value], + &:not([value]) { + --determinate-track: repeating-linear-gradient( + to right, + #fff 0px, + #fff 2px, + transparent 2px, + transparent 10px + ), + linear-gradient( + to bottom, + #acedad 0%, + #7be47d 14%, + #4cda50 28%, + #2ed330 42%, + #42d845 57%, + #76e275 71%, + #8fe791 85%, + #ffffff 100% + ); + --indeterminate-track: repeating-linear-gradient( + to right, + transparent 0px, + transparent 8px, + #fff 8px, + #fff 10px, + transparent 10px, + transparent 18px, + #fff 18px, + #fff 20px, + transparent 20px, + transparent 28px, + #fff 28px, + #fff 100% + ), + linear-gradient( + to bottom, + #acedad 0%, + #7be47d 14%, + #4cda50 28%, + #2ed330 42%, + #42d845 57%, + #76e275 71%, + #8fe791 85%, + #ffffff 100% + ); + --indeterminate-track-animation: sliding 2s linear 0s infinite; + --track-shadow: inset 0px 0px 1px 0px rgba(104, 104, 104, 1); + --track-height: 14px; + } + + box-sizing: border-box; + + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + + height: var(--track-height); + + border: 1px solid #686868; + border-radius: 4px; + + padding: 1px 2px 1px 0px; + + overflow: hidden; + background-color: #fff; + + -webkit-box-shadow: var(--track-shadow); + -moz-box-shadow: var(--track-shadow); + box-shadow: var(--track-shadow); + + /* Determinate styles */ + &[value] { + /* Chrome, Safari, Edge */ + &::-webkit-progress-bar { + background-color: transparent; } - 100% { - transform: translateX(100%); + &::-webkit-progress-value { + border-radius: 2px; + background: var(--determinate-track); + } + /* Firefox */ + &::-moz-progress-bar { + border-radius: 2px; + background: var(--determinate-track); } } - - progress { - &, - &[value], - &:not([value]) { - --determinate-track: repeating-linear-gradient( - to right, - #fff 0px, - #fff 2px, - transparent 2px, - transparent 10px - ), - linear-gradient( - to bottom, - #acedad 0%, - #7be47d 14%, - #4cda50 28%, - #2ed330 42%, - #42d845 57%, - #76e275 71%, - #8fe791 85%, - #ffffff 100% - ); - --indeterminate-track: repeating-linear-gradient( - to right, - transparent 0px, - transparent 8px, - #fff 8px, - #fff 10px, - transparent 10px, - transparent 18px, - #fff 18px, - #fff 20px, - transparent 20px, - transparent 28px, - #fff 28px, - #fff 100% - ), - linear-gradient( - to bottom, - #acedad 0%, - #7be47d 14%, - #4cda50 28%, - #2ed330 42%, - #42d845 57%, - #76e275 71%, - #8fe791 85%, - #ffffff 100% - ); - --indeterminate-track-animation: sliding 2s linear 0s infinite; - --track-shadow: inset 0px 0px 1px 0px rgba(104, 104, 104, 1); - --track-height: 14px; + + /* Indeterminate styles */ + &:not([value]) { + /* Apply for Chrome, Safari and Edge but animation only works in Safari */ + &::-webkit-progress-bar { + width: 100%; + background: var(--indeterminate-track); + animation: var(--indeterminate-track-animation); } - - box-sizing: border-box; - - appearance: none; - -webkit-appearance: none; - -moz-appearance: none; - - height: var(--track-height); - - border: 1px solid #686868; - border-radius: 4px; - - padding: 1px 2px 1px 0px; - - overflow: hidden; - background-color: #fff; - - -webkit-box-shadow: var(--track-shadow); - -moz-box-shadow: var(--track-shadow); - box-shadow: var(--track-shadow); - - /* Determinate styles */ - &[value] { - /* Chrome, Safari, Edge */ - &::-webkit-progress-bar { - background-color: transparent; - } - &::-webkit-progress-value { - border-radius: 2px; - background: var(--determinate-track); - } - /* Firefox */ - &::-moz-progress-bar { - border-radius: 2px; - background: var(--determinate-track); - } + + /* Solution for Chrome and Edge: animate pseudo element :after */ + & { + position: relative; } - - /* Indeterminate styles */ - &:not([value]) { - /* Apply for Chrome, Safari and Edge but animation only works in Safari */ - &::-webkit-progress-bar { - width: 100%; - background: var(--indeterminate-track); - animation: var(--indeterminate-track-animation); - } - - /* Solution for Chrome and Edge: animate pseudo element :after */ - & { - position: relative; - } - /* This pseudo element is to hide the not working -webkit-progress-bar animation above for Chrome and Edge */ - &::before { - box-sizing: border-box; - content: ""; - position: absolute; - top: 0; - left: 0; - - width: 100%; - height: 100%; - - background-color: #fff; - - -webkit-box-shadow: var(--track-shadow); - -moz-box-shadow: var(--track-shadow); - box-shadow: var(--track-shadow); - } - /* Real animated element */ - &::after { - box-sizing: border-box; - content: ""; - position: absolute; - top: 1px; - left: 2px; - - width: 100%; - height: calc(100% - 2px); - - padding: 1px 2px 1px 2px; - - border-radius: 2px; - - background: var(--indeterminate-track); - animation: var(--indeterminate-track-animation); - } - - /* Firefox */ - &::-moz-progress-bar { - width: 100%; - background: var(--indeterminate-track); - animation: var(--indeterminate-track-animation); - } + /* This pseudo element is to hide the not working -webkit-progress-bar animation above for Chrome and Edge */ + &::before { + box-sizing: border-box; + content: ""; + position: absolute; + top: 0; + left: 0; + + width: 100%; + height: 100%; + + background-color: #fff; + + -webkit-box-shadow: var(--track-shadow); + -moz-box-shadow: var(--track-shadow); + box-shadow: var(--track-shadow); + } + /* Real animated element */ + &::after { + box-sizing: border-box; + content: ""; + position: absolute; + top: 1px; + left: 2px; + + width: 100%; + height: calc(100% - 2px); + + padding: 1px 2px 1px 2px; + + border-radius: 2px; + + background: var(--indeterminate-track); + animation: var(--indeterminate-track-animation); + } + + /* Firefox */ + &::-moz-progress-bar { + width: 100%; + background: var(--indeterminate-track); + animation: var(--indeterminate-track-animation); } } - \ No newline at end of file +} From 2e00caadc54b0730952d61464884470ecb2f89fd Mon Sep 17 00:00:00 2001 From: Natan Date: Fri, 6 Jun 2025 18:26:33 -0300 Subject: [PATCH 2/4] Making it work with all major browsers --- themes/XP/_progressbar.scss | 159 ++++++++++++++---------------------- 1 file changed, 63 insertions(+), 96 deletions(-) diff --git a/themes/XP/_progressbar.scss b/themes/XP/_progressbar.scss index 98626f0..cc62203 100644 --- a/themes/XP/_progressbar.scss +++ b/themes/XP/_progressbar.scss @@ -4,67 +4,61 @@ @keyframes sliding { 0% { - transform: translateX(-30px); + transform: translateX(-40%); } 100% { - transform: translateX(100%); + transform: translateX(140%); } } - -progress { - &, - &[value], - &:not([value]) { - --determinate-track: repeating-linear-gradient( - to right, - #fff 0px, - #fff 2px, - transparent 2px, - transparent 10px - ), - linear-gradient( - to bottom, - #acedad 0%, - #7be47d 14%, - #4cda50 28%, - #2ed330 42%, - #42d845 57%, - #76e275 71%, - #8fe791 85%, - #ffffff 100% - ); - --indeterminate-track: repeating-linear-gradient( - to right, - transparent 0px, - transparent 8px, - #fff 8px, - #fff 10px, - transparent 10px, - transparent 18px, - #fff 18px, - #fff 20px, - transparent 20px, - transparent 28px, - #fff 28px, - #fff 100% - ), - linear-gradient( - to bottom, - #acedad 0%, - #7be47d 14%, - #4cda50 28%, - #2ed330 42%, - #42d845 57%, - #76e275 71%, - #8fe791 85%, - #ffffff 100% - ); - --indeterminate-track-animation: sliding 2s linear 0s infinite; - --track-shadow: inset 0px 0px 1px 0px rgba(104, 104, 104, 1); - --track-height: 14px; - } - box-sizing: border-box; +progress { + --determinate-track: repeating-linear-gradient( + to right, + #fff 0px, + #fff 2px, + transparent 2px, + transparent 10px + ), + linear-gradient( + to bottom, + #acedad 0%, + #7be47d 14%, + #4cda50 28%, + #2ed330 42%, + #42d845 57%, + #76e275 71%, + #8fe791 85%, + #ffffff 100% + ); + --indeterminate-track: repeating-linear-gradient( + to right, + transparent 0px, + transparent 8px, + #fff 8px, + #fff 10px, + transparent 10px, + transparent 18px, + #fff 18px, + #fff 20px, + transparent 20px, + transparent 28px, + #fff 28px, + #fff 100% + ), + linear-gradient( + to bottom, + #acedad 0%, + #7be47d 14%, + #4cda50 28%, + #2ed330 42%, + #42d845 57%, + #76e275 71%, + #8fe791 85%, + #ffffff 100% + ); + --indeterminate-track-animation: sliding 2s linear 0s infinite; + --track-shadow: inset 0px 0px 1px 0px rgba(104, 104, 104, 1); + --track-height: 14px; appearance: none; -webkit-appearance: none; @@ -80,79 +74,52 @@ progress { overflow: hidden; background-color: #fff; - -webkit-box-shadow: var(--track-shadow); - -moz-box-shadow: var(--track-shadow); + box-sizing: border-box; box-shadow: var(--track-shadow); /* Determinate styles */ - &[value] { + &:not(:indeterminate) { /* Chrome, Safari, Edge */ - &::-webkit-progress-bar { - background-color: transparent; - } &::-webkit-progress-value { - border-radius: 2px; background: var(--determinate-track); } + /* Firefox */ &::-moz-progress-bar { - border-radius: 2px; background: var(--determinate-track); } } /* Indeterminate styles */ - &:not([value]) { - /* Apply for Chrome, Safari and Edge but animation only works in Safari */ - &::-webkit-progress-bar { - width: 100%; - background: var(--indeterminate-track); - animation: var(--indeterminate-track-animation); - } + &:indeterminate { + position: relative; + will-change: left, right; - /* Solution for Chrome and Edge: animate pseudo element :after */ - & { - position: relative; - } /* This pseudo element is to hide the not working -webkit-progress-bar animation above for Chrome and Edge */ &::before { - box-sizing: border-box; content: ""; position: absolute; - top: 0; - left: 0; - - width: 100%; - height: 100%; - background-color: #fff; - - -webkit-box-shadow: var(--track-shadow); - -moz-box-shadow: var(--track-shadow); + box-sizing: border-box; box-shadow: var(--track-shadow); } + /* Real animated element */ &::after { - box-sizing: border-box; content: ""; position: absolute; - top: 1px; - left: 2px; - - width: 100%; - height: calc(100% - 2px); - - padding: 1px 2px 1px 2px; - - border-radius: 2px; background: var(--indeterminate-track); animation: var(--indeterminate-track-animation); } + /* Uses ::after instead */ + &::-webkit-progress-bar { + background-color: transparent; + } + /* Firefox */ &::-moz-progress-bar { - width: 100%; background: var(--indeterminate-track); animation: var(--indeterminate-track-animation); } From 83938a0d4a1a9c30fcf43ae7351c326eaf25172e Mon Sep 17 00:00:00 2001 From: Natan Date: Fri, 6 Jun 2025 18:26:49 -0300 Subject: [PATCH 3/4] Added windows 98 style progress bar --- themes/98/_progressbar.scss | 115 ++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 themes/98/_progressbar.scss diff --git a/themes/98/_progressbar.scss b/themes/98/_progressbar.scss new file mode 100644 index 0000000..d4dbe96 --- /dev/null +++ b/themes/98/_progressbar.scss @@ -0,0 +1,115 @@ +/*-------------------------------------------*\ + ProgressBar +\*-------------------------------------------*/ + +@keyframes sliding { + 0% { + transform: translateX(-40%); + } + 100% { + transform: translateX(140%); + } +} + +progress { + --determinate-track: repeating-linear-gradient( + to right, + navy 0px, + navy 10px, + transparent 10px, + transparent 12px + ); + --indeterminate-track: repeating-linear-gradient( + to right, + transparent 0px, + transparent 10px, + navy 10px, + navy 20px, + transparent 20px, + transparent 22px, + navy 22px, + navy 32px, + transparent 32px, + transparent 34px, + navy 34px, + navy 44px, + transparent 44px, + transparent 56px, + transparent 100% + ); + --indeterminate-track-animation: sliding 2s linear 0s infinite; + --track-shadow: inset -2px -2px #dfdfdf, inset 2px 2px grey; + --track-height: 24px; + + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + + height: var(--track-height); + + border: 0; + + padding: 4px; + + overflow: hidden; + background-color: #c0c0c0; + + box-sizing: border-box; + box-shadow: var(--track-shadow); + + &:not(:indeterminate) { + &::-webkit-progress-value { + background: var(--determinate-track); + } + + &::-moz-progress-bar { + background: var(--determinate-track); + } + } + + /* Indeterminate styles */ + &:indeterminate { + position: relative; + will-change: left, right; + + /* This pseudo element is to hide the not working -webkit-progress-bar animation above for Chrome and Edge */ + &::before { + content: ""; + position: absolute; + + top: 0; + left: 0; + width: 100%; + height: 100%; + + z-index: 1; + + box-sizing: border-box; + box-shadow: var(--track-shadow); + } + + /* Real animated element */ + &::after { + content: ""; + position: absolute; + + width: 100%; + top: 4px; + bottom: 4px; + + background: var(--indeterminate-track); + animation: var(--indeterminate-track-animation); + } + + /* Uses ::after instead */ + &::-webkit-progress-bar { + background-color: transparent; + } + + /* Firefox */ + &::-moz-progress-bar { + background: var(--indeterminate-track); + animation: var(--indeterminate-track-animation); + } + } +} From ca24ba9cf57f73073a0235fa642cd0919d29fb2e Mon Sep 17 00:00:00 2001 From: Natan Date: Fri, 6 Jun 2025 18:49:31 -0300 Subject: [PATCH 4/4] Some flickering fixes --- package.json | 4 ++-- themes/98/_progressbar.scss | 3 ++- themes/98/index.scss | 1 + themes/XP/_progressbar.scss | 14 ++++++++++++++ 4 files changed, 19 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 984d347..63342c7 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "highlight.js": ">=10.4.1", "live-server": "^1.2.1", "mkdirp": "^1.0.4", + "postcss": "^8.5.4", "postcss-calc": "^7.0.2", "postcss-copy": "^7.1.0", "postcss-css-variables": "^0.14.0", @@ -44,6 +45,5 @@ "postcss-inline": "^1.2.0", "postcss-inline-svg": "^4.1.0", "postcss-nested": "^4.2.1" - }, - "dependencies": {} + } } diff --git a/themes/98/_progressbar.scss b/themes/98/_progressbar.scss index d4dbe96..0488c02 100644 --- a/themes/98/_progressbar.scss +++ b/themes/98/_progressbar.scss @@ -93,9 +93,10 @@ progress { content: ""; position: absolute; - width: 100%; + /* This thing mimic the padding in , I fear thats not 1:1, but it looks the same I guess */ top: 4px; bottom: 4px; + width: 100%; background: var(--indeterminate-track); animation: var(--indeterminate-track-animation); diff --git a/themes/98/index.scss b/themes/98/index.scss index 0544e1b..6c26f91 100644 --- a/themes/98/index.scss +++ b/themes/98/index.scss @@ -13,3 +13,4 @@ @import "_tabs.scss"; @import "_buttons.scss"; @import "_treeview.scss"; +@import "_progressbar.scss"; diff --git a/themes/XP/_progressbar.scss b/themes/XP/_progressbar.scss index cc62203..321d9a4 100644 --- a/themes/XP/_progressbar.scss +++ b/themes/XP/_progressbar.scss @@ -100,6 +100,13 @@ progress { content: ""; position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + + z-index: 1; + box-sizing: border-box; box-shadow: var(--track-shadow); } @@ -109,6 +116,13 @@ progress { content: ""; position: absolute; + /* This thing mimic the padding in , I fear thats not 1:1, but it looks the same I guess */ + top: 1px; + bottom: 1px; + left: 2px; + right: 2px; + width: 100%; + background: var(--indeterminate-track); animation: var(--indeterminate-track-animation); }