diff --git a/README.md b/README.md index 12c6a37..38a53f9 100644 --- a/README.md +++ b/README.md @@ -48,8 +48,8 @@ If you're going to use different parts of the franework, you can read about them Here is a simple Hello World example using Kawai: ```
-
Hi from Kawai
-
Kawai - is the world famous framework for build anything that you want in one sec!
+
Hi from Kawai
+
Kawai - is the world famous framework for build anything that you want in one sec!
``` diff --git a/assets/css/kawai.css b/assets/css/kawai.css index 05003cb..73e852e 100644 --- a/assets/css/kawai.css +++ b/assets/css/kawai.css @@ -88,6 +88,7 @@ word-wrap: break-word; align-content: stretch; background: white; + border: 1px solid #DDE1E5; } .block-card { @@ -96,6 +97,7 @@ height: auto; width: 30%; background: white; + border: 1px solid #DDE1E5; padding: 1%; border-radius: 6px; justify-content: space-between; @@ -128,11 +130,9 @@ width: auto; height: fit-content; padding: 2%; - background: rgb(53, 120, 246); + border: 1px solid rgb(53, 120, 246); border-radius: 6px; - color: white; display: flex; - border: 0; } .block-list { @@ -170,7 +170,7 @@ } /* TEXT */ -.text-block { +.block-text { display: block; text-decoration: none; color: black; @@ -248,7 +248,7 @@ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } -.topbar-o>.text-block { +.topbar-o>.block-text { line-height: normal; } @@ -425,7 +425,7 @@ } /* STYLISHING */ -.sidebar-o>.text-block { +.sidebar-o>.block-text { text-align: center; font-size: 27px; display: flex; diff --git a/assets/js/kawai.js b/assets/js/kawai.js index 04d705c..9311d88 100644 --- a/assets/js/kawai.js +++ b/assets/js/kawai.js @@ -33,28 +33,20 @@ if (checkMode == '1') { } // Functions -function SideBarSwitch() { +function SideBarSwitch(idSide) { if (checkSide == 0) { - SideDisabler('sidebar'); - document.location.reload(true); + SideDisabler(idSide); } else { localStorage.setItem('side', '0'); document.location.reload(true); } } -function SideDisabler() { - localStorage.setItem('sideid', 'sidebar'); - document.getElementById(localStorage.getItem('sideid')).style = "display: none"; +function SideDisabler(idSide) { + document.getElementById(idSide).style = "display: none"; document.getElementsByClassName('block-o')[0].classList.remove('uside') - /*const howmanytabs = document.querySelectorAll('.tab-o'); - if (howmanytabs.length) { - for (let step = 0; step < howmanytabs.length; step++) { - const element = howmanytabs[step]; - element.style.display = 'block' - } - }*/ localStorage.setItem('side', '1'); + checkSide = 1 } function PopupClose() { @@ -110,16 +102,43 @@ function OpenTab(gettab) { } function DarkEnabler() { - document.getElementsByTagName('body')[0].style = "background-color: rgb(30, 30, 30)"; - document.getElementsByClassName('topbar-o')[0].style = "color: white"; - document.getElementsByClassName('sidebar-o')[0].style = "background-color: rgb(36, 38, 38)"; + var body = document.querySelectorAll('body'); + var topbarO = document.querySelectorAll('.topbar-o'); + var sidebarO = document.querySelectorAll('.sidebar-o'); - var text = document.querySelectorAll('.text-block'); + var text = document.querySelectorAll('.block-text'); + var textLa = document.querySelectorAll('.la'); + var textLb = document.querySelectorAll('.lb'); + var textLc = document.querySelectorAll('.lc'); var blocksidetabse = document.querySelectorAll('.side-tab-block-e'); var blockinput = document.querySelectorAll('.block-input'); + var blockL = document.querySelectorAll('.block-l'); + var blockCard = document.querySelectorAll('.block-card'); + var blockButton = document.querySelectorAll('.block-button'); var blockliste = document.querySelectorAll('.block-list-e'); var blockdropdowntab = document.querySelectorAll('.block-dropdown-tab') + if (body.length) { + for (let step = 0; step < body.length; step++) { + var element = body[step]; + element.style = "background: rgb(30, 30, 30)"; + } + } + + if (topbarO.length) { + for (let step = 0; step < topbarO.length; step++) { + var element = topbarO[step]; + element.style = "color: white"; + } + } + + if (sidebarO.length) { + for (let step = 0; step < sidebarO.length; step++) { + var element = sidebarO[step]; + element.style = "background: rgb(30, 30, 30)"; + } + } + if (text.length) { for (let step = 0; step < text.length; step++) { var element = text[step]; @@ -127,6 +146,48 @@ function DarkEnabler() { } } + if (textLa.length) { + for (let step = 0; step < textLa.length; step++) { + var element = textLa[step]; + element.style = "color: white"; + } + } + + if (textLb.length) { + for (let step = 0; step < textLb.length; step++) { + var element = textLb[step]; + element.style = "color: white"; + } + } + + if (textLc.length) { + for (let step = 0; step < textLc.length; step++) { + var element = textLc[step]; + element.style = "color: white"; + } + } + + if (blockL.length) { + for (let step = 0; step < blockL.length; step++) { + var element = blockL[step]; + element.style = "background: rgb(30, 30, 30)"; + } + } + + if (blockCard.length) { + for (let step = 0; step < blockCard.length; step++) { + var element = blockCard[step]; + element.style = "background: rgb(30, 30, 30)"; + } + } + + if (blockButton.length) { + for (let step = 0; step < blockButton.length; step++) { + var element = blockButton[step]; + element.style = "color: white"; + } + } + if (blocksidetabse.length) { for (let step = 0; step < blocksidetabse.length; step++) { var element = blocksidetabse[step]; diff --git a/docs.html b/docs.html index 3e5b0f1..bec2d98 100644 --- a/docs.html +++ b/docs.html @@ -17,8 +17,17 @@ -
-
Hi
+ + +