mirror of
https://github.com/zeldaret/website.git
synced 2026-09-27 22:45:15 -04:00
Cleaned-up CSS testing
This commit is contained in:
Elliptic Ellipsis
@@ -21,7 +21,7 @@
|
||||
:root {
|
||||
--zelda-border-light: #5f87dd;
|
||||
--zelda-border-dark: #1c2a49;
|
||||
--zelda-bg: #2f487c;
|
||||
--zelda-bg: #2f487c;
|
||||
--zelda-bg-hilite: #3f67cd;
|
||||
--zelda-file-button-width: calc(145px*var(--scaling-factor));
|
||||
--zelda-button-width: calc(200px*var(--scaling-factor));
|
||||
@@ -70,18 +70,19 @@ a:hover
|
||||
}
|
||||
|
||||
.zelda-button {
|
||||
font-family: Chiaro;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: var(--zelda-button-font-size);
|
||||
padding-top: calc(10px*var(--scaling-factor));
|
||||
width: var(--zelda-button-width);
|
||||
text-align: center;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--zelda-bg),
|
||||
var(--zelda-bg-hilite) 30%,
|
||||
var(--zelda-bg) 80%,
|
||||
var(--zelda-bg-hilite)
|
||||
text-align: center;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--zelda-bg),
|
||||
var(--zelda-bg-hilite) 30%,
|
||||
var(--zelda-bg) 80%,
|
||||
var(--zelda-bg-hilite)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -89,15 +90,15 @@ a:hover
|
||||
.zelda-file-box {
|
||||
position: relative;
|
||||
font-family: Chiaro;
|
||||
color: white;
|
||||
background: linear-gradient(
|
||||
120deg,
|
||||
var(--zelda-bg) 10%,
|
||||
var(--zelda-bg-hilite) 30%,
|
||||
var(--zelda-bg-hilite) 40%,
|
||||
var(--zelda-bg) 60%,
|
||||
var(--zelda-bg-hilite) 80%,
|
||||
var(--zelda-bg)
|
||||
color: white;
|
||||
background: linear-gradient(
|
||||
120deg,
|
||||
var(--zelda-bg) 10%,
|
||||
var(--zelda-bg-hilite) 30%,
|
||||
var(--zelda-bg-hilite) 40%,
|
||||
var(--zelda-bg) 60%,
|
||||
var(--zelda-bg-hilite) 80%,
|
||||
var(--zelda-bg)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -146,9 +147,16 @@ a:hover
|
||||
.zelda-file-box-main {
|
||||
line-height: calc(5px*var(--scaling-factor));
|
||||
width: 100%;
|
||||
/* border-top-style: none; */
|
||||
/* border-top-left-radius: 0; */
|
||||
font-size: var(--zelda-content-font-size);
|
||||
}
|
||||
|
||||
/* First of its type under the filename box */
|
||||
:not(.zelda-file-box-main) + .zelda-file-box-main {
|
||||
border-top-style: none;
|
||||
border-top-left-radius: 0;
|
||||
font-size: var(--zelda-content-font-size);
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
.progress-value {
|
||||
|
||||
@@ -0,0 +1,74 @@
|
||||
div#progressChart {
|
||||
min-width: 310px;
|
||||
height: 400px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Zelda Accordion styles */
|
||||
.content-container {
|
||||
/* border-radius: 8px; */
|
||||
/* overflow: hidden; */ /* Masks with the glowing if enabled */
|
||||
/* box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5); */
|
||||
}
|
||||
|
||||
details {
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* transition: all 1s ease; */
|
||||
}
|
||||
|
||||
details > summary {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
details > summary::-webkit-details-marker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Size glow to File button size (a less hacky way probably exists) */
|
||||
|
||||
summary .glow {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: var(--zelda-file-button-width);
|
||||
height: calc(47px*var(--scaling-factor));
|
||||
border-radius: calc(4px*var(--scaling-factor));
|
||||
display: none;
|
||||
}
|
||||
|
||||
summary:hover .glow {
|
||||
display: block;
|
||||
transition:all 0.2s ease;
|
||||
background: rgba(200, 200, 200, 0.5);
|
||||
box-shadow: 0 0 20px rgba(200, 200, 200, .7);
|
||||
}
|
||||
|
||||
details:not([open]) hr {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
summary .zelda-file-box-filename {
|
||||
/* border-bottom-width: 0px; */
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
details[open] .zelda-file-box-filename {
|
||||
border-bottom-style: hidden;
|
||||
}
|
||||
|
||||
details[open] summary ~ * {
|
||||
animation: fade-in .5s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
0% {opacity: 0 }
|
||||
100% {opacity: 1 }
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,202 @@
|
||||
<!doctype html>
|
||||
<html lang=en>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
|
||||
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
||||
<link rel="stylesheet" href="main.css" />
|
||||
<link rel="stylesheet" href="test.css" />
|
||||
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
|
||||
<script type="text/javascript" src="https://code.highcharts.com/modules/data.js"></script>
|
||||
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>
|
||||
<script type="text/javascript" src="progress.js"></script>
|
||||
<script type="text/javascript" src="bg.js"></script>
|
||||
<script type="text/javascript" src="audio.js"></script>
|
||||
<title>Z64</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div class="container text-center">
|
||||
<img src="img/logo.png" style="width: 200px; height: 200px" />
|
||||
</div>
|
||||
|
||||
<br><br><br>
|
||||
<h1 class="text-center">ZRET Decompilation Status</h1>
|
||||
<br><br><br>
|
||||
|
||||
<div class="content-container">
|
||||
|
||||
<div class="zelda-file-box" id="oot-progress-container">
|
||||
|
||||
<details open>
|
||||
<summary>
|
||||
<div class="glow"></div>
|
||||
<div width=100%>
|
||||
|
||||
<div class="zelda-box zelda-button zelda-file-box-slot">File 1</div>
|
||||
|
||||
<div class="zelda-box zelda-file-box-filename">Oot Mq Debug
|
||||
<hr style="border-color: #1c2a49;margin-top: 14px;border-width: 3px;">
|
||||
</div>
|
||||
</div>
|
||||
</summary>
|
||||
|
||||
|
||||
<div>
|
||||
<div class="zelda-box zelda-file-box-hack_left"></div>
|
||||
<div class="zelda-box zelda-file-box-hack_right"></div>
|
||||
</div>
|
||||
|
||||
<div class="zelda-file-box-main zelda-box zelda-file-box-main">
|
||||
<div>
|
||||
<p style="float: left">Last Change:</p>
|
||||
<p id="ootLastChange" class="progress-value" style="color: cyan;">Error</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<p style="float: left">Total:</p>
|
||||
<p id="ootTotalPercent" class="progress-value">Error</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p style="float: left">Boot:</p>
|
||||
<p id="ootBootPercent" class="progress-value">Error</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p style="float: left">Code:</p>
|
||||
<p id="ootCodePercent" class="progress-value">Error</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p style="float: left">Overlays:</p>
|
||||
<p id="ootOverlayPercent" class="progress-value">Error</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="zelda-file-box-main zelda-box zelda-file-box-main">
|
||||
<div id="ootProgressChart" class="chart"></div>
|
||||
<script type="text/javascript" src="chart_oot.js"></script>
|
||||
</div>
|
||||
|
||||
<div class="zelda-box zelda-button" id="ootToggleMatching">Matching: <span
|
||||
style="color:red">No</span>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="zelda-file-box" id="mmProgressContainer">
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
<div class="glow"></div>
|
||||
<div width=100%>
|
||||
<div class="zelda-box zelda-button zelda-file-box-slot">File 2</div>
|
||||
<div class="zelda-box zelda-file-box-filename">Majora's Mask
|
||||
<hr style="border-color: #1c2a49;margin-top: 14px;border-width: 3px;">
|
||||
</div>
|
||||
</div>
|
||||
</summary>
|
||||
|
||||
<div>
|
||||
<div class="zelda-box zelda-file-box-hack_left"></div>
|
||||
<div class="zelda-box zelda-file-box-hack_right"></div>
|
||||
</div>
|
||||
<div class="zelda-file-box-main zelda-box">
|
||||
<div>
|
||||
<p style="float: left">Last Change:</p>
|
||||
<p id="mmLastChange" class="progress-value" style="color: cyan;">Error</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<p style="float: left">Total:</p>
|
||||
<p id="mmTotalPercent" class="progress-value">Error
|
||||
<p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p style="float: left">Boot:</p>
|
||||
<p id="mmBootPercent" class="progress-value">Error</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p style="float: left">Code:</p>
|
||||
<p id="mmCodePercent" class="progress-value">Error</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p style="float: left">Overlays:</p>
|
||||
<p id="mmOverlayPercent" class="progress-value">Error</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zelda-file-box-main zelda-box">
|
||||
<div id="mmProgressChart"></div>
|
||||
<script type="text/javascript" src="chart_mm.js"></script>
|
||||
</div>
|
||||
|
||||
<div class="zelda-box zelda-button" id="mmToggleMatching">Matching: <span
|
||||
style="color:red">No</span>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="zelda-file-box" id="tmcProgressContainer">
|
||||
<details>
|
||||
<summary>
|
||||
<div class="glow"></div>
|
||||
<div width=100%>
|
||||
<div class="zelda-box zelda-button zelda-file-box-slot">File 3</div>
|
||||
<div class="zelda-box zelda-file-box-filename">The Minish Cap
|
||||
<hr style="border-color: #1c2a49;margin-top: 14px;border-width: 3px;">
|
||||
</div>
|
||||
</div>
|
||||
</summary>
|
||||
<div>
|
||||
<div class="zelda-box zelda-file-box-hack_left"></div>
|
||||
<div class="zelda-box zelda-file-box-hack_right"></div>
|
||||
</div>
|
||||
<div class="zelda-file-box-main zelda-box">
|
||||
<div>
|
||||
<p style="float: left">Last Change:</p>
|
||||
<p id="tmcLastChange" class="progress-value" style="color: cyan;">Error</p>
|
||||
</div>
|
||||
<hr>
|
||||
<div>
|
||||
<p style="float: left">Code Decompilation:</p>
|
||||
<p id="tmcCodePercent" class="progress-value">Error
|
||||
<p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p style="float: left">Data Reconstruction:</p>
|
||||
<p id="tmcDataPercent" class="progress-value">Error</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="zelda-file-box-main zelda-box">
|
||||
<div id="tmcProgressChart"></div>
|
||||
<script type="text/javascript" src="chart_tmc.js"></script>
|
||||
</div>
|
||||
|
||||
<div class="zelda-box zelda-button" id="tmcToggleMatching">Matching: <span
|
||||
style="color:red">No</span>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
|
||||
<br>
|
||||
<div class="zelda-box zelda-button"><a href="index.html">Main Page</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user