Wobbl/Wobbly-Website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improved website style.

Browse source
This commit is contained in:
The Wobbler 2024-12-01 19:29:26 +01:00
parent 6886945575
commit 976d83993b
4 changed files with 40 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
file_viewer.php
View file

@ -38,11 +38,11 @@
echo " #input_$useableName:checked + .submenu_$useableName, echo " #input_$useableName:checked + .submenu_$useableName,
.submenu_$useableName:hover { .submenu_$useableName:hover {
display: block; display: block;
background-color: $randomColor, 0.2); background-color: $randomColor, 0.5);
} }
.label_$useableName { .label_$useableName {
background-color: $randomColor, 0.2); background-color: $randomColor, 0.5);
}\n\n"; }\n\n";
generateCSSCode($filename); generateCSSCode($filename);
@ -60,7 +60,7 @@
$folderName = end($pathFragments); $folderName = end($pathFragments);
echo " $indentation<label for='input_$useableName' class='inout hcb-label label_$useableName'>$folderName</label> echo " $indentation<label for='input_$useableName' class='inout hcb-label label_$useableName'>$folderName</label>
$indentation<input type='checkbox' id='input_$useableName' class='hacked-checkbox'> $indentation<input type='checkbox' id='input_$useableName' class='hacked-checkbox'>
$indentation<div class='glass inset submenu submenu_$useableName' id='submenu_$useableName'>\n"; $indentation<div class='inset submenu submenu_$useableName' id='submenu_$useableName'>\n";
if (file_exists("$path/README.txt")) { // show description text if there is a README.txt if (file_exists("$path/README.txt")) { // show description text if there is a README.txt
echo " $indentation<p class='tiny-text'>Beschreibung:</p>\n"; echo " $indentation<p class='tiny-text'>Beschreibung:</p>\n";

11
file_viewer_styles.css
View file

@ -1,9 +1,11 @@
.submenu { .submenu {
display: none; display: none;
margin: 8px 0px 0px; margin: 0px 16px 0px 16px;
padding: 16px 0px 0px 16px;
border: 2px solid rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.3);
background-color: rgba(46, 46, 46, 0.5) border-radius: 0px 16px 16px 16px;
background-color: rgba(46, 46, 46, 0.5);
mix-blend-mode: color;
backdrop-filter: none;
} }
.submenu:target { .submenu:target {
@ -22,8 +24,9 @@
.hcb-label { .hcb-label {
padding: 8px 16px; padding: 8px 16px;
margin: 16px; margin: 16px 0px 0px 16px;
cursor: pointer; cursor: pointer;
border-radius: 16px 16px 0px 0px; border-radius: 16px 16px 0px 0px;
border: 2px solid rgba(255, 255, 255, 0.3); border: 2px solid rgba(255, 255, 255, 0.3);
display: inline-block;
} }

1
index.php
View file

@ -131,7 +131,6 @@ echo " </style>";
Evtl. könnt ihr hier etwas brauchbares finden. Evtl. könnt ihr hier etwas brauchbares finden.
</p> </p>
<div class="glass inset"> <div class="glass inset">
<br>
<?= generateSubmenusHTML(completeScanDir("files"), " ") ?> <?= generateSubmenusHTML(completeScanDir("files"), " ") ?>

35
styles.php
View file

@ -51,7 +51,14 @@ hr {
background-attachment: fixed; background-attachment: fixed;
background-size: cover; background-size: cover;
border-radius: 16px; border-radius: 16px;
padding: 10px; padding: 16px;
margin: 0px;
position: fixed;
overflow: auto;
top: 16px;
right: 16px;
bottom: 16px;
left: 16px;
} }
.text-background { .text-background {
@ -62,10 +69,11 @@ hr {
.topnav { .topnav {
background-color: rgba(51, 51, 51, 0.863); background-color: rgba(51, 51, 51, 0.863);
overflow: hidden; overflow: hidden;
width: 100%;
position: fixed; position: fixed;
top: 8px; top: 16px;
border-radius: 16px 0px; left: 16px;
right: 16px;
border-radius: 16px 16px 0px 0px;
} }
.topnav-inactive { .topnav-inactive {
@ -161,7 +169,7 @@ hr {
} }
.glass { .glass {
backdrop-filter: blur(8px); backdrop-filter: blur(16px);
border-radius: 16px; border-radius: 16px;
margin: 32px 16px 64px; margin: 32px 16px 64px;
} }
@ -271,4 +279,21 @@ hr {
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2) inset,
-4px -4px 4px rgba(255, 255, 255, 0.2) inset;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 0px 16px 16px 0px;
}
::-webkit-scrollbar-thumb {
backdrop-filter: blur(16px);
border-radius: 0px 16px 16px 0px;
background-color: rgba(4, 170, 109, 0.4);
} }