MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Replace spectrum with custom CSS

This commit is contained in:
Rory Powell 2022-04-25 16:39:44 +01:00
parent 3d8a8dbdd6
commit 2d810ece2b
1 changed files with 57 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
hosting/proxy/error.html
View File

@ -6,9 +6,14 @@
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1">
</head> </head>
<script src="https://jspm.dev/@spectrum-web-components/bundle/elements.js" type="module" async></script>
<script> <script>
function checkStatusButton() {
if (window.location.href.includes("budibase.app")) {
var button = document.getElementById("statusButton")
button.removeAttribute("hidden")
}
}
function goToStatus() { function goToStatus() {
window.location.href = "https://status.budibase.com"; window.location.href = "https://status.budibase.com";
} }
@ -39,16 +44,41 @@
} }
} }
window.onload = function() {
checkStatusButton()
getStatus() getStatus()
};
</script> </script>
<style> <style>
:root {
--spectrum-global-color-gray-600: rgb(144,144,144);
--spectrum-global-color-gray-900: rgb(255,255,255);
--spectrum-global-color-gray-800: rgb(227,227,227);
--spectrum-global-color-static-blue-600: rgb(20,115,230);
--spectrum-global-color-static-blue-hover: rgb( 18, 103, 207);
}
html, body { html, body {
background-color: #1a1a1a; background-color: #1a1a1a;
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
color: #e7e7e7; color: #e7e7e7;
font-family: 'Roboto', sans-serif;
}
button {
color: #e7e7e7;
font-family: 'Roboto', sans-serif;
border: none;
font-size: 15px;
border-radius: 15px;
padding: 8px 22px;
}
button:hover {
cursor: pointer;
} }
.main { .main {
height: 100vh; height: 100vh;
@ -85,7 +115,14 @@
flex-direction: row; flex-direction: row;
margin-top: 15px; margin-top: 15px;
} }
.homeButton {
background-color: var(--spectrum-global-color-static-blue-600);
}
.homeButton:hover {
background-color: var(--spectrum-global-color-static-blue-hover);
}
.statusButton { .statusButton {
background-color: transparent;
margin-left: 20px; margin-left: 20px;
border: none; border: none;
} }
@ -112,7 +149,6 @@
</script> </script>
<body> <body>
<sp-theme scale="medium" color="dark">
<div class="main"> <div class="main">
<div class="content"> <div class="content">
<div class="hero"> <div class="hero">
@ -128,14 +164,12 @@
</h3> </h3>
</div> </div>
<div class="buttons"> <div class="buttons">
<sp-button onclick=goHome()>Return home</sp-button> <button class="homeButton" onclick=goHome()>Return home</button>
<sp-button class="statusButton" quiet variant="secondary" onclick=goToStatus()>Check out status</sp-button> <button id="statusButton" class="statusButton" hidden="true" onclick=goToStatus()>Check out status</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</sp-theme>
</body> </body>
</html> </html>