mirror of
https://github.com/ION606/bluesky-client.git
synced 2026-05-14 21:26:54 +00:00
initial code commit
This commit is contained in:
+320
@@ -0,0 +1,320 @@
|
||||
/* posts */
|
||||
/* container for all cards */
|
||||
.cards-container {
|
||||
column-width: 280px; /* sets the width of each "column" */
|
||||
column-gap: 16px; /* horizontal space between columns */
|
||||
padding: 20px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.cards-container .post-card {
|
||||
position: relative;
|
||||
background-color: #2e003e;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
color: #e6e6ff;
|
||||
font-family: Arial, sans-serif;
|
||||
display: inline-block; /* makes each card flow naturally into columns */
|
||||
margin-bottom: 16px; /* adds space between items vertically */
|
||||
width: 100%; /* ensures card takes up the column width */
|
||||
}
|
||||
|
||||
|
||||
.cards-container-relaxed {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
grid-auto-rows: auto; /* allows each card to be only as tall as its content */
|
||||
grid-auto-flow: dense; /* fills in gaps with smaller items if available */
|
||||
padding: 20px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.cards-container-relaxed .post-card {
|
||||
position: relative;
|
||||
background-color: #2e003e;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
color: #e6e6ff;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* author section inside card */
|
||||
.author-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* avatar image styling */
|
||||
.card-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
border: 2px solid #aa00ff;
|
||||
}
|
||||
|
||||
/* author info */
|
||||
.author-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* display name and handle styling */
|
||||
.author-name {
|
||||
font-size: 1em;
|
||||
color: #d4b0ff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.author-handle {
|
||||
font-size: 0.8em;
|
||||
color: #b399ff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* text content styling */
|
||||
.post-text {
|
||||
overflow: hidden;
|
||||
max-height: 200px; /* set a limit for text content */
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
|
||||
/* styling for original post preview */
|
||||
.original-post {
|
||||
background-color: #3d1c3d;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
margin-top: 8px;
|
||||
width: 100%;
|
||||
font-size: 0.8em;
|
||||
color: #b399ff;
|
||||
}
|
||||
|
||||
.original-author {
|
||||
font-weight: bold;
|
||||
margin-bottom: 4px;
|
||||
color: #d4b0ff;
|
||||
}
|
||||
|
||||
.original-text {
|
||||
font-style: italic;
|
||||
color: #e6e6ff;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.original-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* interaction counts */
|
||||
.interaction-counts {
|
||||
font-size: 0.8em;
|
||||
color: #b399ff;
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* repost section styling */
|
||||
.repost-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #3d1c3d;
|
||||
padding: 8px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* repost avatar */
|
||||
.repost-avatar {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
border: 2px solid #ff66ff;
|
||||
}
|
||||
|
||||
/* repost info */
|
||||
.repost-info .author-name {
|
||||
font-size: 0.9em;
|
||||
color: #d4b0ff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.repost-info .author-handle {
|
||||
font-size: 0.8em;
|
||||
color: #b399ff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* styling for post image within card */
|
||||
.post-image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 4px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
|
||||
/* pinned label styling */
|
||||
.pinned-label {
|
||||
background-color: #ffcc00; /* bright color to make it noticeable */
|
||||
color: #333;
|
||||
font-size: 0.8em;
|
||||
font-weight: bold;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
display: inline-block;
|
||||
margin-bottom: 8px; /* space below the label */
|
||||
}
|
||||
|
||||
/* optional: distinct border for pinned card */
|
||||
.pinned-card {
|
||||
border: 2px solid #ffcc00; /* match border with label color */
|
||||
padding-top: 8px; /* adjust padding for the label */
|
||||
}
|
||||
|
||||
/* container for video within post card */
|
||||
.video-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin-top: 10px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* video element styling */
|
||||
.post-video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
background-color: #000;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* add a slight shadow to the video container for depth */
|
||||
.video-container {
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* hover effect to add a border around the video for focus */
|
||||
.video-container:hover {
|
||||
border: 2px solid #aa00ff;
|
||||
transition: border 0.3s ease;
|
||||
}
|
||||
|
||||
/* compose button styling with icon */
|
||||
.compose-button {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 2%;
|
||||
background-color: #6b006b;
|
||||
color: #e6e6ff;
|
||||
padding: 15px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 1.5em;
|
||||
cursor: pointer;
|
||||
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.compose-button:hover {
|
||||
background-color: #aa00ff;
|
||||
}
|
||||
|
||||
/* button container styling */
|
||||
.button-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
/* individual action buttons */
|
||||
.action-button {
|
||||
background-color: #2a002e;
|
||||
color: #e6e6ff;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 1.2em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: #4e004e;
|
||||
}
|
||||
|
||||
/* specific styles for icons */
|
||||
.like-button {
|
||||
color: #ff4d4d;
|
||||
}
|
||||
|
||||
.delete-button {
|
||||
color: #ff4d4d;
|
||||
}
|
||||
|
||||
.dm-button {
|
||||
color: #66ccff;
|
||||
}
|
||||
|
||||
.copy-link-button {
|
||||
color: #ffcc00;
|
||||
}
|
||||
|
||||
.pin-button {
|
||||
color: #ffcc00;
|
||||
}
|
||||
|
||||
/* dropdown menu styling */
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
right: 13px;
|
||||
background-color: #3d1c3d;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* hide dropdown menu initially */
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* dropdown action button styling */
|
||||
.dropdown-menu .action-button {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
+160
@@ -0,0 +1,160 @@
|
||||
/* overlay backdrop */
|
||||
#overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.7); /* darker overlay for dark theme */
|
||||
z-index: 999;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
/* popup form styling for dark theme */
|
||||
#new-post-form {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: #333; /* dark background */
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
color: #f1f1f1; /* light text for contrast */
|
||||
}
|
||||
|
||||
/* show popup and overlay */
|
||||
#new-post-form.show, #overlay.show {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* form elements styling */
|
||||
#postContent, #postTitle, #postFile, #postGif, #postAudio {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
margin-top: 10px;
|
||||
background-color: #444; /* dark background for inputs */
|
||||
border: 1px solid #666;
|
||||
border-radius: 4px;
|
||||
color: #f1f1f1; /* light text */
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
button[type="submit"] {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
padding: 10px;
|
||||
font-size: 16px;
|
||||
background-color: #0077ff;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
button[type="submit"]:hover {
|
||||
background-color: #005bb5;
|
||||
}
|
||||
|
||||
/* close button */
|
||||
#closeButton {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
color: #f1f1f1; /* light color for dark background */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
/* button styling */
|
||||
button#fileButton, button#gifButton, button#audioButton {
|
||||
background: #444; /* dark background for dark theme */
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
margin: 5px 0;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
button#fileButton:hover, button#gifButton:hover, button#audioButton:hover {
|
||||
background-color: #555; /* slightly lighter on hover */
|
||||
}
|
||||
|
||||
/* icon styling */
|
||||
button#fileButton img, button#gifButton img, button#audioButton img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* hide actual input fields */
|
||||
#postFile, #postGif, #postAudio {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#new-post-form button {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Updated Embed widget styling for dark theme */
|
||||
.embed-widget {
|
||||
display: none; /* Hide by default */
|
||||
border: 1px solid #666;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
margin-top: 20px;
|
||||
background-color: #333; /* Dark background */
|
||||
color: #f1f1f1; /* Light text for contrast */
|
||||
max-width: 400px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* Input styling inside the widget for dark theme */
|
||||
.embed-widget input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 12px;
|
||||
background-color: #444; /* Dark background for inputs */
|
||||
border: 1px solid #666;
|
||||
border-radius: 4px;
|
||||
color: #f1f1f1; /* Light text */
|
||||
}
|
||||
|
||||
/* Label styling */
|
||||
.embed-widget label {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #f1f1f1; /* Light color for dark theme */
|
||||
}
|
||||
|
||||
/* Button styling for adding an external embed */
|
||||
#showEmbedButton {
|
||||
margin-top: 10px;
|
||||
padding: 10px 16px;
|
||||
font-size: 16px;
|
||||
background-color: #007acc;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
#showEmbedButton:hover {
|
||||
background-color: #005bb5;
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/* DROPDOWN */
|
||||
/* dropdown container */
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* dropdown button styling */
|
||||
.dropdown-button {
|
||||
background-color: #6b006b;
|
||||
color: #e6e6ff;
|
||||
padding: 10px 20px;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.dropdown-button:hover {
|
||||
background-color: #aa00ff;
|
||||
}
|
||||
|
||||
/* dropdown content */
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #2e003e;
|
||||
min-width: 160px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* links inside the dropdown */
|
||||
.dropdown-content a {
|
||||
color: #e6e6ff;
|
||||
padding: 10px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #1a001a;
|
||||
color: #d4b0ff;
|
||||
}
|
||||
|
||||
/* show dropdown on button click */
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
/* global styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #1a001a;
|
||||
color: #e6e6ff;
|
||||
font-family: Arial, sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.noscroll {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.convcont {
|
||||
text-align: center;
|
||||
color: #b399ff; /* light purple color for visual separation */
|
||||
margin: 8px 0; /* vertical space around the separator */
|
||||
letter-spacing: 2px; /* spacing for the dots */
|
||||
opacity: 0.9;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
|
||||
#eof {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* styling for user links, e.g., @username */
|
||||
.user-link {
|
||||
color: #d4b0ff; /* matches the light purple in your theme */
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-link:hover {
|
||||
color: #b399ff; /* a slightly darker shade on hover */
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* styling for external links */
|
||||
.external-link {
|
||||
color: #ff66ff; /* a vibrant color for external links */
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.external-link:hover {
|
||||
color: #aa00ff; /* darker shade on hover */
|
||||
text-decoration: underline;
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/* container for the loading image */
|
||||
#loading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #333; /* keep background color */
|
||||
z-index: 9999999999999999;
|
||||
}
|
||||
|
||||
/* loading image styling */
|
||||
#loading img {
|
||||
max-width: 50%;
|
||||
height: auto;
|
||||
/* responsive resizing */
|
||||
}
|
||||
|
||||
/* for small screens, adjust the loading image size */
|
||||
@media (max-width: 600px) {
|
||||
#loading img {
|
||||
max-width: 60%;
|
||||
}
|
||||
}
|
||||
+193
@@ -0,0 +1,193 @@
|
||||
.dmselpopup {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
max-width: 600px;
|
||||
padding: 20px;
|
||||
background-color: #2c2540;
|
||||
border: 1px solid #3d3452;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
|
||||
z-index: 1000;
|
||||
overflow-y: auto;
|
||||
max-height: 80vh;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.dmselpopup.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dmselpopup h2 {
|
||||
margin-top: 0;
|
||||
color: #b39ddb;
|
||||
}
|
||||
|
||||
.dm-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #3d3452;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dm-item img {
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 15px;
|
||||
border: 2px solid #6a5c96;
|
||||
}
|
||||
|
||||
.dm-item .info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dm-item .info .name {
|
||||
font-weight: bold;
|
||||
color: #e0e0ff;
|
||||
}
|
||||
|
||||
.dm-item .info .handle {
|
||||
color: #b39ddb;
|
||||
}
|
||||
|
||||
.dm-item.disabled {
|
||||
opacity: 0.5;
|
||||
color: #72678f;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
color: #e0e0ff;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #6a5c96;
|
||||
color: #e0e0ff;
|
||||
border: none;
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #836aa8;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px #9e7dc7;
|
||||
}
|
||||
|
||||
.dm-item.success {
|
||||
background-color: #2e4d2e;
|
||||
border: 1px solid #4caf50;
|
||||
color: #a5d6a7;
|
||||
}
|
||||
|
||||
.dm-item.success .info .name,
|
||||
.dm-item.success .info .handle {
|
||||
color: #a5d6a7;
|
||||
}
|
||||
|
||||
.dm-item.error {
|
||||
background-color: #4d2e2e;
|
||||
border: 1px solid #f44336;
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
.dm-item.error .info .name,
|
||||
.dm-item.error .info .handle {
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
/* message send success */
|
||||
.checkmark {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #4caf50;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.checkmark::after {
|
||||
content: '';
|
||||
width: 12px;
|
||||
height: 24px;
|
||||
border: solid white;
|
||||
border-width: 0 4px 4px 0;
|
||||
transform: rotate(45deg);
|
||||
animation: checkmark 0.3s ease-in-out forwards;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
@keyframes checkmark {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0) rotate(45deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* message send failure */
|
||||
.crossmark {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #f44336;
|
||||
/* Red background for error */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.crossmark::before,
|
||||
.crossmark::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 24px;
|
||||
height: 4px;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
animation: crossmark 0.3s ease-in-out forwards;
|
||||
}
|
||||
|
||||
/* .crossmark::before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.crossmark::after {
|
||||
transform: rotate(-45deg);
|
||||
} */
|
||||
|
||||
@keyframes crossmark {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
.profile-container {
|
||||
width: 98%;
|
||||
margin: auto;
|
||||
/* max-width: 600px; */
|
||||
background-color: #2e003e;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* banner section */
|
||||
.banner img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
/* profile content */
|
||||
.profile-content {
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #aa00ff;
|
||||
margin-top: -50px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.8em;
|
||||
margin: 10px 0;
|
||||
color: #d4b0ff;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.counts {
|
||||
margin: 15px 0;
|
||||
font-size: 0.9em;
|
||||
color: #b399ff;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #e6e6ff;
|
||||
background-color: #6b006b;
|
||||
padding: 10px 20px;
|
||||
border-radius: 5px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.link:hover {
|
||||
background-color: #aa00ff;
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
/* container for each reply and its parent post, if any */
|
||||
.reply-card-container {
|
||||
background-color: #2a002e;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 16px;
|
||||
padding: 10px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
|
||||
color: #e6e6ff;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* preview of parent post (smaller font size for less emphasis) */
|
||||
.parent-post-preview, .grandparent-post-preview {
|
||||
background-color: #3d1c3d; /* distinct color for preview */
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* reply card styling */
|
||||
.reply-card {
|
||||
background-color: #2e003e;
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* author section in reply */
|
||||
.reply-card .author-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* avatar styling */
|
||||
.reply-card .card-avatar {
|
||||
width: 35px;
|
||||
height: 35px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
border: 2px solid #aa00ff;
|
||||
}
|
||||
|
||||
/* author info */
|
||||
.reply-card .author-info .author-name {
|
||||
font-size: 0.9em;
|
||||
color: #d4b0ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* reply text */
|
||||
.reply-card .reply-text {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.3;
|
||||
color: #e6e6ff;
|
||||
margin-top: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* embedded media */
|
||||
.reply-card .media-container {
|
||||
margin-top: 8px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.reply-card .media-image {
|
||||
max-width: 80%;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #aa00ff;
|
||||
margin-top: 6px;
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/* styles for the tab buttons */
|
||||
.tab-buttons {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
background-color: #1da1f2;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.tab-buttons button {
|
||||
border: none;
|
||||
background: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.tab-buttons button.active {
|
||||
border-bottom: 3px solid white;
|
||||
}
|
||||
|
||||
/* section styling */
|
||||
.content {
|
||||
display: none;
|
||||
padding: 20px;
|
||||
background-color: #2e003e;
|
||||
}
|
||||
|
||||
.content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hide the full-screen button from videos */
|
||||
/* video::-webkit-media-controls-fullscreen-button {
|
||||
display: none;
|
||||
} */
|
||||
+195
@@ -0,0 +1,195 @@
|
||||
/* basic styles for the video container and controls */
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 640px;
|
||||
max-width: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.video-element {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 3px;
|
||||
/* background: rgba(0, 0, 0, 0.7); */
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="range"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* style for the play/pause button */
|
||||
.play-pause {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* triangle icon for "Play" */
|
||||
.play-pause.play::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 12px solid white;
|
||||
border-top: 8px solid transparent;
|
||||
border-bottom: 8px solid transparent;
|
||||
}
|
||||
|
||||
/* double bars for "Pause" */
|
||||
.play-pause.pause::before,
|
||||
.play-pause.pause::after {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
|
||||
/* fullscreen button styling */
|
||||
.fullscreen {
|
||||
font-size: 120%;
|
||||
color: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* enter fullscreen icon */
|
||||
.fullscreen.enter::before {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid white;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
/* exit fullscreen icon */
|
||||
.fullscreen.exit::before {
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 2px solid white;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.play-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-size: 50px;
|
||||
color: white;
|
||||
pointer-events: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
/* palegoldenrod */
|
||||
accent-color: rgb(170, 10, 117);
|
||||
/* background: linear-gradient(90deg, #a200ff var(--progress), #1e9e04 var(--progress));
|
||||
-webkit-appearance: none;
|
||||
border: solid 1px #82CFD0;
|
||||
border-radius: 8px;
|
||||
transition: background 450ms ease-in; */
|
||||
}
|
||||
|
||||
.video-container {
|
||||
position: relative;
|
||||
width: 640px;
|
||||
max-width: 100%;
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.video-element {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 3px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button,
|
||||
input[type="range"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.play-pause {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fullscreen {
|
||||
font-size: 120%;
|
||||
color: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.volume-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.volume-button {
|
||||
font-size: 18px;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
|
||||
/* zoom container styles */
|
||||
.zoom-container {
|
||||
top: 5vh;
|
||||
position: fixed;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
max-height: 90vh;
|
||||
max-width: 90vw;
|
||||
cursor: pointer;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
/* initial image styling */
|
||||
.zoom-video, .zoom-image {
|
||||
max-height: 88vh;
|
||||
max-width: 88vw;
|
||||
transition: transform 0.5s ease, opacity 0.3s ease;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
border: solid 2px lightblue;
|
||||
}
|
||||
|
||||
/* styles for full-screen zoomed view */
|
||||
.zoom-container.zoomed .zoom-image, .zoom-container.zoomed .zoom-video {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
left: 0;
|
||||
width: auto;
|
||||
border-radius: 0; /* remove rounded corners when zoomed */
|
||||
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6); /* shadow for zoom effect */
|
||||
z-index: 999999999;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
/* darken background when image is zoomed */
|
||||
.zoom-container.zoomed::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
/* width: 100vw;
|
||||
height: 100vh; */
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 999;
|
||||
transition: opacity 0.3s ease;
|
||||
opacity: 1;
|
||||
transform: scale(0.85);
|
||||
}
|
||||
|
||||
.overlay {
|
||||
background-color: rgba(0, 0, 0, 0.336);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
Reference in New Issue
Block a user