lbry-desktop/ui/scss/component/_main.scss

126 lines
2.2 KiB
SCSS
Raw Normal View History

.main-wrapper {
2019-07-23 10:05:51 +02:00
position: relative;
}
2019-10-09 18:34:18 +02:00
.main-wrapper--mac {
margin-top: calc(var(--header-height) + var(--mac-titlebar-height));
}
2019-07-17 22:49:06 +02:00
.main-wrapper__inner {
display: flex;
2019-07-17 22:49:06 +02:00
align-items: flex-start;
2019-07-23 10:05:51 +02:00
justify-content: space-between;
2019-10-03 18:06:06 +02:00
min-height: calc(100vh - var(--header-height));
2019-07-21 23:31:22 +02:00
max-width: var(--page-max-width);
2019-06-11 20:10:58 +02:00
margin-left: auto;
margin-right: auto;
2019-07-23 10:05:51 +02:00
margin-top: var(--header-height);
padding: var(--spacing-large);
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
padding: var(--spacing-small);
}
}
2019-06-11 20:10:58 +02:00
.main {
2019-09-26 18:07:11 +02:00
position: relative;
width: calc(100% - var(--side-nav-width) - var(--spacing-large));
2019-05-07 04:35:04 +02:00
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
2019-06-11 20:10:58 +02:00
width: 100%;
margin-right: 0;
margin-left: 0;
}
}
2019-01-09 19:39:05 +01:00
2019-07-09 04:41:48 +02:00
.main--file-page {
position: relative;
2019-01-09 19:39:05 +01:00
2019-11-22 22:13:00 +01:00
.grid-area--content {
max-height: var(--inline-player-max-height);
}
2019-01-09 19:39:05 +01:00
.grid-area--info {
2019-07-09 04:41:48 +02:00
margin-right: var(--spacing-large);
2019-07-21 23:31:22 +02:00
width: 52.5%;
2019-06-17 22:32:38 +02:00
}
2019-07-09 04:41:48 +02:00
.grid-area--related {
2019-07-21 23:31:22 +02:00
width: calc(47.5% - var(--spacing-large));
2019-01-09 19:39:05 +01:00
}
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
2019-12-19 21:43:49 +01:00
overflow-x: hidden;
2019-12-18 06:27:08 +01:00
.grid-area--related,
.grid-area--info {
margin-right: 0;
width: 100%;
}
}
2019-01-09 19:39:05 +01:00
}
2019-08-27 16:43:42 +02:00
.main--auth-page {
max-width: 60rem;
2019-09-26 18:07:11 +02:00
margin-top: var(--spacing-main-padding);
2019-08-27 16:43:42 +02:00
margin-left: auto;
margin-right: auto;
}
.main--empty {
2019-09-27 22:03:05 +02:00
align-self: center;
display: flex;
2019-09-27 22:03:05 +02:00
align-items: center;
flex-direction: column;
2019-07-02 06:22:13 +02:00
margin-top: 100px;
margin-bottom: 100px;
text-align: center;
}
2019-06-17 22:32:38 +02:00
2019-07-23 10:05:51 +02:00
.main--launching {
width: 100vw;
height: 100vh;
background-color: var(--color-background);
}
2019-09-26 18:07:11 +02:00
.main--contained {
margin: auto;
2020-02-21 23:05:10 +01:00
margin-top: 2rem;
2019-09-27 20:56:15 +02:00
display: flex;
flex-direction: column;
align-items: flex-start;
max-width: 40rem;
text-align: left;
2019-10-03 23:40:54 +02:00
& > * {
width: 100%;
}
2019-09-26 18:07:11 +02:00
}
2019-08-27 16:43:42 +02:00
2019-09-26 18:07:11 +02:00
.main--full-width {
width: 100%;
2019-08-27 16:43:42 +02:00
}
2020-01-06 19:32:35 +01:00
.main__document-wrapper {
max-width: 100%;
2020-01-29 18:31:31 +01:00
min-width: 40em;
2020-01-18 08:59:50 +01:00
width: fit-content;
2020-01-06 19:32:35 +01:00
margin: auto;
2020-01-06 21:57:49 +01:00
margin-bottom: var(--spacing-xlarge);
2020-01-06 19:32:35 +01:00
@media (max-width: $breakpoint-small) {
width: 100%;
}
}
2020-01-29 18:31:31 +01:00
2020-02-01 02:47:13 +01:00
.main__document-wrapper--markdown {
2020-01-29 18:31:31 +01:00
@extend .main__document-wrapper;
width: 40em;
max-width: unset;
min-width: unset;
2020-02-21 23:05:10 +01:00
2020-02-14 20:21:16 +01:00
@media (max-width: $breakpoint-small) {
width: 100%;
}
2020-01-29 18:31:31 +01:00
}