:root {
--text-color: #333333;
--main-color: #F7F7F7;
--hover-color: #E6E6E6;
--href-color: #0d61af;
--refresh-icon: url('data:image/svg+xml;charset=utf-8,');
--sort-asc-icon: url('data:image/svg+xml;charset=utf-8,');
--sort-desc-icon: url('data:image/svg+xml;charset=utf-8,');
--collapse-icon: url('data:image/svg+xml;charset=utf-8,');
--add-icon2: url('data:image/svg+xml;charset=utf-8,');
--add-icon: url('data:image/svg+xml;charset=utf-8,');
--trash-icon: url('data:image/svg+xml;charset=utf-8,');
--download-icon: url('data:image/svg+xml;charset=utf-8, ');
--arrow-icon: url('data:image/svg+xml;charset=utf-8, ');
--list-icon: url('data:image/svg+xml;charset=utf-8, ');
--multi-add-icon: url('data:image/svg+xml;charset=utf-8, ');
--notification-icon: url('data:image/svg+xml;charset=utf-8, ');
--auth-icon: url('data:image/svg+xml;charset=utf-8, ');
}
body {
font-family: PT Sans, sans-serif;
color: var(--text-color);
margin: 0;
display: flex;
flex-direction: column;
position: static !important;
height: 100%;
width: 100%;
}
nav {
display: flex;
position: sticky;
top: 0;
background-color: rgba(255, 255, 255, 0.95);
padding-bottom: 8px;
align-items: center;
z-index: 999;
-webkit-user-select: none;
user-select: none;
}
button > * {
vertical-align: middle;
font-weight: 700;
color: var(--text-color);
}
label > * {
vertical-align: middle;
color: var(--text-color);
}
button,
nav>button,
nav label {
padding: 5px;
border: solid 1px var(--hover-color);
border-radius: 8px;
cursor: pointer;
background-color: var(--main-color);
color: var(--text-color);
max-height: 36px;
margin-right: 8px;
}
nav label {
box-sizing: border-box;
}
span>label {
display: inherit;
}
button:hover,
nav>button:hover,
nav label:hover,
nav>button>a:hover {
background-color: var(--hover-color);
}
nav label>input {
height: 14px;
width: 14px;
margin: 5px;
vertical-align: middle;
}
nav label span {
padding: 0 3px;
vertical-align: middle;
}
.icon {
height: 24px;
width: 24px;
min-width: 24px;
color: var(--text-color);
display: inline-block;
}
.icon::after {
background-color: currentColor;
content: "";
display: inline-block;
height: 100%;
width: 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
.auth_user{
-webkit-mask-image: var(--auth-icon);
mask-image: var(--auth-icon);
}
.icon.notification-icon::after {
-webkit-mask-image: var(--notification-icon);
mask-image: var(--notification-icon);
}
nav>button>.icon.refresh-icon::after {
-webkit-mask-image: var(--refresh-icon);
mask-image: var(--refresh-icon);
}
nav .icon.add-icon::after {
-webkit-mask-image: var(--add-icon);
mask-image: var(--add-icon);
}
nav>button>.icon.multi-add-icon::after {
-webkit-mask-image: var(--multi-add-icon);
mask-image: var(--multi-add-icon);
}
nav>button>.icon.download-icon::after {
-webkit-mask-image: var(--download-icon);
mask-image: var(--download-icon);
}
nav>button>.icon.trash-icon::after {
-webkit-mask-image: var(--trash-icon);
mask-image: var(--trash-icon);
}
nav>button>.icon.list-icon::after {
-webkit-mask-image: var(--list-icon);
mask-image: var(--list-icon);
}
nav>button>.icon.sort-icon::after {
-webkit-mask-image: var(--sort-asc-icon);
mask-image: var(--sort-asc-icon);
}
nav>button.desc>.icon.sort-icon::after {
-webkit-mask-image: var(--sort-desc-icon);
mask-image: var(--sort-desc-icon);
}
main {
flex: 1;
display: flex;
flex-direction: column;
-webkit-user-select: none;
user-select: none;
}