gnu-social/public/assets/default_theme/base.css

268 lines
4.4 KiB
CSS
Raw Normal View History

html {
font-family:'Open Sans',sans-serif;
background-image:url(images/noise.png);
background-blend-mode: soft-light;
}
.icon {
fill: var(--foreground);
}
.accessibility-menu {
background-color:var(--background-hard)!important;
border:2px solid var(--border);
border-radius:var(--s);
display:block;
height:min-content;
left:-90%;
padding:var(--s);
position:absolute;
top:-90%;
width:30%;
z-index:999;
}
.accessibility-menu ul {
list-style-type:disc;
margin-left:var(--m);
}
.accessibility-menu:focus-within:not(:active) {
left:var(--s);
top:var(--s);
}
.active {
font:900 1em "Open Sans",sans-serif;
}
.anchor-hidden {
height:1px;
overflow:hidden;
width:1px;
}
.doc-navigation {
background-color:var(--background-card)!important;
border-bottom:0;
border-radius:var(--s) var(--s) 0 0;
padding:var(--s);
}
.doc-navigation ul {
display:flex;
}
.header-instance {
margin-left:auto;
margin-right:auto;
text-align:center;
}
.icon {
height:1em;
vertical-align:center;
width:1em;
}
.markdown-blocks {
background-color:var(--background-card)!important;
border-radius:0 0 var(--s) var(--s);
padding:var(--s);
}
.markdown-blocks ul {
list-style:disc;
margin-left:1em;
}
.markdown-blocks ul li {
margin-bottom:.2em;
}
.page-content {
margin-top:var(--s);
width:100%;
}
.page-content-wrapper {
margin-left:auto;
margin-right:auto;
padding:var(--s) var(--s) 0;
position:relative;
top:var(--xxl);
}
.page-header {
background:var(--background-card);
box-shadow:var(--shadow);
display:inline-flex;
height:var(--xxl);
padding:var(--s);
position:fixed;
top:0;
z-index:1;
}
.page-header #toggle-panel-left {
float:left;
}
.page-header #toggle-panel-right {
float:right;
}
.page-header .header-instance {
text-align:center;
}
.section-panel {
padding:var(--s);
position:fixed;
top:var(--xxl);
}
.section-panel .panel-content {
display:block;
height:calc(100vh - var(--xxl));
overflow:auto;
}
.section-panel-left {
left:0;
}
.section-panel-right {
right:0;
}
hr {
margin-bottom:var(--s);
margin-top:var(--s);
}
@media only screen and (max-width: 512px) {
html {
font-size:85%;
}
}
@media only screen and (max-width: 1280px) {
#toggle-panel-left:checked~.section-panel-left,#toggle-panel-right:checked~.section-panel-right {
background-color:var(--background-hard);
box-shadow:var(--shadow);
left:0;
width:100vw;
z-index:auto;
}
#toggle-panel-left:not(:checked)~.section-panel-left,#toggle-panel-right:not(:checked)~.section-panel-right {
display:none;
2021-09-06 19:06:28 +01:00
}
.page-content {
max-width:100%;
2021-09-06 19:06:28 +01:00
}
.page-header,.page-content-wrapper {
width:100%;
}
input[id|=toggle-panel] {
position:absolute;
top:-100%;
}
label[for|=toggle-panel] {
cursor:pointer;
}
}
@media only screen and (min-width: 1281px) {
.page-content-wrapper {
width:66vw;
}
.page-header {
width:100%;
}
.section-panel {
width:17vw;
}
a[id|=anchor]:target+.accessibility-target {
animation-duration:.6s;
animation-name:highlight;
animation-timing-function:ease-in-out;
}
label[for|=toggle-panel],input[id|=toggle-panel] {
display:none!important;
}
}
@media only screen and (min-width: 1921px) {
.page-content-wrapper {
width:44vw;
}
.page-header {
width:66vw;
}
.section-panel {
width:11vw;
}
.page-header,.section-panel-left {
left:17vw;
}
.section-panel-right {
right:17vw;
}
label[for|=toggle-panel],input[id|=toggle-panel] {
display:none!important;
}
}
@keyframes fadeIn {
0% {
opacity:0;
transform:translateY(-10px);
}
100% {
opacity:unset;
transform:none;
}
}
@keyframes fadeOut {
0% {
opacity:unset;
transform:none;
}
100% {
opacity:0;
transform:translateY(-10px);
}
}
@keyframes highlight {
0%,100% {
border-radius:var(--s);
box-shadow:initial;
}
50% {
border-radius:var(--s);
box-shadow:inset 0 20px 40px #fff;
transition:box-shadow .3s ease-in-out;
z-index:666;
}
}