708 lines
13 KiB
CSS
708 lines
13 KiB
CSS
@import "fonts/source_sans_pro.css";
|
|
@import "fonts/inter.css";
|
|
:root {
|
|
--main-highlight-color: #EF940B;
|
|
--main-bg-color: white;
|
|
--main-text-color: black;
|
|
--main-link-color: #106BF4;
|
|
--shadow-color: #3333334d;
|
|
--gray-light: #cacaca;
|
|
--gray-medium: #e0e0e0;
|
|
--gray-dark: #4c4c4c;
|
|
--red: red;
|
|
--green: green;
|
|
|
|
--default-margin-tiny: 0.5em;
|
|
--default-margin-small: 0.75em;
|
|
--default-margin: 1em;
|
|
--default-margin-tiny: 2px;
|
|
--border-radius-small: 5px;
|
|
--border-radius-medium: 8px;
|
|
--border-radius-big: 10px;
|
|
|
|
--thin-border-width: 1px;
|
|
--medium-border-width: 2px;
|
|
}
|
|
|
|
body {
|
|
color: var(--main-text-color);
|
|
background-color: var(--main-bg-color);
|
|
-webkit-font-smoothing:subpixel-antialiased;
|
|
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, Ubuntu, Cantarell, "Segoe UI", Roboto, Oxygen-Sans, "San Francisco", "Helvetica Neue", Helvetica, "Lucida Grande", Tahoma, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
|
|
font-size: 15px;
|
|
}
|
|
|
|
a {
|
|
color: var(--main-link-color);
|
|
}
|
|
|
|
.themelist,
|
|
.centertitle,
|
|
.horizontal-list {
|
|
text-align: center;
|
|
}
|
|
|
|
.themelist > ul {
|
|
background: var(--gray-light);
|
|
border-radius: var(--border-radius-medium);
|
|
padding: var(--default-margin) calc(var(--default-margin) * 1.5);
|
|
list-style: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.themelist li {
|
|
background-color: var(--main-bg-color);
|
|
margin: calc(var(--default-margin) / 2) 0;
|
|
padding: calc(var(--default-margin) / 2);
|
|
border-radius: var(--border-radius-small);
|
|
}
|
|
|
|
.link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.link span {
|
|
position: relative;
|
|
}
|
|
|
|
.link span:before,
|
|
.link span:after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -0.25em;
|
|
width: 0;
|
|
height: var(--medium-border-width);
|
|
margin: 0 0 0;
|
|
background-color: var(--main-highlight-color);
|
|
}
|
|
|
|
.link span:before {
|
|
left: 50%;
|
|
}
|
|
|
|
.link span:after {
|
|
right: 50%;
|
|
}
|
|
|
|
.link:hover span:before,
|
|
.link:hover span:after {
|
|
width: 50%;
|
|
}
|
|
|
|
.avatar-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
img.avatar {
|
|
width: 100%;
|
|
}
|
|
|
|
.avatar {
|
|
border-radius: var(--border-radius-big) var(--border-radius-big) 0 0;
|
|
}
|
|
|
|
.themelist li:hover,
|
|
.link:hover {
|
|
transform: perspective(1px) scale(1.1) translateZ(0);
|
|
}
|
|
/*
|
|
.avatar-box:hover {
|
|
transform: perspective(1px) scale(1.1) translateZ(0);
|
|
}
|
|
*/
|
|
|
|
|
|
.avatar-wrapper:hover {
|
|
transform: perspective(1px) scale(1.1) translateZ(0);
|
|
z-index: 1000
|
|
}
|
|
|
|
.avatar-wrapper:hover .avatar {
|
|
border-radius: 10px;
|
|
z-index: -1000;
|
|
}
|
|
|
|
/*
|
|
.avatar-wrapper:hover ~ * {
|
|
transform: translateY(-100%);
|
|
}
|
|
*/
|
|
|
|
.blur {
|
|
transition: all .2s ease-in-out 2s;
|
|
filter: blur(5px) grayscale(80%);
|
|
}
|
|
|
|
.separator {
|
|
display: inline-block;
|
|
border-left: var(--thin-border-width) solid black;
|
|
width: var(--thin-border-width);
|
|
height: var(--default-margin-small);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.avatar-box {
|
|
width: 300px;
|
|
margin: var(--default-margin);
|
|
border-radius: var(--border-radius-big);
|
|
filter:drop-shadow(0 0 var(--border-radius-big) var(--shadow-color));
|
|
backface-visibility:hidden;
|
|
border: 1px solid var(--gray-light);
|
|
}
|
|
|
|
.avatar-wrapper {
|
|
height: 300px;
|
|
}
|
|
|
|
.username {
|
|
margin-left: 5px;
|
|
color: var(--gray-dark);
|
|
}
|
|
|
|
.post-box {
|
|
background: var(--gray-medium);
|
|
border-top:1px solid var(--gray-light);
|
|
}
|
|
|
|
.post-box > div {
|
|
padding: 5px;
|
|
}
|
|
|
|
.post-text-box {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.user-box,
|
|
.post-meta-box {
|
|
background: var(--gray-light);
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
|
|
.post-box, .post-meta-box:last-child{
|
|
border-radius:0 0 var(--border-radius-big) var(--border-radius-big);
|
|
}
|
|
|
|
.post-meta-box, .username, [itemprop="tag"], .themelist li {
|
|
font-family: "Source Code Pro", "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
|
|
}
|
|
.post-meta-box {
|
|
font-size: smaller;
|
|
}
|
|
|
|
[itemprop="tag"] {
|
|
text-decoration: underline var(--main-highlight-color);
|
|
}
|
|
|
|
.loader,
|
|
.loader-small {
|
|
border: var(--medium-border-width) solid var(--main-bg-color); /* Light grey */
|
|
border-top: var(--medium-border-width) solid var(--main-highlight-color); /* Blue */
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
animation: spin 1s linear infinite;
|
|
margin: auto;
|
|
}
|
|
|
|
.loader-small {
|
|
width: 0.5em;
|
|
height: 0.5em;
|
|
margin-left: 0.5em;
|
|
display: inline-block;
|
|
}
|
|
|
|
.presence-indicator {
|
|
border: 5px solid var(--gray-dark);
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-left: 0.2em;
|
|
}
|
|
|
|
.linkbutton {
|
|
border-radius: var(--border-radius-small);
|
|
padding: calc(var(--default-margin) / 2);
|
|
text-decoration: none;
|
|
background: var(--gray-light);
|
|
display: inline-block;
|
|
margin-left: var(--default-margin);
|
|
color: inherit;
|
|
}
|
|
.linkbutton:not(:last-child) {
|
|
margin-bottom: var(--default-margin);
|
|
}
|
|
|
|
button {
|
|
border: none;
|
|
}
|
|
|
|
.avatar-box,
|
|
.avatar,
|
|
.avatar-wrapper,
|
|
.linkbutton,
|
|
.themelist li,
|
|
.link span:before,
|
|
.link span:after,
|
|
.theme-chooser-list-item,
|
|
.theme-chooser-list-item span:before,
|
|
.theme-chooser-list-item span:after {
|
|
transition: all .2s ease-in-out;
|
|
}
|
|
|
|
.theme-chooser-wrapper {
|
|
background: var(--gray-light);
|
|
border-radius: var(--border-radius-medium);
|
|
padding: 0 var(--default-margin);
|
|
display: inline-block;
|
|
}
|
|
|
|
.theme-chooser-wrapper > span, .theme-chooser-wrapper > div {
|
|
padding: calc(var(--default-margin) / 2);
|
|
border-radius: var(--border-radius-small);
|
|
margin: calc(var(--default-margin) / 4);
|
|
color: var(--main-bg-color);
|
|
background: var(--gray-dark);
|
|
display: inline-block;
|
|
}
|
|
|
|
.theme-chooser-list {
|
|
display: inline-block;
|
|
text-align: left;
|
|
list-style: none;
|
|
margin: calc(var(--default-margin) / 2);
|
|
padding: 0;
|
|
}
|
|
|
|
.theme-chooser-list-item {
|
|
display: inline-block;
|
|
padding: calc(var(--default-margin) / 2);
|
|
background: var(--main-bg-color);
|
|
border-radius: var(--border-radius-small);
|
|
margin: calc(var(--default-margin) / 4);
|
|
}
|
|
|
|
.theme-chooser-list > a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.theme-chooser-list-item:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.theme-chooser-list-item span {
|
|
position: relative;
|
|
}
|
|
|
|
.theme-chooser-list-item span:before,
|
|
.theme-chooser-list-item span:after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: -0.25em;
|
|
width: 0;
|
|
height: var(--medium-border-width);
|
|
margin: 0 0 0;
|
|
background-color: var(--main-highlight-color);
|
|
}
|
|
|
|
.theme-chooser-list-item span:before {
|
|
left: 50%;
|
|
}
|
|
|
|
.theme-chooser-list-item span:after {
|
|
right: 50%;
|
|
}
|
|
|
|
.theme-chooser-list-item:hover span:before,
|
|
.theme-chooser-list-item:hover span:after {
|
|
width: 50%;
|
|
}
|
|
|
|
.theme-preview {
|
|
background: var(--main-bg-color);
|
|
color: var(--main-text-color);
|
|
display: inline-block;
|
|
border-radius: var(--border-radius-small);
|
|
text-align: center;
|
|
position: absolute;
|
|
width: 80%;
|
|
max-width: 400px;
|
|
display: none;
|
|
z-index: 1000;
|
|
bottom: 10%;
|
|
left: 50%;
|
|
transform: translate(-50%, calc(100% - 2em));
|
|
}
|
|
|
|
.theme-preview div {
|
|
padding: 0.5em;
|
|
border-radius: inherit;
|
|
margin: 0.5em;
|
|
}
|
|
|
|
.theme-preview > div {
|
|
background: var(--gray-light);
|
|
}
|
|
|
|
.theme-preview > div > div {
|
|
background: var(--main-bg-color);
|
|
}
|
|
|
|
.theme-preview .hl-color {
|
|
border: 2px solid var(--main-highlight-color);
|
|
}
|
|
|
|
.theme-preview .link-color {
|
|
border: 2px solid var(--main-link-color);
|
|
}
|
|
|
|
.theme-preview .red {
|
|
border: 2px solid var(--red);
|
|
}
|
|
|
|
.theme-preview .green {
|
|
border: 2px solid var(--green);
|
|
}
|
|
|
|
.theme-preview .light-gray {
|
|
border: 2px solid var(--gray-light);
|
|
}
|
|
|
|
.theme-preview .medium-gray {
|
|
border: 2px solid var(--gray-medium);
|
|
}
|
|
|
|
.theme-preview .dark-gray {
|
|
border: 2px solid var(--gray-dark);
|
|
}
|
|
|
|
.theme-preview .shadow {
|
|
box-shadow: 0px 0px 5px 5px var(--shadow-color);
|
|
}
|
|
|
|
.theme-preview::before {
|
|
content: "";
|
|
width: 0px;
|
|
height: 0px;
|
|
border: 0.8em solid transparent;
|
|
position: absolute;
|
|
left: 49%;
|
|
bottom: -30px;
|
|
border-top: 20px solid var(--main-bg-color);
|
|
}
|
|
|
|
.dimmer {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: black;
|
|
opacity: 0.5;
|
|
z-index: 999;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.advanced-upload {
|
|
background-color: var(--gray-light);
|
|
width: 300px;
|
|
border-radius: var(--border-radius-medium);
|
|
}
|
|
|
|
.advanced-upload .upload-box {
|
|
display: inline;
|
|
}
|
|
|
|
input:not([type=submit]):not([type=file]):not([type=checkbox]) {
|
|
padding: var(--border-radius-small);
|
|
background: var(--gray-light);
|
|
/*border-radius: var(--border-radius-medium);*/
|
|
border-radius: var(--border-radius-small);
|
|
border: none;
|
|
-moz-appearance: textfield;
|
|
-webkit-appearance: textfield;
|
|
appearance: textfield;
|
|
margin: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
.checkbox-container {
|
|
display: block;
|
|
position: relative;
|
|
padding-left: 1.5em;
|
|
/*margin-bottom: 12px;*/
|
|
cursor: pointer;
|
|
/*font-size: 22px;*/
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.checkbox-container input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
height: 0;
|
|
width: 0;
|
|
}
|
|
|
|
/* Create a custom checkbox */
|
|
.checkmark {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 1em;
|
|
width: 1em;
|
|
background-color: var(--gray-dark);
|
|
}
|
|
|
|
/* On mouse-over, add a grey background color */
|
|
.checkbox-container:hover input ~ .checkmark {
|
|
background-color: var(--gray-light);
|
|
}
|
|
|
|
/* When the checkbox is checked, add a blue background */
|
|
.checkbox-container input:checked ~ .checkmark {
|
|
background-color: var(--gray-light);
|
|
}
|
|
|
|
/* Create the checkmark/indicator (hidden when not checked) */
|
|
.checkmark:after {
|
|
content: "";
|
|
position: absolute;
|
|
display: none;
|
|
}
|
|
|
|
/* Show the checkmark when checked */
|
|
.checkbox-container input:checked ~ .checkmark:after {
|
|
display: block;
|
|
}
|
|
|
|
/* Style the checkmark/indicator */
|
|
.checkbox-container .checkmark:after {
|
|
left: 0.25em;
|
|
top: 0;
|
|
width: 0.3em;
|
|
height: 0.6em;
|
|
border: solid var(--main-highlight-color);
|
|
border-width: 0 3px 3px 0;
|
|
-webkit-transform: rotate(45deg);
|
|
-ms-transform: rotate(45deg);
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
input[type=number]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
input:focus {
|
|
outline: 5px solid var(--main-highlight-color);
|
|
}
|
|
|
|
textarea {
|
|
background: var(--gray-light);
|
|
border: none;
|
|
border-radius: var(--border-radius-small);
|
|
color: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
textarea.posttext {
|
|
width: 100%;
|
|
/*display: none;*/
|
|
}
|
|
|
|
.file-upload-input {
|
|
/*width: 0.1px;
|
|
height: 0.1px;*/
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
/*z-index: -1;*/
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 999;
|
|
transform: translateX(-20px) translateY(-100px);
|
|
}
|
|
|
|
.file-upload label {
|
|
width: 100%;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
overflow: hidden;
|
|
text-align: center;
|
|
}
|
|
|
|
.upload-form {
|
|
display: none;
|
|
}
|
|
|
|
.file-upload {
|
|
padding: 100px 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.advanced-upload .outline-radius {
|
|
width: calc(100% - 20px);
|
|
height: calc(100% - 20px);
|
|
border: 2px dashed var(--main-highlight-color);
|
|
position: absolute;
|
|
left: 9px;
|
|
top: 9px;
|
|
border-radius: var(--border-radius-medium);
|
|
}
|
|
|
|
#uploadTempAvatar input[type=number] {
|
|
width: 30px;
|
|
}
|
|
|
|
|
|
button.linkbutton {
|
|
padding: var(--border-radius-small);
|
|
}
|
|
|
|
.avatarPreviewContainer {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.avatarPreview {
|
|
max-width: 100px;
|
|
max-height: 100px;
|
|
}
|
|
|
|
.removeImage {
|
|
width: 20px;
|
|
height: 20px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: none;
|
|
}
|
|
|
|
.removeImage svg {
|
|
fill: var(--red);
|
|
}
|
|
|
|
.uploadProgress {
|
|
display: none;
|
|
width: 100%;
|
|
/*
|
|
color: red;
|
|
background: red;
|
|
border: 1px solid red;
|
|
*/
|
|
}
|
|
|
|
.duration-row td {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
input:invalid {
|
|
/*border: 1px solid var(--red) !important;*/
|
|
box-shadow: inset 0px 0px 1px 1px var(--red);
|
|
}
|
|
/*
|
|
input:not(invalid) {
|
|
border: 1px solid transparent !important;
|
|
}
|
|
*/
|
|
input {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.upload-form table {
|
|
max-width: 400px;
|
|
}
|
|
|
|
.ui-element {
|
|
font-family: "Inter";
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.notif {
|
|
position: absolute;
|
|
padding: var(--default-margin-small);
|
|
min-width: 250px;
|
|
z-index: 999999;
|
|
border-radius: var(--border-radius-small);
|
|
color: var(--shadow-color);
|
|
font-weight: 300;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
opacity: 0;
|
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
|
|
box-sizing: border-box;
|
|
transform: scaleX(0.5);
|
|
transition: all 0.4s ease-out;
|
|
color: var(--gray-dark);
|
|
}
|
|
|
|
.notif[data-state="success"] {
|
|
background-color: var(--green);
|
|
color: var(--gray-light);
|
|
}
|
|
|
|
.notif[data-state="alert"] {
|
|
background-color: var(--red);
|
|
}
|
|
|
|
.notif[data-state="default"] {
|
|
background: var(--main-link-color);
|
|
|
|
}
|
|
.notif[data-state="warn"] {
|
|
background: rgb(255, 166, 32);
|
|
color: var(--main-text-color);
|
|
}
|
|
/*
|
|
progress::-webkit-progress-bar {
|
|
background: var(--gray-light);
|
|
}
|
|
|
|
progress::-webkit-progress-value {
|
|
background: red;
|
|
}
|
|
|
|
progress::-moz-progress-bar {
|
|
background: red;
|
|
}
|
|
|
|
progress {
|
|
color: red;
|
|
}
|
|
*/
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--main-highlight-color: #EF940B;
|
|
--main-bg-color: white;
|
|
--main-text-color: black;
|
|
--main-link-color: #106BF4;
|
|
--gray-light: #cacaca;
|
|
--gray-dark: #4c4c4c;
|
|
--gray-medium: #e0e0e0;
|
|
--shadow-color: #888;
|
|
}
|
|
}
|
|
|
|
#imgTooLarge {
|
|
display: none;
|
|
color: var(--red);
|
|
}
|