smartfridge/armcord
1
1
Fork 0
mirror of https://github.com/smartfrigde/armcord.git synced 2024-08-14 23:56:58 +00:00
Code Issues Projects Releases Wiki Activity

Style overhaul and fully implemented titlebars

Browse source 
Dev note: Titlebars are still a WIP for Linux, using the native theme is recommended for now on Linux
This commit is contained in:
KayoticCarnige 2022-07-04 10:39:22 -04:00
parent f7b860fc06
commit efbccabd4c
24 changed files with 484 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/ac_black_plug.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
assets/ac_black_plug_hollow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
assets/ac_white_plug.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
assets/ac_white_plug_filled.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 16 KiB

BIN
assets/ac_white_plug_hollow.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
build/icon.icns
View file

Binary file not shown.

BIN
build/icon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 66 KiB

8
src/content/css/discord.css
View file

@ -1,14 +1,16 @@
.notice-2HEN-u {
display: none;
}
.sidebar-1tnWFu {
[customTitlebar] .sidebar-1tnWFu {
border-top-left-radius: 8px;
}
.scroller-3X7KbA {
[customTitlebar] .scroller-3X7KbA {
padding: 0;
padding-top: 4px;
}
* {
outline: none;
}
[class^="socialLinks-"] + [class^="info-"] {
padding-right: 0;
}

1
src/content/css/logos.css
View file

File diff suppressed because one or more lines are too long

95
src/content/css/settings.css
View file

@ -1,6 +1,6 @@
/*MIT License
Copyright (c) 2021 GooseMod
Copyright (c) 2022 GooseMod
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
@ -20,11 +20,18 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.*/
:root {
--background-primary: #282b30;
--background-secondary: rgba(255, 255, 255, 0.1);
--brand-experiment: #5865f2;
--header-primary: #fff;
--background-secondary: #2f3136;
--background-secondary-alt: #292b2f;
--background-floating: #18191c;
--background-modifier-hover: rgba(106, 116, 128, 0.16);
--brand-experiment: #7289da;
--brand-experiment-560: #5c6fb1;
--brand-experiment-600: #4e5d94;
--interactive-normal: #b9bbbe;
--interactive-hover: #dcddde;
--text-muted: #72767d;
--font-primary: "Whitney";
--header-primary: #fff;
}
@font-face {
@ -36,12 +43,19 @@ SOFTWARE.*/
html,
body {
overflow: hidden;
margin: 0;
overflow-x: hidden;
overflow-y: scroll;
padding: 0;
margin: 2%;
background: var(--background-primary);
background: var(--background-secondary);
}
body::-webkit-scrollbar {
width: 0.4em;
background: transparent;
}
body::-webkit-scrollbar-thumb {
background: var(--background-floating);
border-radius: 25px;
}
* {
@ -58,31 +72,39 @@ body {
vertical-align: middle;
}
.header {
color: white;
font-size: 1.5em;
color: var(--header-primary);
font-size: 1.46em;
}
.center {
text-align: center;
left: 50%;
margin-right: 50%;
transform: translateX(50%);
float: right;
}
/*buttons*/
button {
background-color: #7289da;
font-family: Whitney, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
padding: 4px;
border-radius: 5px;
margin-top: 5px;
text-align: center;
border-style: none;
background: var(--brand-experiment);
color: var(--header-primary);
outline: none;
border: none;
border-radius: 5px;
padding: 8px;
transition: .17s ease;
}
button:hover {
background: var(--brand-experiment-560);
cursor: pointer;
transition: .17s ease;
}
button:hover {
background-color: #687dc6;
border-style: none;
outline: none;
button:active {
background: var(--brand-experiment-600);
cursor: pointer;
transition: .17s ease;
}
#save {
font-size: 15px;
}
.tgl {
display: none;
@ -135,42 +157,47 @@ button:hover {
height: 100%;
}
.tgl + .tgl-btn:after {
left: 0;
left: 1px;
}
.tgl + .tgl-btn:before {
display: none;
}
.tgl:checked + .tgl-btn:after {
left: 50%;
left: 56%;
}
.tgl-light + .tgl-btn {
background: #5c5757;
border-radius: 2em;
padding: 2px;
background: var(--text-muted);
border-radius: 25px;
padding: 4px;
transition: all 0.4s ease;
}
.tgl-light + .tgl-btn:after {
border-radius: 50%;
border-radius: 50px;
position: relative;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 24px;
background: rgb(255, 255, 255);
transition: all 0.2s ease;
}
.tgl-light:checked + .tgl-btn {
background: #47ca5a;
background: var(--brand-experiment);
}
select {
-webkit-appearance: button;
-moz-appearance: button;
background-color: #2c2f33;
background-color: var(--background-secondary-alt);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #aaa;
border: 1px solid var(--background-floating);
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #fff;
font-size: 1.2em;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
outline: none !important;
}

25
src/content/css/setup.css
View file

@ -1,11 +1,11 @@
@import url("https://armcord.smartfridge.space/logofont.css");
/* Meta {{{ */
:root {
--background-primary: #282b30;
--background-secondary: rgba(255, 255, 255, 0.1);
--background-modifier-hover: rgba(106, 116, 128, 0.16);
--brand-experiment: #7289da;
--brand-experiment-560: #5c6fb1;
--brand-experiment-600: #4e5d94;
--interactive-normal: #b9bbbe;
--interactive-hover: #dcddde;
--text-muted: #72767d;
@ -109,7 +109,12 @@ body {
height: 100%;
width: 33%;
}
[armcord-platform="darwin"] .titlebar #window-controls-container {
margin-left: -26px;
}
[armcord-platform="darwin"] .titlebar #window-controls-container #minimize {
transform: translateX(5px);
}
/* }}} */
/* Buttons {{{ */
@ -130,10 +135,18 @@ button {
border: none;
border-radius: 4px;
padding: 8px 20px;
transition: .17s ease;
}
button:hover {
filter: brightness(85%);
background: var(--brand-experiment-560);
cursor: pointer;
transition: .17s ease;
}
button:active {
background: var(--brand-experiment-600);
cursor: pointer;
transition: .17s ease;
}
/* }}} */
@ -157,5 +170,9 @@ select {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
option {
text-align: left;
}
/* }}} */

4
src/content/css/splash.css
View file

@ -1,6 +1,6 @@
/*MIT License
Copyright (c) 2021 GooseMod
Copyright (c) 2022 GooseMod
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
@ -22,7 +22,7 @@ SOFTWARE.*/
:root {
--background-primary: #282b30;
--background-secondary: rgba(255, 255, 255, 0.1);
--brand-experiment: #5865f2;
--brand-experiment: #7289da;
--header-primary: #fff;
--text-muted: #72767d;
}

230
src/content/css/titlebar.css
View file

@ -47,17 +47,106 @@
}
/* ArmCord on Linux */
[armcord-platform="linux"] .container-2RRFHK {
padding-top: 45px;
top: -45px;
}
[armcord-platform="linux"] .titlebar {
height: 45px;
line-height: 45px;
}
[armcord-platform="linux"] .titlebar #window-controls-container {
line-height: 45px;
transform: translateY(-8px);
}
[armcord-platform="linux"] .titlebar #window-controls-container #minimize:hover {
background-color: #99aab5;
background-color: var(--background-modifier-hover);
transition: 0.2s ease;
}
[armcord-platform="linux"] .titlebar #window-controls-container #maximize:hover {
background-color: #99aab5;
background-color: var(--background-modifier-hover);
transition: 0.2s ease;
}
[armcord-platform="linux"] .titlebar #window-controls-container #minimize:hover #minimize-icon {
background-color: var(--interactive-hover);
transition: 0.2s ease;
}
[armcord-platform="linux"] .titlebar #window-controls-container #maximize:hover #maximize-icon {
background-color: var(--interactive-hover);
transition: 0.2s ease;
}
[armcord-platform="linux"] .titlebar #window-controls-container #quit:hover {
background-color: #f04747;
background-color: var(--brand-experiment-560);
transition: 0.2s ease;
}
[armcord-platform="linux"] .titlebar #window-controls-container #quit #quit-icon {
background-color: #ffffff;
display: list-item;
transition: 0.1s ease;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z' fill='%23000'/%3E%3C/svg%3E")
no-repeat 50% 50%;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z' fill='%23000'/%3E%3C/svg%3E")
no-repeat 50% 50%;
}
[armcord-platform="linux"] .titlebar #window-controls-container #minimize-icon {
background-color: var(--interactive-normal);
display: list-item;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4.399V5.5H0V4.399h11z' fill='%23000'/%3E%3C/svg%3E")
no-repeat 50% 50%;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4.399V5.5H0V4.399h11z' fill='%23000'/%3E%3C/svg%3E")
no-repeat 50% 50%;
}
[armcord-platform="linux"] .titlebar #window-controls-container #maximize-icon {
background-color: var(--interactive-normal);
display: list-item;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z' fill='%23000'/%3E%3C/svg%3E")
no-repeat 50% 50%;
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='9' height='9' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z' fill='%23000'/%3E%3C/svg%3E")
no-repeat 50% 50%;
}
[armcord-platform="linux"][isMaximized] .titlebar #window-controls-container #maximize-icon {
background-color: var(--interactive-normal);
display: list-item;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='9' height='9'%3E%3Cstyle%3E%3C/style%3E%3Cpath fill-rule='evenodd' d='m6 0h24v24h-6v6h-24v-24h6zm3 6h15v15h3v-18h-18zm-6 21h18v-18h-18z'/%3E%3C/svg%3E")
no-repeat 50% 50%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='9' height='9'%3E%3Cstyle%3E%3C/style%3E%3Cpath fill-rule='evenodd' d='m6 0h24v24h-6v6h-24v-24h6zm3 6h15v15h3v-18h-18zm-6 21h18v-18h-18z'/%3E%3C/svg%3E")
no-repeat 50% 50%;
}
[armcord-platform="linux"] .titlebar #window-controls-container #minimize {
background-color: transparent;
transition: 0.1s ease;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='25' height='25'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
no-repeat 50% 50%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='25' height='25'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
no-repeat 50% 50%;
}
[armcord-platform="linux"] .titlebar #window-controls-container #maximize {
background-color: transparent;
transition: 0.1s ease;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='25' height='25'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
no-repeat 50% 50%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='25' height='25'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
no-repeat 50% 50%;
}
[armcord-platform="linux"] .titlebar #window-controls-container #quit {
background-color: var(--brand-experiment);
transition: 0.1s ease;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='25' height='25'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
no-repeat 50% 50%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='25' height='25'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
no-repeat 50% 50%;
}
[armcord-platform="linux"] .titlebar #window-controls-container #quit:active {
background-color: var(--brand-experiment-600);
transition: 0.1s ease;
}
/* ArmCord on Windows */
[armcord-platform="win32"] .titlebar #window-controls-container {
width: 142px;
}
[armcord-platform="win32"] .titlebar #window-controls-container #minimize:hover {
background-color: var(--background-modifier-hover);
transition: 0.2s ease;
@ -102,8 +191,7 @@
background-color: #000000cc;
transition: 0.1s ease;
}
.titlebar #window-controls-container #quit-icon {
[armcord-platform="win32"] .titlebar #window-controls-container #quit-icon {
background-color: var(--interactive-normal);
display: list-item;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z' fill='%23000'/%3E%3C/svg%3E")
@ -111,7 +199,7 @@
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.279 5.5L11 10.221l-.779.779L5.5 6.279.779 11 0 10.221 4.721 5.5 0 .779.779 0 5.5 4.721 10.221 0 11 .779 6.279 5.5z' fill='%23000'/%3E%3C/svg%3E")
no-repeat 50% 50%;
}
.titlebar #window-controls-container #minimize-icon {
[armcord-platform="win32"] .titlebar #window-controls-container #minimize-icon {
background-color: var(--interactive-normal);
display: list-item;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4.399V5.5H0V4.399h11z' fill='%23000'/%3E%3C/svg%3E")
@ -119,7 +207,7 @@
mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 4.399V5.5H0V4.399h11z' fill='%23000'/%3E%3C/svg%3E")
no-repeat 50% 50%;
}
.titlebar #window-controls-container #maximize-icon {
[armcord-platform="win32"] .titlebar #window-controls-container #maximize-icon {
background-color: var(--interactive-normal);
display: list-item;
-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg width='11' height='11' viewBox='0 0 11 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 0v11H0V0h11zM9.899 1.101H1.1V9.9h8.8V1.1z' fill='%23000'/%3E%3C/svg%3E")
@ -128,7 +216,7 @@
no-repeat 50% 50%;
}
[isMaximized] .titlebar #window-controls-container #maximize-icon {
[armcord-platform="win32"][isMaximized] .titlebar #window-controls-container #maximize-icon {
background-color: var(--interactive-normal);
display: list-item;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='11' height='11'%3E%3Cstyle%3E%3C/style%3E%3Cpath fill-rule='evenodd' d='m6 0h24v24h-6v6h-24v-24h6zm3 6h15v15h3v-18h-18zm-6 21h18v-18h-18z'/%3E%3C/svg%3E")
@ -137,7 +225,125 @@
no-repeat 50% 50%;
}
.window-title {
/* ArmCord on MacOS (Why would you do this?) */
[armcord-platform="darwin"] .container-2RRFHK {
padding-top: 45px;
top: -45px;
}
[armcord-platform="darwin"] .titlebar {
height: 45px;
line-height: 45px;
}
[armcord-platform="darwin"] .titlebar #window-controls-container {
float: left;
width: 150px;
height: 60%;
line-height: 45px;
-webkit-app-region: no-drag;
transform: translate(-78px, 4px);
}
[armcord-platform="darwin"] .titlebar #window-controls-container:hover #minimize #minimize-icon,
[armcord-platform="darwin"] .titlebar #window-controls-container:hover #maximize #maximize-icon,
[armcord-platform="darwin"] .titlebar #window-controls-container:hover #quit #quit-icon {
display: list-item;
}
[armcord-platform="darwin"] .titlebar #window-controls-container #quit #quit-icon {
background-color: #79282b;
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNS4yOTI4OSA2TDIuODE4MDEgMy41MjUxM0wzLjUyNTEyIDIuODE4MDJMNS45OTk5OSA1LjI5Mjg5TDguNDc0ODcgMi44MTgwMkw5LjE4MTk3IDMuNTI1MTNMNi43MDcxIDZMOS4xODE5NyA4LjQ3NDg3TDguNDc0ODcgOS4xODE5OEw1Ljk5OTk5IDYuNzA3MTFMMy41MjUxMiA5LjE4MTk4TDIuODE4MDEgOC40NzQ4N0w1LjI5Mjg5IDZaIiBmaWxsPSJyZ2JhKDEyOCwgNiwgMCwgMSkiLz48L3N2Zz4=")
no-repeat 50% 50%;
mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNS4yOTI4OSA2TDIuODE4MDEgMy41MjUxM0wzLjUyNTEyIDIuODE4MDJMNS45OTk5OSA1LjI5Mjg5TDguNDc0ODcgMi44MTgwMkw5LjE4MTk3IDMuNTI1MTNMNi43MDcxIDZMOS4xODE5NyA4LjQ3NDg3TDguNDc0ODcgOS4xODE5OEw1Ljk5OTk5IDYuNzA3MTFMMy41MjUxMiA5LjE4MTk4TDIuODE4MDEgOC40NzQ4N0w1LjI5Mjg5IDZaIiBmaWxsPSJyZ2JhKDEyOCwgNiwgMCwgMSkiLz48L3N2Zz4=")
no-repeat 50% 50%;
transform: translate(-0.3px, -11.7px);
}
[armcord-platform="darwin"] .titlebar #window-controls-container #minimize #minimize-icon {
background-color: #7d631b;
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAgNS4zOTk5OUgyVjYuNTk5OTlIMTBWNS4zOTk5OVoiIGZpbGw9IiM5ODY4MDEiLz48L3N2Zz4=")
no-repeat 50% 50%;
mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAgNS4zOTk5OUgyVjYuNTk5OTlIMTBWNS4zOTk5OVoiIGZpbGw9IiM5ODY4MDEiLz48L3N2Zz4=")
no-repeat 50% 50%;
transform: translate(-0px, -11.7px);
}
[armcord-platform="darwin"] .titlebar #window-controls-container #maximize #maximize-icon {
background-color: #1d7525;
-webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41ODgyMyA2Ljk5MDE1TDUuMDA5NzkgMy40MTE3QzQuODU1ODMgMy4yNTc3NCA0Ljk1ODYgMi45OTQyMiA1LjE3NjE0IDIuOTg1MTRMOC45MTA0MiAyLjgyOTMxQzkuMDU2NTggMi44MjMyMSA5LjE3NjczIDIuOTQzMzUgOS4xNzA2MyAzLjA4OTUyTDkuMDE0NzkgNi44MjM4QzkuMDA1NzEgNy4wNDEzNCA4Ljc0MjE5IDcuMTQ0MTEgOC41ODgyMyA2Ljk5MDE1WiIgZmlsbD0iIzEyNUUxRSIvPjxwYXRoIGQ9Ik0zLjQxMTc3IDUuMDA5ODJMNi45OTAyMSA4LjU4ODI3QzcuMTQ0MTcgOC43NDIyMyA3LjA0MTQgOS4wMDU3NSA2LjgyMzg2IDkuMDE0ODNMMy4wODk1OCA5LjE3MDY2QzIuOTQzNDIgOS4xNzY3NiAyLjgyMzI3IDkuMDU2NjEgMi44MjkzNyA4LjkxMDQ1TDIuOTg1MjEgNS4xNzYxN0MyLjk5NDI5IDQuOTU4NjMgMy4yNTc4MSA0Ljg1NTg2IDMuNDExNzcgNS4wMDk4MloiIGZpbGw9IiMxMjVFMUUiLz48L3N2Zz4=")
no-repeat 50% 50%;
mask: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC41ODgyMyA2Ljk5MDE1TDUuMDA5NzkgMy40MTE3QzQuODU1ODMgMy4yNTc3NCA0Ljk1ODYgMi45OTQyMiA1LjE3NjE0IDIuOTg1MTRMOC45MTA0MiAyLjgyOTMxQzkuMDU2NTggMi44MjMyMSA5LjE3NjczIDIuOTQzMzUgOS4xNzA2MyAzLjA4OTUyTDkuMDE0NzkgNi44MjM4QzkuMDA1NzEgNy4wNDEzNCA4Ljc0MjE5IDcuMTQ0MTEgOC41ODgyMyA2Ljk5MDE1WiIgZmlsbD0iIzEyNUUxRSIvPjxwYXRoIGQ9Ik0zLjQxMTc3IDUuMDA5ODJMNi45OTAyMSA4LjU4ODI3QzcuMTQ0MTcgOC43NDIyMyA3LjA0MTQgOS4wMDU3NSA2LjgyMzg2IDkuMDE0ODNMMy4wODk1OCA5LjE3MDY2QzIuOTQzNDIgOS4xNzY3NiAyLjgyMzI3IDkuMDU2NjEgMi44MjkzNyA4LjkxMDQ1TDIuOTg1MjEgNS4xNzYxN0MyLjk5NDI5IDQuOTU4NjMgMy4yNTc4MSA0Ljg1NTg2IDMuNDExNzcgNS4wMDk4MloiIGZpbGw9IiMxMjVFMUUiLz48L3N2Zz4=")
no-repeat 50% 50%;
transform: translate(-0.2px, -11.7px);
}
[armcord-platform="darwin"] .titlebar #window-controls-container #minimize {
background-color: #fac536;
border: 1px solid #da9e10;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='13' height='13'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
no-repeat 50% 50%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='13' height='13'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
no-repeat 50% 50%;
transform: translateX(-21.5px);
}
[armcord-platform="darwin"] .titlebar #window-controls-container #maximize {
background-color: #39ea49;
border: 1px solid #13c11e;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='13' height='13'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
no-repeat 50% 50%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='13' height='13'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
no-repeat 50% 50%;
transform: translateX(21.5px);
}
[armcord-platform="darwin"] .titlebar #window-controls-container #quit {
background-color: #f25056;
border: 1px solid #d52735;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='13' height='13'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
no-repeat 50% 50%;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='13' height='13'%3E%3Cstyle%3E.a%7Bfill:%23808080%7D%3C/style%3E%3Ccircle class='a' cx='15' cy='15' r='15'/%3E%3C/svg%3E")
no-repeat 50% 50%;
}
[armcord-platform="darwin"] .titlebar #window-controls-container:hover #maximize:active {
background-color: #13c11e;
}
[armcord-platform="darwin"] .titlebar #window-controls-container:hover #minimize:active {
background-color: #da9e10;
}
[armcord-platform="darwin"] .titlebar #window-controls-container:hover #quit:active {
background-color: #d52735;
}
[armcord-platform="darwin"] .titlebar #window-controls-container #spacer,
[armcord-platform="darwin"] .titlebar #window-controls-container #minimize,
[armcord-platform="darwin"] .titlebar #window-controls-container #maximize,
[armcord-platform="darwin"] .titlebar #window-controls-container #quit {
float: right;
height: 80%;
width: 13%;
text-align: center;
color: transparent;
cursor: default;
}
[armcord-platform="darwin"] .titlebar #window-controls-container #minimize-icon,
[armcord-platform="darwin"] .titlebar #window-controls-container #maximize-icon,
[armcord-platform="darwin"] .titlebar #window-controls-container #quit-icon {
display: none;
}
[armcord-platform="darwin"] .titlebar #window-controls-container #spacer {
display: none;
}
[armcord-platform="darwin"] .window-title {
content: var(--wordmark-svg);
height: 10px;
left: 50%;
margin-right: 50%;
transform: translate(50%, 9.5px);
float: right;
padding: 0;
}
[armcord-platform="linux"] .window-title,
[armcord-platform="win32"] .window-title {
content: var(--wordmark-svg);
height: 10px;
margin-left: initial;
@ -146,6 +352,12 @@
padding: 0;
}
[wordmark="discord"] .window-title {
content: var(--discord-wordmark-svg);
height: 11.7px;
width: 56px;
}
.withFrame-haYltI {
height: 30px !important;
}

6
src/content/setup.html
View file

@ -13,7 +13,7 @@
<div class="container">
<div id="warning" class="hidden">
<p id="setup_offline">
You appear to be offline. Please connect to the internet and restart ArmCord Setup.
You appear to be offline. Please connect to the internet and restart ArmCord.
</p>
</div>
<div id="setup">
@ -123,6 +123,7 @@
automaticPatches: false,
mods: "cumcord",
inviteWebsocket: true,
trayIcon: "ac_plug_colored",
performanceMode: "none"
});
setTimeout(() => window.armcordinternal.restart(), 5000);
@ -153,6 +154,7 @@
minimizeToTray: true,
automaticPatches: false,
performanceMode: "none",
trayIcon: "ac_plug_colored",
mods: options.mod,
inviteWebsocket: true
});
@ -168,11 +170,13 @@
autoLaunch: true,
mods: "none",
performanceMode: "none",
trayIcon: "ac_plug_colored",
inviteWebsocket: true
});
setTimeout(() => window.armcordinternal.restart(), 500);
}
});
document.body.setAttribute("insetup", "");
</script>
</body>
</html>

7
src/content/splash.html
View file

@ -6,6 +6,13 @@
<style>
@import url("css/splash.css");
</style>
<script>
window.onbeforeunload = function(){
const style = document.createElement('style');
style.textContent = "body { display: none; }";
document.head.append(style);
};
</script>
</head>
<body>

4
src/extensions/mods.ts
View file

@ -1,6 +1,6 @@
//https://github.com/GooseMod/GooseMod/wiki/Stuck-Updater-or-Blank-Window-Fix
/*
Copyright 2021 GooseMod
Copyright 2022 GooseMod
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
@ -60,6 +60,6 @@ electron.app.whenReady().then(async () => {
if (await getConfig("armcordCSP")) {
unstrictCSP();
} else {
console.log("ArmCord CSP is disabled. The CSP should be managed by third-party plugin.");
console.log("ArmCord CSP is disabled. The CSP should be managed by a third-party plugin(s).");
}
});

6
src/ipc.ts
View file

@ -23,6 +23,9 @@ export function registerIpc() {
ipcMain.on("win-isMaximized", (event, arg) => {
event.returnValue = mainWindow.isMaximized();
});
ipcMain.on("win-isNormal", (event, arg) => {
event.returnValue = mainWindow.isNormal();
});
ipcMain.on("win-minimize", (event, arg) => {
mainWindow.minimize();
});
@ -74,6 +77,9 @@ export function registerIpc() {
ipcMain.on("clientmod", async (event, arg) => {
event.returnValue = await getConfig("mods");
});
ipcMain.on("trayIcon", async (event, arg) => {
event.returnValue = await getConfig("trayIcon");
});
ipcMain.on("titlebar", (event, arg) => {
event.returnValue = customTitlebar;
});

4
src/main.ts
View file

@ -10,6 +10,7 @@ import "./shortcuts";
export var settings: any;
export var customTitlebar: boolean;
export var clientName: "ArmCord";
if (process.platform == "linux") {
if (process.env.$XDG_SESSION_TYPE == "wayland") {
@ -33,7 +34,7 @@ app.whenReady().then(async () => {
case "native":
createNativeWindow();
break;
case "discord":
case "basic":
createNativeWindow();
break;
default:
@ -67,6 +68,7 @@ app.whenReady().then(async () => {
createCustomWindow();
break;
}
console.log("userDataPath = " + app.getPath("userData"));
});
});

1
src/preload/preload.ts
View file

@ -93,6 +93,5 @@ setInterval(() => {
el.textContent = `\nArmCord Version: ${version}`;
el.onclick = () => ipcRenderer.send("openSettingsWindow");
host.append(el);
}, 2000);

9
src/preload/titlebar.ts
View file

@ -2,7 +2,7 @@ import {ipcRenderer} from "electron";
import {addStyle} from "../utils";
import * as fs from "fs";
import * as path from "path";
import {platform} from "node:process";
import os from "os";
export function injectTitlebar() {
document.addEventListener("DOMContentLoaded", function (event) {
var elem = document.createElement("div");
@ -25,8 +25,10 @@ export function injectTitlebar() {
const wordmarkcssPath = path.join(__dirname, "../", "/content/css/logos.css");
addStyle(fs.readFileSync(titlebarcssPath, "utf8"));
addStyle(fs.readFileSync(wordmarkcssPath, "utf8"));
document.body.setAttribute("armcord-platform", platform);
document.body.setAttribute("customTitlebar", "");
document.body.setAttribute("armcord-platform", os.platform());
var titlebar = document.getElementsByClassName("titlebar")[0];
var minimize = document.getElementById("minimize");
var maximize = document.getElementById("maximize");
var quit = document.getElementById("quit");
@ -38,7 +40,8 @@ export function injectTitlebar() {
maximize!.addEventListener("click", () => {
if (ipcRenderer.sendSync("win-isMaximized") == true) {
ipcRenderer.send("win-unmaximize");
} else {
document.body.removeAttribute("isMaximized");
} else if (ipcRenderer.sendSync("win-isNormal") == true) {
ipcRenderer.send("win-maximize");
}
});

15
src/settings/settings.html
View file

@ -66,7 +66,18 @@
</select>
<p class="header" id="settings-prfmMode">Performance mode:</p>
</div>
<button id="settings-save" class="center">Save settings</button>
<div class="switch">
<select name="trayIcon" id="trayIcon" class="left">
<option value="ac_plug_colored">Default</option>
<option value="dsc-tray">Discord Icon</option>
<option value="ac_white_plug">White Icon</option>
<option value="ac_black_plug">Black Icon</option>
<option value="ac_white_plug_hollow">White Hollowed Icon</option>
<option value="ac_black_plug_hollow">Black Hollowed Icon</option>
</select>
<p class="header" id="settings-trayIcon">Tray icon:</p>
</div>
<button id="settings-save" class="center">Save Settings</button>
</body>
<script>
async function loadLang() {
@ -101,6 +112,7 @@
document.getElementById("channel").value = await settings.get("channel");
document.getElementById("theme").value = await settings.get("windowStyle");
document.getElementById("prfmMode").value = await settings.get("performanceMode");
document.getElementById("trayIcon").value = await settings.get("trayIcon");
}
loadSettings();
document.getElementById("settings-save").addEventListener("click", function () {
@ -113,6 +125,7 @@
mods: document.getElementById("mod").value,
inviteWebsocket: document.getElementById("websocket").checked,
performanceMode: document.getElementById("prfmMode").value,
trayIcon: document.getElementById("trayIcon").value,
doneSetup: true
});
});

5
src/shortcuts.ts
View file

@ -14,5 +14,10 @@ app.on("web-contents-created", (webContentsCreatedEvent, webContents) => {
if (shift && control && !alt && !meta && code === "KeyR") {
mainWindow.reload();
}
// Shortcut: app reload
if (alt && control && !shift && !meta && code === "KeyR") {
app.relaunch();
app.exit();
}
});
});

93
src/tray.ts
View file

@ -1,26 +1,46 @@
import * as fs from "fs";
import { app, Menu, Tray } from "electron";
import { mainWindow } from "./window";
import { getConfig, setWindowState } from "./utils";
import { getConfig, getConfigLocation, setWindowState } from "./utils";
import * as path from "path";
import { createSettingsWindow } from "./settings/main";
import { platform } from "process";
let tray: any = null;
let defaultIcon = "ac_plug_colored";
app.whenReady().then(async () => {
if (platform == "darwin") {
defaultIcon = "macos"
}
if ((await getConfig("windowStyle")) == "discord") {
tray = new Tray(path.join(__dirname, "../", "/assets/dsc-tray.png"));
const contextMenu = Menu.buildFromTemplate([
let finishedSetup = (await getConfig("doneSetup"));
if ((await getConfig("windowStyle")) == "basic") {
var clientName = (await getConfig("clientName")) ?? "ArmCord";
var trayIcon = (await getConfig("trayIcon")) ?? "ac_plug_colored";
tray = new Tray(path.join(__dirname, "../", `/assets/${trayIcon}.png`));
const contextMenu = function () {
if (finishedSetup == false) {
return Menu.buildFromTemplate([
{
label: "Open ArmCord",
label: `Finish the setup first!`,
enabled: false
},
{
label: `Quit ${clientName}`,
click: async function () {
fs.unlink(await getConfigLocation(), (err) => {
if (err) throw err;
console.log('Closed during setup. "settings.json" was deleted');
app.quit();
});
}
}
]);
} else {
return Menu.buildFromTemplate([
{
label: `Open ${clientName}`,
click: function () {
mainWindow.show();
}
},
{
label: "Quit ArmCord",
label: `Quit ${clientName}`,
click: function () {
let [width, height] = mainWindow.getSize()
setWindowState({
@ -32,25 +52,43 @@ app.whenReady().then(async () => {
}
}
]);
}
}
tray.setToolTip("Discord");
tray.setToolTip(clientName);
tray.setContextMenu(contextMenu);
} else {
var trayIcon = (await getConfig("trayIcon")) ?? defaultIcon;
var clientName = (await getConfig("clientName")) ?? "ArmCord";
var trayIcon = (await getConfig("trayIcon")) ?? "ac_plug_colored";
tray = new Tray(path.join(__dirname, "../", `/assets/${trayIcon}.png`));
if (finishedSetup == false) {
const contextMenu = Menu.buildFromTemplate([
{
label: "ArmCord"
label: `Finish the setup first!`,
enabled: false
},
{
label: `Quit ${clientName}`,
click: async function () {
fs.unlink(await getConfigLocation(), (err) => {
if (err) throw err;
console.log('Closed during setup. "settings.json" was deleted');
app.quit();
});
}
}
]);
tray.setContextMenu(contextMenu);
} else {
const contextMenu = Menu.buildFromTemplate([
{
label: `${clientName} ` + app.getVersion(),
enabled: false
},
{
type: "separator"
},
{
label: "Open ArmCord",
click: function () {
mainWindow.show();
}
},
{
label: "Open Settings",
click: function () {
@ -68,20 +106,19 @@ app.whenReady().then(async () => {
type: "separator"
},
{
label: "Quit ArmCord",
label: `Quit ${clientName}`,
click: function () {
let [width, height] = mainWindow.getSize()
setWindowState({
width: width,
height: height,
isMaximized: mainWindow.isMaximized()
})
app.quit();
}
}
]);
tray.setToolTip("ArmCord " + app.getVersion());
tray.setContextMenu(contextMenu);
}
});
}
tray.setToolTip(clientName);
tray.on('click', function(){
mainWindow.show()
});
}
);

17
src/utils.ts
View file

@ -44,6 +44,7 @@ export function setup() {
mods: "cumcord",
performanceMode: "none",
inviteWebsocket: true,
trayIcon: "ac_plug_colored",
doneSetup: false
};
setConfigBulk({
@ -52,8 +53,8 @@ export function setup() {
}
export function getVersion() {
//to-do better way of doing this
return "3.1.0";
//I'm too lazy to replace every mf reference so :p
return app.getVersion();
}
export async function injectJS(inject: string) {
const js = await (await fetch(`${inject}`)).text();
@ -180,6 +181,7 @@ export interface Settings {
mods: string;
performanceMode: string;
inviteWebsocket: boolean;
trayIcon: string;
doneSetup: boolean;
}
export async function getConfig(object: string) {
@ -197,6 +199,17 @@ export async function getConfig(object: string) {
return "setup";
}
}
export async function getConfigLocation() {
try {
const userDataPath = app.getPath("userData");
const storagePath = path.join(userDataPath, "/storage/");
return storagePath + "settings.json";
} catch (e) {
console.log("Config probably doesn't exist yet. Returning setup value.");
firstRun = true;
return "setup";
}
}
export async function setConfig(object: string, toSet: any) {
try {
const userDataPath = app.getPath("userData");