From 96162177e0c4a5f0289477b1f59ee218773a2e8e Mon Sep 17 00:00:00 2001 From: ygg2 Date: Wed, 10 Jul 2024 12:40:13 -0400 Subject: [PATCH 01/14] add padding around messages --- webpage/style.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index b92af19..c5eb455 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -74,6 +74,7 @@ th { flex-wrap: nowrap; flex-direction: column; max-height: 20in; + padding:.02in .2in; } pre { background-color: var(--code-bg); @@ -1009,6 +1010,7 @@ span { font-size:.2in; font-weight:bold; display: flex; + padding-left:.2in; } #mobileback{ /* display:inline-block; */ @@ -1337,9 +1339,10 @@ span { height:.4in; } .topMessage{ - padding-top:.1in + padding-top:.03in; + margin-top:.1in; } -.messagediv .flexltr{ +.messagediv .flexltr{ display:flex; flex-wrap:wrap; overflow:hidden !important; From 4f1b080cfed3ca533c5c9e28b87ad5a7b075efda Mon Sep 17 00:00:00 2001 From: ygg2 Date: Wed, 10 Jul 2024 12:48:27 -0400 Subject: [PATCH 02/14] fix overflow on right --- webpage/style.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index c5eb455..283419b 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -334,9 +334,9 @@ div { width: 100%; height: .5in; z-index: -100; - max-width: 99%; display: flex; max-height: fit-content; + box-sizing: border-box; } p { @@ -395,7 +395,7 @@ p { #typediv { position: relative; /* display: flex; */ - width: 99%; + width: 100%; } .loading-indicator { @@ -639,6 +639,7 @@ textarea { flex-direction: column; justify-content: space-evenly; flex-shrink: 0; + box-sizing: border-box; } .channeleffects { @@ -1355,4 +1356,4 @@ span { width: 100%; flex-direction: row; max-height:100in; -} \ No newline at end of file +} From ebc226d97a99f872bc66aeb958ec9804d403bc6f Mon Sep 17 00:00:00 2001 From: ygg2 Date: Wed, 10 Jul 2024 13:01:28 -0400 Subject: [PATCH 03/14] smaller date/reply/status --- webpage/style.css | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index 283419b..5d08519 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -490,11 +490,14 @@ p { .timestamp { color: var(--timestamp-color); - font-size: .14in; + font-size: 0.7rem; + line-height: 1.3rem; padding-left: .05in; } .replyflex { + color: var(--reply-text); /* for date line */ + font-size: 0.9rem; overflow: hidden; display: flex; align-items: center; @@ -521,7 +524,7 @@ p { vertical-align: middle; width: 25px; border-color: var(--reply-border); - margin-left: 26px; + margin-left: .2in; } .replypfp { @@ -1258,6 +1261,9 @@ span { flex-direction: column; justify-content: center; } +#status { + font-size: 0.9em; +} .savediv{ position:absolute; background:var(--message-bg-hover); From d3d3322230364e822c235d72515cf78c3582629e Mon Sep 17 00:00:00 2001 From: ygg2 Date: Wed, 10 Jul 2024 15:44:02 -0400 Subject: [PATCH 04/14] fix serverName and standardize some margin --- webpage/style.css | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index 5d08519..d32c159 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -282,10 +282,6 @@ p { /* height: 100%; */ } -#userdock { - height: .5in; -} - #channels p { text-indent: 10px; } @@ -332,7 +328,7 @@ div { padding: 3px; border-radius: .25cm; width: 100%; - height: .5in; + height: .6in; z-index: -100; display: flex; max-height: fit-content; @@ -621,10 +617,8 @@ textarea { font-weight:900; background: color-mix(in srgb, var(--channel-hover) 60%, transparent) } -#servername { - margin-top: .1in; - margin-bottom: .1in; - padding-left: 5px; +#serverName { + padding-left: 0.1in; text-overflow: ellipsis; overflow-x: hidden; white-space: nowrap; @@ -634,9 +628,9 @@ textarea { .servertd { background-color: var(--server-bg); border-color: var(--server-border); - border-width: .1cm; + border-width: .04in; border-style: solid; - height: .4in; + height: .48in; width:100%; display: flex; flex-direction: column; @@ -686,13 +680,12 @@ textarea { width: 2.5in; position: relative; flex-shrink: 0; - height: .6in; display: flex; align-content: stretch; /* flex-direction: row; */ justify-content: space-between; align-items: center; - padding-top: .02in; + padding: .04in; } #channels-td { @@ -1260,9 +1253,10 @@ span { display:flex; flex-direction: column; justify-content: center; + padding-left: 0.1in; } #status { - font-size: 0.9em; + font-size: 0.8em; } .savediv{ position:absolute; From 5959059c5531c972b1d513004ad0ebd11e91fb4b Mon Sep 17 00:00:00 2001 From: ygg2 Date: Thu, 11 Jul 2024 03:57:42 -0400 Subject: [PATCH 05/14] hideReplyBox for real --- webpage/style.css | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index d32c159..d848ae0 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -1147,9 +1147,8 @@ span { text-align: center; padding: 0in; } -#replybox.hideReplyBox{ - height: 0in; - padding: 0in; +#replybox.hideReplyBox { + display: none; } .Buttons{ background:var(--primary-bg); From 7512fe3126ea1f79cea913f91c5fd502babe25e4 Mon Sep 17 00:00:00 2001 From: ygg2 Date: Thu, 11 Jul 2024 07:06:06 -0400 Subject: [PATCH 06/14] theme updates -allow gradient/picture for primary and channels bg -add code-text color, servers-bg color (server sidebar), shadow -adjust timestamp size --- webpage/style.css | 13 ++++++++----- webpage/themes.css | 3 +++ 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index d848ae0..734c41b 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -1,7 +1,7 @@ body { font-family: "acumin-pro", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; - background-color: var(--primary-bg); + background: var(--primary-bg); color: var(--primary-text); overflow-y: hidden; overflow-x: hidden; @@ -78,6 +78,7 @@ th { } pre { background-color: var(--code-bg); + color: var(--code-text); width: 100%; overflow-wrap: break-word; word-wrap: break-word; @@ -87,6 +88,7 @@ pre { samp { background-color: var(--code-bg); + color: var(--code-text); } .contextbutton { @@ -194,6 +196,7 @@ h2 { height: 100dvh; overflow-x: hidden; padding: 0.02in .05in 0.0in .05in; + background: var(--servers-bg); } #servers::-webkit-scrollbar { @@ -269,7 +272,7 @@ p { } #channels { - background-color: var(--channels-bg); + background: var(--channels-bg); top: var(--top-height); overflow: auto; user-select: none; @@ -486,7 +489,7 @@ p { .timestamp { color: var(--timestamp-color); - font-size: 0.7rem; + font-size: 0.75rem; line-height: 1.3rem; padding-left: .05in; } @@ -626,7 +629,7 @@ textarea { } .servertd { - background-color: var(--server-bg); + background: var(--server-bg); border-color: var(--server-border); border-width: .04in; border-style: solid; @@ -971,7 +974,7 @@ span { .accountSwitcher{ background:var(--profile-bg); cursor:pointer; - box-shadow: .00in -.5in 1in #0000006b; + box-shadow: .00in -.5in 1in color-mix(in srgb, var(--shadow) 42%, transparent); border-radius: .05in .05in .0in.0in; flex-grow: 0; align-self: center; diff --git a/webpage/themes.css b/webpage/themes.css index 448e3db..0357156 100644 --- a/webpage/themes.css +++ b/webpage/themes.css @@ -7,6 +7,7 @@ --primary-text: #FFF; --primary-bg: #282832; --black: #000; + --shadow: #000; --message-bg-hover: #1e1e28; --typing-bg: #161616; --timestamp-color: #a2a2a2; @@ -51,6 +52,7 @@ --primary-text: #000; --primary-bg: #FFF; --black: #FFF; + --shadow: #777; --message-bg-hover: #dedee2; --typing-bg: #dad8d8; --timestamp-color: #929297; @@ -96,6 +98,7 @@ --primary-text: #000; --primary-bg: #8e90c3; --black: #fff; + --shadow: #000; --message-bg-hover: #5757b5; --typing-bg: #000000; From f78b6dceae0b85144bb55af1d361f44db946cb5d Mon Sep 17 00:00:00 2001 From: ygg2 Date: Thu, 11 Jul 2024 08:19:59 -0400 Subject: [PATCH 07/14] adjust quote so lines merge on multiline --- webpage/style.css | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index 734c41b..a84c772 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -857,18 +857,22 @@ input[type="checkbox"] { .quote { display: inline-block; - width: fit-content; + position: relative; } .quoteline { - display: inline-block; width: .02in; - height: .15in; - margin-left: .02in; - margin-right: .04in; + height: 100%; + position: absolute; background-color: var(--quote-bg); } +.quote > span { + margin-left: 0.5em; + display: flex; + align-items: center; +} + span { word-wrap: break-word; word-break: break-word; From 1b502cb694630e49d867d9aa03757357b3ea8b00 Mon Sep 17 00:00:00 2001 From: ygg2 Date: Thu, 11 Jul 2024 12:42:43 -0400 Subject: [PATCH 08/14] standardize line styles also textarea can be gradient now --- webpage/style.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/webpage/style.css b/webpage/style.css index a84c772..5b1e28b 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -444,6 +444,12 @@ p { } } +hr { + border-style: solid; + border-width: .01in; + border-color: var(--primary-text); +} + .lightbr { border-color: var(--light-border); color: var(--black); @@ -593,7 +599,7 @@ p { } textarea { - background-color: var(--textarea-bg); + background: var(--textarea-bg); color: var(--primary-text); width: 3.5in; resize: none; @@ -741,6 +747,7 @@ button { text-align: left; font-size: .45cm; cursor: pointer; + border-style: solid; border-width: 0px .00in .03in 0in; border-radius:.03in; margin: .02in .05in; @@ -770,6 +777,7 @@ input::file-selector-button { text-align: left; font-size: .45cm; cursor: pointer; + border-style: solid; border-width: 0px .00in .03in 0; border-radius:.03in; margin: .02in .05in; From 5ddf8a5b870c628b4b25b7fb0390b74cdd299409 Mon Sep 17 00:00:00 2001 From: ygg2 Date: Thu, 11 Jul 2024 17:15:43 -0400 Subject: [PATCH 09/14] fix reply popup --- webpage/style.css | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index 5b1e28b..d58cf0c 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -176,7 +176,7 @@ h2 { border-radius: 30%; } .contextbutton:hover { - background-color: var(--primary-bg); + background: var(--primary-bg); } .contextmenu { @@ -766,7 +766,7 @@ button:disabled:hover{ color: var(--primary-text); } button:hover { - background-color: var(--primary-bg); + background: var(--primary-bg); } input::file-selector-button { transition: background .1s ease-in-out; @@ -1141,29 +1141,31 @@ span { #replybox{ display:flex; background:var(--reply-bg); - height:.25in; + width: 100%; + height:.3in; transition: height .2s, padding .2s; border-radius:.1in .1in 0 0; padding-left:.05in; justify-content: space-between; flex-direction: row; align-items: flex-end; - padding-top: .05in; + padding: 0 .05in; + box-sizing: border-box; } #replybox span{ - align-self:stretch; + align-self: center; } .cancelReply{ align-self:flex-start; color:red; - margin-right: .1in; height: .25in; width: .25in; text-align: center; padding: 0in; + border: none; } #replybox.hideReplyBox { - display: none; + height: 0; } .Buttons{ background:var(--primary-bg); From de637c897677ecc5916552de9ebea52df37c0f2b Mon Sep 17 00:00:00 2001 From: ygg2 Date: Thu, 11 Jul 2024 18:52:29 -0400 Subject: [PATCH 10/14] fix some alignment and standardize font size -alignment of profile box, unread noti -removed replybox contents when hidden -webkit select style removed --- webpage/style.css | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index d58cf0c..e635d7e 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -120,8 +120,10 @@ samp { background-color: var(--profile-info-bg); border-radius: 10%; padding: .3cm; - width: calc(100% - .6cm); - height: calc(100% - .75in); + width: 100%; + height: calc(100% - .5in - .2cm); + margin-top: .1cm; + box-sizing: border-box; } .profile { @@ -315,6 +317,7 @@ input { border-color: var(--settings-hover); border-width:0 0 .04in 0; border-radius:.05in; + font-size: 1rem; } div { @@ -604,6 +607,7 @@ textarea { width: 3.5in; resize: none; height: 1.5in; + font-size: 1rem; } .channels { @@ -798,6 +802,7 @@ select{ border-color:var(--timestamp-color); margin: .02in .05in; box-shadow: 0px 0px .03in var(--black); + -webkit-appearance: none; } #logindiv { position: absolute; @@ -937,7 +942,7 @@ span { height: .075in; width: .075in; transition: transform .2s, background .2s, height .3s, width .2s; - transform: translate(-.14in, .2in); + transform: translate(-.16in, .2in); z-index: 10; border-radius: .2in; border: solid; @@ -1158,7 +1163,7 @@ span { .cancelReply{ align-self:flex-start; color:red; - height: .25in; + height: auto; width: .25in; text-align: center; padding: 0in; @@ -1167,6 +1172,9 @@ span { #replybox.hideReplyBox { height: 0; } +#replybox.hideReplyBox span, #replybox.hideReplyBox button { + display: none; +} .Buttons{ background:var(--primary-bg); position: relative; From fc4836c042388e65801ed24c4772d8572528b49a Mon Sep 17 00:00:00 2001 From: ygg2 Date: Fri, 12 Jul 2024 06:21:03 -0400 Subject: [PATCH 11/14] scrollbar style --- webpage/style.css | 11 ++++++++--- webpage/themes.css | 7 ++++--- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index e635d7e..0a0f3a6 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -577,23 +577,28 @@ hr { grid-column: 2; } ::-webkit-scrollbar { - width: .1in; + width: .16in; height: .1in; } ::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar-track:hover { background-color: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); - box-shadow: 0 2px 5px var(--black); + border-radius: .08in; + border: .03in solid transparent; + background-clip: padding-box; transition: .1s; } ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); - box-shadow: 0 2px 5px var(--black); } .pronouns { diff --git a/webpage/themes.css b/webpage/themes.css index 0357156..4e27540 100644 --- a/webpage/themes.css +++ b/webpage/themes.css @@ -40,9 +40,9 @@ --loading-bg: #22232c; --dialog-bg: #33363d; --dialog-border: #1c1b31; - --scrollbar-track: #34313c; - --scrollbar-thumb: #201f29; - --scrollbar-thumb-hover: #16161f; + --scrollbar-track: #37373b; + --scrollbar-thumb: #92929B; + --scrollbar-thumb-hover: #a2a2a2; --markdown-timestamp: #2f2f33; --embed: #1a1823; --discovery-bg: #37373b; @@ -103,6 +103,7 @@ --message-bg-hover: #5757b5; --typing-bg: #000000; --profile-bg: #8075bf; + --profile-info-bg: #8075bf; --timestamp-color: #000000; --code-bg: #a89adf; --info-bg: #6060a3; From 5ed0d924eeecb6aa0b325998e5d5de54833c8da9 Mon Sep 17 00:00:00 2001 From: ygg2 Date: Sat, 20 Jul 2024 17:12:02 -0400 Subject: [PATCH 12/14] link style, focus style, message overflow fix also background-color -> background standardization red and green are variables now --- webpage/style.css | 107 +++++++++++++++++++++++++-------------------- webpage/themes.css | 13 ++++++ 2 files changed, 73 insertions(+), 47 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index 57521b2..043f0aa 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -33,7 +33,7 @@ video{ top: 50%; left: 50%; transform: translate(-50%, -50%); - background-color: var(--dialog-bg); + background: var(--dialog-bg); z-index: 12; } @@ -63,7 +63,7 @@ th { } .messagediv:hover { - background-color: var(--message-bg-hover); + background: var(--message-bg-hover); } .messagediv{ overflow: hidden; @@ -77,9 +77,10 @@ th { padding:.02in .2in; flex-shrink: 0; width: 100%; + box-sizing: border-box; } pre { - background-color: var(--code-bg); + background: var(--code-bg); color: var(--code-text); width: 100%; overflow-wrap: break-word; @@ -89,13 +90,13 @@ pre { } samp { - background-color: var(--code-bg); + background: var(--code-bg); color: var(--code-text); } .contextbutton { transition: background .1s ease-in-out; - background-color: var(--channels-bg); + background: var(--channels-bg); color: var(--primary-text); font-weight: bold; width: 5cm; @@ -114,12 +115,12 @@ samp { border-width:0px; } .contextbutton:disabled:hover{ - background-color: var(--channels-bg); + background: var(--channels-bg); } .infosection { display: inline-block; - background-color: var(--profile-info-bg); + background: var(--profile-info-bg); border-radius: 10%; padding: .3cm; width: 100%; @@ -131,7 +132,7 @@ samp { .profile { display: inline-block; position: absolute; - background-color: var(--profile-bg); + background: var(--profile-bg); border-radius: 10%; padding: .2cm; width: 7cm; @@ -140,7 +141,7 @@ samp { .hypoprofile { display: inline-block; - background-color: var(--profile-bg); + background: var(--profile-bg); border-radius: 10%; padding: .2cm; width: 7cm; @@ -185,7 +186,7 @@ h2 { .contextmenu { position: absolute; - background-color: var(--profile-info-bg); + background: var(--profile-info-bg); border-radius: .05in; } @@ -211,7 +212,7 @@ h2 { border-radius: 50%; width: .5in; height: .5in; - background-color: var(--blank-bg); + background: var(--blank-bg); display: flex; justify-content: center; align-items: center; @@ -275,6 +276,15 @@ p { padding-bottom: 0; } +a { + color: var(--link); + text-decoration: none; +} + +a:hover { + text-decoration: underline; +} + #channels { background: var(--channels-bg); top: var(--top-height); @@ -312,7 +322,7 @@ p { } input { - background-color: var(--message-bg-hover); + background: var(--message-bg-hover); color: var(--primary-text); height: .4in; width: 97.5%; @@ -327,7 +337,7 @@ div { } .md-timestamp { - background-color: var(--markdown-timestamp); + background: var(--markdown-timestamp); } #typebox { @@ -359,27 +369,27 @@ p { } .spoiler { - background-color: var(--black); + background: var(--black); color: var(--black); } .spoiler:hover { - background-color: var(--spoiler-hover); + background: var(--spoiler-hover); color: var(--spoiler-hover); } .unspoiled { - background-color: var(--spoiler-open-bg); + background: var(--spoiler-open-bg); color: var(--primary-text); } .unspoiled:before { - background-color: var(--black); + background: var(--black); background-clip: content-box; } .replying { - background-color: var(--reply-bg); + background: var(--reply-bg); } #typing { @@ -387,7 +397,7 @@ p { position: absolute; top: 0; right: 4px; - background-color: var(--typing-bg); + background: var(--typing-bg); width: fit-content; transform: translateY(-100%); border-radius: 5px 5px 0 0; @@ -458,7 +468,7 @@ hr { .lightbr { border-color: var(--light-border); color: var(--black); - background-color: var(--black); + background: var(--black); width: 80%; } @@ -466,7 +476,7 @@ hr { border-radius: 50%; width: .5in; height: .5in; - background-color: var(--blank-bg); + background: var(--blank-bg); display: flex; justify-content: center; align-items: center; @@ -478,7 +488,7 @@ hr { border-radius: 50%; width: .5in; height: .5in; - background-color: var(--blank-bg); + background: var(--blank-bg); display: flex; justify-content: center; align-items: center; @@ -588,11 +598,11 @@ hr { } ::-webkit-scrollbar-track:hover { - background-color: var(--scrollbar-track); + background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb); + background: var(--scrollbar-thumb); border-radius: .08in; border: .03in solid transparent; background-clip: padding-box; @@ -600,7 +610,7 @@ hr { } ::-webkit-scrollbar-thumb:hover { - background-color: var(--scrollbar-thumb-hover); + background: var(--scrollbar-thumb-hover); } .pronouns { @@ -617,6 +627,10 @@ textarea { font-size: 1rem; } +textarea:focus-visible { + outline: 2px solid var(--focus); +} + .channels { overflow: auto; transition: height .2s ease-in-out; @@ -625,7 +639,7 @@ textarea { } .channel:hover { - background-color: var(--channel-hover); + background: var(--channel-hover); } .channel { @@ -667,7 +681,7 @@ textarea { width: 100%; } .channeleffects:hover { - background-color: var(--channel-hover); + background: var(--channel-hover); } .dm-container { @@ -696,7 +710,7 @@ textarea { } #userdock { - background-color: var(--user-dock-bg); + background: var(--user-dock-bg); width: 2.5in; position: relative; flex-shrink: 0; @@ -730,14 +744,14 @@ textarea { } #settings:hover { - background-color: var(--settings-hover); + background: var(--settings-hover); cursor: pointer; user-select: none; } #userinfo { position:relative; - background-color: var(--user-info-bg); + background: var(--user-info-bg); border-radius: .1in; cursor: pointer; flex-shrink: 0; @@ -751,7 +765,7 @@ textarea { button { transition: background .1s ease-in-out; - background-color: var(--message-bg-hover); + background: var(--message-bg-hover); color: var(--primary-text); border-color:var(--timestamp-color); font-weight: bold; @@ -772,7 +786,7 @@ button:disabled{ border-width:0px; } button:disabled:hover{ - background-color: var(--message-bg-hover); + background: var(--message-bg-hover); border-color:var(--timestamp-color); color: var(--primary-text); } @@ -781,7 +795,7 @@ button:hover { } input::file-selector-button { transition: background .1s ease-in-out; - background-color: var(--message-bg-hover); + background: var(--message-bg-hover); border-color:var(--timestamp-color); color: var(--primary-text); font-weight: bold; @@ -798,7 +812,7 @@ input[type="file"] { } select{ transition: background .1s ease-in-out; - background-color: var(--message-bg-hover); + background: var(--message-bg-hover); color: var(--primary-text); font-weight: bold; text-align: left; @@ -816,7 +830,7 @@ select{ top: 50%; left: 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-height: 70%; border-radius: .1in; @@ -848,7 +862,7 @@ select{ } .addchannel:hover { - background-color: var(--black); + background: var(--black); } .capsflex { @@ -884,7 +898,7 @@ input[type="checkbox"] { width: .02in; height: 100%; position: absolute; - background-color: var(--quote-bg); + background: var(--quote-bg); } .quote > span { @@ -905,7 +919,7 @@ span { position: absolute; width: 100%; height: 100%; - background-color: var(--loading-bg); + background: var(--loading-bg); z-index: 100; text-align: center; transition: transform .2s; @@ -924,7 +938,7 @@ span { } .unknownfile { - background-color: var(--unknown-file-bg); + background: var(--unknown-file-bg); border-style: solid; border-radius: .1in; border-color: var(--unknown-file-border); @@ -945,7 +959,7 @@ span { .unread { aspect-ratio: 1 / 1; position: absolute; - background-color: var(--primary-text); + background: var(--primary-text); height: .075in; width: .075in; transition: transform .2s, background .2s, height .3s, width .2s; @@ -971,7 +985,7 @@ span { .pinged { aspect-ratio: 1 / 1; transform: translate(0, .4in); - background-color: var(--mention-bg); + background: var(--mention-bg); height: .15in; width: .15in; text-align: center; @@ -1098,7 +1112,6 @@ span { .embed a{ margin-bottom:.1in; display: block; - text-decoration:none; font-size:.2in; } .provider{ @@ -1169,7 +1182,7 @@ span { } .cancelReply{ align-self:flex-start; - color:red; + color:var(--red); height: auto; width: .25in; text-align: center; @@ -1259,10 +1272,10 @@ span { margin:.015in; } :first-child{ - accent-color:green; + accent-color:var(--green); } :last-child{ - accent-color:red; + accent-color:var(--red); } } @@ -1306,7 +1319,7 @@ span { width:5in; height:.5in; button{ - background:green; + background:var(--green); } } @@ -1322,7 +1335,7 @@ span { .discovery-guild { margin: 5px; padding: 5px; - background-color: var(--discovery-bg); + background: var(--discovery-bg); border-radius: 5px; box-shadow: 1px 1px 7px var(--primary-text); overflow: hidden; diff --git a/webpage/themes.css b/webpage/themes.css index 4e27540..1266a75 100644 --- a/webpage/themes.css +++ b/webpage/themes.css @@ -1,6 +1,8 @@ :root { --servertd-height: 0px; /* Default value */ + --red: red; + --green: green; } .Dark-theme { /* thanks to TomatoCake for the updated CSS vars and such*/ color-scheme: dark; @@ -8,6 +10,7 @@ --primary-bg: #282832; --black: #000; --shadow: #000; + --focus: #8888ff; --message-bg-hover: #1e1e28; --typing-bg: #161616; --timestamp-color: #a2a2a2; @@ -21,6 +24,7 @@ --settings-hover: #0e0d10; --quote-bg: #7a798e; --button-bg: #1b1b28; + --button-hover: #282832; --textarea-bg: #26272c; --filename: #47bbff; --mention-bg: #F00; @@ -45,6 +49,7 @@ --scrollbar-thumb-hover: #a2a2a2; --markdown-timestamp: #2f2f33; --embed: #1a1823; + --link: #8888ff; --discovery-bg: #37373b; } .WHITE-theme { @@ -52,7 +57,10 @@ --primary-text: #000; --primary-bg: #FFF; --black: #FFF; + --red: #dd6c6c; + --green: #639d63; --shadow: #777; + --focus: #47bbff; --message-bg-hover: #dedee2; --typing-bg: #dad8d8; --timestamp-color: #929297; @@ -66,6 +74,7 @@ --settings-hover: #b5b1bb; --quote-bg: #7a798e; --button-bg: #b7b7cc; + --button-hover: #FFF; --textarea-bg: #b1b6ce; --filename: #47bbff; --mention-bg: #F00; @@ -90,6 +99,7 @@ --scrollbar-thumb-hover: #a5a5b8; --markdown-timestamp: #c8c8da; --embed: #f2f3f5; + --link: #3333ee; --discovery-bg: #c6c6d8; } .Light-theme { @@ -99,6 +109,7 @@ --primary-bg: #8e90c3; --black: #fff; --shadow: #000; + --focus: #5e50c5; --message-bg-hover: #5757b5; --typing-bg: #000000; @@ -116,6 +127,7 @@ --settings-hover: #b5b1bb; --quote-bg: #7a798e; --button-bg: #96969e; + --button-hover: #8e90c3; --textarea-bg: #abb1cd; --filename: #47bbff; --mention-bg: #F00; @@ -145,5 +157,6 @@ --scrollbar-thumb-hover: #a7a7be; --markdown-timestamp: #c8c8da; --embed: #cdccd1; + --link: #5566cc; --discovery-bg: #c6c6d8; } From dd2b4942e344db2489ebe0e7cd5a9f79a814a7d2 Mon Sep 17 00:00:00 2001 From: ygg2 Date: Sat, 20 Jul 2024 17:22:11 -0400 Subject: [PATCH 13/14] visible typing bg for light theme --- webpage/themes.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webpage/themes.css b/webpage/themes.css index 1266a75..b1c7ba1 100644 --- a/webpage/themes.css +++ b/webpage/themes.css @@ -112,7 +112,7 @@ --focus: #5e50c5; --message-bg-hover: #5757b5; - --typing-bg: #000000; + --typing-bg: #d4d6e9; --profile-bg: #8075bf; --profile-info-bg: #8075bf; --timestamp-color: #000000; From 6fc29184b4d62baef0843065952d793313f9a4f2 Mon Sep 17 00:00:00 2001 From: ygg2 Date: Wed, 24 Jul 2024 09:17:42 -0400 Subject: [PATCH 14/14] re-added hover bg to settings (mac rip) also adjust the horizontal scrolling again --- webpage/style.css | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/webpage/style.css b/webpage/style.css index 633213f..ad0568b 100644 --- a/webpage/style.css +++ b/webpage/style.css @@ -126,10 +126,12 @@ samp { background: var(--profile-info-bg); border-radius: 10%; padding: .3cm; - width: calc(100% - .6cm); - height: calc(100% - .75in); + width: 100%; + height: calc(100% - .5in - .2cm); + margin-top: .1cm; display: flex; flex-direction: column; + box-sizing: border-box; } .profile { @@ -350,12 +352,16 @@ div { padding: 3px; border-radius: .25cm; width: 100%; - min-height: .5in; + min-height: .6in; z-index: -100; display: flex; max-height: fit-content; max-height: 1.5in; overflow-y: scroll; + color: var(--primary-text); + background: var(--textarea-bg); + border: 1px solid; + box-sizing: border-box; } p { @@ -635,11 +641,6 @@ textarea { textarea:focus-visible { outline: 2px solid var(--focus); } -#typebox{ - color: var(--primary-text); - background: var(--textarea-bg); - border: 1px solid; -} .channels { overflow: auto; transition: height .2s ease-in-out; @@ -747,12 +748,15 @@ textarea:focus-visible { #user-actions h2 { cursor: pointer; user-select: none; - border-radius: .1in; + border-radius: .3in; transition: color .5s; text-align: center; overflow: visible; + width: .28in; + height: .28in; } #user-actions h2:hover, #user-actions h2:focus { + background: var(--settings-hover); color: var(--timestamp-color); }