gnu-social/public/assets/default_theme/css/base.css
Eliseu Amaro fdf506b9f9
[CARDS][Note] Fix structure to break content in a controlled manner
[CSS] Responsive feed styling work

Note info content will now break as expected, useless space trimmed down to accomodate smaller screens.
2021-12-26 19:16:16 +00:00

285 lines
6.3 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@import url("../fonts/poppins/poppins.css");
@import url("../fonts/opensans/opensans.css");
@import url("reset.css");
@import url("widgets/buttons.css");
@import url("widgets/sections.css");
html {
scroll-margin-top: var(--xxl);
}
@media(prefers-color-scheme:dark) {
select:not([multiple]) {
background: var(--gradient),url("../images/select_drop_dark.png") no-repeat center right 5px !important;
background-size: cover,16px !important;
}
}
@media(prefers-color-scheme:light) {
select:not([multiple]) {
background: var(--gradient),url("../images/select_drop_light.png") no-repeat center right 5px !important;
background-size: cover,16px !important;
background-blend-mode: saturation;
}
}
.icon {
align-self: center;
fill: var(--foreground);
}
.active {
font-size: 1.1em;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.anchor-hidden {
width: 1px;
height: 1px;
overflow: hidden;
}
.accessibility-menu {
display: block;
position: absolute;
z-index: 999;
top: -90%;
left: -90%;
width: 30%;
height: min-content;
padding: var(--s);
border-radius: var(--s);
background-color: var(--background-hard) !important;
border: 2px solid var(--border);
}
.accessibility-menu ul {
list-style-type: disc;
margin-left: var(--m);
}
.accessibility-menu:focus-within:not(:active) {
top: var(--s);
left: var(--s);
}
.heading-no-margin {
margin-bottom: initial;
}
.page-header {
z-index: 1;
display: inline-flex;
justify-content: center;
position: fixed;
top: 0;
align-items: baseline;
font-family: 'Poppins',sans-serif;
height: var(--xxl);
padding: var(--s);
background: var(--gradient) !important;
box-shadow: var(--shadow);
}
.header-instance {
display: flex;
position: absolute;
text-align: center;
align-items: center;
align-self: center;
margin-left: auto;
}
.header-instance > * {
margin: unset;
}
.header-extra-actions {
justify-self: flex-end;
margin-left: auto;
}
.header-extra-actions[open] > *:not(summary) {
z-index: 2;
position: absolute;
top: 100%;
right: 0;
width: 16.5vw;
border-radius: 0 0 var(--s) var(--s);
padding: var(--s);
background: var(--background-hard);
box-shadow: var(--shadow);
}
.header-panel {
display: flex;
flex-direction: column;
font-family: 'Open Sans',sans-serif;
position: fixed;
top: 0;
margin-top: var(--xxl);
height: calc(100% - var(--xxl));
padding: var(--s);
overflow-y: auto;
}
.panel-content {
display: flex;
flex-direction: column;
}
.page-content-wrapper {
position: relative;
top: var(--xxl);
margin-left: auto;
margin-right: auto;
justify-content: center;
padding: var(--s) var(--s) 0;
}
.page-content {
display: flex;
flex-direction: column;
width: 100%;
}
.markdown-blocks {
border-radius: 0 0 var(--s) var(--s);
padding: var(--s);
background-color: var(--background-card) !important;
}
.markdown-blocks ul {
margin-left: 1em;
list-style: disc;
}
.markdown-blocks ul li {
margin-bottom: 0.2em;
}
.doc-navigation {
border-radius: var(--s) var(--s) 0 0;
border-bottom: 0;
padding: var(--s);
background-color: var(--background-card) !important;
}
.doc-navigation ul {
display: flex;
justify-content: space-evenly;
}
/* < 720p */
@media only screen and (max-width:1280px) {
.page-header {
width: 100%;
}
.page-content-wrapper {
width: 100%;
}
.page-content {
max-width: 100%;
}
.header-extra-actions[open] > *:not(summary) {
width: 100%;
}
#panel-left-toggle:not(:checked)+.header-panel,
#panel-right-toggle:not(:checked)+.header-panel {
display: none;
}
#panel-left-toggle:checked+.header-panel,
#panel-right-toggle:checked+.header-panel,
a[id|="anchor"]:target ~ .panel-content {
display: flex;
width: 100%;
background-size: 100% 100%;
z-index: auto;
background-color: var(--background-hard) !important;
}
}
/* > 720p */
@media only screen and (min-width:1281px) {
/*
* Using the Van de Graaf Canon and Tschicholds recommended 2:3 page-size ratio
* Except we use the whole page
*
* > .page-content-wrapper
* 100% * 2/3 = 66%
*
* > .header-panel
* 100 - 66% = 34%
* 34% / 2 = 17%
*/
.page-header {
width: 100%;
}
.header-panel {
width: 17vw;
}
.page-content-wrapper {
width: 66vw;
}
a[id|="anchor"]:target+.accessibility-target {
animation-name: highlight;
animation-duration: 600ms;
animation-timing-function: ease-in-out;
}
}
/* > 1080p */
@media only screen and (min-width:1921px) {
/*
* Using the Van de Graaf Canon and Tschicholds recommended 2:3 page-size ratio
*
* 100% * 2/3 = 66%
*
* > .page-content-wrapper
* 66% * 2/3 = 44%
*
* > .header-panel
* 66% - 44% = 22%
* 22% / 2 = 11%
*/
.page-header {
width: 66vw;
}
.header-panel {
width: 11vw;
}
.page-content-wrapper {
width: 44vw;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(-10px);
}
100% {
opacity: unset;
transform: none;
}
}
@keyframes fadeOut {
100% {
opacity: 0;
transform: translateY(-10px);
}
0% {
opacity: unset;
transform: none;
}
}
@media (prefers-color-scheme: dark) {
@keyframes highlight {
0% {
box-shadow: initial;
border-radius: var(--s);
}
50% {
border-radius: var(--s);
box-shadow: inset 0 20px 40px #FFF;
transition: box-shadow 0.3s ease-in-out;
z-index: 666;
}
100% {
box-shadow: initial;
border-radius: var(--s);
}
}
}
@media (prefers-color-scheme: light) {
@keyframes highlight {
0% {
box-shadow: initial;
border-radius: var(--s);
}
50% {
border-radius: var(--s);
box-shadow: inset 0 20px 40px #000;
transition: box-shadow 0.3s ease-in-out;
}
100% {
box-shadow: initial;
border-radius: var(--s);
}
}
}