use css vars; misc style changes
This commit is contained in:
np.w
+84
-28
@@ -1,15 +1,22 @@
|
||||
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
|
||||
|
||||
|
||||
:root {
|
||||
--black_light: #9aa0a6;
|
||||
--black_dark: #212121;
|
||||
--white_light:#fafafa;
|
||||
--white_darker: #e0e0e0;
|
||||
}
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #FAFAFA;
|
||||
color: #212121;
|
||||
background-color: var(--white_light);
|
||||
color: var(--black_dark)
|
||||
}
|
||||
.body-container {
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
form > fieldset > label {
|
||||
display: flex;
|
||||
}
|
||||
@@ -23,8 +30,42 @@ h1, h2, h3, h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.filter-container {
|
||||
margin: 1rem 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 344px;
|
||||
height: 44px;
|
||||
background-color: white;
|
||||
font-size: 1rem;
|
||||
border-radius: 2rem;
|
||||
border: 1px solid #dfe1e5;
|
||||
}
|
||||
.filter-container > span.icon {
|
||||
font-size: 1rem;
|
||||
margin: 0 0.75rem 0 1rem;
|
||||
color: var(--black_light);
|
||||
}
|
||||
.filter-container > span.icon.clear {
|
||||
margin-left: auto;
|
||||
}
|
||||
.filter-container > span.icon.clear:hover {
|
||||
cursor: pointer;
|
||||
color: var(--black_dark);
|
||||
}
|
||||
.filter {
|
||||
width: 100%;
|
||||
font-weight: lighter;
|
||||
border: none;
|
||||
height: 100%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.filter:focus {
|
||||
outline: none;
|
||||
}
|
||||
.filter::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
button:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -32,16 +73,13 @@ button:hover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
}
|
||||
.box-title-container {
|
||||
|
||||
}
|
||||
.box-menu-container {
|
||||
margin-right: 1em;
|
||||
margin-left: auto;
|
||||
}
|
||||
.box-title {
|
||||
font-size: 1.25rem;
|
||||
font-size: 1rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
.box-subtitle {
|
||||
@@ -53,7 +91,7 @@ button:hover {
|
||||
ul.list-box {
|
||||
padding: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
margin: 0;
|
||||
gap: 1em;
|
||||
}
|
||||
@@ -61,13 +99,13 @@ ul.list-box {
|
||||
li.box {
|
||||
position: relative;
|
||||
height: min-content;
|
||||
width: 344px;
|
||||
width: auto;
|
||||
padding: 16px 0;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #e0e0e0;
|
||||
border-color: var(--white_darker);
|
||||
box-shadow:
|
||||
0px 0px 0px 0px rgba(0, 0, 0, 0.2),
|
||||
0px 0px 0px 0px rgba(0, 0, 0, 0.14),
|
||||
@@ -91,7 +129,7 @@ li.box {
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #e0e0e0;
|
||||
border-color: var(--white_darker);
|
||||
box-shadow:
|
||||
0px 0px 0px 0px rgba(0, 0, 0, 0.2),
|
||||
0px 0px 0px 0px rgba(0, 0, 0, 0.14),
|
||||
@@ -105,16 +143,11 @@ li.box {
|
||||
|
||||
.item-menu-action:hover {
|
||||
cursor: pointer;
|
||||
background-color: #F2F2F2;
|
||||
background-color: var(--white_light);
|
||||
}
|
||||
.item-menu-action > .icon {
|
||||
margin: 1rem 1rem;
|
||||
}
|
||||
.item-menu-action > .label {
|
||||
}
|
||||
|
||||
|
||||
|
||||
.list-box-item {
|
||||
padding: 0;
|
||||
margin: 1rem 0;
|
||||
@@ -136,17 +169,17 @@ li.item {
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 0.75rem 0.75rem 0.75rem 1.25rem;
|
||||
padding: 0.5rem 0.75rem 0.5rem 1.25rem;
|
||||
list-style: none;
|
||||
}
|
||||
li.item:hover {
|
||||
background-color:#F2F2F2;
|
||||
background-color: var(--white_light)
|
||||
}
|
||||
.head-divider {
|
||||
margin: 16px;
|
||||
width: auto;
|
||||
height: 1px;
|
||||
background-color: #e0e0e0;
|
||||
background-color: var(--white_darker);
|
||||
}
|
||||
.menu-more-container {
|
||||
z-index: 1;
|
||||
@@ -158,7 +191,7 @@ li.item:hover {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
.add {
|
||||
background-color: #f2f2f2;
|
||||
background-color: var(--white_light);
|
||||
padding: 0.75rem;
|
||||
margin-right: 0;
|
||||
margin-left: auto;
|
||||
@@ -167,7 +200,7 @@ li.item:hover {
|
||||
}
|
||||
.add:hover {
|
||||
cursor: pointer;
|
||||
background-color: #e0e0e0;
|
||||
background-color: var(--white_darker);
|
||||
}
|
||||
.menu-more {
|
||||
display: flex;
|
||||
@@ -179,7 +212,7 @@ li.item:hover {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.menu-more:hover {
|
||||
background-color: #e0e0e0;
|
||||
background-color: var(--white_darker);
|
||||
}
|
||||
.menu-more.box {
|
||||
font-size: 1.25rem;
|
||||
@@ -198,7 +231,7 @@ li.item:hover {
|
||||
border-radius: 4px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #e0e0e0;
|
||||
border-color: var(--white_darker);
|
||||
box-shadow:
|
||||
0px 0px 0px 0px rgba(0, 0, 0, 0.2),
|
||||
0px 0px 0px 0px rgba(0, 0, 0, 0.14),
|
||||
@@ -224,8 +257,31 @@ li.item:hover {
|
||||
}
|
||||
.menu-action:hover {
|
||||
cursor: pointer;
|
||||
background-color: #F2F2F2;
|
||||
background-color: var(--white_darker);
|
||||
}
|
||||
.menu-action > .icon {
|
||||
margin: 1rem 1rem;
|
||||
}
|
||||
button.button {
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
font-size: .875rem;
|
||||
text-transform: uppercase;
|
||||
padding: 0.75rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 64px;
|
||||
background-color: var(--white_light);
|
||||
border: 1px solid var(--black_light);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button.button:hover {
|
||||
background-color: var(--white_darker);
|
||||
}
|
||||
|
||||
.header-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
Reference in New Issue
Block a user