Moved php to /php folder, and some style updates
This commit is contained in:
parent
5dff276690
commit
97f7f9e7fa
22
index.html
22
index.html
|
|
@ -61,15 +61,25 @@
|
||||||
<rect x="450" y="50" width="30" height="10"/>
|
<rect x="450" y="50" width="30" height="10"/>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<a class="pill" href="./download.php?icon=all" target="_blank">Download All</a>
|
<div class="pill"><a class="button" href="./download.php?icon=all" target="_blank">Download All</a></div>
|
||||||
<a class="pill" href="https://github.com/shuqikhor/PixelIcon" target="_blank">GitHub</a>
|
<div class="pill"><a class="button" href="https://github.com/shuqikhor/PixelIcon" target="_blank">GitHub</a></div>
|
||||||
<button class="pill" id="btn-theme">
|
<div class="pill">
|
||||||
<img class="theme-icon" src="./icons/sun.svg" alt="Light">
|
<button class="button" id="btn-theme">
|
||||||
<img class="theme-icon" src="./icons/moon.svg" alt="Dark">
|
<img class="theme-icon" src="./icons/sun.svg" alt="Light">
|
||||||
</button>
|
<img class="theme-icon" src="./icons/moon.svg" alt="Dark">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
<div id="introduction">
|
||||||
|
<p>180 pixel-perfect icons, free to use for all your projects!</p>
|
||||||
|
<p>These pixel-art icons are all carefully crafted in 9x9 pixel grids, then saved in SVG vector format.</p>
|
||||||
|
<p>To download, please click the icons you want, or click the [Download All] button above.</p>
|
||||||
|
</div>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
<footer>
|
||||||
|
<p>Made by <a href="https://sqkhor.com">Shuqi Khor</a></p>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<script type="module" src="/src/main.jsx"></script>
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$icons_path = __DIR__."/icons";
|
||||||
|
|
||||||
|
$files = scandir($icons_path);
|
||||||
|
$files = array_filter($files, function ($file) {
|
||||||
|
return (substr($file, -4, 4) == ".svg");
|
||||||
|
});
|
||||||
|
|
||||||
|
?>
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta property="og:title" content="Pixel Icons" />
|
||||||
|
<meta property="og:url" content="https://sqkhor.com/pixel-icons/" />
|
||||||
|
<meta property="og:image" content="https://sqkhor.com/pixel-icons/cover2.png" />
|
||||||
|
<meta property="og:description" content="This is a set of over 100 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
|
||||||
|
<title>Pixel Icons</title>
|
||||||
|
<meta name="description" content="This is a set of over 100 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
|
||||||
|
<link rel="shortcut icon" href="./favicon.png" type="image/png" />
|
||||||
|
<!-- Google tag (gtag.js) -->
|
||||||
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5K34EE24W"></script>
|
||||||
|
<script>
|
||||||
|
window.dataLayer = window.dataLayer || [];
|
||||||
|
function gtag(){dataLayer.push(arguments);}
|
||||||
|
gtag('js', new Date());
|
||||||
|
|
||||||
|
gtag('config', 'G-S5K34EE24W');
|
||||||
|
</script>
|
||||||
|
<script type="module" crossorigin src="./assets/index.js"></script>
|
||||||
|
<link rel="stylesheet" href="./assets/index.css">
|
||||||
|
<style>
|
||||||
|
.preload img {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="wrapper">
|
||||||
|
<header>
|
||||||
|
<!-- <h1>Pixel Icons</h1> -->
|
||||||
|
<svg id="site-title" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 490 60"><path d="M40 30H10V10h30V0H0v60h10V40h40V10H40zM60 0h10v10H60zM60 20h10v40H60zM90 40h10v10H90zM90 20h10v10H90zM100 30h10v10h-10zM110 40h10v10h-10zM120 50h10v10h-10zM110 20h10v10h-10zM120 10h10v10h-10zM80 10h10v10H80zM80 50h10v10H80zM150 50h30v10h-30zM150 10h30v10h-30zM180 30h-30V20h-10v30h10V40h40V20h-10zM200 0h10v50h-10zM210 50h10v10h-10zM270 0h10v60h-10zM290 20h10v30h-10zM300 10h30v10h-30zM300 50h30v10h-30zM340 20h10v30h-10zM380 20h10v30h-10zM350 10h30v10h-30zM350 50h30v10h-30zM400 20h10v40h-10zM430 20h10v40h-10zM410 10h20v10h-20zM460 30h20v10h-20zM450 20h10v10h-10zM480 40h10v10h-10zM460 10h30v10h-30zM450 50h30v10h-30z"/></svg>
|
||||||
|
<div class="buttons">
|
||||||
|
<div class="pill"><a class="button" href="./download.php?icon=all" target="_blank">Download All</a></div>
|
||||||
|
<div class="pill"><a class="button" href="https://github.com/shuqikhor/PixelIcon" target="_blank">GitHub</a></div>
|
||||||
|
<div class="pill">
|
||||||
|
<button class="button" id="btn-theme">
|
||||||
|
<img class="theme-icon" src="./icons/sun.svg" alt="Light">
|
||||||
|
<img class="theme-icon" src="./icons/moon.svg" alt="Dark">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div id="introduction">
|
||||||
|
<p><?= count($files) ?> pixel-perfect icons, free to use for all your projects!</p>
|
||||||
|
<p>These pixel-art icons are all carefully crafted in 9x9 pixel grids, then saved in SVG vector format.</p>
|
||||||
|
<p>To download, please click the icons you want, or click the [Download All] button above.</p>
|
||||||
|
</div>
|
||||||
|
<div id="root">
|
||||||
|
<?php foreach ($files as $file): ?>
|
||||||
|
<div class="preload">
|
||||||
|
<a href="download.php?icon=<?= $file ?>" target="_blank">
|
||||||
|
<img src="./icons/<?= $file ?>" alt="<?= str_replace(".svg", "", $file) ?>">
|
||||||
|
<?= str_replace(".svg", "", $file) ?>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<?php endforeach ?>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p>Made by <a href="https://sqkhor.com">Shuqi Khor</a></p>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
(function () {
|
||||||
|
let light = true;
|
||||||
|
if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||||
|
//OS theme setting detected as dark
|
||||||
|
light = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.documentElement.dataset.theme = light ? 'light' : 'dark';
|
||||||
|
|
||||||
|
document.querySelector('#btn-theme').addEventListener('click', e => {
|
||||||
|
light = !light;
|
||||||
|
document.documentElement.dataset.theme = light ? 'light' : 'dark';
|
||||||
|
});
|
||||||
|
})()
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
81
src/App.css
81
src/App.css
|
|
@ -1,58 +1,73 @@
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans PX';
|
||||||
|
src: url('../fonts/OpenSansPX.ttf') format('truetype')
|
||||||
|
}
|
||||||
|
|
||||||
#root {
|
#root {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
input#search {
|
input#search {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#display-options {
|
#display-options {
|
||||||
margin-top: 18px;
|
margin-top: 18px;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
line-height: 18px;
|
line-height: 18px;
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.icon-list {
|
ul.icon-list {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin: 36px 0 0;
|
margin: 36px 0 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
/* display: grid;
|
/* display: grid;
|
||||||
grid-template-columns: repeat( auto-fit, minmax( 54px, 1fr ) ); */
|
grid-template-columns: repeat( auto-fit, minmax( 54px, 1fr ) ); */
|
||||||
gap: 18px;
|
gap: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.icon-list.show-name {
|
ul.icon-list.show-name {
|
||||||
/* grid-template-columns: repeat( auto-fit, minmax( 99px, 1fr ) ); */
|
/* grid-template-columns: repeat( auto-fit, minmax( 99px, 1fr ) ); */
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.icon-list>li {
|
ul.icon-list>li {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 54px;
|
width: 54px;
|
||||||
padding: 9px;
|
padding: 9px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.icon-list.show-name>li {
|
ul.icon-list.show-name>li {
|
||||||
padding: 9px;
|
padding: 9px;
|
||||||
width: 90px;
|
width: 99px;
|
||||||
height: 99px;
|
height: 126px;
|
||||||
/* border: 1px solid #ccc; */
|
/* border: 1px solid #ccc; */
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.icon-list img {
|
ul.icon-list img.icon {
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.icon-list .name {
|
ul.icon-list .name {
|
||||||
font-size: 9pt;
|
font-size: 20px;
|
||||||
line-height: 18px;
|
line-height: 24px;
|
||||||
margin-top: 9px;
|
margin-top: 9px;
|
||||||
|
font-family: "Open Sans PX";
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover:hover) {
|
||||||
|
ul.icon-list>li:hover img.icon {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -24,7 +24,9 @@ function App() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try ‘fruit’, ‘logo’, ‘ui’" />
|
<div className="pixel-input">
|
||||||
|
<input type='text' id='search' ref={ inputSearch } onChange={ queryOnChange } placeholder="Search an icon — try ‘fruit’, ‘logo’, ‘ui’" autoComplete='no' />
|
||||||
|
</div>
|
||||||
<div id='display-options'>
|
<div id='display-options'>
|
||||||
<input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' />
|
<input type="checkbox" name="checkShowName" ref={ checkShowName } onChange={ showNameOnChange } id='checkShowName' />
|
||||||
<label htmlFor="checkShowName">Display icon names</label>
|
<label htmlFor="checkShowName">Display icon names</label>
|
||||||
|
|
|
||||||
|
|
@ -21,12 +21,6 @@ export const IconList = function () {
|
||||||
if (tag.indexOf(keyword.toLowerCase()) != -1) return true
|
if (tag.indexOf(keyword.toLowerCase()) != -1) return true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
// const matched = iconData[filename].filter(tag => {
|
|
||||||
// for (const keyword of keywords) {
|
|
||||||
// if (tag.indexOf(keyword.toLowerCase()) != -1) return true
|
|
||||||
// }
|
|
||||||
// return false
|
|
||||||
// })
|
|
||||||
|
|
||||||
if (matched.length == keywords.length) filtered.push(filename)
|
if (matched.length == keywords.length) filtered.push(filename)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
303
src/index.css
303
src/index.css
|
|
@ -1,113 +1,274 @@
|
||||||
|
/* @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap'); */
|
||||||
|
/* @import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans&family=Silkscreen&display=swap'); */
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Silkscreen&display=swap');
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Open Sans PX';
|
||||||
|
src: url('../fonts/OpenSansPX.ttf') format('truetype')
|
||||||
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
font-size: 9px;
|
font-size: 14px;
|
||||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
font-family: 'Silkscreen', sans-serif;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
--font-color: rgba(255, 255, 255, 0.87);
|
--font-color: #ecebf7;
|
||||||
--background-color: #242424;
|
--grey-color: #a2a1b3;
|
||||||
|
--background-color: #111111;
|
||||||
|
--link-color: #99ccff;
|
||||||
|
--link-color-hover: #4236f7;
|
||||||
|
|
||||||
color-scheme: light dark;
|
color-scheme: light dark;
|
||||||
|
|
||||||
font-synthesis: none;
|
font-synthesis: none;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
-webkit-text-size-adjust: 100%;
|
-webkit-text-size-adjust: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="light"] {
|
[data-theme="light"] {
|
||||||
--font-color: #213547;
|
--font-color: #343340;
|
||||||
--background-color: #ffffff;
|
--grey-color: #6f6d80;
|
||||||
|
--background-color: #ffffff;
|
||||||
|
--link-color: #99ccff;
|
||||||
|
--link-color-hover: #4236f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
/* display: flex; */
|
/* display: flex; */
|
||||||
padding: 0;
|
padding: 0;
|
||||||
/* min-width: 320px; */
|
/* min-width: 320px; */
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
color: var(--font-color);
|
color: var(--font-color);
|
||||||
background-color: var(--background-color);
|
background-color: var(--background-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
#introduction {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--link-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover:hover) {
|
||||||
|
a:hover {
|
||||||
|
color: var(--link-color-hover);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-family: "Open Sans PX", sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"] {
|
input[type="text"] {
|
||||||
padding: 9px 18px;
|
font-family: 'Silkscreen', sans-serif;
|
||||||
color: var(--font-color);
|
padding: 9px;
|
||||||
border: 1px solid var(--font-color);
|
color: var(--font-color);
|
||||||
border-radius: 18px;
|
border: 2px solid var(--grey-color);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
background-color: var(--background-color);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"]:focus {
|
input[type="text"]:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
border-color: var(--font-color)
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-input {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 2px;
|
||||||
|
background: var(--grey-color);
|
||||||
|
clip-path: polygon(
|
||||||
|
0 4px,
|
||||||
|
2px 4px,
|
||||||
|
2px 2px,
|
||||||
|
4px 2px,
|
||||||
|
4px 0,
|
||||||
|
|
||||||
|
calc(100% - 4px) 0,
|
||||||
|
calc(100% - 4px) 2px,
|
||||||
|
calc(100% - 2px) 2px,
|
||||||
|
calc(100% - 2px) 4px,
|
||||||
|
100% 4px,
|
||||||
|
|
||||||
|
100% calc(100% - 4px),
|
||||||
|
calc(100% - 2px) calc(100% - 4px),
|
||||||
|
calc(100% - 2px) calc(100% - 2px),
|
||||||
|
calc(100% - 4px) calc(100% - 2px),
|
||||||
|
calc(100% - 4px) 100%,
|
||||||
|
|
||||||
|
4px 100%,
|
||||||
|
4px calc(100% - 2px),
|
||||||
|
2px calc(100% - 2px),
|
||||||
|
2px calc(100% - 4px),
|
||||||
|
0 calc(100% - 4px)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-input input[type="text"] {
|
||||||
|
background: var(--background-color);
|
||||||
|
border: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
clip-path: polygon(
|
||||||
|
2px 0,
|
||||||
|
calc(100% - 2px) 0,
|
||||||
|
calc(100% - 2px) 2px,
|
||||||
|
100% 2px,
|
||||||
|
100% calc(100% - 2px),
|
||||||
|
calc(100% - 2px) calc(100% - 2px),
|
||||||
|
calc(100% - 2px) 100%,
|
||||||
|
2px 100%,
|
||||||
|
2px calc(100% - 2px),
|
||||||
|
0 calc(100% - 2px),
|
||||||
|
0 2px,
|
||||||
|
2px 2px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pixel-input:focus-within {
|
||||||
|
background-color: var(--font-color)
|
||||||
}
|
}
|
||||||
|
|
||||||
#wrapper {
|
#wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 1280px;
|
max-width: 1280px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 2rem;
|
padding: 2rem;
|
||||||
font-size: 9pt;
|
font-size: 13.5px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 18px;
|
gap: 18px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin: 36px 0 54px;
|
margin: 36px 0 54px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
margin-top: 36px;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
header .buttons {
|
header .buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 18px;
|
gap: 18px;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#site-title {
|
#site-title {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
width: auto;
|
width: auto;
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3.2em;
|
font-size: 3.2em;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.pill,
|
|
||||||
button.pill {
|
|
||||||
font-size: 1em;
|
a.button,
|
||||||
line-height: 1.5em;
|
button.button {
|
||||||
padding: 4px 9px;
|
display: inline-block;
|
||||||
border-radius: 27px;
|
font-size: 1em;
|
||||||
border: 1px solid var(--font-color);
|
line-height: 1.5em;
|
||||||
color: var(--font-color);
|
padding: 4px 9px;
|
||||||
background-color: var(--background-color);
|
border: 2px solid var(--grey-color);
|
||||||
/* background: #ffffff; */
|
color: var(--font-color);
|
||||||
/* color: #213547; */
|
background-color: var(--background-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pill {
|
||||||
|
display: inline-block;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 2px;
|
||||||
|
background: var(--grey-color);
|
||||||
|
clip-path: polygon(
|
||||||
|
0 4px,
|
||||||
|
2px 4px,
|
||||||
|
2px 2px,
|
||||||
|
4px 2px,
|
||||||
|
4px 0,
|
||||||
|
|
||||||
|
calc(100% - 4px) 0,
|
||||||
|
calc(100% - 4px) 2px,
|
||||||
|
calc(100% - 2px) 2px,
|
||||||
|
calc(100% - 2px) 4px,
|
||||||
|
100% 4px,
|
||||||
|
|
||||||
|
100% calc(100% - 4px),
|
||||||
|
calc(100% - 2px) calc(100% - 4px),
|
||||||
|
calc(100% - 2px) calc(100% - 2px),
|
||||||
|
calc(100% - 4px) calc(100% - 2px),
|
||||||
|
calc(100% - 4px) 100%,
|
||||||
|
|
||||||
|
4px 100%,
|
||||||
|
4px calc(100% - 2px),
|
||||||
|
2px calc(100% - 2px),
|
||||||
|
2px calc(100% - 4px),
|
||||||
|
0 calc(100% - 4px)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pill a.button,
|
||||||
|
.pill button.button {
|
||||||
|
background: var(--background-color);
|
||||||
|
border: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
clip-path: polygon(
|
||||||
|
2px 0,
|
||||||
|
calc(100% - 2px) 0,
|
||||||
|
calc(100% - 2px) 2px,
|
||||||
|
100% 2px,
|
||||||
|
100% calc(100% - 2px),
|
||||||
|
calc(100% - 2px) calc(100% - 2px),
|
||||||
|
calc(100% - 2px) 100%,
|
||||||
|
2px 100%,
|
||||||
|
2px calc(100% - 2px),
|
||||||
|
0 calc(100% - 2px),
|
||||||
|
0 2px,
|
||||||
|
2px 2px
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
a.button:hover,
|
||||||
|
button.button:hover {
|
||||||
|
border-color: var(--font-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pill:hover,
|
||||||
|
.pill:hover {
|
||||||
|
background-color: var(--font-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
img.theme-icon {
|
img.theme-icon {
|
||||||
width: 1em;
|
width: 1em;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ms-auto {
|
.ms-auto {
|
||||||
margin-left: auto
|
margin-left: auto
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue