Page MenuHomePhabricator
Differential D9359 Diff 28062 web/cashtab/extension/src/components/App.css

Changeset View

Standalone View

View Options

web/cashtab/extension/src/components/App.css

@import '~antd/dist/antd.less'; @import '~antd/dist/antd.less';
@import '~@fortawesome/fontawesome-free/css/all.css'; @import '~@fortawesome/fontawesome-free/css/all.css';
@import url('https://fonts.googleapis.com/css?family=Khula&display=swap&.css'); @import url('https://fonts.googleapis.com/css?family=Khula&display=swap&.css');
@font-face { /* Hide scrollbars but keep functionality*/
font-family: 'Roboto Mono'; /* Hide scrollbar for Chrome, Safari and Opera */
src: local('Roboto Mono'), body::-webkit-scrollbar {
url(../assets/fonts/RobotoMono-Regular.ttf) format('truetype'); display: none;
font-weight: normal;
} }
aside::-webkit-scrollbar { /* Hide scrollbar for IE, Edge and Firefox */
width: 0.3em; body {
} -ms-overflow-style: none; /* IE and Edge */
aside::-webkit-scrollbar-track { scrollbar-width: none; /* Firefox */
-webkit-box-shadow: inset 0 0 6px #13171f;
}
aside::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
} }
/* Hide up and down arros on input type="number" */ /* Hide up and down arros on input type="number" */
/* Chrome, Safari, Edge, Opera */ /* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { input::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
margin: 0; margin: 0;
} }
/* Hide up and down arros on input type="number" */ /* Hide up and down arros on input type="number" */
/* Firefox */ /* Firefox */
input[type='number'] { input[type='number'] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
html, html,
body { body {
min-width: 400px; min-width: 400px;
min-height: 600px; min-height: 600px;
max-width: 100%; max-width: 100%;
overflow-x: hidden; overflow-x: hidden;
} }
body::-webkit-scrollbar { /* Hide scroll bars on antd modals*/
.ant-modal-wrap.ant-modal-centered::-webkit-scrollbar {
display: none; display: none;
} }
.App { /* ITEMS BELOW TO BE MOVED TO STYLED COMPONENTS*/
text-align: center;
font-family: 'Gilroy', sans-serif;
background-color: #fbfbfd;
}
.App-logo {
width: 100%;
display: block;
}
.logo img {
width: 100%;
min-width: 193px;
display: block;
padding-left: 24px;
padding-right: 34px;
padding-top: 24px;
max-width: 200px;
}
.ant-list-item-meta .ant-list-item-meta-content {
display: flex;
}
#react-qrcode-logo {
border-radius: 8px;
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #f59332;
}
.ant-menu-item-group-title {
padding-left: 30px;
font-size: 20px !important;
font-weight: 500 !important;
}
.ant-menu-item > span {
font-size: 14px !important;
font-weight: 500 !important;
}
.ant-card-actions > li > span:hover,
.ant-btn:hover,
.ant-btn:focus {
color: #f59332;
transition: color 0.3s;
background-color: white;
}
.ant-card-actions > li {
color: #3e3f42;
}
.anticon {
color: #3e3f42;
}
.ant-list-item-meta-description,
.ant-list-item-meta-title {
color: #3e3f42;
}
.ant-list-item-meta-description > :first-child {
right: 20px !important;
position: absolute;
}
.ant-modal-body .ant-list-item-meta {
height: 85px;
width: 85px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 20px;
overflow: visible !important;
}
/* .ant-radio-group-solid .ant-radio-button-wrapper {
margin-top: 0px;
}
.ant-radio-group-solid .ant-radio-button-wrapper-checked {
border: none !important;
box-shadow: none !important;
} */
.identicon {
border-radius: 50%;
width: 200px;
height: 200px;
margin-top: -75px;
margin-left: -75px;
margin-bottom: 20px;
box-shadow: 1px 1px 2px 1px #444;
}
.ant-list-item-meta {
width: 40px;
height: 40px;
}
/* .ant-radio-group-solid .ant-radio-button-wrapper-checked {
background: #ff8d00 !important;
}
.ant-radio-group.ant-radio-group-solid.ant-radio-group-small {
font-size: 14px !important;
font-weight: 600 !important;
vertical-align: middle;
border-radius: 100px;
overflow: auto;
background: rgba(255, 255, 255, 0.5) !important;
margin-top: 14px;
margin-bottom: 10px;
cursor: pointer;
} */
.ant-checkbox-inner {
border: 1px solid #eaedf3 !important;
background: white;
}
.ant-checkbox-inner::after {
border-color: white !important;
}
.ant-card-bordered {
border: 1px solid rgb(234, 237, 243);
border-radius: 8px;
}
.ant-card-actions {
border-top: 1px solid rgb(234, 237, 243);
border-bottom: 1px solid rgb(234, 237, 243);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.35);
}
.ant-input-group-addon {
background-color: #f4f4f4 !important;
border: 1px solid rgb(234, 237, 243);
color: #3e3f42 !important;
* {
color: #3e3f42 !important;
}
}
.ant-menu-item.ant-menu-item-selected > * {
color: #fff !important;
}
.ant-menu-item.ant-menu-item-selected {
border: 0;
overflow: hidden;
text-align: left;
padding-left: 28px;
background-color: rgba(255, 255, 255, 0.2) !important;
}
.ant-btn {
border-radius: 8px;
background-color: #fff;
color: rgb(62, 63, 66);
font-weight: bold;
}
.ant-card-actions > li:not(:last-child) {
border-right: 0;
}
.ant-list-item-meta-avatar > img {
margin-left: -12px;
transform: translate(0, -6px);
}
.ant-list-item-meta-avatar > svg {
margin-right: -70px;
}
/* Removing these for ABC SLP warning
.ant-alert-warning {
background-color: #20242d;
border: 1px solid #17171f;
border-radius: 0;
}
.ant-alert-message {
color: #fff;
}
*/
.ant-layout-sider-dark {
background: linear-gradient(0deg, #040c3c, #212c6e);
}
.ant-menu-dark {
background: none;
}
.ant-layout-sider-zero-width-trigger.ant-layout-sider-zero-width-trigger-left
.anticon.anticon-bars {
color: #fff;
transform: scale(1.3);
}
.ant-layout-sider-zero-width-trigger.ant-layout-sider-zero-width-trigger-left {
background: #3e3f42;
border-radius: 0 8px 8px 0;
}
.ant-btn-group .ant-btn-primary:first-child:not(:last-child) {
border-right-color: transparent !important;
}
.ant-btn-group .ant-btn-primary:last-child:not(:first-child),
.ant-btn-group .ant-btn-primary + .ant-btn-primary {
border-left-color: #20242d !important;
}
.audit {
a,
a:active {
color: #46464a;
}
a:hover {
color: #111117;
}
}
.dividends {
a,
a:active {
color: #111117;
}
a:hover {
color: #46464a;
}
}
.ant-popover-inner-content {
color: white;
}
.ant-modal-body .ant-card {
max-width: 100%;
}
.ant-upload.ant-upload-drag {
border: 1px solid #eaedf3;
border-radius: 8px;
background: #d3d3d3;
}
.ant-upload-list-item:hover .ant-upload-list-item-info {
background-color: #ffffff;
}
/* .ant-radio-button-wrapper {
border: none;
}
.ant-radio-button-wrapper-checked {
border-radius: none !important;
} */
/* .ant-radio-button-wrapper:first-child, .ant-radio-button-wrapper:last-child {
border-radius: 0 0 0 0;
} */
.ant-radio-group {
width: 100%;
margin-top: 10px;
}
.ant-radio-button-wrapper {
background: rgba(255, 255, 255, 0.2);
width: 104px;
border: none;
text-align: center;
color: #fff;
}
.ant-radio-button-wrapper:hover {
color: #fff;
background: rgba(255, 255, 255, 0.3);
}
.ant-radio-group-small .ant-radio-button-wrapper {
height: 35px;
line-height: 35px;
}
.ant-radio-button-wrapper-checked {
background: #ff8d00 !important;
border: none !important;
}
.ant-radio-button-wrapper:first-child {
border-radius: 100px 0 0 100px;
}
.ant-radio-button-wrapper:last-child {
border-radius: 0 100px 100px 0;
}
::selection {
background-color: #ff8d00;
}
/* useWallet.js, useBCH.js */
@media (max-width: 768px) { @media (max-width: 768px) {
.ant-notification { .ant-notification {
width: 100%; width: 100%;
top: 20px !important; top: 20px !important;
max-width: unset; max-width: unset;
margin-right: 0; margin-right: 0;
} }
} }
@media (max-width: 350px) {
.ant-select-selection-selected-value {
font-size: 10px;
}
}
/*Custom color for CashSpin*/
.ant-spin > span > svg {
fill: #ff8d00;
}
/*Custom Input Fields */
input.ant-input,
.ant-select-selection {
background-color: #fff !important;
box-shadow: none !important;
border-radius: 4px;
font-weight: bold;
color: rgb(62, 63, 66);
opacity: 1;
height: 50px;
}
.ant-select-selection:hover {
border: 1px solid #eaedf3;
}
.ant-select-selection-selected-value {
color: rgb(62, 63, 66);
}
.ant-select-dropdown-menu-item {
color: #444;
background-color: #fff;
}
.ant-select-dropdown-menu-item-active,
.ant-select-dropdown-menu-item:hover {
color: #fff;
background-color: #ff8d00 !important;
}
.selectedCurrencyOption:hover {
color: #fff !important;
background-color: #ff8d00 !important;
}
.ant-input-affix-wrapper {
background-color: #fff;
border: 1px solid #eaedf3 !important;
}
input.ant-input,
.ant-select-selection {
border: none;
}
.ant-input::placeholder {
text-align: left;
}
.ant-select-selector {
height: 60px !important;
border: 1px solid #eaedf3 !important;
}
/*Revs with updated Antd*/
.ant-select-single .ant-select-selector .ant-select-selection-item,
.ant-select-single .ant-select-selector .ant-select-selection-placeholder {
line-height: 60px;
text-align: left;
color: #3e3f42;
font-weight: bold;
}
/* Handle new antd error formatting */
.ant-form-item-has-error
> div
> div.ant-form-item-control-input
> div
> span
> span
> span.ant-input-affix-wrapper {
background-color: #fff;
border-color: #f04134 !important;
}
.ant-form-item-has-error .ant-input,
.ant-form-item-has-error .ant-input-affix-wrapper,
.ant-form-item-has-error .ant-input:hover,
.ant-form-item-has-error .ant-input-affix-wrapper:hover {
background-color: #fff;
border-color: #f04134 !important;
}
.ant-form-item-has-error
.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input)
.ant-select-selector {
background-color: #fff;
border-color: #f04134 !important;
}