Commit 6b85665c authored by Jonathan Porta's avatar Jonathan Porta
Browse files

Fix dark mode and moke it mobile

parent 0a771171
.ProposalsList {
flex-direction: column;
display: flex;
width: 80%;
@media only screen and (min-width: 768px) {
width: 80%;
}
@media only screen and (max-width: 768px) {
width: 98%;
}
margin-left: auto;
margin-right: auto;
.proposals__header {
......@@ -9,11 +16,19 @@
justify-content: center;
display: flex;
@media only screen and (max-width: 768px) {
padding-left: 1em;
}
.proposals__votes {
display: flex;
align-items: center;
max-width: 200px;
width: 20%;
@media only screen and (max-width: 768px) {
justify-content: center;
width: 30%;
}
}
.proposals__amount {
display: flex;
......@@ -32,23 +47,50 @@
}
}
.proposals__row {
border-bottom: 1px rgba(0, 0, 0, 0.2) dashed;
@include themify($themes) {
// border: themed('borderAccent');
border-bottom: themed('borderLight');
}
// border-bottom: 1px rgba(0, 0, 0, 0.2) dashed;
flex-direction: row;
justify-content: center;
display: flex;
@media only screen and (max-width: 768px) {
padding-top: 0.7em;
padding-bottom: 0.7em;
}
small {
font-size: 12px;
// font-size: 12px;
@media only screen and (max-width: 768px) {
font-size: 0.7em;
}
@include themify($themes) {
color: themed('textColorSecondary');
}
}
.proposals__votes {
display: flex;
align-items: center;
max-width: 200px;
width: 20%;
font-size: 2em;
flex-direction: row;
justify-content: flex-start;
@media only screen and (min-width: 768px) {
font-size: 1.5em;
flex-direction: row;
justify-content: flex-start;
width: 20%;
}
@media only screen and (max-width: 768px) {
font-size: 0.8em;
flex-direction: row;
justify-content: center;
align-items: flex-start;
padding-top: 0.1em;
width: 30%;
}
a {
padding-right: 10px;
}
......@@ -58,18 +100,36 @@
align-items: center;
max-width: 200px;
width: 20%;
font-size: 1.5em;
// span {
// @media only screen and (min-width: 768px) {
// font-size: 1.5em;
// }
// @media only screen and (max-width: 768px) {
// font-size: 0.8em;
// }
// }
flex-direction: column;
align-items: flex-start;
small {
color: rgba(0, 0, 0, 0.5);
}
// small {
// @include themify($themes) {
// color: themed('textColorSecondary');
// }
// // @media only screen and (max-width: 768px) {
// // font-size: 0.7em;
// // }
// }
}
.proposals__description {
max-width: 800px;
width: 60%;
.date {
color: rgba(0, 0, 0, 0.5);
@include themify($themes) {
color: themed('textColorSecondary');
}
@media only screen and (max-width: 768px) {
font-size: 0.7em;
}
}
}
}
......
.UserWallet__buysp {
@extend .e-btn-hollow;
@extend .e-btn-hollow;
}
.UserWallet__balance {
padding-bottom: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
padding-top: 1rem;
&.UserWallet__balance.zebra {
@include themify($themes) {
background-color: themed('tableRowEvenBackgroundColor');
color: themed('textColorPrimary');
}
}
&.UserWallet__balance.zebra {
@include themify($themes) {
background-color: themed('tableRowEvenBackgroundColor');
color: themed('textColorPrimary');
}
}
}
.UserWallet__buysp {
margin-right: 0 !important;
margin-top: 1rem;
margin-right: 0 !important;
margin-top: 1rem;
}
.UserWallet__claimbox {
margin: 1.5rem 0 0.5rem;
padding: 1rem 1rem 1.1rem 1rem;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
margin: 1.5rem 0 0.5rem;
padding: 1rem 1rem 1.1rem 1rem;
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
@include themify($themes) {
border: themed('border');
background-color: themed('highlightBackgroundColor');
color: themed('textColorPrimary');
}
@include themify($themes) {
border: themed('border');
background-color: themed('highlightBackgroundColor');
color: themed('textColorPrimary');
}
&-text {
font-weight: bold;
}
.button {
@extend .e-btn;
@include font-size(14px);
margin: 0;
}
// spacing for mobile collapse
@media only screen and (max-width: 680px) {
.button {
margin: 8px 0 0 0;
}
}
&-text {
font-weight: bold;
}
.button {
@extend .e-btn;
@include font-size(14px);
margin: 0;
}
// spacing for mobile collapse
@media only screen and (max-width: 680px) {
.button {
margin: 8px 0 0 0;
}
}
}
.WalletSubMenu {
> li > a {
transition: 0.2s all ease-in-out;
padding: 1em 1em 1em 0;
@include font-size(16px);
@include MQ(M) {
@include font-size(18px);
padding: 1em 1.5em 1em 0;
}
> li > a {
transition: 0.2s all ease-in-out;
padding: 1em 1em 1em 0;
@include font-size(16px);
@include MQ(M) {
@include font-size(18px);
padding: 1em 1.5em 1em 0;
}
@include themify($themes) {
color: themed('textColorSecondary');
}
@include themify($themes) {
color: themed('textColorSecondary');
}
&:hover, &:focus {
@include themify($themes) {
color: themed('textColorAccent');
}
&:hover,
&:focus {
@include themify($themes) {
color: themed('textColorAccent');
}
}
}
> li > a.active {
cursor: default;
@include themify($themes) {
color: themed('textColorPrimary');
}
font-weight: bold;
}
}
> li > a.active {
cursor: default;
@include themify($themes) {
color: themed('textColorPrimary');
}
font-weight: bold;
}
@include themify($themes) {
border-bottom: themed('border');
}
border-bottom: themed('border');
}
margin: 0.5rem 0 1rem;
margin: 0.5rem 0 1rem;
}
// protect for foundation bug for collapsed state drop-downs
@media only screen and (max-width: 40em) {
.Wallet_dropdown {
left: 10px!important;
left: 10px !important;
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment