Cleanup style

This commit is contained in:
Ximi1970
2020-01-05 13:50:38 +01:00
parent 34d776b29f
commit 1b77e5aa93
4 changed files with 49 additions and 40 deletions

6
README.references Normal file
View File

@@ -0,0 +1,6 @@
Arguments for <script>
https://stackoverflow.com/questions/5292372/how-to-pass-parameters-to-a-script-tag
Loading css using <script>
https://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript

38
webext/css/options.css Normal file
View File

@@ -0,0 +1,38 @@
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

4
webext/js/styles.js Normal file
View File

@@ -0,0 +1,4 @@
var stylesheet = document.currentScript.getAttribute('stylesheet');
document.getElementsByTagName("head")[0].insertAdjacentHTML(
"beforeend",
`<link rel=\"stylesheet\" href=${stylesheet} />`);

View File

@@ -3,49 +3,10 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial;}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<script src="js/styles.js" stylesheet="css/options.css"></script>
<script src='js/i18n.js'></script>
<div class="tab">