github.com/shoshinnikita/budget-manager@v0.7.1-0.20220131195411-8c46ff1c6778/static/css/common.css

/* | Variables */

:root {
	--base-color: #ffffff;
	--background-color: #ffffff;

	--font-color: #212121;
	--font-color--disabled: #21212140;
	--font-color--faded: #999999;

	--border-color: #f4f4f4;
	--border-color--accent: #d2d2d2;

	--hover-color: #fafafa;

	--icon-color: #888888;
	--icon-color--hover: #666666;

	--scrollbar-track-color: var(--background-color);
	--scrollbar-thumb-color: #e1e1e1;
}

[data-theme="dark"] {
	--base-color: #0d1117;
	--background-color: #10141a; /* Base Color + rgba(255, 255, 255, 0.01) */

	--font-color: #ffffffa0;
	--font-color--disabled: #ffffff40;
	--font-color--faded: #666666;

	--border-color: #242424;
	--border-color--accent: #555555;

	--hover-color: #161a20; /* Base Color + rgba(255, 255, 255, 0.04) */

	--icon-color--hover: #aaaaaa;

	--scrollbar-thumb-color: #414141;
}

/* | Common */

* {
	box-sizing: border-box;
	color: var(--font-color);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-weight: normal;
}

/* | Layout

All pages should stick to this layout:

  body
    #app
      #header
      #content
      #footer

*/

body {
	background-color: var(--base-color);
	height: 100vh;
	margin: 0;
	padding: 0px;
	width: 100vw;
}

#app {
	display: grid;
	grid-template-rows: 40px calc(100% - 70px - 20px) 30px;
	height: 100%;
	margin: auto;
	max-width: 2000px;
	min-width: 900px;
	padding: 10px 20px;
	row-gap: 10px;
	width: 100%;
}

#header {
	border-bottom: 1px solid var(--border-color--accent);
	box-sizing: content-box;
	font-size: 20px;
	height: 35px;
	line-height: 35px;
	padding-bottom: 5px;
	width: 100%;
}

.header__path__element::after {
	content: ' /';
}

.header__path__element:last-child::after {
	content: '';
}

@media (max-width: 1350px) {
	#app {
		padding: 0 10px;
	}

	#header {
		font-size: 18px;
	}
}

/* | Card */

.card {
	background-color: var(--background-color);
	box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
}

[data-theme="dark"] .card {
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
}

.card__title {
	background-color: var(--background-color);
	border-bottom: 1px solid var(--border-color--accent);
	font-size: 1.3rem;
	padding: 5px 10px;
	position: sticky;
	top: 0;
	z-index: 1;
}

.card__body {
	padding: 10px 5px 20px;
}

.card--hover {
	transition-duration: 0.175s;
	transition-property: padding-left;
	transition-timing-function: ease-in-out;
}

.card--hover:focus,
.card--hover:hover {
	background-color: var(--hover-color);
	padding-left: 7%;
}

a:link.card--hover:focus,
a:link.card--hover:hover {
	text-decoration: none;
}

/* | Icons */

.feather-icon > svg {
	fill: none;
	height: 18px;
	stroke: var(--icon-color);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2;
	width: 18px;
}

a.feather-icon,
button.feather-icon {
	display: block;
	padding: 3px;
	background-color: #00000000;
}

a.feather-icon:not(.disabled),
button.feather-icon:not(.disabled) {
	cursor: pointer;
}

a.feather-icon > svg,
button.feather-icon > svg {
	opacity: 0.64;
}

a.feather-icon:hover:not(.disabled) > svg,
button.feather-icon:hover:not(.disabled) > svg,
a.feather-icon:focus:not(.disabled) > svg,
button.feather-icon:focus:not(.disabled) > svg {
	opacity: 1;
	stroke: var(--icon-color--hover);
}

/* | Inputs */

a:focus,
input:not([type="checkbox"]):focus,
select:focus,
textarea:focus,
button:focus {
	outline: none;
}

button {
	background-color: var(--background-color);
	border: none;
	padding: 0;
}

input {
	background-color: var(--background-color);
	font-size: 15px;
}

input[type="text"],
input[type="date"] {
	border: none;
	border-bottom: 1px solid var(--border-color);
	width: 100%;
}

input[type="text"]:focus,
input[type="date"]:focus {
	border-color: var(--border-color--accent);
}

input[type="button"],
input[type="submit"] {
	border: 1px solid var(--border-color--accent);
	cursor: pointer;
	padding: 3px;
	width: 80px;
}

input[type="button"]:hover,
input[type="submit"]:hover,
input[type="button"]:focus,
input[type="submit"]:focus {
	background-color: var(--hover-color);
}

select {
	appearance: none;
	-moz-appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23212121' stroke-width='2' stroke-linecap='round'><polyline points='19 12 12 19 5 12'></polyline></svg>");
	background-position: right;
	background-repeat: no-repeat;
	background-color: var(--background-color);
	border: none;
	border-bottom: 1px solid var(--border-color);
	cursor: pointer;
	padding: 2px 16px 2px 0;
	scrollbar-width: unset;
}

[data-theme="dark"] select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffffa0' stroke-width='2' stroke-linecap='round'><polyline points='19 12 12 19 5 12'></polyline></svg>");
}

select:focus {
	border-color: var(--border-color--accent);
}

select.reverse {
	background-position: left;
	padding-right: 0;
	padding-left: 16px;
	text-align-last: right;
}

[data-theme="dark"] ::-webkit-calendar-picker-indicator {
	filter: invert(1);
}

/* | Links */

a:link,
a:visited {
	text-decoration: none;
	color: #039be5;
}

a:link:focus,
a:link:hover {
	text-decoration: underline;
}

/* | Money */

.money--gain {
	color: green;
}

.money--gain::before {
	content: "+";
}

.money--lose {
	color: crimson;
}

/* | Scrollbar */

/* || Firefox */

* {
	scrollbar-width: thin;
}

/* || WebKit */

::-webkit-scrollbar {
	width: 7px;
}

::-webkit-scrollbar-track {
	background-color: var(--scrollbar-track-color);
}

::-webkit-scrollbar-thumb {
	background-color: var(--scrollbar-thumb-color);
}

/* | Table */

table {
	border-collapse: collapse;
	margin-bottom: 1em;
	width: 100%;
}

table th,
td {
	border-bottom: 1px solid var(--border-color);
	padding: 5px;
	text-align: left;
	word-break: break-word;
}

table th {
	color: var(--font-color--faded);
}

table tbody tr:hover {
	background-color: var(--hover-color);
}

table tr:last-child td {
	border-bottom: none;
}

/* | Other */

.noselect {
	cursor: default;
	user-select: none;
}

.blurred {
	filter: blur(2px);
}