lbry-desktop/ui/scss/init/_gui.scss

468 lines
7.1 KiB
SCSS
Raw Normal View History

2019-10-13 19:41:51 +02:00
// Generic html styles used across the App
// component specific styling should go in the component scss file
2019-07-21 23:31:22 +02:00
*::selection {
2019-11-22 22:13:00 +01:00
background-color: var(--color-text-selection-bg);
color: var(--color-text-selection);
2019-07-21 23:31:22 +02:00
}
*:focus {
outline: none;
}
html {
@include font-sans;
height: 100%;
2019-07-17 22:49:06 +02:00
min-height: 100%;
overflow-x: hidden;
2019-06-29 00:21:21 +02:00
2019-11-22 22:13:00 +01:00
color: var(--color-text);
2019-09-26 18:07:11 +02:00
background-color: var(--color-background);
2020-01-08 20:20:30 +01:00
font-size: 16px;
2020-01-06 19:32:35 +01:00
}
body {
font-size: 1em;
2020-07-24 19:17:43 +02:00
cursor: default;
line-height: 1.5;
font-weight: 400;
font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
hr {
height: 1px;
background-color: var(--color-gray-2);
}
2019-07-21 23:31:22 +02:00
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1rem;
}
p,
ol,
ul {
& + p,
& + ul,
& + ol {
margin-top: var(--spacing-s);
}
}
2019-09-26 18:07:11 +02:00
ul,
ol {
2019-07-21 23:31:22 +02:00
li {
2020-08-10 22:47:39 +02:00
position: relative;
2019-09-26 18:07:11 +02:00
list-style-position: outside;
2020-12-01 05:33:43 +01:00
margin: var(--spacing-xs) 0;
margin-left: var(--spacing-xl);
2019-09-27 22:03:05 +02:00
margin-bottom: 0;
2019-07-21 23:31:22 +02:00
}
}
.ul--no-style {
list-style: none;
margin-bottom: 0;
li {
margin: 0;
}
}
2019-09-30 23:48:30 +02:00
dl {
display: flex;
flex-direction: row;
flex-wrap: wrap;
2019-10-03 23:40:54 +02:00
overflow-x: visible;
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-m);
2019-09-30 23:48:30 +02:00
}
dt {
flex-basis: 50%;
2019-09-30 23:48:30 +02:00
text-align: left;
font-weight: bold;
}
.dt__text {
margin-right: var(--spacing-s);
}
2019-09-30 23:48:30 +02:00
dd {
display: flex;
align-items: center;
justify-content: flex-end;
flex-basis: 45%;
2019-09-30 23:48:30 +02:00
flex-grow: 1;
margin: 0;
text-align: right;
.help--warning {
margin-bottom: 0;
margin-top: var(--spacing-s);
text-align: left;
}
}
.dd__text {
display: flex;
justify-content: flex-end;
}
.dd__button {
margin-right: var(--spacing-s);
2019-09-30 23:48:30 +02:00
}
dt,
dd {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-m) var(--spacing-s);
2019-11-22 22:13:00 +01:00
border-top: 1px solid var(--color-border);
2019-09-30 23:48:30 +02:00
&:last-of-type {
2019-11-22 22:13:00 +01:00
border-bottom: 1px solid var(--color-border);
2019-09-30 23:48:30 +02:00
}
}
blockquote {
padding: 0 0.8rem;
margin-top: var(--spacing-xxs);
margin-bottom: var(--spacing-xxs);
opacity: 0.9;
border-left: 0.2rem solid var(--color-blockquote);
color: var(--color-text-subtitle);
}
code {
@include font-mono;
font-size: 1.5rem;
}
2019-06-29 00:21:21 +02:00
hr {
width: 100%;
height: 1px;
2019-11-22 22:13:00 +01:00
background-color: var(--color-border);
2019-06-29 00:21:21 +02:00
}
2019-08-14 18:31:34 +02:00
img,
a {
-webkit-user-drag: none;
}
img {
// Hide alt text when an image fails to load
text-indent: -9999px;
}
textarea {
min-height: calc(var(--height-input) * 2);
}
.columns {
display: flex;
justify-content: space-between;
2019-07-21 23:31:22 +02:00
align-items: flex-start;
> * {
flex-grow: 1;
2019-06-17 22:32:38 +02:00
flex-basis: 0;
2019-08-27 16:43:42 +02:00
min-width: 15rem;
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-l);
2019-06-17 22:32:38 +02:00
&:first-child {
2020-06-01 19:03:19 +02:00
flex-basis: 1;
margin-right: 1.5rem;
}
}
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
flex-direction: column;
& > * {
margin: 0;
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-m);
2019-12-18 06:27:08 +01:00
width: 100%;
2020-01-17 18:56:28 +01:00
flex-basis: auto;
2019-12-18 06:27:08 +01:00
&:first-child {
margin-right: 0;
}
}
}
}
.hidden {
display: none;
}
.disabled {
opacity: 0.3;
pointer-events: none;
}
.column {
display: flex;
.column__item:not(:first-child) {
padding-left: $spacing-width * 2/3;
2019-02-13 17:27:20 +01:00
flex: 1;
}
}
.truncated-text {
2019-02-18 18:24:56 +01:00
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
word-break: break-word;
}
.busy-indicator__loader {
min-width: 16px;
min-height: 8px;
margin: -1rem 0;
padding: 0 30px;
2019-11-07 20:39:22 +01:00
background: url('../../static/img/busy.gif') no-repeat center center;
display: inline-block;
vertical-align: middle;
&:first-child {
padding-left: 2px;
}
&:last-child {
padding-right: 2px;
}
}
.help {
display: block;
font-size: var(--font-xsmall);
2019-11-22 22:13:00 +01:00
color: var(--color-text-help);
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-s);
2020-09-04 20:39:55 +02:00
&:not(:last-child) {
margin-bottom: var(--spacing-s);
}
.button--link ~ .button--link {
margin-left: var(--spacing-s);
}
@media (min-width: $breakpoint-small) {
font-size: var(--font-small);
}
}
2019-02-13 17:27:20 +01:00
.help--warning {
@extend .help;
padding: var(--spacing-s);
color: var(--color-black);
border-radius: var(--border-radius);
background-color: var(--color-help-warning-bg);
color: var(--color-help-warning-text);
2020-09-02 22:08:37 +02:00
margin-bottom: var(--spacing-s);
border: 1px solid var(--color-border);
}
.help--notice {
@extend .help--warning;
background-color: var(--color-card-background-highlighted);
2019-02-13 17:27:20 +01:00
}
.help--inline {
@extend .help;
margin-top: 0;
margin-bottom: 0;
&:not(:last-child) {
margin-bottom: 0;
}
2020-10-12 23:24:32 +02:00
.icon--help {
top: 3px;
margin-left: 2px;
}
}
2020-08-21 17:18:47 +02:00
.help--card-actions {
@extend .help;
2020-10-01 22:59:11 +02:00
margin-top: var(--spacing-m);
2020-08-21 17:18:47 +02:00
}
.help--dt {
@extend .help;
display: inline-block;
margin-top: 0;
}
.help--spendable {
margin-left: var(--spacing-xxs);
}
.empty {
2019-11-22 22:13:00 +01:00
color: var(--color-text-empty);
font-style: italic;
}
.empty--centered {
text-align: center;
2020-06-01 19:03:19 +02:00
padding: calc(var(--spacing-l) * 3) 0;
}
.qr-code {
width: 134px;
height: 134px;
2019-12-09 18:25:13 +01:00
border: 3px solid white;
&.qr-code--right-padding {
margin-right: $spacing-vertical * 2/3;
}
&.qr-code--top-padding {
margin-top: $spacing-vertical * 2/3;
}
}
.error__wrapper {
2020-02-05 04:46:00 +01:00
background-color: var(--color-error);
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s);
2020-02-05 04:46:00 +01:00
border-radius: var(--border-radius);
}
.error__wrapper--no-overflow {
2020-04-13 21:42:15 +02:00
@extend .error__wrapper;
max-height: 10rem;
overflow: hidden;
}
.error__text {
2019-11-22 22:13:00 +01:00
color: var(--color-text-error);
}
.help--error {
@extend .help;
color: var(--color-text-error);
}
.thumbnail-preview {
width: var(--thumbnail-preview-width);
height: var(--thumbnail-preview-height);
background-color: var(--color-thumbnail-background);
padding: var(--spacing-s);
font-size: var(--font-small);
border-radius: var(--border-radius);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}
.emoji {
font-size: 1.3em;
}
2020-01-29 19:58:43 +01:00
.download-text {
font-size: var(--font-xsmall);
}
2020-02-17 20:12:28 +01:00
.notice-message {
position: relative;
2020-02-17 20:12:28 +01:00
border-radius: var(--border-radius);
2020-06-01 19:03:19 +02:00
padding: var(--spacing-l);
2020-02-17 20:12:28 +01:00
background-color: var(--color-primary-alt);
~ .card {
margin-top: var(--spacing-m);
}
2020-02-17 20:12:28 +01:00
}
2020-02-21 23:05:10 +01:00
2021-03-19 21:52:59 +01:00
.notice-message--loud {
2020-08-25 21:54:06 +02:00
@extend .notice-message;
2021-03-19 21:52:59 +01:00
background-color: #fef1f6;
color: var(--color-black);
font-weight: bold;
.button {
color: #fa6165;
}
2020-08-25 21:54:06 +02:00
}
2020-02-21 23:05:10 +01:00
.privacy-img {
height: 10rem;
}
2020-06-15 16:04:44 +02:00
.confirm__label {
@extend label;
}
.confirm__value {
2020-09-02 22:08:37 +02:00
display: flex;
align-items: center;
2020-06-15 16:04:44 +02:00
margin-bottom: var(--spacing-m);
font-size: var(--font-large);
&:last-child {
margin-bottom: 0;
}
}
2020-07-23 16:22:57 +02:00
.confirm__value--no-gap {
margin-bottom: 0;
}
.confirm__value--subitem {
font-size: var(--font-xsmall);
}
2020-08-11 22:32:03 +02:00
.mobile-only {
display: none;
@media (max-width: $breakpoint-small) {
display: block;
}
}
2020-08-10 22:47:39 +02:00
.mobile-hidden {
@media (max-width: $breakpoint-small) {
display: none !important;
}
2020-07-23 16:22:57 +02:00
}
2020-10-30 05:19:05 +01:00
.ads-test {
height: 50vh;
position: relative;
.video-js {
height: 50vh;
}
.video-js .vjs-tech {
height: 50vh;
}
2020-10-30 05:19:05 +01:00
}
2020-11-02 18:00:49 +01:00
.adspruce-bannerspot {
height: 5rem;
width: 100%;
}
.release__notes {
max-height: 50vh;
overflow: scroll;
}
2021-03-19 21:52:59 +01:00
.signup__odysee-logo {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
img {
margin-top: var(--spacing-xl);
height: 4rem;
}
}