Andromeda/jank-client-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

link style, focus style, message overflow fix

Browse source 
also background-color -> background standardization
red and green are variables now
This commit is contained in:
ygg2 2024-07-20 17:12:02 -04:00
parent d9a0350155
commit 5ed0d924ee
2 changed files with 73 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

107
webpage/style.css
View file

@ -33,7 +33,7 @@ video{
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: var(--dialog-bg); background: var(--dialog-bg);
z-index: 12; z-index: 12;
} }
@ -63,7 +63,7 @@ th {
} }
.messagediv:hover { .messagediv:hover {
background-color: var(--message-bg-hover); background: var(--message-bg-hover);
} }
.messagediv{ .messagediv{
overflow: hidden; overflow: hidden;
@ -77,9 +77,10 @@ th {
padding:.02in .2in; padding:.02in .2in;
flex-shrink: 0; flex-shrink: 0;
width: 100%; width: 100%;
box-sizing: border-box;
} }
pre { pre {
background-color: var(--code-bg); background: var(--code-bg);
color: var(--code-text); color: var(--code-text);
width: 100%; width: 100%;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -89,13 +90,13 @@ pre {
} }
samp { samp {
background-color: var(--code-bg); background: var(--code-bg);
color: var(--code-text); color: var(--code-text);
} }
.contextbutton { .contextbutton {
transition: background .1s ease-in-out; transition: background .1s ease-in-out;
background-color: var(--channels-bg); background: var(--channels-bg);
color: var(--primary-text); color: var(--primary-text);
font-weight: bold; font-weight: bold;
width: 5cm; width: 5cm;
@ -114,12 +115,12 @@ samp {
border-width:0px; border-width:0px;
} }
.contextbutton:disabled:hover{ .contextbutton:disabled:hover{
background-color: var(--channels-bg); background: var(--channels-bg);
} }
.infosection { .infosection {
display: inline-block; display: inline-block;
background-color: var(--profile-info-bg); background: var(--profile-info-bg);
border-radius: 10%; border-radius: 10%;
padding: .3cm; padding: .3cm;
width: 100%; width: 100%;
@ -131,7 +132,7 @@ samp {
.profile { .profile {
display: inline-block; display: inline-block;
position: absolute; position: absolute;
background-color: var(--profile-bg); background: var(--profile-bg);
border-radius: 10%; border-radius: 10%;
padding: .2cm; padding: .2cm;
width: 7cm; width: 7cm;
@ -140,7 +141,7 @@ samp {
.hypoprofile { .hypoprofile {
display: inline-block; display: inline-block;
background-color: var(--profile-bg); background: var(--profile-bg);
border-radius: 10%; border-radius: 10%;
padding: .2cm; padding: .2cm;
width: 7cm; width: 7cm;
@ -185,7 +186,7 @@ h2 {
.contextmenu { .contextmenu {
position: absolute; position: absolute;
background-color: var(--profile-info-bg); background: var(--profile-info-bg);
border-radius: .05in; border-radius: .05in;
} }
@ -211,7 +212,7 @@ h2 {
border-radius: 50%; border-radius: 50%;
width: .5in; width: .5in;
height: .5in; height: .5in;
background-color: var(--blank-bg); background: var(--blank-bg);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -275,6 +276,15 @@ p {
padding-bottom: 0; padding-bottom: 0;
} }
a {
color: var(--link);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
#channels { #channels {
background: var(--channels-bg); background: var(--channels-bg);
top: var(--top-height); top: var(--top-height);
@ -312,7 +322,7 @@ p {
} }
input { input {
background-color: var(--message-bg-hover); background: var(--message-bg-hover);
color: var(--primary-text); color: var(--primary-text);
height: .4in; height: .4in;
width: 97.5%; width: 97.5%;
@ -327,7 +337,7 @@ div {
} }
.md-timestamp { .md-timestamp {
background-color: var(--markdown-timestamp); background: var(--markdown-timestamp);
} }
#typebox { #typebox {
@ -359,27 +369,27 @@ p {
} }
.spoiler { .spoiler {
background-color: var(--black); background: var(--black);
color: var(--black); color: var(--black);
} }
.spoiler:hover { .spoiler:hover {
background-color: var(--spoiler-hover); background: var(--spoiler-hover);
color: var(--spoiler-hover); color: var(--spoiler-hover);
} }
.unspoiled { .unspoiled {
background-color: var(--spoiler-open-bg); background: var(--spoiler-open-bg);
color: var(--primary-text); color: var(--primary-text);
} }
.unspoiled:before { .unspoiled:before {
background-color: var(--black); background: var(--black);
background-clip: content-box; background-clip: content-box;
} }
.replying { .replying {
background-color: var(--reply-bg); background: var(--reply-bg);
} }
#typing { #typing {
@ -387,7 +397,7 @@ p {
position: absolute; position: absolute;
top: 0; top: 0;
right: 4px; right: 4px;
background-color: var(--typing-bg); background: var(--typing-bg);
width: fit-content; width: fit-content;
transform: translateY(-100%); transform: translateY(-100%);
border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;
@ -458,7 +468,7 @@ hr {
.lightbr { .lightbr {
border-color: var(--light-border); border-color: var(--light-border);
color: var(--black); color: var(--black);
background-color: var(--black); background: var(--black);
width: 80%; width: 80%;
} }
@ -466,7 +476,7 @@ hr {
border-radius: 50%; border-radius: 50%;
width: .5in; width: .5in;
height: .5in; height: .5in;
background-color: var(--blank-bg); background: var(--blank-bg);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -478,7 +488,7 @@ hr {
border-radius: 50%; border-radius: 50%;
width: .5in; width: .5in;
height: .5in; height: .5in;
background-color: var(--blank-bg); background: var(--blank-bg);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -588,11 +598,11 @@ hr {
} }
::-webkit-scrollbar-track:hover { ::-webkit-scrollbar-track:hover {
background-color: var(--scrollbar-track); background: var(--scrollbar-track);
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb); background: var(--scrollbar-thumb);
border-radius: .08in; border-radius: .08in;
border: .03in solid transparent; border: .03in solid transparent;
background-clip: padding-box; background-clip: padding-box;
@ -600,7 +610,7 @@ hr {
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-thumb-hover); background: var(--scrollbar-thumb-hover);
} }
.pronouns { .pronouns {
@ -617,6 +627,10 @@ textarea {
font-size: 1rem; font-size: 1rem;
} }
textarea:focus-visible {
outline: 2px solid var(--focus);
}
.channels { .channels {
overflow: auto; overflow: auto;
transition: height .2s ease-in-out; transition: height .2s ease-in-out;
@ -625,7 +639,7 @@ textarea {
} }
.channel:hover { .channel:hover {
background-color: var(--channel-hover); background: var(--channel-hover);
} }
.channel { .channel {
@ -667,7 +681,7 @@ textarea {
width: 100%; width: 100%;
} }
.channeleffects:hover { .channeleffects:hover {
background-color: var(--channel-hover); background: var(--channel-hover);
} }
.dm-container { .dm-container {
@ -696,7 +710,7 @@ textarea {
} }
#userdock { #userdock {
background-color: var(--user-dock-bg); background: var(--user-dock-bg);
width: 2.5in; width: 2.5in;
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
@ -730,14 +744,14 @@ textarea {
} }
#settings:hover { #settings:hover {
background-color: var(--settings-hover); background: var(--settings-hover);
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
} }
#userinfo { #userinfo {
position:relative; position:relative;
background-color: var(--user-info-bg); background: var(--user-info-bg);
border-radius: .1in; border-radius: .1in;
cursor: pointer; cursor: pointer;
flex-shrink: 0; flex-shrink: 0;
@ -751,7 +765,7 @@ textarea {
button { button {
transition: background .1s ease-in-out; transition: background .1s ease-in-out;
background-color: var(--message-bg-hover); background: var(--message-bg-hover);
color: var(--primary-text); color: var(--primary-text);
border-color:var(--timestamp-color); border-color:var(--timestamp-color);
font-weight: bold; font-weight: bold;
@ -772,7 +786,7 @@ button:disabled{
border-width:0px; border-width:0px;
} }
button:disabled:hover{ button:disabled:hover{
background-color: var(--message-bg-hover); background: var(--message-bg-hover);
border-color:var(--timestamp-color); border-color:var(--timestamp-color);
color: var(--primary-text); color: var(--primary-text);
} }
@ -781,7 +795,7 @@ button:hover {
} }
input::file-selector-button { input::file-selector-button {
transition: background .1s ease-in-out; transition: background .1s ease-in-out;
background-color: var(--message-bg-hover); background: var(--message-bg-hover);
border-color:var(--timestamp-color); border-color:var(--timestamp-color);
color: var(--primary-text); color: var(--primary-text);
font-weight: bold; font-weight: bold;
@ -798,7 +812,7 @@ input[type="file"] {
} }
select{ select{
transition: background .1s ease-in-out; transition: background .1s ease-in-out;
background-color: var(--message-bg-hover); background: var(--message-bg-hover);
color: var(--primary-text); color: var(--primary-text);
font-weight: bold; font-weight: bold;
text-align: left; text-align: left;
@ -816,7 +830,7 @@ select{
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background-color: var(--dialog-bg); background: var(--dialog-bg);
min-width: max(min(70%, calc(50% + .5in)), min(3in, 100%)); min-width: max(min(70%, calc(50% + .5in)), min(3in, 100%));
min-height: 70%; min-height: 70%;
border-radius: .1in; border-radius: .1in;
@ -848,7 +862,7 @@ select{
} }
.addchannel:hover { .addchannel:hover {
background-color: var(--black); background: var(--black);
} }
.capsflex { .capsflex {
@ -884,7 +898,7 @@ input[type="checkbox"] {
width: .02in; width: .02in;
height: 100%; height: 100%;
position: absolute; position: absolute;
background-color: var(--quote-bg); background: var(--quote-bg);
} }
.quote > span { .quote > span {
@ -905,7 +919,7 @@ span {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: var(--loading-bg); background: var(--loading-bg);
z-index: 100; z-index: 100;
text-align: center; text-align: center;
transition: transform .2s; transition: transform .2s;
@ -924,7 +938,7 @@ span {
} }
.unknownfile { .unknownfile {
background-color: var(--unknown-file-bg); background: var(--unknown-file-bg);
border-style: solid; border-style: solid;
border-radius: .1in; border-radius: .1in;
border-color: var(--unknown-file-border); border-color: var(--unknown-file-border);
@ -945,7 +959,7 @@ span {
.unread { .unread {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
position: absolute; position: absolute;
background-color: var(--primary-text); background: var(--primary-text);
height: .075in; height: .075in;
width: .075in; width: .075in;
transition: transform .2s, background .2s, height .3s, width .2s; transition: transform .2s, background .2s, height .3s, width .2s;
@ -971,7 +985,7 @@ span {
.pinged { .pinged {
aspect-ratio: 1 / 1; aspect-ratio: 1 / 1;
transform: translate(0, .4in); transform: translate(0, .4in);
background-color: var(--mention-bg); background: var(--mention-bg);
height: .15in; height: .15in;
width: .15in; width: .15in;
text-align: center; text-align: center;
@ -1098,7 +1112,6 @@ span {
.embed a{ .embed a{
margin-bottom:.1in; margin-bottom:.1in;
display: block; display: block;
text-decoration:none;
font-size:.2in; font-size:.2in;
} }
.provider{ .provider{
@ -1169,7 +1182,7 @@ span {
} }
.cancelReply{ .cancelReply{
align-self:flex-start; align-self:flex-start;
color:red; color:var(--red);
height: auto; height: auto;
width: .25in; width: .25in;
text-align: center; text-align: center;
@ -1259,10 +1272,10 @@ span {
margin:.015in; margin:.015in;
} }
:first-child{ :first-child{
accent-color:green; accent-color:var(--green);
} }
:last-child{ :last-child{
accent-color:red; accent-color:var(--red);
} }
} }
@ -1306,7 +1319,7 @@ span {
width:5in; width:5in;
height:.5in; height:.5in;
button{ button{
background:green; background:var(--green);
} }
} }
@ -1322,7 +1335,7 @@ span {
.discovery-guild { .discovery-guild {
margin: 5px; margin: 5px;
padding: 5px; padding: 5px;
background-color: var(--discovery-bg); background: var(--discovery-bg);
border-radius: 5px; border-radius: 5px;
box-shadow: 1px 1px 7px var(--primary-text); box-shadow: 1px 1px 7px var(--primary-text);
overflow: hidden; overflow: hidden;

13
webpage/themes.css
View file

@ -1,6 +1,8 @@
:root { :root {
--servertd-height: 0px; --servertd-height: 0px;
/* Default value */ /* Default value */
--red: red;
--green: green;
} }
.Dark-theme { /* thanks to TomatoCake for the updated CSS vars and such*/ .Dark-theme { /* thanks to TomatoCake for the updated CSS vars and such*/
color-scheme: dark; color-scheme: dark;
@ -8,6 +10,7 @@
--primary-bg: #282832; --primary-bg: #282832;
--black: #000; --black: #000;
--shadow: #000; --shadow: #000;
--focus: #8888ff;
--message-bg-hover: #1e1e28; --message-bg-hover: #1e1e28;
--typing-bg: #161616; --typing-bg: #161616;
--timestamp-color: #a2a2a2; --timestamp-color: #a2a2a2;
@ -21,6 +24,7 @@
--settings-hover: #0e0d10; --settings-hover: #0e0d10;
--quote-bg: #7a798e; --quote-bg: #7a798e;
--button-bg: #1b1b28; --button-bg: #1b1b28;
--button-hover: #282832;
--textarea-bg: #26272c; --textarea-bg: #26272c;
--filename: #47bbff; --filename: #47bbff;
--mention-bg: #F00; --mention-bg: #F00;
@ -45,6 +49,7 @@
--scrollbar-thumb-hover: #a2a2a2; --scrollbar-thumb-hover: #a2a2a2;
--markdown-timestamp: #2f2f33; --markdown-timestamp: #2f2f33;
--embed: #1a1823; --embed: #1a1823;
--link: #8888ff;
--discovery-bg: #37373b; --discovery-bg: #37373b;
} }
.WHITE-theme { .WHITE-theme {
@ -52,7 +57,10 @@
--primary-text: #000; --primary-text: #000;
--primary-bg: #FFF; --primary-bg: #FFF;
--black: #FFF; --black: #FFF;
--red: #dd6c6c;
--green: #639d63;
--shadow: #777; --shadow: #777;
--focus: #47bbff;
--message-bg-hover: #dedee2; --message-bg-hover: #dedee2;
--typing-bg: #dad8d8; --typing-bg: #dad8d8;
--timestamp-color: #929297; --timestamp-color: #929297;
@ -66,6 +74,7 @@
--settings-hover: #b5b1bb; --settings-hover: #b5b1bb;
--quote-bg: #7a798e; --quote-bg: #7a798e;
--button-bg: #b7b7cc; --button-bg: #b7b7cc;
--button-hover: #FFF;
--textarea-bg: #b1b6ce; --textarea-bg: #b1b6ce;
--filename: #47bbff; --filename: #47bbff;
--mention-bg: #F00; --mention-bg: #F00;
@ -90,6 +99,7 @@
--scrollbar-thumb-hover: #a5a5b8; --scrollbar-thumb-hover: #a5a5b8;
--markdown-timestamp: #c8c8da; --markdown-timestamp: #c8c8da;
--embed: #f2f3f5; --embed: #f2f3f5;
--link: #3333ee;
--discovery-bg: #c6c6d8; --discovery-bg: #c6c6d8;
} }
.Light-theme { .Light-theme {
@ -99,6 +109,7 @@
--primary-bg: #8e90c3; --primary-bg: #8e90c3;
--black: #fff; --black: #fff;
--shadow: #000; --shadow: #000;
--focus: #5e50c5;
--message-bg-hover: #5757b5; --message-bg-hover: #5757b5;
--typing-bg: #000000; --typing-bg: #000000;
@ -116,6 +127,7 @@
--settings-hover: #b5b1bb; --settings-hover: #b5b1bb;
--quote-bg: #7a798e; --quote-bg: #7a798e;
--button-bg: #96969e; --button-bg: #96969e;
--button-hover: #8e90c3;
--textarea-bg: #abb1cd; --textarea-bg: #abb1cd;
--filename: #47bbff; --filename: #47bbff;
--mention-bg: #F00; --mention-bg: #F00;
@ -145,5 +157,6 @@
--scrollbar-thumb-hover: #a7a7be; --scrollbar-thumb-hover: #a7a7be;
--markdown-timestamp: #c8c8da; --markdown-timestamp: #c8c8da;
--embed: #cdccd1; --embed: #cdccd1;
--link: #5566cc;
--discovery-bg: #c6c6d8; --discovery-bg: #c6c6d8;
} }