diff --git a/res/css/dings.custom.css b/res/css/dings.custom.css new file mode 100644 index 000000000..48ae3414f --- /dev/null +++ b/res/css/dings.custom.css @@ -0,0 +1,104 @@ + +.mx_RoomTile .mx_RoomTile_titleContainer .mx_RoomTile_title { + font-size: 11pt !important; +} +.mx_RoomTile .mx_RoomTile_titleContainer { + height: 20px; +} +.mx_EventTile_avatar { + padding-top: 3.5px; +} + +[class^="_avatar"].mx_BaseAvatar:not(.mx_UserMenu_userAvatar *, .mx_RoomSummaryCard_avatar *, .mx_GenericEventListSummary_avatars *) { + --cpd-avatar-size: 20px !important; +} +.mx_TabbedView_tabLabel{ + padding: 4px 10px; +} +.mx_AccessibleButton.mx_AccessibleButton_hasKind { + padding: 4px 10px; +} + +.mx_Username_color1 { + color: darkred; +} +.mx_Username_color2 { + color: darkcyan; +} +.mx_Username_color3 { + color: darkorange; +} +.mx_Username_color4 { + color: purple; +} +.mx_Username_color5 { + color: #9a308b; +} +.mx_Username_color6 { + color: #484dcb; +} +.mx_Username_color7 { + color: darkmagenta; +} +.mx_Username_color8 { + color: darkgreen; +} + +/* css modules get name mangled, so use a catchall for those */ +[class^="_avatar"] { + color: white !important; + &[data-color="1"] { + background-color: darkred; + } + &[data-color="2"] { + background-color: darkcyan; + } + &[data-color="3"] { + background-color: darkorange; + } + &[data-color="4"] { + background-color: purple; + } + &[data-color="5"] { + background-color: #9a308b; + color: black !important; + } + &[data-color="6"] { + background-color: #484dcb; + } + &[data-color="7"] { + background-color: darkmagenta; + } + &[data-color="8"] { + background-color: darkgreen; + } + & > [class^="_image"] { + width: 20px; + height: 20px; + } +} + + +.mx_RoomListHeader .mx_RoomListHeader_plusButton { + border-radius: 2px; +} +.mx_RoomTile.mx_RoomTile_selected, .mx_RoomTile:hover, .mx_RoomTile:focus-within, .mx_RoomTile.mx_RoomTile_hasMenuOpen { + border-radius: 2px; +} +.mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_exploreButton, .mx_LeftPanel .mx_LeftPanel_roomListContainer .mx_LeftPanel_filterContainer .mx_LeftPanel_recentsButton { + border-radius: 2px; +} +.mx_RoomSearch, .mx_MessageActionBar, .mx_ContextualMenu { + border-radius: 2px; +} +.mx_IconizedContextMenu .mx_IconizedContextMenu_optionList:last-child .mx_IconizedContextMenu_item:last-child { + border-radius: 0 0 2px 2px; +} + + +body { + --cpd-color-text-action-accent: darkmagenta !important; + --cpd-color-text-critical-primary: #cc0055 !important; + --MBody-border-radius: 2px !important; +} + diff --git a/src/vector/index.html b/src/vector/index.html index f5213701c..50e0729d9 100644 --- a/src/vector/index.html +++ b/src/vector/index.html @@ -48,6 +48,7 @@ <% } } %> + <% for (const tag of htmlWebpackPlugin.tags.headTags) { let path = tag.attributes && tag.attributes.href; diff --git a/webpack.config.js b/webpack.config.js index d7dc5ffa0..00f751ed8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -365,6 +365,24 @@ module.exports = (env, argv) => { }, }, ], + exclude: /\.custom\.css$/, + }, + { + test: /\.custom\.css$/, + use: [ + { + loader: "file-loader", + options: { + esModule: false, + name: "dings.custom.[hash:7].[ext]", + outputPath: getAssetOutputPath, + publicPath: function (url, resourcePath) { + const outputPath = getAssetOutputPath(url, resourcePath); + return toPublicPath(outputPath); + }, + }, + }, + ], }, { test: /\.pcss$/,