mirror of
https://git.sr.ht/~tsileo/microblog.pub
synced 2024-09-12 03:54:27 +00:00
The sensitive text feature was implemented with <label> and hidden checkbox <input> elements. There were two issues with this implementation: 1. The user couldn't navigate to the "show/hide more" button using keyboard. 2. The label indicates two actions at the same time ("show/hide more"), making it unclear what the function of the checkbox was and what the current show/collapse state was. As it is generally preferrable to use built-in HTML elements for the best semantic, this commit moves to use the <details> and <summary> elements for the sensitive text feature. The browser will open/collapse the content in <details> automatically when the user clicks on the <summary>, and keyboard navigation support is built-in. This commit also changes the button to display "show more" or "show less" depending on the state for visual clarity. This button is hidden from the accessibility tree using `aria-label="false"`, as the <details> element already exposes its state to the tree and we want to avoid duplicated information. A few caveats: * The "show/hide sensitive content" button for sensitive attachments hasn't been changed yet as I'd like to get more feedback about the new implementation. * As the summary/content warning text itself is also part of the <summary> tag, the user can now also click on them to toggle the visibility of the sensitive text. This may not be desirable as the current interface does not make it clear that this could happen; the user may try to select some text from the summary and be surprised by the sensitive text being expanded. One way to improve this would be to add an event listener to the summary text and call `preventDefault`, but this would introduce JavaScript code.
553 lines
8.5 KiB
SCSS
553 lines
8.5 KiB
SCSS
$font-stack: Helvetica, sans-serif;
|
|
$background: #ddd;
|
|
$light-background: #e6e6e6;
|
|
$text-color: #111;
|
|
$primary-color: #1d781d;
|
|
$secondary-color: #781D78;
|
|
$form-background-color: #ccc;
|
|
$form-text-color: #333;
|
|
$muted-color: #555; // solarized comment text
|
|
$primary-button-text-color: #fff;
|
|
$code-highlight-background: #f0f0f0;
|
|
|
|
// Load custom theme
|
|
@import "theme.scss";
|
|
|
|
.primary-color {
|
|
color: $primary-color;
|
|
}
|
|
|
|
#admin {
|
|
.admin-menu {
|
|
margin-bottom: 30px;
|
|
padding: 0 20px;
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
padding: 20px;
|
|
}
|
|
|
|
.public-top-menu {
|
|
margin: 30px 0 0 0;
|
|
}
|
|
|
|
.width-95 {
|
|
width: 95%;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.admin-new {
|
|
textarea {
|
|
font-size: 1.2em;
|
|
width: 95%;
|
|
}
|
|
}
|
|
|
|
.show-more-wrapper {
|
|
.p-summary {
|
|
display: inline-block;
|
|
}
|
|
.show-more-btn {
|
|
margin-left: 5px;
|
|
}
|
|
summary {
|
|
display: inline-block;
|
|
}
|
|
summary::-webkit-details-marker {
|
|
display: none
|
|
}
|
|
&:not([open]) .show-more-btn::after {
|
|
content: 'show more';
|
|
}
|
|
&[open] .show-more-btn::after {
|
|
content: 'show less';
|
|
}
|
|
}
|
|
.sensitive-attachment {
|
|
display: inline-block;
|
|
.sensitive-attachment-state {
|
|
display: none;
|
|
}
|
|
.sensitive-attachment-state:checked ~ .sensitive-attachment-box div {
|
|
display:none;
|
|
}
|
|
.sensitive-attachment-box {
|
|
position: relative;
|
|
div {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10;
|
|
backdrop-filter: blur(2em);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
blockquote {
|
|
border-left: 3px solid $secondary-color;
|
|
margin-left: 0;
|
|
padding-left: 1.5em;
|
|
}
|
|
|
|
.muted {
|
|
color: $muted-color;
|
|
}
|
|
|
|
.light-background {
|
|
background: $light-background;
|
|
}
|
|
|
|
|
|
body {
|
|
font-family: $font-stack;
|
|
font-size: 20px;
|
|
line-height: 32px;
|
|
background: $background;
|
|
color: $text-color;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
}
|
|
a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
dl {
|
|
display: flex;
|
|
dt {
|
|
width: 200px;
|
|
flex: 0 0 auto;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
dd {
|
|
flex: 1 1 auto;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
p {
|
|
display: inline;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shared-header {
|
|
margin-left: 20px;
|
|
margin-top: 30px;
|
|
margin-bottom: -20px;
|
|
strong {
|
|
color: $primary-color;
|
|
}
|
|
span {
|
|
color: $muted-color;
|
|
}
|
|
}
|
|
|
|
div.highlight {
|
|
background: $code-highlight-background;
|
|
padding: 0 10px;
|
|
overflow: auto;
|
|
display: block;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.box {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
code, pre {
|
|
color: $secondary-color; // #cb4b16; // #268bd2; // #2aa198;
|
|
font-family: monospace;
|
|
}
|
|
|
|
.form {
|
|
input, select, textarea {
|
|
font-size: 20px;
|
|
border: 0;
|
|
padding: 5px;
|
|
background: $form-background-color;
|
|
color: $form-text-color;
|
|
&:focus {
|
|
outline: 1px solid $secondary-color;
|
|
}
|
|
}
|
|
input[type=submit] {
|
|
font-size: 20px;
|
|
outline: none;
|
|
background: $primary-color;
|
|
color: $primary-button-text-color;
|
|
padding: 5px 12px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
header {
|
|
padding: 0 20px;
|
|
.title {
|
|
font-size: 1.3em;
|
|
text-decoration: none;
|
|
.handle {
|
|
font-size: 0.85em;
|
|
color: $muted-color;
|
|
}
|
|
}
|
|
.counter {
|
|
color: $muted-color;
|
|
}
|
|
.summary {
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
}
|
|
a {
|
|
color: $primary-color;
|
|
&:hover {
|
|
color: $secondary-color;
|
|
}
|
|
}
|
|
#main {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
main {
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
margin: 30px auto;
|
|
}
|
|
|
|
.main-flex {
|
|
display: flex;
|
|
flex: 1;
|
|
}
|
|
|
|
.centered {
|
|
display: flex;
|
|
flex: 1;
|
|
justify-content: center;
|
|
align-items: center;
|
|
div {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
margin: 20px auto;
|
|
color: $muted-color;
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
.tiny-actor-icon {
|
|
max-width: 24px;
|
|
max-height: 24px;
|
|
position: relative;
|
|
top: 5px;
|
|
}
|
|
.actor-box {
|
|
display: flex;
|
|
column-gap: 20px;
|
|
margin:10px 0;
|
|
.icon-box {
|
|
flex: 0 0 50px;
|
|
}
|
|
.actor-handle {
|
|
font-size: 0.85em;
|
|
line-height: 1em;
|
|
color: $muted-color;
|
|
}
|
|
.actor-icon {
|
|
max-width: 50px;
|
|
}
|
|
}
|
|
#articles {
|
|
list-style-type: none;
|
|
margin: 30px 0;
|
|
padding: 0 20px;
|
|
li {
|
|
display: block;
|
|
span {
|
|
padding-right:10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
#notifications, #followers, #following {
|
|
ul {
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@mixin admin-button() {
|
|
font-size: 20px;
|
|
line-height: 32px;
|
|
font-family: $font-stack;
|
|
background: $form-background-color;
|
|
color: $form-text-color;
|
|
border: 1px solid $background;
|
|
padding: 8px 10px 5px 10px;
|
|
cursor: pointer;
|
|
&:hover {
|
|
border: 1px solid $form-text-color;
|
|
}
|
|
}
|
|
|
|
.show-sensitive-btn, .show-more-btn, .label-btn {
|
|
@include admin-button;
|
|
padding: 10px 5px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.show-hide-sensitive-btn {
|
|
display:inline-block;
|
|
}
|
|
|
|
.no-margin-top {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
|
|
ul.poll-items {
|
|
list-style-type: none;
|
|
padding: 0;
|
|
li {
|
|
display: block;
|
|
p {
|
|
margin: 20px 0 10px 0;
|
|
.poll-vote {
|
|
padding-left: 20px;
|
|
}
|
|
}
|
|
|
|
.poll-bar {
|
|
width:100%;height:20px;
|
|
line {
|
|
stroke: $secondary-color;
|
|
stroke-width: 20px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.attachment-wrapper {
|
|
.attachment-item {
|
|
margin-top: 20px;
|
|
}
|
|
img.attachment {
|
|
margin: 0;
|
|
}
|
|
a.attachment {
|
|
display: inline-block;
|
|
margin-bottom: 15px;
|
|
}
|
|
audio.attachment {
|
|
width: 480px;
|
|
}
|
|
}
|
|
|
|
nav {
|
|
form {
|
|
margin: 15px 0;
|
|
}
|
|
input[type=submit], button {
|
|
@include admin-button;
|
|
}
|
|
}
|
|
|
|
nav.flexbox {
|
|
ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
list-style-type: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
ul li {
|
|
margin-right: 20px;
|
|
|
|
&:last-child {
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
a:not(.label-btn) {
|
|
color: $primary-color;
|
|
text-decoration: none;
|
|
&:hover, &:active {
|
|
color: $secondary-color;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
a.active:not(.label-btn) {
|
|
color: $secondary-color;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
// after nav.flexbox to override default behavior
|
|
a.label-btn {
|
|
color: $form-text-color;
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: $form-text-color;
|
|
}
|
|
}
|
|
|
|
.ap-object {
|
|
margin: 15px 0;
|
|
padding: 20px;
|
|
nav {
|
|
color: $muted-color;
|
|
}
|
|
.in-reply-to {
|
|
display: inline;
|
|
color: $muted-color;
|
|
}
|
|
.e-content, .activity-og-meta {
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
.activity-attachment {
|
|
margin: 30px 0 20px 0;
|
|
img, audio, video {
|
|
width: 100%;
|
|
max-width: 740px;
|
|
}
|
|
}
|
|
img.inline-img {
|
|
display: block;
|
|
max-width: 740px;
|
|
}
|
|
}
|
|
|
|
.activity-og-meta {
|
|
display: flex;
|
|
column-gap: 20px;
|
|
margin: 20px 0;
|
|
img {
|
|
max-width: 200px;
|
|
max-height: 100px;
|
|
}
|
|
small {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.ap-object-expanded {
|
|
border: 2px dashed $secondary-color;
|
|
}
|
|
|
|
.error-box {
|
|
color: $secondary-color;
|
|
}
|
|
|
|
.actor-action {
|
|
margin-top:20px;
|
|
margin-bottom:-20px;
|
|
padding: 0 20px;
|
|
span {
|
|
color: $muted-color;
|
|
}
|
|
span.new {
|
|
color: $secondary-color;
|
|
}
|
|
}
|
|
.actor-metadata {
|
|
color: $muted-color;
|
|
}
|
|
.emoji, .custom-emoji {
|
|
max-width: 25px;
|
|
}
|
|
|
|
.indieauth-box {
|
|
display: flex;
|
|
column-gap: 20px;
|
|
|
|
.indieauth-logo {
|
|
flex: initial;
|
|
width: 100px;
|
|
img {
|
|
max-width: 100px;
|
|
}
|
|
}
|
|
.indieauth-details {
|
|
flex: 1;
|
|
div {
|
|
padding-left: 20px;
|
|
a {
|
|
font-size: 1.2em;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.public-interactions {
|
|
display: flex;
|
|
column-gap: 20px;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
.interactions-block {
|
|
flex: 0 1 30%;
|
|
max-width: 50%;
|
|
.facepile-wrapper {
|
|
display: flex;
|
|
column-gap: 20px;
|
|
row-gap: 20px;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
a {
|
|
height: 50px;
|
|
img {
|
|
max-width: 50px;
|
|
}
|
|
}
|
|
.and-x-more {
|
|
display: inline-block;
|
|
align-self: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.error-title {
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
.ap-place {
|
|
h3 {
|
|
display: inline;
|
|
font-weight: normal;
|
|
}
|
|
h3::after {
|
|
content: ': ';
|
|
}
|
|
}
|
|
|
|
.margin-top-20 {
|
|
margin-top: 20px;
|
|
}
|