mirror of
https://github.com/spiral-project/ihatemoney.git
synced 2025-04-29 17:52:37 +02:00
prettier the css file
This commit is contained in:
Brice Maron
parent
92ce7d4d48
commit
227ce0a1fb
1 changed files with 195 additions and 146 deletions
|
|
@ -5,277 +5,326 @@
|
||||||
/* General */
|
/* General */
|
||||||
|
|
||||||
body {
|
body {
|
||||||
/* For fixed navbar */
|
/* For fixed navbar */
|
||||||
padding-top: 3.5rem;
|
padding-top: 3.5rem;
|
||||||
padding-bottom: 2rem;
|
padding-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Navbar */
|
/* Navbar */
|
||||||
|
|
||||||
.navbar h1 {
|
.navbar h1 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.navbar .secondary-nav {
|
.navbar .secondary-nav {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
.secondary-nav .nav-link {
|
.secondary-nav .nav-link {
|
||||||
padding: .5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
.navbar-brand {
|
||||||
|
font-family: "Lobster", arial, serif;
|
||||||
}
|
}
|
||||||
.navbar-brand{ font-family: 'Lobster', arial, serif; }
|
|
||||||
|
|
||||||
/* Header */
|
/* Header */
|
||||||
|
|
||||||
#header {
|
#header {
|
||||||
padding-bottom: 2em;
|
padding-bottom: 2em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
background-color: #ABE128;
|
background-color: #abe128;
|
||||||
background-image: url("../images/gradient.png");
|
background-image: url("../images/gradient.png");
|
||||||
background-position: center top;
|
background-position: center top;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header h2 {
|
#header h2 {
|
||||||
font-family: 'Comfortaa', arial, serif;
|
font-family: "Comfortaa", arial, serif;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: 0.5em;
|
||||||
color: #000;
|
color: #000;
|
||||||
font-size: 2.4em;
|
font-size: 2.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header .tryout {
|
#header .tryout {
|
||||||
margin-right: 10em;
|
margin-right: 10em;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #414141;
|
background-color: #414141;
|
||||||
border-color: #414141;
|
border-color: #414141;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header .tryout:hover {
|
#header .tryout:hover {
|
||||||
background-color: #606060;
|
background-color: #606060;
|
||||||
border-color: #606060;
|
border-color: #606060;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header .additional-content {
|
#header .additional-content {
|
||||||
margin-top: 5em;
|
margin-top: 5em;
|
||||||
font-family: 'Comfortaa', arial, serif;
|
font-family: "Comfortaa", arial, serif;
|
||||||
color: #000;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sidebar */
|
/* Sidebar */
|
||||||
|
|
||||||
.balance tr td { font-weight: bold; }
|
.balance tr td {
|
||||||
.positive { color: green; }
|
font-weight: bold;
|
||||||
.negative { color: red; }
|
}
|
||||||
|
.positive {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
|
.negative {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
background-color: #ABE128;
|
background-color: #abe128;
|
||||||
background-position: center bottom;
|
background-position: center bottom;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
color: black;
|
color: black;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 768px) {
|
@media (min-width: 768px) {
|
||||||
.sidebar {
|
.sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
padding-bottom: 4.5rem;
|
padding-bottom: 4.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#add-member-form { padding-top: 1em; padding-bottom: 1em; }
|
#add-member-form {
|
||||||
#add-member-form input[type="text"] { width: 60%; }
|
padding-top: 1em;
|
||||||
|
padding-bottom: 1em;
|
||||||
#table_overflow { overflow-y: auto; overflow-x: hidden;}
|
}
|
||||||
|
#add-member-form input[type="text"] {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#table_overflow {
|
||||||
|
overflow-y: auto;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
/* Content */
|
/* Content */
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Home */
|
/* Home */
|
||||||
|
|
||||||
#authentication-form legend {
|
#authentication-form legend {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Other */
|
/* Other */
|
||||||
|
|
||||||
#bills { color: black; }
|
#bills {
|
||||||
|
color: black;
|
||||||
.invites textarea{
|
|
||||||
width: 800px;
|
|
||||||
height: 100px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
footer{
|
.invites textarea {
|
||||||
margin-left: -15px;
|
width: 800px;
|
||||||
margin-right: -15px;
|
height: 100px;
|
||||||
margin-top: 30px;
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0px;
|
|
||||||
height: 2em;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #fff;
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.identifier{
|
footer {
|
||||||
float: right;
|
margin-left: -15px;
|
||||||
|
margin-right: -15px;
|
||||||
|
margin-top: 30px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
height: 2em;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #fff;
|
||||||
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
#new-bill, .identifier {
|
.identifier {
|
||||||
margin-top: 16px;
|
float: right;
|
||||||
margin-bottom: 16px;
|
}
|
||||||
|
|
||||||
|
#new-bill,
|
||||||
|
.identifier {
|
||||||
|
margin-top: 16px;
|
||||||
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Avoid text color flickering when it loose focus as the modal appears */
|
/* Avoid text color flickering when it loose focus as the modal appears */
|
||||||
.btn-primary[data-toggle="modal"] {
|
.btn-primary[data-toggle="modal"] {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.confirm, .confirm:hover {
|
.confirm,
|
||||||
color: red;
|
.confirm:hover {
|
||||||
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bill-actions {
|
.bill-actions {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bill-actions > .delete, .bill-actions > .edit {
|
.bill-actions > .delete,
|
||||||
font-size: 0px;
|
.bill-actions > .edit {
|
||||||
display: block;
|
font-size: 0px;
|
||||||
width: 16px;
|
display: block;
|
||||||
height: 16px;
|
width: 16px;
|
||||||
margin: 2px;
|
height: 16px;
|
||||||
margin-left: 5px;
|
margin: 2px;
|
||||||
float: left;
|
margin-left: 5px;
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bill-actions > .delete{
|
.bill-actions > .delete {
|
||||||
background: url('../images/delete.png') no-repeat right;
|
background: url("../images/delete.png") no-repeat right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bill-actions > .edit{
|
.bill-actions > .edit {
|
||||||
background: url('../images/edit.png') no-repeat right;
|
background: url("../images/edit.png") no-repeat right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-actions > .delete, .project-actions > .edit {
|
.project-actions > .delete,
|
||||||
font-size: 0px;
|
.project-actions > .edit {
|
||||||
display: block;
|
font-size: 0px;
|
||||||
width: 16px;
|
display: block;
|
||||||
height: 16px;
|
width: 16px;
|
||||||
margin: 2px;
|
height: 16px;
|
||||||
margin-left: 5px;
|
margin: 2px;
|
||||||
float: left;
|
margin-left: 5px;
|
||||||
|
float: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-actions > .delete{
|
.project-actions > .delete {
|
||||||
background: url('../images/delete.png') no-repeat right;
|
background: url("../images/delete.png") no-repeat right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.project-actions > .edit{
|
.project-actions > .edit {
|
||||||
background: url('../images/edit.png') no-repeat right;
|
background: url("../images/edit.png") no-repeat right;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.balance .balance-value {
|
||||||
.balance .balance-value{
|
text-align: right;
|
||||||
text-align:right;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#sidebar .balance tr:hover td {
|
#sidebar .balance tr:hover td {
|
||||||
background-color: #9BD118;
|
background-color: #9bd118;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.ower_line {
|
tr.ower_line {
|
||||||
background-color: #CBEF68;
|
background-color: #cbef68;
|
||||||
}
|
}
|
||||||
|
|
||||||
tr.payer_line .balance-name {
|
tr.payer_line .balance-name {
|
||||||
color:green;
|
color: green;
|
||||||
text-indent:5px;
|
text-indent: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action {
|
.action {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action button, .action button:hover {
|
.action button,
|
||||||
border-width: 0;
|
.action button:hover {
|
||||||
width: auto;
|
border-width: 0;
|
||||||
margin: 0;
|
width: auto;
|
||||||
padding: 0 0 0 20px;
|
margin: 0;
|
||||||
|
padding: 0 0 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action button:hover {
|
.action button:hover {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.delete button, .delete button:hover {
|
.delete button,
|
||||||
background: url('../images/deleter.png') left no-repeat;
|
.delete button:hover {
|
||||||
color: red;
|
background: url("../images/deleter.png") left no-repeat;
|
||||||
|
color: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit button, .edit button:hover {
|
.edit button,
|
||||||
background: url('../images/edit.png') left no-repeat;
|
.edit button:hover {
|
||||||
|
background: url("../images/edit.png") left no-repeat;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reactivate button, .reactivate button:hover {
|
.reactivate button,
|
||||||
background: url('../images/reactivate.png') left no-repeat;
|
.reactivate button:hover {
|
||||||
color: white;
|
background: url("../images/reactivate.png") left no-repeat;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance.table {
|
.balance.table {
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bill-form > fieldset {
|
#bill-form > fieldset {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.messages {
|
.messages {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.6rem;
|
top: 0.6rem;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.light {
|
.light {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance.table .action,
|
.balance.table .action,
|
||||||
.extra-info {
|
.extra-info {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.balance.table tr:hover .action,
|
.balance.table tr:hover .action,
|
||||||
tr:hover .extra-info {
|
tr:hover .extra-info {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fluid Offsets for Boostrap */
|
/* Fluid Offsets for Boostrap */
|
||||||
|
|
||||||
.row-fluid > [class*="span"]:not([class*="offset"]):first-child{margin-left:0;}
|
.row-fluid > [class*="span"]:not([class*="offset"]):first-child {
|
||||||
.row-fluid > .offset12{margin-left:100%;}
|
margin-left: 0;
|
||||||
.row-fluid > .offset11{margin-left:93.5%;}
|
}
|
||||||
.row-fluid > .offset10{margin-left:85%;}
|
.row-fluid > .offset12 {
|
||||||
.row-fluid > .offset9{margin-left:76.5%;}
|
margin-left: 100%;
|
||||||
.row-fluid > .offset8{margin-left:68%;}
|
}
|
||||||
.row-fluid > .offset7{margin-left:59.5%;}
|
.row-fluid > .offset11 {
|
||||||
.row-fluid > .offset6{margin-left:51%;}
|
margin-left: 93.5%;
|
||||||
.row-fluid > .offset5{margin-left:42.5%;}
|
}
|
||||||
.row-fluid > .offset4{margin-left:34%;}
|
.row-fluid > .offset10 {
|
||||||
.row-fluid > .offset3{margin-left:25.5%;}
|
margin-left: 85%;
|
||||||
.row-fluid > .offset2{margin-left:17%;}
|
}
|
||||||
.row-fluid > .offset1{margin-left:8.5%;}
|
.row-fluid > .offset9 {
|
||||||
|
margin-left: 76.5%;
|
||||||
|
}
|
||||||
|
.row-fluid > .offset8 {
|
||||||
|
margin-left: 68%;
|
||||||
|
}
|
||||||
|
.row-fluid > .offset7 {
|
||||||
|
margin-left: 59.5%;
|
||||||
|
}
|
||||||
|
.row-fluid > .offset6 {
|
||||||
|
margin-left: 51%;
|
||||||
|
}
|
||||||
|
.row-fluid > .offset5 {
|
||||||
|
margin-left: 42.5%;
|
||||||
|
}
|
||||||
|
.row-fluid > .offset4 {
|
||||||
|
margin-left: 34%;
|
||||||
|
}
|
||||||
|
.row-fluid > .offset3 {
|
||||||
|
margin-left: 25.5%;
|
||||||
|
}
|
||||||
|
.row-fluid > .offset2 {
|
||||||
|
margin-left: 17%;
|
||||||
|
}
|
||||||
|
.row-fluid > .offset1 {
|
||||||
|
margin-left: 8.5%;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue