mirror of
https://github.com/godotengine/godot-asset-library.git
synced 2026-01-04 14:10:53 +03:00
add dark mode
This commit is contained in:
Hana - Piralein
1
assets/logo_dark.svg
Normal file
1
assets/logo_dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 7.6 KiB |
168
style/base.css
168
style/base.css
@@ -1,5 +1,20 @@
|
||||
body {
|
||||
font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.form-search .form-group {
|
||||
@@ -151,3 +166,156 @@ body {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--base-color-text: hsla(200, 00%, 100%, 0.85);
|
||||
--link-color: #80B0DB;
|
||||
--link-underline-color: #94c2ef;
|
||||
--primary-background-color: #25282b;
|
||||
--secondary-background-color: #333639;
|
||||
--highlight-background-color: #505356;
|
||||
--input-background-color: #3b3e40;
|
||||
--success-background-color: #527c41;
|
||||
--danger-background-color: #ab1e1b;
|
||||
--notice-background-color: #3a57ad;
|
||||
--warning-background-color: #b5761b;
|
||||
--base-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--primary-background-color);
|
||||
color: var(--base-color-text)
|
||||
}
|
||||
|
||||
footer {
|
||||
padding-top: 40px;
|
||||
margin-top: 20px;
|
||||
background-color: var(--secondary-background-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
footer hr,
|
||||
.logo-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo-dark {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
background-color: var(--secondary-background-color);
|
||||
border: none;
|
||||
box-shadow: var(--base-box-shadow);
|
||||
}
|
||||
|
||||
.navbar-default .navbar-brand,
|
||||
.navbar-default .navbar-nav > li > a {
|
||||
color: var(--base-color-text)
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav > li > a:focus,
|
||||
.navbar-default .navbar-nav > li > a:hover,
|
||||
.navbar-default .navbar-brand:focus,
|
||||
.navbar-default .navbar-brand:hover {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-nav > .active > a,
|
||||
.navbar-default .navbar-nav > .active > a:focus,
|
||||
.navbar-default .navbar-nav > .active > a:hover {
|
||||
background-color: var(--highlight-background-color);
|
||||
color: var(--base-color-text)
|
||||
}
|
||||
|
||||
.form-control {
|
||||
background-color: var(--input-background-color);
|
||||
color: var(--base-color-text)
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.img-thumbnail {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
legend,
|
||||
h4 small,
|
||||
.help-block,
|
||||
.text-muted {
|
||||
color: var(--base-color-text)
|
||||
}
|
||||
|
||||
a,
|
||||
.btn-link {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
a:focus,
|
||||
a:hover,
|
||||
.btn-link:focus,
|
||||
.btn-link:hover {
|
||||
color: var(--link-underline-color);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: var(--danger-background-color);
|
||||
border-color: var(--danger-background-color);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: var(--success-background-color);
|
||||
border-color: var(--success-background-color);
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background-color: var(--warning-background-color);
|
||||
border-color: var(--warning-background-color);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--notice-background-color);
|
||||
border-color: var(--notice-background-color);
|
||||
}
|
||||
|
||||
code,
|
||||
.bg-info,
|
||||
.pagination > .active > a,
|
||||
.label-primary {
|
||||
background-color: var(--notice-background-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background-color: var(--secondary-background-color);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.panel-default > .panel-heading {
|
||||
background-color: var(--highlight-background-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.label-danger,
|
||||
.panel-danger > .panel-heading,
|
||||
.table > tbody > tr > td.danger {
|
||||
background-color: var(--danger-background-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.label-success,
|
||||
.panel-success > .panel-heading,
|
||||
.table > tbody > tr > td.success {
|
||||
background-color: var(--success-background-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.table > tbody > tr > td.active {
|
||||
background-color: var(--primary-background-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
</main>
|
||||
<footer>
|
||||
<div class="row">
|
||||
<div class="container">
|
||||
<div class="col-md-12">
|
||||
<hr/>
|
||||
<p>
|
||||
@@ -30,7 +31,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
|
||||
<script defer src="https://code.jquery.com/jquery-3.6.4.slim.js"
|
||||
|
||||
@@ -25,10 +25,11 @@
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="<?php echo raw($bowerpath) ?>/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="<?php echo raw($basepath) ?>/style/base.css?2" rel="stylesheet">
|
||||
<link href="<?php echo raw($basepath) ?>/style/base.css?3" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<!-- Navigation -->
|
||||
<nav class="navbar navbar-default navbar-static-top" role="navigation">
|
||||
<div class="container">
|
||||
@@ -40,7 +41,8 @@
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="https://godotengine.org" style="padding: 7px;"><img alt="Godot" src="<?php echo raw($basepath) ?>/assets/logo.svg" height="100%" style="display: inline"> </a>
|
||||
<a class="navbar-brand logo-light" href="https://godotengine.org" style="padding: 7px;"><img alt="Godot" src="<?php echo raw($basepath) ?>/assets/logo.svg" height="100%" style="display: inline"> </a>
|
||||
<a class="navbar-brand logo-dark" href="https://godotengine.org" style="padding: 7px;"><img alt="Godot" src="<?php echo raw($basepath) ?>/assets/logo_dark.svg" height="100%" style="display: inline"> </a>
|
||||
<a class="navbar-brand" href="<?php echo raw($basepath) ?>" style="padding: 14px;">| Asset Library</a>
|
||||
</div>
|
||||
|
||||
@@ -75,4 +77,5 @@
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
</nav>
|
||||
<div class="container">
|
||||
</header>
|
||||
<main class="container">
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<div class="asset-search-container">
|
||||
<form method="get" action="asset">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" name="filter" placeholder="Search for..." value="<?php if(isset($params['filter'])) echo esc($params['filter']) ?>">
|
||||
<input type="text" class="form-control" name="filter" placeholder="Search for..." aria-label="Search for assets" value="<?php if(isset($params['filter'])) echo esc($params['filter']) ?>">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-primary" type="submit">Search</button>
|
||||
</span>
|
||||
@@ -39,8 +39,8 @@
|
||||
<?php } ?>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Godot version</label>
|
||||
<select id="category" name="godot_version" class="form-control">
|
||||
<label for="godot_version">Godot version</label>
|
||||
<select id="godot_version" name="godot_version" class="form-control">
|
||||
<option value="">
|
||||
Any
|
||||
</option>
|
||||
|
||||
Reference in New Issue
Block a user