devol
/
condividi-link-fediverso-firefox
mirror of https://gitlab.com/mickie1/share-freedom-extension
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix CSS style in options page.

This commit is contained in:
mickie 2022-01-14 02:08:47 -06:00
parent e051e00899
commit 45dc01349d
3 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/css/styles.css
View File

@ -42,17 +42,26 @@
/* options */
.title-options {
@apply text-4xl text-center px-2 py-4 text-white;
}
.form-options {
@apply flex mb-4 gap-5;
}
.body-options {
@apply bg-fixed px-2 py-3 bg-gray-400;
}
.span-custom {
@apply text-xl text-blue-700 border border-2 font-bold rounded-l px-4 py-2 bg-white;
@apply text-xl text-green-300 border-2 font-bold rounded-l px-4 py-2 m-1 w-1/2 bg-gray-800 border-transparent;
}
.text-custom {
@apply border px-4 py-2 w-full;
@apply border px-4 py-2 m-1 ml-0 w-full border-2 border-transparent bg-gray-600 text-white;
}
.checkbox-custom {
@apply m-3;
}
.btn-save {
@apply bg-blue-500 text-xl hover:bg-pink-500 active:bg-pink-700 text-white font-bold py-2 px-4 rounded-full w-44 text-center;
@apply bg-green-500 text-xl hover:bg-green-700 active:bg-blue-700 text-white font-bold py-2 px-4 m-1 rounded w-48 text-center;
}
@tailwind utilities;

11
public/options.html
View File

@ -8,11 +8,12 @@
<link href="css/main.css" rel="stylesheet">
</head>
<body class="bg-fixed px-2 py-3 bg-gradient-to-r from-blue-900 via-blue-600 to-blue-400">
<div class="text-5xl px-2 py-4 text-blue-100">Set your instance(s)</div>
<form class="grid gap-5">
<div class="root" id="root"></div>
<button class="btn-save" type="submit">Save changes</button>
<body class="body-options">
<div class="title-options">Set your instance(s)</div>
<form class="flex mb-4 gap-5">
<div class="w-full p-6">
<div class="root" id="root"></div>
</div>
</form>
<script src="options.js"></script>
</body>

3
src/lib/options.ts
View File

@ -18,6 +18,9 @@ items.forEach((value) => {
containerItems.insertAdjacentHTML('beforeend', html);
});
const saveButton = `<button class="btn-save" type="submit">Save changes</button>`;
containerItems.insertAdjacentHTML('beforeend', saveButton);
function saveOptions() {
items.forEach(saveItems);
}