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 */ /* 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 { .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 { .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 { .checkbox-custom {
@apply m-3; @apply m-3;
} }
.btn-save { .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; @tailwind utilities;

11
public/options.html
View File

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

3
src/lib/options.ts
View File

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