keycloak-theme/common/resources/scss/page.scss

156 lines
2.6 KiB
SCSS
Raw Normal View History

2022-11-27 01:17:33 +00:00
.ps-page {
display: flex;
width: 100vw;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 0;
2022-11-27 01:54:13 +00:00
pointer-events: none;
2022-11-28 14:06:30 +00:00
padding-top: 4rem;
2022-11-27 01:17:33 +00:00
@media screen and (min-width: 1200px) {
padding: 1vw;
2022-11-28 14:06:30 +00:00
padding-top: 4rem;
2022-11-27 01:17:33 +00:00
flex-direction: row;
align-items: flex-start;
}
&_home {
flex-direction: row;
flex-wrap: wrap;
}
&--header {
width: 100%;
top: 0;
left: 0;
right: 0;
height: auto;
position: fixed;
}
2022-11-27 20:38:41 +00:00
&--title {
font-size: 2rem;
border-bottom: 0.5rem solid var(--foreground);
padding-bottom: 0.5rem;
margin: 2rem;
}
&--subtitle {
padding-bottom: 0.25rem;
margin: 2rem;
};
2022-11-27 01:17:33 +00:00
&--section {
border: 12px solid black;
margin-top: 2rem;
margin-bottom: 2rem;
max-width: 700px;
flex-basis: 100%;
flex-shrink: 1;
pointer-events: all;
color: var(--foreground);
2022-11-27 03:51:25 +00:00
background: var(--background);
2022-11-27 03:13:27 +00:00
overflow-wrap: break-word;
hyphens: auto;
2022-11-27 01:54:13 +00:00
pointer-events: all;
2022-11-27 01:17:33 +00:00
@media screen and (min-width: 1200px) {
margin: 1vw;
}
&_home {
padding: 5vw;
}
&_full {
max-width: unset;
2022-11-28 14:06:30 +00:00
width: calc(100vw - 1.6rem);
margin: 0.8rem;
@media screen and (min-width: 1200px) {
width: 96vw;
margin: 1vw;
}
2022-11-27 01:17:33 +00:00
}
a {
color: var(--accent);
2022-11-27 03:51:25 +00:00
border-bottom: 1px solid transparent;
2022-11-27 01:17:33 +00:00
transition: border-bottom 0.1s ease;
text-decoration: none;
&:hover {
border-bottom: 4px solid var(--accent);
}
}
img {
width: 230px;
margin-top: 1rem;
}
}
&--section-link {
position: sticky;
top: 0;
background-color: var(--background);
padding: 1rem;
display: flex;
justify-content: flex-end;
align-items: center;
text-align: right;
padding-left: 132px;
@media screen and (min-width: 1200px) {
display: none;
border-bottom: 0;
}
&-icon {
margin-left: 8px;
}
}
&--section-contents {
2022-11-27 01:47:13 +00:00
margin: 2rem;
2022-11-27 01:17:33 +00:00
margin-bottom: 0;
font-weight: 500;
line-height: 1.4;
&:last-child {
margin-bottom: 5vw;
}
pre,
code {
2022-11-27 03:51:25 +00:00
background-color: var(--background-darker-2);
2022-11-27 01:17:33 +00:00
border-radius: 4px;
padding: 4px;
}
2022-11-27 03:51:25 +00:00
pre {
border: 1px solid var(--foreground-lighter-2);
}
2022-11-27 01:17:33 +00:00
> * {
margin-bottom: 0;
2022-11-27 03:51:25 +00:00
margin-top: 0.5rem;
}
> .ps-table {
margin-top: 1rem;
+ * {
margin-top: 1rem;
}
2022-11-27 01:17:33 +00:00
}
2022-11-27 20:38:41 +00:00
> h2, h3, h4 {
margin-top: 1.5rem;
2022-11-27 01:17:33 +00:00
line-height: 1.5;
}
}
}