fix padding on buttons and replaced icons

This commit is contained in:
2021-09-05 16:24:27 -04:00
parent 1137fee0d7
commit cca9f4d811
3 changed files with 72 additions and 16 deletions
+1 -1
View File
@@ -1 +1 @@
globalStyles.css globalStyle.css
+2 -2
View File
@@ -2,8 +2,8 @@
"manifest_version": 3, "manifest_version": 3,
"name": "ServiceHub Plus", "name": "ServiceHub Plus",
"version": "0.1.1", "version": "0.1.2",
"description": "Improvements for TRG Service Hub techs", "description": "Improvements to Service Hub for TRG techs",
"content_scripts": [ "content_scripts": [
{ {
+69 -13
View File
@@ -1,23 +1,46 @@
/* /*
Dark Gray: #544343
Light Gray: #999799 TODO float buttons on bottom of RO
Blue: #086788 TODO float location entry on RO (sidebar?)
Green: #9FCC2E TODO style individual buttons
TODO options page
- move parts list buttons top or bottom
- color themes?
BUG close button on photo pages is styled along with the btnCancel
HACK display tiny images next to parts list?
TODO shrink navbar/header/location on scroll
TODO fancy button animations
*/ */
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
:root {
--white: #f4f4f9;
--darkgray: #696969;
--lightgray: #857f74;
--darkblue: #0f2137;
--lightblue: #0ebbfe;
--green: #c1d830;
--darkgreen: #103900;
--black: #000;
}
/* Buttons */
input[type="button"] { input[type="button"] {
background-color: #696969; font-family: Roboto, sans-serif;
color: white; background-color: var(--darkgray);
border-radius: 3px; color: var(--white);
padding: 1.5px 5px; border-radius: 5px;
padding: 0.55em 1.25em;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
border: none; border: none;
transition: background-color 250ms ease-in-out; transition: all 250ms ease-in;
} }
input[type="button"]:hover { input[type="button"]:hover {
background-color: #999799; background-color: var(--lightgray);
} }
input[type="button"]:disabled { input[type="button"]:disabled {
@@ -26,14 +49,47 @@ input[type="button"]:disabled {
input[name="btnCancel"] + input[name="btnSave"] { input[name="btnCancel"] + input[name="btnSave"] {
position: fixed; position: fixed;
top: 20px; bottom: 20px;
right: 20px; right: 20px;
} }
input[name="btnCancel"] { input[name="btnCancel"] {
background-color: lightcoral; background-color: lightcoral;
color: white; color: var(--white);
position: fixed; position: fixed;
top: 20px; bottom: 20px;
right: 80px; right: 80px;
} }
input[id="btnSubmitForApproval"]:hover {
background-color: var(--darkblue);
color: var(--lightblue);
}
input[value="Mark Complete"]:hover {
background-color: var(--green);
color: var(--darkgray);
font-weight: bolder;
}
input[name="btnParts"] {
margin: 0;
padding: 0 1em;
}
input[name="btnExpandRepairHistory"] {
padding: 0.25em 0;
/* margin: 0; */
}
input[name="btnRepairCodes"] {
padding: 0.5em 0;
}
img[id="Img1"],
img[id="Img2"] {
position: absolute;
content: url("https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/Plus_symbol.svg/500px-Plus_symbol.svg.png");
width: 20px;
height: 20px;
}