diff --git a/index.js b/index.js index 4d24dfc..26c33f0 100755 --- a/index.js +++ b/index.js @@ -66,6 +66,7 @@ function createMainWindow() { browser.loadURL("https://web.groupme.com/signin", {userAgent: ""}); browser.webContents.on("dom-ready", () => { + browser.webContents.insertCSS(filesystem.readFileSync(path.join(__dirname, "inject/app.css"), "utf8")); browser.show(); }); diff --git a/inject/app.css b/inject/app.css new file mode 100644 index 0000000..4943665 --- /dev/null +++ b/inject/app.css @@ -0,0 +1,239 @@ +:root { + --dragbar-height: 50px; + --sidebar-width: 280px; +} + +body::before { + position: absolute; + top: 0; + right: 0; + left: 0; + z-index: -1; + height: var(--dragbar-height); + content: ""; + -webkit-app-region: drag; +} + +body > #app { + height: 100vh; +} + +body > #app .accessible-focus:focus { + outline: none !important; +} + +body > #app .groupme-list .list-item { + outline: none; +} + +body > #app > #page { + padding-left: 0; +} + + +/* Pillar */ +body > #app > .app-sidebar { + display: block; + width: var(--sidebar-width); +} + +body > #app > .app-sidebar > .pillar { + position: static; + width: var(--sidebar-width); + height: auto; +} + +body > #app > .app-sidebar > .pillar > .logo { + display: none; +} + +body > #app > .app-sidebar > .pillar > .tray-controls { + display: flex; + justify-content: flex-end; + margin: 0; +} + +body > #app > .app-sidebar > .pillar > .tray-controls > .tab { + line-height: initial; + -webkit-app-region: no-drag +} + +body > #app > .app-sidebar > #tray { + display: block !important; + top: var(--dragbar-height); + left: 0; +} + +body > #app > .app-sidebar > #tray > .tray-header > .row { + margin: 0; +} + +body > #app > .app-sidebar > #tray > .tray-header > .row > :first-child { + padding-left: 0; +} + +body > #app > .app-sidebar > #tray > .tray-header > .row > :last-child { + padding-right: 0; +} + +body > #app > .app-sidebar > #tray > .tray-list { + height: -webkit-fill-available; +} + + +/* Sign In */ +body > #app > #page > #signin { + margin-top: calc(50vh - 250px); +} + + +/* Chat */ +body > #app > #page > #chats { + margin-left: var(--sidebar-width); +} + +body > #app > #page > #chats > .chat { + min-width: initial; + max-width: none; + border: none; +} + +body > #app > #page > #chats > .chat + .chat { + border-left: 1px solid #d4d4d4; +} + +body > #app > #page > #chats > .chat > .chat-header > .menu-toggle { + display: inline-block; + -webkit-app-region: no-drag +} + +body > #app > #page > #chats > .chat > .chat-header > .close-chat { + -webkit-app-region: no-drag +} + +body > #app > #page > #chats > .chat > .chat-content > .chat-content-layout > .chat-input > .message-composer > .composer-layout > .controls > .emoji-button { + line-height: 22px; +} + + +/* User */ +body > #app > #page > .user-profile { + width: initial; + margin: var(--dragbar-height) 0 0 var(--sidebar-width); +} + +body > #app > #page > .user-profile > .avatar { + min-height: 200px; + margin-bottom: 40px; +} + +body > #app > #page > .user-profile > .avatar > .upload-image { + margin-bottom: 0; +} + +body > #app > #page > .user-profile > .account-info > .row { + margin: 0 auto 10px; +} + + +/* Contacts */ +/* Archives */ +body > #app > #page > .content-card { + display: flex; + align-items: center; + justify-content: center; + width: initial; + height: 100%; + margin: 0 0 0 var(--sidebar-width); +} + + +/* Settings */ +body > #app > #page > .user-settings { + width: initial; + margin: 0 0 0 var(--sidebar-width); +} + +body > #app > #page > .user-settings > .notification-settings > h4 { + margin: 0.835em 25px; +} + + +/* Tokens */ +body > #ap > #page > .access-tokens { + width: initial; + margin: 0 0 0 var(--sidebar-width); + padding-bottom: 0; +} + + +/* Modal */ +body > .modal { + display: flex !important; + justify-content: center; + align-items: center; + overflow: hidden; +} + +body > .modal > .modal-dialog { + margin: 0 auto; + padding: 20px; +} + +body > .modal > .modal-dialog > .modal-content > .modal-body { + /* 20px * 2 (top and bottom of body > .modal.group-members) */ + /* 56px (height of body > .modal > .modal-dialog > .modal-content > .modal-header) */ + height: calc(100vh - 96px); + overflow: scroll; +} + + +/* Modal > Group */ +body > .modal:matches(.new-group, .new-dm) > .modal-dialog > .modal-content .upload-image { + margin: 0 0 5px; +} +body > .modal.new-group > .modal-dialog > .modal-content .modal-body > .upload-image { + margin: 0 auto 20px; +} + +body > .modal.new-group > .modal-dialog > .modal-content .modal-body > .group-name { + margin-bottom: 5px; +} + +body > .modal.new-dm > .modal-dialog > .modal-content > .modal-body { + /* 20px * 2 (top and bottom of body > .modal.group-members) */ + /* 56px (height of body > .modal > .modal-dialog > .modal-content > .modal-header) */ + /* 72px (height of body > .modal > .modal-dialog > .modal-content > .modal-footer) */ + height: calc(100vh - 168px); +} + + +/* Modal > Members */ +body > .modal.group-members > .modal-dialog > .modal-content > .modal-body > .members .member > .avatar { + width: 85px; + height: 85px; +} + +body > .modal.group-members > .modal-dialog > .modal-content > .modal-body > .members .member > .overlay > button { + width: 100%; + padding: 6px 0; +} + + +/* Modal > Media Search */ +body > .modal.media-search-modal > .modal-dialog { + min-width: 645px; +} + +body > .modal.media-search-modal > .modal-dialog > .modal-content > .modal-body { + padding: 0; +} + +body > .modal.media-search-modal > .modal-dialog > .modal-content > .modal-body > .scroll > .search-results { + display: flex; + justify-content: center; + flex-wrap: wrap; + width: 100%; + margin: 0; + padding: 0; +} diff --git a/media/screenshot.png b/media/screenshot.png index eb32d49..3bf3164 100644 Binary files a/media/screenshot.png and b/media/screenshot.png differ diff --git a/package.json b/package.json index 27fcf68..033bee1 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "GroupMe", "productName": "GroupMe", - "version": "1.0.3", + "version": "1.0.4", "description": "Unofficial GroupMe App", "scripts": { "start": "electron .",