diff --git a/extra/Pages/showStatus.js b/extra/Pages/showStatus.js index 4c97988..62d630d 100644 --- a/extra/Pages/showStatus.js +++ b/extra/Pages/showStatus.js @@ -44,7 +44,7 @@ const call = async (stear, { find, resolve, render, call }, { text, color="grey" find.main._.innerText = next.text; await fadein(find.main._, 200, true); - find.main._.style.transition = ""; + //find.main._.style.transition = ""; async function loop(){ last = next; diff --git a/extra/Style/scrollBar1.js b/extra/Style/scrollBar1.js new file mode 100644 index 0000000..1935107 --- /dev/null +++ b/extra/Style/scrollBar1.js @@ -0,0 +1,25 @@ +import { Stear } from "../../main.js"; + +export const scrollBarCss1 = ({ size = "5px", background = "transparent", thumbColor = "#33a", hoverColor ="#44f"}) => { + return { + "::-webkit-scrollbar":{ + width: size, + height: size, + }, + "::-webkit-scrollbar-track":{ + background: background, + + }, + "::-webkit-scrollbar-thumb":{ + background: thumbColor, + borderRadius: `calc(${size} / 2)`, + }, + "::-webkit-scrollbar-thumb:hover":{ + background: hoverColor + } + } +}; + +export const applyScrollBarCss1 = ({ size = "5px", background = "transparent", thumbColor = "#33a", hoverColor = "#44f" } = {}) => { + Object.entries(scrollBarCss1({ size, background, thumbColor, hoverColor })).forEach(([k,d])=>Stear.addGlobalStyleJSON(d,k)); +} \ No newline at end of file diff --git a/main.js b/main.js index 2902dc0..dded285 100644 --- a/main.js +++ b/main.js @@ -134,7 +134,7 @@ export class SWindow extends SFrame{ width: "100%", display: "block", backgroundColor, - overflow:"scroll" + //overflow:"scroll" }, find:"main" }, []); diff --git a/utils.js b/utils.js index f9e6adf..cda3a35 100644 --- a/utils.js +++ b/utils.js @@ -5,8 +5,10 @@ export const wait = (ms) => { } export const fadeout = async (elems, ms = 200, force = false) => { + var oldTrans = []; if (!Array.isArray(elems)) elems = [elems]; for (let i = 0; i < elems.length; i++) { + oldTrans[i] = elems[i].style.transition; elems[i].style.transition = `opacity ${ms}ms`; if(force){ elems[i].style.opacity = "1"; @@ -20,13 +22,16 @@ export const fadeout = async (elems, ms = 200, force = false) => { await wait(ms); for (let i = 0; i < elems.length; i++) { elems[i].style.display = "none"; + elems[i].style.transition = oldTrans[i]; } } -export const fadein = async (elems, ms = 200, force = false) => { +export const fadein = async (elems, ms = 200, force = false, display="") => { + var oldTrans = []; if (!Array.isArray(elems)) elems = [elems]; for (let i = 0; i < elems.length; i++) { + oldTrans[i] = elems[i].style.transition elems[i].style.transition = `opacity ${ms}ms`; - elems[i].style.display = ""; + elems[i].style.display = display; if (force) { elems[i].style.opacity = "0"; } @@ -35,7 +40,10 @@ export const fadein = async (elems, ms = 200, force = false) => { for (let i = 0; i < elems.length; i++) { elems[i].style.opacity = "1"; } - await wait(ms); + await wait(ms+1); + for (let i = 0; i < elems.length; i++) { + elems[i].style.transition = oldTrans[i]; + } } var bStack = [];