personal-finance/static/main.css

Expense Tracker

@font-face {
	font-family: OpenSans-Regular;
	src: url(../fonts/OpenSans/OpenSans-Regular.ttf)
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

body,
html {
	height: 100%;
	font-family: sans-serif
}

a {
	margin: 0;
	transition: all .4s;
	-webkit-transition: all .4s;
	-o-transition: all .4s;
	-moz-transition: all .4s
}

a:focus {
	outline: none !important
}

a:hover {
	text-decoration: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0
}

p {
	margin: 0
}

ul,
li {
	margin: 0;
	list-style-type: none
}

input {
	display: block;
	outline: none;
	border: none !important
}

textarea {
	display: block;
	outline: none
}

textarea:focus,
input:focus {
	border-color: transparent !important
}

button {
	outline: none !important;
	border: none;
	background: 0 0
}

button:hover {
	cursor: pointer
}

iframe {
	border: none !important
}

.limiter {
	width: 100%;
	margin: 0 auto
}

.container-table100 {
	width: 100%;
	min-height: 100vh;
	background: #c850c0;
	background: -webkit-linear-gradient(45deg, #4158d0, #c850c0);
	background: -o-linear-gradient(45deg, #4158d0, #c850c0);
	background: -moz-linear-gradient(45deg, #4158d0, #c850c0);
	background: linear-gradient(45deg, #4158d0, #c850c0);
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding: 33px 30px
}

.wrap-table100 {
	width: 1170px
}

table {
	border-spacing: 1;
	border-collapse: collapse;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	margin: 0 auto;
	position: relative
}

table * {
	position: relative
}

table td,
table th {
	padding-left: 8px;
    text-align: center;
}

table thead tr {
	height: 60px;
	background: #36304a
}

table tbody tr {
	height: 50px
}

table tbody tr:last-child {
	border: 0
}

table td,
table th {
	text-align: left
}

table td.l,
table th.l {
	text-align: right
}

table td.c,
table th.c {
	text-align: center
}

table td.r,
table th.r {
	text-align: center
}

.table100-head th {
	font-family: OpenSans-Regular;
	font-size: 18px;
	color: #fff;
	line-height: 1.2;
	font-weight: bold;
    text-align: center
}

tbody tr:nth-child(even) {
	background-color: #f5f5f5
}

tbody tr {
	font-family: OpenSans-Regular;
	font-size: 15px;
	color: gray;
	line-height: 1.2;
	font-weight: unset
}

tbody tr:hover {
	color: #555;
	background-color: #f5f5f5;
	cursor: pointer
}

.column1 {
	width: 180px;
	padding-left: 20px;
    text-align: left
}

.column2 {
	width: 350px
}

.column3 {
	width: 150px;
    text-align: center
}

.column4 {
	width: 80px;
	text-align: center
}

.column5 {
	width: 100px;
	text-align: center
}

.column6 {
	width: 150px;
	text-align: center;
	padding-right: 62px
}

@media screen and (max-width:992px) {
	table {
		display: block
	}

	table>*,
	table tr,
	table td,
	table th {
		display: block
	}

	table thead {
		display: none
	}

	table tbody tr {
		height: auto;
		padding: 37px 0
	}

	table tbody tr td {
		padding-left: 40% !important;
		margin-bottom: 24px
	}

	table tbody tr td:last-child {
		margin-bottom: 0
	}

	table tbody tr td:before {
		font-family: OpenSans-Regular;
		font-size: 14px;
		color: #999;
		line-height: 1.2;
		font-weight: unset;
		position: absolute;
		width: 40%;
		left: 30px;
		top: 0
	}

	table tbody tr td:nth-child(1):before {
		content: "Date"
	}

	table tbody tr td:nth-child(2):before {
		content: "Order ID"
	}

	table tbody tr td:nth-child(3):before {
		content: "Name"
	}

	table tbody tr td:nth-child(4):before {
		content: "Price"
	}

	table tbody tr td:nth-child(5):before {
		content: "Quantity"
	}

	table tbody tr td:nth-child(6):before {
		content: "Total"
	}

	.column4,
	.column5,
	.column6 {
		text-align: center
	}

	.column4,
	.column5,
	.column6,
	.column1,
	.column2,
	.column3 {
		width: 100%
	}

	tbody tr {
		font-size: 14px
	}
}

@media(max-width:576px) {
	.container-table100 {
		padding-left: 15px;
		padding-right: 15px
	}
}

.button-1 {
	background-color: #36304a;
	border-radius: 8px;
	border-style: none;
	box-sizing: border-box;
	color: #FFFFFF;
	cursor: pointer;
	display: inline-block;
	font-family: "Haas Grot Text R Web", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	height: 40px;
	line-height: 20px;
	list-style: none;
	margin: 0;
	outline: none;
	padding: 10px 16px;
	position: relative;
	text-align: center;
	text-decoration: none;
	transition: color 100ms;
	vertical-align: baseline;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

.button-1:hover,
.button-1:focus {
	background-color: #F082AC;
}


.button-40 {
    background-color: #111827;
    border: 1px solid transparent;
    border-radius: .75rem;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    flex: 0 0 auto;
    font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem;
    padding: .75rem 1.2rem;
    text-align: center;
    text-decoration: none #6B7280 solid;
    text-decoration-thickness: auto;
    transition-duration: .2s;
    transition-property: background-color,border-color,color,fill,stroke;
    transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    width: 1170px;
    
  }
  
  .button-40:hover {
    background-color: #374151;
  }
  
  .button-40:focus {
    box-shadow: none;
    outline: 2px solid transparent;
    outline-offset: 2px;
  }
  
  @media (min-width: 768px) {
    .button-40 {
      padding: .75rem 1.5rem;
    }
  }

  :root {
    --background-gradient: linear-gradient(178deg, #ffff33 10%, #3333ff);
    --gray: #34495e;
    --darkgray: #111827;
  }
  
  select {
    /* Reset Select */
    appearance: none;
    outline: 10px red;
    border: 0;
    box-shadow: none;
    /* Personalize */
    font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    font-size: 1.125rem;
    font-weight: 600;
    flex: 1;
    padding: 0 1em;
    color: #fff;
    background-color: var(--darkgray);
    background-image: none;
    cursor: pointer;
  }
  /* Remove IE arrow */
  select::-ms-expand {
    display: none;
  }
  /* Custom Select wrapper */
  .select {
    position: relative;
    display: flex;
    width: 20em;
    height: 3em;
    border-radius: .25em;
    overflow: hidden;
    display: flex;
    align-content: center;
    text-align: center;
    
  }
  /* Arrow */
  .select::after {
    content: '\25BC';
    position: relative;
    top: 0;
    right: 0;
    padding: 1em;
    background-color: #2a2c32;
    transition: .25s all ease;
    pointer-events: none;
  }
  
  .select:hover::after {
    color: #ffffff;
  }
  
  .container {
    position : relative;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left : 50%;
    transform :
    translate(-50%,-50%); 
  }

  .drop-container {
    position: relative;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 200px;
    padding: 20px;
    border-radius: 10px;
    border: 2px dashed #ffffff;
    color: #e3e3e37f;
    cursor: pointer;
    background-color: #ffffff2f;
    transition: background .2s ease-in-out, border .2s ease-in-out;
  }
  
  .drop-container:hover {
    color: #ffffffa2;
    border-color: #1e1e1e;
  }
  
  .drop-container:hover .drop-title {
    color: #222;
  }
  
  .drop-title {
    color: #444;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    transition: color .2s ease-in-out;
  }