Bumping to version 1.9.6, various changes including: removal of custom.css, customized css is now baked into via _QoLEnhancements.scss, removing Atmos theme, adding Retus default theme
This commit is contained in:
parent
4476393818
commit
a511dbbdbe
15
README.md
15
README.md
|
|
@ -1,13 +1,12 @@
|
|||
# Element Web Modifications
|
||||
For version [f0ck.it version: 1.9.5-4](https://github.com/vector-im/element-web)
|
||||
For version [f0ck.it version: 1.9.6](https://github.com/vector-im/element-web) (Develop Branch)
|
||||
|
||||
|
||||
|
||||
Running at https://chat.f0ck.it
|
||||
|
||||
- glowers patchset (greentexting)
|
||||
- custom.css with some quality of life enhancements like smaller images/videos
|
||||
- Atmos default theme
|
||||
- Quality of Life css enhancements
|
||||
|
||||
# Compile yourself with patchset
|
||||
`git pull https://github.com/vector-im/element-web`
|
||||
|
|
@ -18,16 +17,14 @@ Running at https://chat.f0ck.it
|
|||
|
||||
Copy the `patch` directory to the root of the element-web directory and run the patch after `yarn install`
|
||||
|
||||
After successful `yarn install` copy the _QoLEhancements.scc file to `$element-web-path/node_modules/matrix-react-sdk/res/css/structures/` then go back one folder and run rethemendex.sh to regenerate the components file.
|
||||
|
||||
Continue like normal...
|
||||
|
||||
`(cd node_modules/matrix-react-sdk; yarn reskindex)`
|
||||
|
||||
`yarn dist`
|
||||
|
||||
After successful compile go to the dist/ directory and unpack your compiled element-web, open the index.html and add the following line after `<link rel="stylesheet" disabled="disabled" data-mx-theme="Dark-custom" title="Dark-custom" href="bundles/992c2fdfdb70c62e3cd4/theme-dark-custom.css">`
|
||||
|
||||
`<link rel="stylesheet" href="custom.css">`
|
||||
|
||||
Should be around line ~53
|
||||
|
||||
# If weak male download prebuilt
|
||||
See prebuilt folder for that
|
||||
|
||||
|
|
|
|||
62
_QoLEnhancements.scss
Normal file
62
_QoLEnhancements.scss
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
/*
|
||||
Quality of Life Enhancements to make Element less shitty
|
||||
compared to other instant messaging clients out there,
|
||||
make it feel a little bit more like a real thing.
|
||||
|
||||
Ideas by schrumpel, 12/11/2021
|
||||
|
||||
*/
|
||||
|
||||
/* The default behaviour is just horrible and triggers me everytime I scroll through the timeline, apply this and see for yourself why this is better! */
|
||||
.mx_MImageBody {
|
||||
width: max-content!important;
|
||||
}
|
||||
/* Running a Discord bridge for example and you will thank me for this, this is important because otherwise Messages from people that use Discord are shown with less opacity than normal messages, because they are being sent as notices */
|
||||
.mx_MNoticeBody {
|
||||
opacity: 1!important;
|
||||
}
|
||||
/* make the file clipper appear on the left side, more intuitive for me */
|
||||
.mx_AccessibleButton.mx_MessageComposer_button.mx_MessageComposer_upload {
|
||||
position: absolute!important;
|
||||
left: 10px!important;
|
||||
}
|
||||
/* remove the horrible and ugly padding from the right panel */
|
||||
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
|
||||
padding: 0!important;
|
||||
}
|
||||
/* also the border radius! */
|
||||
.mx_RightPanel {
|
||||
border-radius: 0!important;
|
||||
}
|
||||
/* make avatars more edgy, but only 15% */
|
||||
.mx_BaseAvatar_image {
|
||||
border-top-left-radius: 5px!important;
|
||||
border-top-right-radius: 5px!important;
|
||||
border-bottom-left-radius: 5px!important;
|
||||
border-bottom-right-radius: 5px!important;
|
||||
}
|
||||
|
||||
.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar, .mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
|
||||
-webkit-mask-image: unset!important;
|
||||
mask-image: unset!important;
|
||||
}
|
||||
|
||||
/* videos/images should not have rounded borders... */
|
||||
.mx_MImageBody_thumbnail, .mx_MVideoBody {
|
||||
border-radius: 0!important;
|
||||
}
|
||||
|
||||
/* fix the ugly room list white border */
|
||||
.mx_SpacePanel .mx_SpaceButton.mx_SpaceButton_active.mx_SpaceButton_narrow .mx_SpaceButton_selectionWrapper {
|
||||
padding: 1px!important;
|
||||
border: 3px solid transparent!important;
|
||||
border-radius: 15%!important;
|
||||
background: var(--roomlist-highlights-color) !important;
|
||||
box-shadow: 1px 1px 0px white, 1px -1px 0px white, -1px -1px 0px white, -1px 1px 0px white;
|
||||
}
|
||||
|
||||
/* wtf is wrong with you guys?! */
|
||||
/* why the hell are there 2 borders on the mx_RoomHeader? JESUS */
|
||||
.mx_RoomHeader_wrapper {
|
||||
border: 0!important;
|
||||
}
|
||||
54
config.json
54
config.json
|
|
@ -11,7 +11,7 @@
|
|||
"disable_3pid_login": false,
|
||||
"brand": "f0ck.it",
|
||||
"branding": {
|
||||
"welcomeBackgroundUrl": "/img/background-auth.jpg",
|
||||
"welcomeBackgroundUrl": "https://w.wallhaven.cc/full/z8/wallhaven-z8dg9y.png",
|
||||
"authFooterLinks": [{"text": "chat.f0ck.it is running with glowers patchset", "url": "https://git.lat/schrumpel/element-modifications"}]
|
||||
},
|
||||
"embeddedPages": {
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
"feature_dnd": true
|
||||
},
|
||||
"default_federate": true,
|
||||
"default_theme": "custom-Atmos",
|
||||
"default_theme": "custom-Retus",
|
||||
"roomDirectory": {
|
||||
"servers": [
|
||||
"matrix.org",
|
||||
|
|
@ -42,29 +42,33 @@
|
|||
"settingDefaults": {
|
||||
"breadcrumbs": true,
|
||||
"custom_themes": [{
|
||||
"name": "Atmos",
|
||||
"is_dark": true,
|
||||
"colors": {
|
||||
"accent-color": "#1fb2b0",
|
||||
"accent": "#1fb2b0",
|
||||
"primary-color": "#1fb2b0",
|
||||
"warning-color": "#ff120c",
|
||||
"blah-bums-color": "#252525",
|
||||
"blah-bums-color-2": "#252525",
|
||||
"eventTile-hover-1": "4px solid #1fb2b0",
|
||||
"GroupPlaceHolder": "#252525",
|
||||
"sidebar-color": "#202020",
|
||||
"roomlist-background-color": "#252525",
|
||||
"roomlist-text-color": "#ffffff",
|
||||
"roomlist-text-secondary-color": "#b9b9b9",
|
||||
"roomlist-highlights-color": "#3b3b3b",
|
||||
"roomlist-separator-color": "#121212",
|
||||
"timeline-background-color": "#161618",
|
||||
"timeline-text-color": "#FFFFFF",
|
||||
"timeline-text-secondary-color": "#777777",
|
||||
"timeline-highlights-color": "#252525",
|
||||
"reaction-row-button-selected-bg-color": "#161618"
|
||||
"name": "Retus",
|
||||
"is_dark": true,
|
||||
"colors": {
|
||||
"accent-color": "#1fb2b0",
|
||||
"accent": "#1fb2b0",
|
||||
"primary-color": "#1fb2b0",
|
||||
"warning-color": "#ff120c",
|
||||
"alert": "#ff5050de",
|
||||
|
||||
"sidebar-color": "#161618",
|
||||
"roomlist-background-color": "#252525",
|
||||
"roomlist-text-color": "#dcddde",
|
||||
"roomlist-text-secondary-color": "#8e9297",
|
||||
"roomlist-highlights-color": "#3b3b3b",
|
||||
"roomlist-separator-color": "#40444b",
|
||||
|
||||
"timeline-background-color": "#161618",
|
||||
"timeline-text-color": "#dcddde",
|
||||
"secondary-content": "#dcddde",
|
||||
"tertiary-content": "#dcddde",
|
||||
"timeline-text-secondary-color": "#b9bbbe",
|
||||
"timeline-highlights-color": "#2b2b2b",
|
||||
"reaction-row-button-selected-bg-color": "#b9bbbe",
|
||||
|
||||
"quinary-content": "#4b4b4b",
|
||||
"system": "#3b3b3b"
|
||||
}
|
||||
}
|
||||
]}
|
||||
}
|
||||
}
|
||||
384
custom.css
384
custom.css
|
|
@ -1,384 +0,0 @@
|
|||
/* Element Web modification by @nixc:f0ck.it */
|
||||
/* Quality of Life enhancements the devs don't seem to see */
|
||||
/* f0ck.it version: 1.9.3-14 */
|
||||
.mx_AuthPage_modalContent {
|
||||
background: #222121 !important;
|
||||
}
|
||||
|
||||
.mx_Header_title {
|
||||
color: white;
|
||||
font-family: monospace;
|
||||
text-transform: uppercase full-width;
|
||||
}
|
||||
|
||||
.mx_ButtonSignIn {
|
||||
background-color: #9f0;
|
||||
color: black !important;
|
||||
font-family: monspace;
|
||||
text-transform: uppercase full-width;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.mx_ButtonSignIn {
|
||||
background-color: #828384 !important;
|
||||
}
|
||||
|
||||
.mx_AuthPage_modalBlur {
|
||||
filter: none !important;
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.mx_AuthPage_modalContent {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
.mx_AuthPage {
|
||||
background: rgba(0, 0, 0, 0) url("img/background-auth.jpg") repeat fixed center center / cover !important;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #161618;
|
||||
}
|
||||
|
||||
.mx_AuthBody_language .mx_Dropdown_input {
|
||||
color: #333435;
|
||||
}
|
||||
|
||||
.mx_MImageBody_thumbnail_container {
|
||||
max-width: 430px;
|
||||
}
|
||||
|
||||
.mx_ShareDialog_social_container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_MNoticeBody.mx_EventTile_content {
|
||||
/* background: #1c1c1e;
|
||||
border-radius: 5px;
|
||||
padding: 5px; */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.mx_MStickerBody_wrapper {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.mx_MStickerBody_wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#stickerpicker > .mx_AppTileMenuBar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mx_AppTileFullWidth {
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mx_AppTileBody, .mx_AppTileBody_mini {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu.mx_ContextualMenu_withChevron_bottom {
|
||||
bottom: 8px;
|
||||
padding: 1px;
|
||||
margin: -1px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu_chevron_bottom {
|
||||
border-left: 8px solid #0000;
|
||||
border-top: 8px solid #000;
|
||||
border-right: 8px solid transparent;
|
||||
}
|
||||
|
||||
.mx_MImageBody_thumbnail {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
span.mx_MVideoBody video.mx_MVideoBody {
|
||||
max-height: 480px;
|
||||
max-width: 480px;
|
||||
border-radius: 0;
|
||||
/*min-width: 480px;*/
|
||||
background: black;
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_userHeader {
|
||||
padding: 5px;
|
||||
order: 3;
|
||||
border-top: 1px solid var(--roomlist-separator-color);
|
||||
}
|
||||
|
||||
.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mx_RoomSearch.mx_RoomSearch_focused {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
background: #161618;
|
||||
}
|
||||
|
||||
.mx_UserMenu .mx_UserMenu_headerButtons::before {
|
||||
mask-image: url(../../img/feather-customised/chevron-down.5278abe.svg);
|
||||
-webkit-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.mx_AccessibleButton.mx_MessageComposer_button.mx_MessageComposer_upload {
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_upload {
|
||||
margin-right: 30px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer .mx_MessageComposer_avatar {
|
||||
position: relative;
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_wrapper {
|
||||
padding-left: 15px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mx_RightPanel {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mx_AccessibleButton.mx_MessageComposer_button.mx_MessageComposer_voiceMessage {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_button {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.mx_BetaCard {
|
||||
background-color: #252526;
|
||||
}
|
||||
|
||||
.mx_MImageBody_gifLabel {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mx_VoiceMessagePrimaryContainer .mx_Clock {
|
||||
width: auto;
|
||||
padding-right: 6px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.mx_MImageBody {
|
||||
display: block;
|
||||
margin-right: 0;
|
||||
width: max-content;
|
||||
min-width: unset;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
/* .mx_MFileBody {
|
||||
max-width: 0ch;
|
||||
display: flex;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
} */
|
||||
|
||||
.mx_BaseAvatar_image {
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
}
|
||||
|
||||
.mx_DecoratedRoomAvatar.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar, .mx_ExtraTile.mx_DecoratedRoomAvatar_cutout .mx_BaseAvatar {
|
||||
-webkit-mask-image: unset;
|
||||
mask-image: unset;
|
||||
}
|
||||
|
||||
span.mx_MVideoBody video.mx_MVideoBody {
|
||||
max-height: 270px;
|
||||
max-width: 0;
|
||||
border-radius: 5px;
|
||||
min-width: 480px;
|
||||
background: black;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_line, .mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_reply {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.mx_MImageBody_thumbnail {
|
||||
margin-bottom: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.mx_InlineSpinner {
|
||||
display: inline;
|
||||
position: relative;
|
||||
left: 0;
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.mx_Spinner_icon {
|
||||
background-color: #000;
|
||||
-webkit-animation: spin 2.1s steps(60) infinite;
|
||||
animation: spin 2.1s steps(60) infinite;
|
||||
filter: invert(100);
|
||||
}
|
||||
|
||||
.mx_SendMessageComposer .mx_BasicMessageComposer {
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_wrapper {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.mx_MainSplit > .mx_RightPanel_ResizeWrapper {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mx_LeftPanel {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mx_ReplyPreview {
|
||||
border: 0;
|
||||
border-bottom-color: currentcolor;
|
||||
border-bottom-style: none;
|
||||
border-bottom-width: 0px;
|
||||
background: var(--timeline-background-color);
|
||||
border-bottom: none;
|
||||
border-radius: 0;
|
||||
max-height: 50vh;
|
||||
overflow: auto;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.mx_EventTile_content .markdown-body code, .mx_EventTile_content .markdown-body pre {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
color: #ece0e0;
|
||||
}
|
||||
|
||||
.mx_EventTile[data-layout=bubble][data-self=true] {
|
||||
--backgroundColor: #252525;
|
||||
}
|
||||
|
||||
.mx_EventTile[data-layout=bubble][data-self=false] {
|
||||
--backgroundColor: #252525;
|
||||
}
|
||||
|
||||
.mx_EventTile[data-layout=bubble] .mx_EventTile_avatar img {
|
||||
-webkit-box-shadow: 0 0 0 3px #252525;
|
||||
box-shadow: 0 0 0 3px #252525;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.mx_EventTile[data-layout=bubble].mx_EventTile_selected:before, .mx_EventTile[data-layout=bubble]:hover:before {
|
||||
background: #25252540;
|
||||
}
|
||||
|
||||
.mx_EventTile[data-layout=bubble].mx_EventTile_selected .mx_EventTile_avatar img, .mx_EventTile[data-layout=bubble]:hover .mx_EventTile_avatar img {
|
||||
-webkit-box-shadow: 0 0 0 3px #252525;
|
||||
box-shadow: 0 0 0 3px #252525;
|
||||
}
|
||||
|
||||
.mx_MediaBody.mx_AudioPlayer_container .mx_AudioPlayer_seek .mx_Clock {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.mx_ToastContainer .mx_Toast_toast, .mx_ToastContainer.mx_ToastContainer_stacked::before {
|
||||
-webkit-box-shadow: 0px 0px 0px 1px rgba(136, 131, 131, 0.5);
|
||||
box-shadow: 0px 0px 0px 1px rgba(136, 131, 131, 0.5);
|
||||
border-radius: 0;
|
||||
background: #202020;
|
||||
}
|
||||
|
||||
.mx_NotificationBadge.mx_NotificationBadge_visible {
|
||||
background-color: #ff0707;
|
||||
}
|
||||
|
||||
.mx_MessageComposer_e2eIcon.mx_E2EIcon {
|
||||
position: absolute;
|
||||
left: 55px;
|
||||
margin-right: 0;
|
||||
top: 25px;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mx_Dialog {
|
||||
-webkit-box-shadow: unset;
|
||||
box-shadow: unset;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mx_MatrixChat_useCompactLayout .mx_EventTile .mx_EventTile_e2eIcon {
|
||||
top: 10px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
|
||||
/* in v 1.19.1 the access menu had no color anymore, this attempts to fix it */
|
||||
.mx_AccessibleButton.mx_MessageActionBar_maskButton::after {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.mx_ToastContainer {
|
||||
background: var(--roomlist-background-color);
|
||||
}
|
||||
|
||||
.mx_AppPermissionWarning {
|
||||
background: #161618;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.mx_ContextualMenu {
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
color: var(--timeline-text-color);
|
||||
border: 1px solid #2e2e30;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList .mx_AccessibleButton:hover {
|
||||
background-color: var(--roomlist-highlights-color);
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_AccessibleButton:last-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:first-child .mx_AccessibleButton:first-child {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -1 +1 @@
|
|||
The prebuilt archives are vanilla Element except for the greentext patch!
|
||||
All prebuilt versions from `element-v1.9.6-24` on will contain customized css and the greentext patch, below this version it's vanilla except for the greentext patch!
|
||||
BIN
prebuilt/element-v1.9.6-24-g0744c86a.tar.gz
Normal file
BIN
prebuilt/element-v1.9.6-24-g0744c86a.tar.gz
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user