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

275 lines
4 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-01-06 21:57:49 +01:00
@media (max-width: $breakpoint-small) {
font-size: 1.3em;
}
}
2019-07-21 23:31:22 +02:00
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 1rem;
}
p {
& + p {
margin-top: var(--spacing-small);
}
2019-07-21 23:31:22 +02:00
}
2019-09-26 18:07:11 +02:00
ul,
ol {
2019-07-21 23:31:22 +02:00
list-style: initial;
li {
2019-09-26 18:07:11 +02:00
list-style-position: outside;
2020-01-06 19:32:35 +01:00
margin: var(--spacing-xsmall) var(--spacing-medium);
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;
2019-09-30 23:48:30 +02:00
margin-top: var(--spacing-medium);
}
dt {
flex-basis: 40%;
text-align: left;
font-weight: bold;
}
dd {
flex-basis: 55%;
flex-grow: 1;
margin: 0;
text-align: right;
}
dt,
dd {
padding: var(--spacing-medium) var(--spacing-small);
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
}
}
2019-08-02 08:28:14 +02:00
input,
label {
user-select: none;
}
blockquote {
margin-bottom: 1rem;
padding: 0.8rem;
2019-11-22 22:13:00 +01:00
background-color: var(--color-blockquote-bg);
border-left: 0.3rem solid var(--color-blockquote);
}
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;
}
.columns {
display: flex;
justify-content: space-between;
2019-07-21 23:31:22 +02:00
align-items: flex-start;
2019-08-27 16:43:42 +02:00
flex-wrap: wrap;
> * {
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;
margin-bottom: var(--spacing-large);
2019-06-17 22:32:38 +02:00
&:first-child {
margin-right: 1.5rem;
}
}
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
flex-direction: column;
& > * {
margin: 0;
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;
2019-11-22 22:13:00 +01:00
font-size: var(--font-small);
color: var(--color-text-help);
2019-07-21 23:31:22 +02:00
margin-top: var(--spacing-small);
}
2019-02-13 17:27:20 +01:00
.help--warning {
2019-11-22 22:13:00 +01:00
background-color: var(--color-warning);
2019-11-23 19:18:01 +01:00
color: var(--color-black);
2019-02-13 17:27:20 +01:00
}
.help--inline {
@extend .help;
margin-top: 0;
}
.empty {
2019-11-22 22:13:00 +01:00
color: var(--color-text-empty);
font-style: italic;
}
.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;
}
}
2020-02-05 04:46:00 +01:00
.error-wrapper {
background-color: var(--color-error);
padding: var(--spacing-small);
border-radius: var(--border-radius);
}
.error-text {
2019-11-22 22:13:00 +01:00
color: var(--color-text-error);
}
.thumbnail-preview {
width: var(--thumbnail-preview-width);
height: var(--thumbnail-preview-height);
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 {
border-radius: var(--border-radius);
padding: var(--spacing-large);
background-color: var(--color-primary-alt);
}
2020-02-21 23:05:10 +01:00
.privacy-img {
height: 10rem;
}