diff --git a/config/local.example.json b/config/local.example.json deleted file mode 100644 index 43ebd649..00000000 --- a/config/local.example.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "target": "https://otp.akkoma.dev/", - "staticConfigPreference": false -} diff --git a/index.html b/index.html index 7dda8f51..910c9e5e 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,10 @@ - Amputoma + Puppyoma + diff --git a/src/App.scss b/src/App.scss index 1d338d15..4b93c05d 100644 --- a/src/App.scss +++ b/src/App.scss @@ -3,7 +3,7 @@ @import '@fortawesome/fontawesome-svg-core/styles.css'; @import '@floatingghost/pinch-zoom-element/dist/pinch-zoom.css'; :root { - --navbar-height: 3.5rem; + --navbar-height: 3.8rem; --post-line-height: 1.4; } diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss index 4d8c40e3..fa0ef63a 100644 --- a/src/components/desktop_nav/desktop_nav.scss +++ b/src/components/desktop_nav/desktop_nav.scss @@ -7,8 +7,22 @@ color: var(--inputTopbarText, var(--inputText)); } - a { - color: var(--topBarLink, $fallback--link); + .site-brand { + padding-left: 10px; + padding-right: 10px; + padding-top: 6px; + padding-bottom: 6px; + border-radius: var(--btnRadius); + transition: all 300ms; + color: var(--topBarLink); + } + + .site-brand:hover { + background: color-mix(in srgb, var(--selectedMenuFaintLink) 5%, transparent) !important; + } + + .site-name { + margin-left: 10px; } .inner-nav { @@ -17,7 +31,7 @@ grid-template-columns: 2fr auto 2fr; grid-template-areas: "nav-left logo actions"; box-sizing: border-box; - padding: 0 1.2em; + padding:0 1.2em; margin: auto; max-width: 1110px; } @@ -59,6 +73,8 @@ transition: opacity; transition-timing-function: ease-out; transition-duration: 100ms; + display: flex; + align-items: center; @media all and (min-width: 800px) { opacity: 1 !important; @@ -79,15 +95,26 @@ img { display: inline-block; - height: var(--navbar-height); + height: 45px; + border-radius: var(--panelRadius); } } + .nav-icon:hover { + background: color-mix(in srgb, var(--selectedMenuFaintLink) 10%, transparent) !important; + color: var(--btn) !important; + } + .nav-icon { margin-left: 0.2em; width: 2em; - height: 100%; text-align: center; + height: 30px; + width: 30px; + background: color-mix(in srgb, var(--selectedMenuFaintLink) 5%, transparent) !important; + border-radius: var(--btnRadius); + transition: all 300ms; + &.router-link-active { font-size: 1.2em; @@ -95,16 +122,13 @@ .svg-inline--fa { font-weight: bolder; - color: $fallback--text; - color: var(--selectedMenuText, $fallback--text); - --lightText: var(--selectedMenuLightText, $fallback--lightText); } } - .svg-inline--fa { - color: $fallback--link; - color: var(--topBarLink, $fallback--link); - } + // .svg-inline--fa { + // // color: $fallback--link; + // // color: var(--topBarLink, $fallback--link); + // } } .-wide { @@ -134,15 +158,22 @@ .item { flex: 1; - line-height: var(--navbar-height); - height: var(--navbar-height); - overflow: hidden; - display: flex; - flex-wrap: wrap; + // line-height: var(--navbar-height); + // height: var(--navbar-height); + // overflow: hidden; + // display: flex; + // flex-wrap: wrap; &.right { justify-content: flex-end; text-align: right; + display: flex; + align-items: center; + } + + &.nav-left-wrapper { + display: flex; + align-items: center; } } } diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue index aa5edd40..812e4b8d 100644 --- a/src/components/desktop_nav/desktop_nav.vue +++ b/src/components/desktop_nav/desktop_nav.vue @@ -165,10 +165,10 @@ :title="$t('nav.moderation')" /> - + @@ -179,6 +179,7 @@ :title="$t('nav.administration')" /> + diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 4dc87f86..2a931a3c 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -126,18 +126,9 @@ border-color: var(--border, $fallback--border); padding: 0; - &:first-child .menu-item { - border-top-right-radius: $fallback--panelRadius; - border-top-right-radius: var(--panelRadius, $fallback--panelRadius); - border-top-left-radius: $fallback--panelRadius; - border-top-left-radius: var(--panelRadius, $fallback--panelRadius); - } - - &:last-child .menu-item { - border-bottom-right-radius: $fallback--panelRadius; - border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius); - border-bottom-left-radius: $fallback--panelRadius; - border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius); + .menu-item { + border-radius: $fallback--panelRadius; + border-radius: var(--panelRadius, $fallback--panelRadius);; } } @@ -189,7 +180,6 @@ } .timelines-background { - padding: 0 0 0 0.6em; background-color: $fallback--lightBg; background-color: var(--selectedMenu, $fallback--lightBg); border-top: 1px solid; diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 2d29d162..cdebfb87 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -52,13 +52,16 @@
+ - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/static/styles.json b/static/styles.json index 990cdc85..7608cd00 100644 --- a/static/styles.json +++ b/static/styles.json @@ -1,4 +1,5 @@ { + "paw-catppuccin": "/static/themes/paw-catppuccin.json", "pleroma-dark": "/static/themes/pleroma-dark.json", "pleroma-light": "/static/themes/pleroma-light.json", "pleroma-amoled": [ "Pleroma Dark AMOLED", "#000000", "#111111", "#b0b0b1", "#d8a070", "#aa0000", "#0fa00f", "#0095ff", "#d59500"], diff --git a/static/themes/paw-catppuccin.json b/static/themes/paw-catppuccin.json new file mode 100644 index 00000000..e639107a --- /dev/null +++ b/static/themes/paw-catppuccin.json @@ -0,0 +1,568 @@ +{ + "_pleroma_theme_version": 2, + "name": "Catppuccin (pawuwu.net)", + "theme": { + "themeEngineVersion": 3, + "shadows": { + "panel": [ + { + "color": "#000000", + "x": "0", + "y": "0", + "blur": "3", + "spread": 0, + "alpha": "0.5" + }, + { + "color": "#000000", + "x": "0", + "y": "4", + "blur": "6", + "spread": "3", + "inset": false, + "alpha": "0.3" + } + ], + "topBar": [ + { + "color": "#000000", + "x": 0, + "y": "1", + "blur": 4, + "spread": 0, + "alpha": "0.4" + }, + { + "color": "#000000", + "x": 0, + "y": "2", + "blur": "7", + "spread": 0, + "inset": false, + "alpha": "0.3" + } + ], + "popup": [ + { + "x": 2, + "y": 2, + "blur": 3, + "spread": 0, + "color": "#000000", + "alpha": 0.5 + } + ], + "avatar": [ + { + "x": 0, + "y": 1, + "blur": 8, + "spread": 0, + "color": "#000000", + "alpha": 0.7 + } + ], + "avatarStatus": [], + "panelHeader": [ + { + "color": "#000000", + "x": 0, + "y": "1", + "blur": "3", + "spread": 0, + "inset": false, + "alpha": "0.4" + }, + { + "color": "#ffffff", + "x": "0", + "y": "1", + "blur": "0", + "spread": 0, + "inset": false, + "alpha": "0.2" + } + ], + "button": [ + { + "color": "#000000", + "x": 0, + "y": 0, + "blur": 2, + "spread": 0, + "alpha": 1 + }, + { + "color": "#FFFFFF", + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "alpha": 0.2, + "inset": false + }, + { + "color": "#000000", + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "alpha": 0.2, + "inset": false + } + ], + "buttonHover": [ + { + "color": "#b9b9ba", + "x": 0, + "y": 0, + "blur": "1", + "spread": "2", + "alpha": "0.4", + "inset": false + }, + { + "color": "#FFFFFF", + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "alpha": 0.2, + "inset": false + }, + { + "color": "#000000", + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "alpha": 0.2, + "inset": false + } + ], + "buttonPressed": [ + { + "color": "#000000", + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "alpha": 1, + "inset": false + }, + { + "color": "#000000", + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "alpha": 0.2, + "inset": false + }, + { + "color": "#FFFFFF", + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "alpha": 0.2, + "inset": false + }, + { + "color": "#000000", + "x": 0, + "y": 0, + "blur": "2", + "spread": 0, + "inset": false, + "alpha": 1 + } + ], + "input": [ + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": false + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": false + }, + { + "x": 0, + "y": 0, + "blur": 2, + "inset": false, + "spread": 0, + "color": "#000000", + "alpha": 1 + } + ] + }, + "colors": { + "underlay": "#000000", + "bg": "#1e1e2e", + "fg": "#181825", + "cRed": "#eba0ac", + "cGreen": "#a6e3a1", + "cOrange": "#fab387", + "cBlue": "#a6e3a1", + "accent": "#89b4fa", + "link": "#89b4fa", + "text": "#a6adc8", + "badgeNotification": "#fab387", + "badgeNotificationText": "#a6adc8", + "alertNeutral": "#a6adc8", + "alertNeutralText": "#ffffff", + "alertPopupNeutral": "#a6adc8", + "alertPopupNeutralText": "#000000", + "alertSuccess": "#a6e3a1", + "alertSuccessText": "#ffffff", + "alertPopupSuccess": "#a6e3a1", + "alertPopupSuccessText": "#000000", + "alertWarning": "#fab387", + "alertWarningText": "#ffffff", + "alertPopupWarning": "#fab387", + "alertPopupWarningText": "#000000", + "alertError": "#eba0ac", + "alertErrorText": "#e9ebf2", + "alertPopupError": "#eba0ac", + "alertPopupErrorText": "#0e1017", + "panel": "#181825", + "panelText": "#a6adc8", + "alertNeutralPanelText": "#ffffff", + "alertSuccessPanelText": "#ffffff", + "alertWarningPanelText": "#ffffff", + "alertErrorPanelText": "#ffffff", + "fgText": "#a6adc8", + "topBar": "#181825", + "topBarText": "#8891b6", + "input": "#181825", + "inputTopbarText": "#8891b6", + "inputPanelText": "#a6adc8", + "inputText": "#a6adc8", + "btn": "#181825", + "btnText": "#a6adc8", + "btnTopBarText": "#a6adc8", + "btnDisabled": "#1d1d2c", + "btnDisabledTopBarText": "#3f4153", + "btnPanelText": "#a6adc8", + "btnDisabledPanelText": "#3f4153", + "btnDisabledText": "#3f4153", + "btnToggled": "#1368f5", + "btnToggledTopBarText": "#ffffff", + "btnToggledPanelText": "#ffffff", + "btnToggledText": "#ffffff", + "btnPressed": "#181825", + "btnPressedTopBarText": "#a6adc8", + "btnPressedTopBar": "#181825", + "btnPressedPanelText": "#a6adc8", + "btnPressedPanel": "#181825", + "btnPressedText": "#a6adc8", + "tabActiveText": "#a6adc8", + "tabText": "#a6adc8", + "tab": "#181825", + "fgLink": "#89b4fa", + "topBarLink": "#8891b6", + "panelLink": "#89b4fa", + "panelFaint": "#a6adc8", + "icon": "#62667b", + "poll": "#495a80", + "pollText": "#ffffff", + "border": "#1f1f2f", + "postCyantext": "#a6e3a1", + "postGreentext": "#a6e3a1", + "postLink": "#89b4fa", + "lightText": "#e6e8ef", + "popover": "#1e1e2e", + "selectedMenuPopover": "#29293e", + "highlight": "#29293e", + "highlightText": "#a6adc8", + "selectedMenu": "#29293e", + "selectedMenuText": "#a6adc8", + "selectedMenuPopoverIcon": "#686b83", + "highlightLink": "#89b4fa", + "selectedMenuLink": "#89b4fa", + "selectedMenuPopoverLink": "#89b4fa", + "selectedMenuPopoverText": "#a6adc8", + "faintLink": "#89b4fa", + "highlightFaintLink": "#89b4fa", + "selectedMenuFaintLink": "#89b4fa", + "selectedMenuPopoverFaintLink": "#89b4fa", + "faint": "#a6adc8", + "highlightFaintText": "#a6adc8", + "selectedMenuFaintText": "#a6adc8", + "selectedMenuPopoverFaintText": "#a6adc8", + "highlightLightText": "#e6e8ef", + "selectedMenuLightText": "#e6e8ef", + "selectedMenuPopoverLightText": "#e6e8ef", + "selectedMenuIcon": "#686b83", + "selectedPost": "#29293e", + "selectedPostText": "#a6adc8", + "selectedPostIcon": "#686b83", + "selectedPostLink": "#89b4fa", + "selectedPostFaintLink": "#89b4fa", + "highlightPostLink": "#89b4fa", + "selectedPostPostLink": "#89b4fa", + "selectedPostLightText": "#e6e8ef", + "selectedPostFaintText": "#a6adc8", + "popoverText": "#a6adc8", + "popoverIcon": "#62667b", + "popoverLink": "#89b4fa", + "postFaintLink": "#89b4fa", + "popoverPostFaintLink": "#89b4fa", + "popoverFaintLink": "#89b4fa", + "popoverFaintText": "#a6adc8", + "popoverPostLink": "#89b4fa", + "popoverLightText": "#e6e8ef", + "highlightIcon": "#686b83", + "highlightPostFaintLink": "#89b4fa", + "profileTint": "#1e1e2e", + "profileBg": "#0f101b", + "wallpaper": "#1a1a28" + }, + "opacity": { + "underlay": 0, + "bg": 1, + "alert": 0.5, + "alertPopup": 0.95, + "panel": 1, + "input": 0.5, + "btn": 1, + "faint": 0.5, + "border": 1, + "popover": 1, + "profileTint": 0.5 + }, + "radii": { + "btn": "10", + "input": "10", + "checkbox": 10, + "panel": "13", + "avatar": "50", + "avatarAlt": 50, + "tooltip": 10, + "attachment": "8" + }, + "fonts": { + "interface": { + "family": "Lexend" + }, + "input": { + "family": "Lexend" + }, + "post": { + "family": "Lexend" + }, + "postCode": { + "family": "monospace" + } + } + }, + "source": { + "themeEngineVersion": 3, + "fonts": { + "interface": { + "family": "Lexend" + }, + "post": { + "family": "Lexend" + }, + "input": { + "family": "Lexend" + } + }, + "shadows": { + "buttonHover": [ + { + "x": 0, + "y": 0, + "blur": "1", + "spread": "2", + "color": "#b9b9ba", + "alpha": "0.4", + "inset": false + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": false + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": false + } + ], + "buttonPressed": [ + { + "x": 0, + "y": 0, + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": 1, + "inset": false + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": false + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": false + }, + { + "x": 0, + "y": 0, + "blur": "2", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": 1 + } + ], + "panelHeader": [ + { + "x": 0, + "y": "1", + "blur": "3", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.4" + }, + { + "x": "0", + "y": "1", + "blur": "0", + "spread": 0, + "inset": false, + "color": "#ffffff", + "alpha": "0.2" + } + ], + "panel": [ + { + "x": "0", + "y": "0", + "blur": "3", + "spread": 0, + "color": "#000000", + "alpha": "0.5" + }, + { + "x": "0", + "y": "4", + "blur": "6", + "spread": "3", + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ], + "button": [ + { + "x": 0, + "y": 0, + "blur": 2, + "spread": 0, + "color": "#000000", + "alpha": 1 + }, + { + "x": 0, + "y": 1, + "blur": 0, + "spread": 0, + "color": "#FFFFFF", + "alpha": 0.2, + "inset": false + }, + { + "x": 0, + "y": -1, + "blur": 0, + "spread": 0, + "color": "#000000", + "alpha": 0.2, + "inset": false + } + ], + "topBar": [ + { + "x": 0, + "y": "1", + "blur": 4, + "spread": 0, + "color": "#000000", + "alpha": "0.4" + }, + { + "x": 0, + "y": "2", + "blur": "7", + "spread": 0, + "inset": false, + "color": "#000000", + "alpha": "0.3" + } + ] + }, + "opacity": { + "underlay": "0" + }, + "colors": { + "bg": "#1e1e2e", + "fg": "#181825", + "text": "#a6adc8", + "link": "#89b4fa", + "accent": "#89b4fa", + "cBlue": "#a6e3a1", + "cRed": "#eba0ac", + "cGreen": "#a6e3a1", + "cOrange": "#fab387", + "border": "--fg,3", + "topBarText": "--text,-9.75", + "topBarLink": "--topBarText", + "btnToggled": "--accent,-24.2", + "alertErrorText": "--text,21.2", + "badgeNotification": "#fab387", + "badgeNotificationText": "#a6adc8" + }, + "radii": { + "btn": "10", + "input": "10", + "panel": "13", + "avatar": "50", + "attachment": "8" + } + } +} diff --git a/static/tropic_island_night.jpg.webp b/static/tropic_island_night.jpg.webp new file mode 100644 index 00000000..976b2f3d Binary files /dev/null and b/static/tropic_island_night.jpg.webp differ