aaron/cuckoo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change colours. Move style to popup.css

Browse source
This commit is contained in:
Aaron Yarborough 2020-04-01 18:21:01 +01:00
parent 461f63e696
commit baf35ceceb
2 changed files with 71 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
popup.css Normal file
View file

@ -0,0 +1,46 @@
h1 {
font-size: 18px;
color: #AAB8C2;
margin-bottom: 15px;
margin: 0;
padding: 0;
}
body {
padding: 0;
margin: 0;
}
#popup {
min-width: 200px;
}
label, #savedChanges span {
font-size: 14px;
}
.row {
margin-top: 10px;
}
#bottomRow {
margin-top: 25px !important;
}
#saveButton {
width: 100%;
font-size: 14px;
background-color: #1DA1F2;
border-radius: 5px;
border: none;
color: #fff;
padding: 10px 5px;
}
#banner {
background-color: #14171A;
padding: 10px 10px;
}
.container {
padding: 10px;
}

83
popup.html
View file

@ -3,70 +3,37 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <link rel="stylesheet" href="popup.css" />
h1 {
font-size: 21px;
color: #292f33;
margin-bottom: 15px;
}
#popup {
min-width: 200px;
}
label, #savedChanges span {
font-size: 14px;
}
#popup > div {
margin-top: 10px;
}
.row {
margin-top: 10px;
}
#bottomRow {
margin-top: 25px !important;
}
#saveButton {
width: 100%;
font-size: 14px;
background-color: #55acee;
border-radius: 5px;
border: none;
color: #fff;
padding: 10px 5px;
}
</style>
</head> </head>
<body> <body>
<div id="popup"> <div id="popup">
<h1>Preferences</h1> <div id="banner">
<h1>Preferences</h1>
<div class="row">
<label for="hidelikes">Hide likes?</label>
<input type="checkbox" name="hidelikes" id="hideLikes">
</div>
<div class="row">
<label for="hidereplies">Hide replies?</label>
<input type="checkbox" name="hidereplies" id="hideReplies">
</div> </div>
<div class="row"> <div class="container">
<label for="hideretweets">Hide re-tweets?</label> <div>
<input type="checkbox" name="hideretweets" id="hideRetweets"> <label for="hidelikes">Hide likes?</label>
</div> <input type="checkbox" name="hidelikes" id="hideLikes">
</div>
<div class="row" id="savedChanges" style="display: none">
<span style="color: green">Your changes have been saved. You must refresh your page before they take effect.</span>
</div>
<div class="row"> <div class="row">
<button type="button" id="saveButton">Save changes</button> <label for="hidereplies">Hide replies?</label>
<input type="checkbox" name="hidereplies" id="hideReplies">
</div>
<div class="row">
<label for="hideretweets">Hide re-tweets?</label>
<input type="checkbox" name="hideretweets" id="hideRetweets">
</div>
<div class="row" id="savedChanges" style="display: none">
<span style="color: green">Your changes have been saved. You must refresh your page before they take effect.</span>
</div>
<div class="row">
<button type="button" id="saveButton">Save changes</button>
</div>
</div> </div>
</div> </div>
<script src="popup.js"></script> <script src="popup.js"></script>