lauchmelder/FuriKani
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

finished popup styling

Browse source
This commit is contained in:
Lauchmelder 2022-03-20 17:40:08 +01:00
parent 1f5452b98a
commit 3b02d6a4b2
No known key found for this signature in database
GPG key ID: C2403C69D78F011D
3 changed files with 42 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
manifest.json
View file

@ -1,7 +1,7 @@
{ {
"name": "FuriKani", "name": "FuriKani",
"description": "Removes furigana on websites based on your WaniKani level", "description": "Removes furigana on websites based on your WaniKani level",
"version": "0.5.1", "version": "0.6",
"manifest_version": 3, "manifest_version": 3,
"action": { "action": {
"default_popup": "popup.html" "default_popup": "popup.html"

7
popup.html
View file

@ -6,7 +6,7 @@
<body> <body>
<header> <header>
<h1>FuriKani</h1> <h1>FuriKani</h1>
<h2>v0.5.1</h2> <h2>v0.6</h2>
</header> </header>
<div id="token-area"> <div id="token-area">
@ -51,7 +51,10 @@
</div> </div>
<footer> <footer>
Using WaniKani Level <span id="level"></span> <span id="level-text">Using WaniKani Level <span id="level"></span></span>
<span id="author" >Made by <a target="_blank" href="https://github.com/Lauchmelder23">Lauchmelder</a></span>
<a id="source" target="_blank" href="https://github.com/Lauchmelder23/FuriKani">Source Code</a>
</footer> </footer>
<script src="src/popup.js"></script> <script src="src/popup.js"></script>

43
src/styles.css
View file

@ -4,14 +4,17 @@
padding: 0px; padding: 0px;
box-sizing: border-box; box-sizing: border-box;
border-radius: 0px; border-radius: 0px;
color: #ECB365
} }
body body
{ {
border: 5px solid #04293A;
background-color: #041C32;
display: grid; display: grid;
grid-template-rows: 1.5fr 1fr 3fr 2fr; grid-template-rows: 1.5fr 0.5fr 2.5fr 1fr;
width: 250px; width: 275px;
margin: 0.5rem; padding: 0.5rem;
} }
header header
@ -19,6 +22,8 @@ header
display: grid; display: grid;
grid-template-columns: 8fr 1fr; grid-template-columns: 8fr 1fr;
align-items: baseline; align-items: baseline;
border-bottom: 1px solid #064663;
margin-bottom: 0.5rem;
} }
h1 h1
@ -36,6 +41,7 @@ h2
{ {
display: grid; display: grid;
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
margin-bottom: -10px;
} }
#input-area #input-area
@ -50,25 +56,34 @@ h2
} }
#token #token
{
border: none;
background-color: #064663;
color: #ECB365;
}
#token::placeholder
{ {
border-width: 1px; border-width: 1px;
background-color: #064663;
color: #8d7553;
} }
#submit-token #submit-token
{ {
border-width: 1px; border: none;
background-color: white; background-color: #064663;
font-size: 1rem; font-size: 1rem;
} }
#submit-token:hover #submit-token:hover
{ {
background-color: grey; background-color: #04293A;
} }
#submit-token:host() #submit-token:host()
{ {
background-color: rgb(85, 85, 85); background-color: #041C32;
} }
#settings-area #settings-area
@ -90,6 +105,20 @@ h2
align-items: center; align-items: center;
} }
footer
{
border-top: 1px solid #064663;
display: grid;
grid-template-rows: repeat(3, 1fr);
justify-items: right;
}
a, a:visited
{
text-decoration: none;
color: #2e94c3;
}
/* The switch - the box around the slider */ /* The switch - the box around the slider */
.switch { .switch {
position: relative; position: relative;