Skip to content
Snippets Groups Projects
Commit 7edd59c7 authored by Malin Haugland Høli's avatar Malin Haugland Høli
Browse files

style: :lipstick: Update base and main css with new style

parent a6a69a94
No related branches found
No related tags found
3 merge requests!66Final merge,!50fix(styling):,!4Pipeline fix
......@@ -22,7 +22,10 @@
--color-button: var(--green);
--color-button-disabled: var(--grey);
--color-nav-hover: var(--light-grey);
--color-button-edit: var(--grey);
--color-button-hover: var(--light-green);
--color-button-danger: var(--accent3);
--color-button-danger-hover: var(--accent1);
--color-link: var(--accent3);
--color-border: var(--black);
......@@ -30,10 +33,14 @@
--section-gap: 160px;
}
@media (prefers-color-scheme: dark) {
:root {
/* TODO: add dark mode colors */
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield; /* Firefox */
}
*,
......
......@@ -34,25 +34,52 @@ h3 {
margin-bottom: 1rem;
}
button {
background-color: var(--color-button);
button.primary {
background-color: transparent;
border-color: var(--color-button);
color: var(--color-text);
border-color: transparent;
padding: 0.2rem 1rem;
font-weight: bold;
border-radius: 1rem;
border-width: 2px;
cursor: pointer;
transition: 0.4s;
}
button:disabled {
button.primary:disabled {
background-color: var(--color-button-disabled);
border-color: var(--color-button-disabled);
cursor: not-allowed;
}
button:hover {
background-color: var(--color-button-hover);
button.primary:hover {
border-color: var(--color-button-hover);
transition: 0.7s;
}
button.secondary {
border-color: var(--color-button-edit);
}
button.secondary:hover {
border-color: black;
transition: 0.7s;
}
button.danger {
background-color: var(--color-button-danger);
border-color: transparent;
}
button.danger:hover {
background-color: var(--color-button-danger-hover);
border-color: var(--color-button-danger);
transition: 0.7s;
}
button.logout {
background-color: var(--color-button);
}
a {
text-decoration: none;
color: var(--color-text);
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment