Simon
3 years ago
1 changed files with 23 additions and 11 deletions
Unified View
Diff Options
-
+23 -11all/index.html
+ 23
- 11
all/index.html
View File
| @@ -3,6 +3,8 @@ | |||||
| <meta name="google" content="notranslate" /> | <meta name="google" content="notranslate" /> | ||||
| <title>Azure Icon Collection</title> | <title>Azure Icon Collection</title> | ||||
| <link rel="icon" type="image/png" href="favicon.png"> | <link rel="icon" type="image/png" href="favicon.png"> | ||||
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous"> | |||||
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script> | |||||
| <style> | <style> | ||||
| body { | body { | ||||
| font-family: 'Segoe UI', Arial; | font-family: 'Segoe UI', Arial; | ||||
| @@ -31,15 +33,20 @@ | |||||
| text-align: center; | text-align: center; | ||||
| width: 12rem; | width: 12rem; | ||||
| height: 12rem; | height: 12rem; | ||||
| background-color: #e0e0e0; | |||||
| font-family: Arial, Helvetica, sans-serif; | |||||
| background-color: #333; | |||||
| font-family: 'Segoe UI', Arial; | |||||
| color: white; | |||||
| } | } | ||||
| h1 { | h1 { | ||||
| font-size: 1.8rem; | font-size: 1.8rem; | ||||
| margin-left: 20px; | |||||
| } | } | ||||
| .find, .find input { | .find, .find input { | ||||
| font-size: 1.1rem; | font-size: 1.1rem; | ||||
| margin-top: 10px; | |||||
| margin-bottom: 10px; | margin-bottom: 10px; | ||||
| margin-left: 20px; | |||||
| width: 300px; | |||||
| } | } | ||||
| .top { | .top { | ||||
| position: -webkit-sticky; | position: -webkit-sticky; | ||||
| @@ -53,20 +60,21 @@ | |||||
| .top button { | .top button { | ||||
| float: right; | float: right; | ||||
| position: absolute; | position: absolute; | ||||
| top: 0.2rem; | |||||
| right: 0.2rem; | |||||
| top: 0.5rem; | |||||
| right: 0.5rem; | |||||
| font-size: 1rem; | font-size: 1rem; | ||||
| border-radius: 4px; | border-radius: 4px; | ||||
| } | } | ||||
| .pngbox { | .pngbox { | ||||
| position: absolute; | position: absolute; | ||||
| top: 2rem; | |||||
| right: 1rem; | |||||
| top: 4rem; | |||||
| right: 1.3rem; | |||||
| font-size: 0.9rem; | font-size: 0.9rem; | ||||
| } | } | ||||
| input[type="checkbox"] { | input[type="checkbox"] { | ||||
| width: 1.6em; | width: 1.6em; | ||||
| height: 1.6em; | height: 1.6em; | ||||
| margin-top: 0px; | |||||
| } | } | ||||
| .label { | .label { | ||||
| height: 2.5em; | height: 2.5em; | ||||
| @@ -88,17 +96,21 @@ | |||||
| text-decoration: none; | text-decoration: none; | ||||
| color:rgb(99, 99, 99); | color:rgb(99, 99, 99); | ||||
| } | } | ||||
| p { | |||||
| margin-left: 20px; | |||||
| float: left; | |||||
| } | |||||
| </style> | </style> | ||||
| </head> | </head> | ||||
| <body> | <body> | ||||
| <div class="top"> | <div class="top"> | ||||
| <h1>Azure Icon Collection</h1><br> | |||||
| <br/> | |||||
| <span class="find">Finder: <input onkeyup="search()" id="finder"> Icons: <span id="count">...</span></span><br> | |||||
| <div class="pngbox"><input type="checkbox" id="pngcheck"><label for="pngcheck">Download as PNG</label></div> | |||||
| <button onclick="toggleBg()">Toggle Background</button> | |||||
| <h1>Azure Icon Collection</h1> | |||||
| <span class="find"><input onkeyup="search()" id="finder" class="form-control" placeholder="Find"><p>Icons: </p><span id="count">...</span></span><br> | |||||
| <button onclick="toggleBg()" type="button" class="btn btn-primary">Toggle Background</button><br> | |||||
| <div class="pngbox"><input type="checkbox" id="pngcheck" class="form-check-input"><label class="form-check-label" for="pngcheck" style="margin-left: 5px;">Download as PNG</label></div> | |||||
| </div> | </div> | ||||
| <div class="grid"> | <div class="grid"> | ||||