Change website theme to my own

This commit is contained in:
itepechi 2023-08-05 03:46:10 +09:00
parent e3d8a83a1d
commit 687fd3c130
2 changed files with 33 additions and 60 deletions

View File

@ -109,6 +109,11 @@ button:hover {
box-shadow: var(--btnHoverShadow);
}
a.button:active,
button:active {
box-shadow: var(--btnPressedShadow);
}
.actions {
display: flex;
flex-grow: 1;

View File

@ -1,65 +1,33 @@
/* pleroma-light and pleroma-dark themes from pleroma-fe */
/* itepechi theme from itepechi/akkoma-fe */
:root {
--icon-filter: invert(38%) sepia(11%) saturate(209%) hue-rotate(179deg) brightness(99%) contrast(89%);
--wallpaper: rgba(11, 16, 23, 1);
--alertNeutral: rgba(185, 185, 186, 0.5);
--alertNeutralText: rgba(255, 255, 255, 1);
--icon-filter: invert(67%) sepia(7%) saturate(525%) hue-rotate(173deg) brightness(90%) contrast(92%);
--wallpaper: rgba(41, 41, 41, 1);
--alertNeutral: rgba(248, 248, 242, 0.5);
--alertNeutralText: rgba(13, 13, 7, 1);
--avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7);
--loadPostsSelected: rgba(23, 34, 46, 1);
--loadPostsSelectedText: rgba(185, 185, 186, 1);
--profileBg: rgba(7, 12, 17, 1);
--profileTint: rgba(15, 22, 30, 0.5);
--btnText: rgba(185, 185, 186, 1);
--btn: rgba(21, 30, 43, 1);
--loadPostsSelected: rgba(59, 59, 59, 1);
--loadPostsSelectedText: rgba(248, 248, 242, 1);
--profileBg: rgba(24, 26, 27, 1);
--profileTint: rgba(47, 47, 47, 0.5);
--btnText: rgba(248, 248, 242, 1);
--btn: rgba(55, 55, 55, 1);
--btnShadow: 0px 0px 2px 0px rgba(0, 0, 0, 1), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
--btnHoverShadow: 0px 0px 1px 2px rgba(185, 185, 186, 0.4) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
--lightText: rgba(236, 236, 236, 1);
--panelShadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5), 0px 4px 6px 3px rgba(0, 0, 0, 0.3);
--panelHeaderShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4), 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset;
--topBar: rgba(21, 30, 43, 1);
--topBarText: rgba(159, 159, 161, 1);
--topBarShadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.4), 0px 2px 7px 0px rgba(0, 0, 0, 0.3);
--underlay: rgba(9, 14, 20, 0.6);
--background: rgba(15, 22, 30, 1);
--faint: rgba(185, 185, 186, 0.5);
--selectedPost: rgba(23, 34, 46, 1);
--link: rgba(226, 177, 136, 1);
--text: rgba(185, 185, 186, 1);
--border: rgba(26, 37, 53, 1);
--poll: rgba(99, 84, 72, 1);
}
@media (prefers-color-scheme: light) {
:root {
--icon-filter: invert(67%) sepia(7%) saturate(525%) hue-rotate(173deg) brightness(90%) contrast(92%);
;
--wallpaper: rgba(248, 250, 252, 1);
--alertNeutral: rgba(48, 64, 85, 0.5);
--alertNeutralText: rgba(0, 0, 0, 1);
--avatarShadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.7);
--loadPostsSelected: rgba(224, 233, 240, 1);
--loadPostsSelectedText: rgba(48, 64, 85, 1);
--profileBg: rgba(128, 137, 146, 1);
--profileTint: rgba(242, 246, 249, 0.5);
--btnText: rgba(48, 64, 85, 1);
--btn: rgba(214, 223, 237, 1);
--btnShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(255, 255, 255, 0.5) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
--btnHoverShadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2), 0px 0px 1px 2px rgba(255, 195, 159, 1) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
--lightText: rgba(11, 14, 19, 1);
--panelShadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.5), 0px 3px 6px 1px rgba(0, 0, 0, 0.2);
--panelHeaderShadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.5) inset, 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
--topBar: rgba(214, 223, 237, 1);
--topBarText: rgba(48, 64, 85, 1);
--topBarShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.6);
--underlay: rgba(93, 96, 134, 0.4);
--background: rgba(242, 246, 249, 1);
--faint: rgba(48, 64, 85, 0.5);
--selectedPost: rgba(224, 233, 240, 1);
--link: rgba(245, 91, 27, 1);
--text: rgba(48, 64, 85, 1);
--border: rgba(216, 230, 249, 1);
--poll: rgba(243, 184, 160, 1);
}
--btnHoverShadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.2) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px -1px 0px 0px rgba(0, 0, 0, 0.2) inset;
--btnPressedShadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.2) inset, 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
--lightText: rgba(255, 255, 255, 1);
--panelShadow: 3px 3px 6px -3px rgba(0, 0, 0, 0.4);
--panelHeaderShadow: none;
--topBar: rgba(55, 55, 55, 1);
--topBarText: rgba(248, 248, 242, 1);
--topBarShadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.6);
--underlay: rgba(0, 0, 0, 0.15);
--background: rgba(47, 47, 47, 1);
--faint: rgba(248, 248, 242, 0.5);
--selectedPost: rgba(59, 59, 59, 1);
--link: rgba(214, 206, 199, 1);
--text: rgba(248, 248, 242, 1);
--border: rgba(60, 60, 60, 1);
--poll: rgba(113, 110, 107, 1);
}
html {
@ -651,4 +619,4 @@ img:not(.u-photo, .fa-icon) {
.username img:not(.u-photo) {
width: 16px;
height: 16px;
}
}