↓ 跳过正文
季柠的自留地
  1. 文章/

Gotosocial 相关配置记录

··1890 字·4 分钟· loading ·
装修记录 Themes Css Gotosocial 装修
目录

前言
#

转去使用mastodon了，但是说不定什么时候又会想回来用gotosocial，所以记录一下相关配置

docker-compose.yml 配置
# 

services:
  gotosocial:
    image: docker.io/superseriousbusiness/gotosocial:snapshot
    container_name: gts_woof
    user: 1000:1000
    networks:
      - gotosocial
    environment:
      # Change this to your actual host value.
      GTS_HOST: 
#      GTS_ACCOUNT_DOMAIN: 
      GTS_INSTANCE_LANGUAGES: zh-cn,en
      GTS_INSTANCE_FEDERATION_SPAM_FILTER: true
      GTS_INSTANCE_EXPOSE_CUSTOM_EMOJIS: true
      GTS_ACCOUNTS_REGISTRATION_OPEN: true
      GTS_MEDIA_LOCAL_MAX_SIZE: 100MiB
      GTS_MEDIA_EMOJI_REMOTE_MAX_SIZE: 2048KiB
      GTS_MEDIA_EMOJI_LOCAL_MAX_SIZE: 3096KiB
      GTS_STATUSES_MAX_CHARS: 100000
      GTS_STATUSES_POLL_MAX_OPTIONS: 10
      GTS_STATUSES_POLL_OPTION_MAX_CHARS: 150
      GTS_STATUSES_MEDIA_MAX_FILES: 16
      GTS_SMTP_HOST: 
      GTS_SMTP_PORT: 
      GTS_SMTP_USERNAME: 
      GTS_SMTP_PASSWORD: 
      GTS_SMTP_FROM: 
      GTS_ADVANCED_RATE_LIMIT_REQUESTS: 0
      GTS_DB_TYPE: sqlite
      # Path in the GtS Docker container where
      # the sqlite.db file will be stored.
      GTS_DB_ADDRESS: /gotosocial/storage/sqlite.db
      # Change this to true if you're not running
      # GoToSocial behind a reverse proxy.
      GTS_LETSENCRYPT_ENABLED: "false"
      # Set your email address here if you
      # want to receive letsencrypt notices.
      GTS_LETSENCRYPT_EMAIL_ADDRESS: ""
      # Path in the GtS Docker container where the
      # Wazero compilation cache will be stored.
      GTS_WAZERO_COMPILATION_CACHE: /gotosocial/.cache
      ## For reverse proxy setups:
      GTS_TRUSTED_PROXIES: "172.27.0.1/16"
      ## Set the timezone of your server:
      #TZ: UTC
      #GTS_STORAGE_BACKEND: 
      #GTS_STORAGE_S3_ENDPOINT: ""
      #GTS_STORAGE_S3_PROXY: true
      #GTS_STORAGE_S3_USE_SSL: true
      #GTS_STORAGE_S3_ACCESS_KEY: ""
      #GTS_STORAGE_S3_SECRET_KEY: ""
      #GTS_STORAGE_S3_BUCKET: ""
    ports:
      - "127.0.0.1:17998:8080"
      ## For letsencrypt:
      #- "80:80"
      ## For reverse proxy setups:
      #- "127.0.0.1:8080:8080"
    volumes:
      # Your data volume, for your
      # sqlite.db file and media files.
      - ./data:/gotosocial/storage
      # OPTIONAL: To mount volume for the WAZERO
      # compilation cache, for speedier restart
      # times, uncomment the below line:
      - ./.cache:/gotosocial/.cache
      - ./templates:/gotosocial/web/template
      - ./assets:/gotosocial/web/assets
    restart: "always"

networks:
  gotosocial:
    ipam:
      driver: default
      config:
        - subnet: "172.27.0.0/16"
          gateway: "172.27.0.1"

./assets/themes 新增的两个主题
#

暗色为低饱和黑粉，亮色为低饱和莫兰迪淡绿色

morandi-dark.css
# 

/*
  theme-title: Morandi Black Pink (dark)
  theme-description: Low-saturation black pink theme
*/

/* Use dark code highlights. */
@import url("../dist/_prism-dark.css");

:root {
  /* ===== 莫兰迪黑粉调色板 ===== */
  --pink1: #E8E0E0;
  --pink2: #B8A8A8;
  --pink3: #C4959A;
  --pink4: #D4A5AA;
  --pink5: #8B7A7C;
  --pink6: #2A2A32;
  --pink7: #1E1E24;

  /* Override orange trim */
  --orange2: var(--pink3);

  /* Restyle basic colors */
  --white1: var(--pink1);
  --white2: var(--pink2);
  --blue1: var(--pink2);
  --blue2: var(--pink3);
  --blue3: var(--pink4);

  /* Gray overrides */
  --gray1: #2A2A32;
  --gray2: #353540;
  --gray3: #3E3E48;
  --gray4: #4A4A54;
  --gray5: #8B7A7C;
  --gray6: #B8A8A8;
  --gray7: #E8E0E0;
  --gray8: #9B8E8E;

  /* Basic page styling */
  --bg: var(--pink7);
  --bg-accent: var(--pink6);
  --fg: var(--pink1);
  --fg-reduced: var(--pink2);
  --fg-accent: var(--pink3);

  /* Profile page */
  --profile-bg: var(--pink6);

  /* Buttons */
  --button-bg: var(--pink3);
  --button-fg: var(--pink7);
  --button-hover-bg: var(--pink4);
  --button-focus-border: var(--pink4);
  --button-danger-bg: #C4706A;
  --button-danger-fg: var(--pink1);
  --button-danger-hover-bg: #D4847E;

  /* Statuses */
  --status-bg: var(--pink6);
  --status-focus-bg: var(--pink6);
  --status-info-bg: var(--gray2);
  --status-focus-info-bg: var(--gray2);

  /* Box shadow */
  --boxshadow: 0 0.4rem 1rem -0.1rem rgba(0, 0, 0, 0.4);
  --boxshadow-border: 0.08rem solid var(--pink5);

  /* Input fields */
  --input-bg: var(--gray3);
  --input-border: var(--pink5);
  --input-focus-border: var(--pink3);
  --input-error-border: #C4706A;

  /* Links */
  --link-fg: var(--pink3);

  /* Avatar border */
  --avatar-border: var(--pink3);

  /* Error colors */
  --error1: #C4706A;
  --error2: #D4847E;
  --error3: #A85C56;

  /* Role colors */
  --role-admin: var(--pink3);
  --role-mod: #7D9B76;

  /* Info */
  --info-bg: var(--gray2);
  --info-fg: var(--pink1);
  --info-link: var(--pink3);

  /* Settings nav */
  --settings-nav-bg: var(--pink7);
  --settings-nav-header-fg: var(--pink3);
  --settings-nav-bg-hover: var(--pink6);
  --settings-nav-fg-hover: var(--pink1);
  --settings-nav-bg-active: var(--pink3);
  --settings-nav-border-active: var(--gray2);
  --settings-nav-fg-active: var(--pink7);

  /* Lists */
  --list-entry-bg: var(--pink6);
  --list-entry-alternate-bg: var(--gray2);
  --list-entry-hover-bg: var(--gray3);

  /* Scrollbar */
  scrollbar-color: var(--pink4) var(--pink7);
}

/* Main page background */
body {
  background: linear-gradient(var(--pink7), #18181E);
}

/* Scroll bar */
html, body {
  scrollbar-color: var(--pink4) var(--pink7);
}

/* Profile fields */
.profile .about-user .fields .field {
  border-bottom: 0.1rem solid var(--pink5);
}
.profile .about-user .fields .field:first-child {
  border-top: 0.1rem solid var(--pink5);
}

/* Status media */
.status .media .media-wrapper {
  border: 0.08rem solid var(--pink5);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
  color: var(--pink2);
}
.status .media .media-wrapper details video.plyr-video {
  background: var(--pink6);
}

/* Status polls */
.status .text .poll {
  background-color: var(--pink7);
}
.status .text .poll .poll-info {
  background-color: var(--pink6);
}

/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
  background-color: var(--pink7);
  color: var(--pink2);
}

/* Block quotes */
blockquote {
  background-color: var(--pink6);
  color: var(--pink2);
}
/* ===== 圆角美化 - 让页面更圆润 ===== */

/* 定义圆角变量 */
:root {
  --br: 1.5rem;
  --br-small: 0.5rem;
}

/* 主卡片 */
.about-section,
.status,
.profile .profile-header,
.profile .about-user,
.thread .status,
.settings-nav,
.form-section,
.with-form,
.page-footer,
.error-panel,
.info-panel,
button.btn,
input,
textarea,
select,
.account-card,
.media-wrapper,
.poll,
blockquote,
pre,
code,
.status .media .media-wrapper,
.status .text .poll .poll-info {
  border-radius: var(--br) !important;
}

/* 小元素圆角 */
.avatar,
.avatar-image-wrapper,
.emoji,
button,
.badge,
.labelinput,
.checkbox,
.radio {
  border-radius: var(--br-small) !important;
}

/* 导航栏圆角 */
header nav,
.header-nav {
  border-radius: 0 0 var(--br) var(--br);
}

/* 图片圆角 */
img,
.avatar img,
.media-wrapper img,
.media-wrapper video {
  border-radius: var(--br-small);
}

/* 确保嵌套元素也有圆角 */
.about-section-contents,
.status-info,
.status-content {
  border-radius: var(--br-small);
}


/* ===== 圆角显示修复 ===== */

/* 确保卡片之间有足够间距 */
.about-section,
.status,
.thread .status {
  margin-bottom: 1rem !important;
}

/* 确保父容器不截断圆角 */
main.about,
main.profile,
.thread,
.statuses-list {
  overflow: visible !important;
  padding: 0.5rem !important;
}

/* 确保卡片自身不被截断 */
.about-section,
.status,
.profile .profile-header,
.profile .about-user,
.settings-nav,
.form-section,
.with-form,
.page-footer,
.error-panel,
.info-panel {
  overflow: hidden !important;
}

/* 修复嵌套元素的圆角 */
.about-section-contents,
.status-info,
.status-content,
.profile .about-user .fields {
  border-radius: calc(var(--br) - 0.25rem);
  overflow: hidden;
}

/* 确保图片在圆角容器内 */
.about-section img,
.status img,
.profile img,
.media-wrapper img,
.media-wrapper video {
  border-radius: calc(var(--br-small) - 0.1rem);
}

/* 修复状态条目的圆角 */
.status .status-header,
.status .status-content,
.status .status-info {
  border-radius: var(--br-small);
}

morandi-light.css
# 

/*
  theme-title: Morandi Mint Chocolate (light)
  theme-description: Low-saturation mint chocolate theme
*/

/* Use light code highlights. */
@import url("../dist/_prism-light.css");

:root {
  /* ===== 莫兰迪薄荷巧克力调色板 ===== */
  --cream1: #F5F0EB;
  --cream2: #EDE8E2;
  --cream3: #E5DFD8;
  --cream4: #D4C8BC;
  --cream5: #C4B8AC;

  --mint1: #E8F0E5;
  --mint2: #A8C4A0;
  --mint3: #8BAF84;
  --mint4: #7D9B76;
  --mint5: #6B8E6B;

  --choco1: #5C4D42;
  --choco2: #4A4238;
  --choco3: #3A3328;

  /* Override orange trim */
  --orange2: var(--mint4);

  /* Restyle basic colors */
  --white1: var(--choco2);
  --white2: var(--choco1);
  --blue1: var(--mint5);
  --blue2: var(--mint4);
  --blue3: var(--mint3);

  /* Gray overrides for light mode */
  --gray1: var(--choco2);
  --gray2: var(--choco1);
  --gray3: #E5DFD8;
  --gray4: #D4C8BC;
  --gray5: #C4B8AC;
  --gray6: #B8A8A0;
  --gray7: #8B7D6B;
  --gray8: #7A6E5E;

  /* Basic page styling */
  --bg: var(--cream1);
  --bg-accent: var(--cream3);
  --fg: var(--choco2);
  --fg-reduced: var(--choco1);
  --fg-accent: var(--mint4);

  /* Profile page */
  --profile-bg: var(--cream2);

  /* Buttons */
  --button-bg: var(--mint4);
  --button-fg: var(--cream1);
  --button-hover-bg: var(--mint3);
  --button-focus-border: var(--mint3);
  --button-danger-bg: #C4706A;
  --button-danger-fg: var(--cream1);
  --button-danger-hover-bg: #D4847E;

  /* Statuses */
  --status-bg: var(--cream2);
  --status-focus-bg: var(--cream2);
  --status-info-bg: var(--cream3);
  --status-focus-info-bg: var(--cream3);

  /* Box shadow */
  --boxshadow: 0 0.4rem 1rem -0.1rem rgba(74, 66, 56, 0.08);
  --boxshadow-border: 0.08rem solid var(--cream4);

  /* Input fields */
  --input-bg: var(--cream2);
  --input-border: var(--cream4);
  --input-focus-border: var(--mint4);
  --input-error-border: #C4706A;

  /* Links */
  --link-fg: var(--mint5);

  /* Avatar border */
  --avatar-border: var(--mint4);

  /* Error colors */
  --error1: #C4706A;
  --error2: #D4847E;
  --error3: #A85C56;

  /* Role colors */
  --role-admin: var(--mint4);
  --role-mod: var(--mint2);

  /* Info */
  --info-bg: var(--cream3);
  --info-fg: var(--choco2);
  --info-link: var(--mint5);

  /* Settings nav */
  --settings-nav-bg: var(--cream1);
  --settings-nav-header-fg: var(--mint4);
  --settings-nav-bg-hover: var(--cream2);
  --settings-nav-fg-hover: var(--choco2);
  --settings-nav-bg-active: var(--mint4);
  --settings-nav-border-active: var(--cream4);
  --settings-nav-fg-active: var(--cream1);

  /* Lists */
  --list-entry-bg: var(--cream2);
  --list-entry-alternate-bg: var(--cream3);
  --list-entry-hover-bg: var(--cream4);

  /* Scrollbar */
  scrollbar-color: var(--mint4) var(--cream3);
}

/* Main page background */
body {
  background: linear-gradient(var(--cream1), #FAF8F5);
}

/* Scroll bar */
html, body {
  scrollbar-color: var(--mint4) var(--cream3);
}

/* Profile fields */
.profile .about-user .fields .field {
  border-bottom: 0.1rem solid var(--cream4);
}
.profile .about-user .fields .field:first-child {
  border-top: 0.1rem solid var(--cream4);
}

/* Status media */
.status .media .media-wrapper {
  border: 0.08rem solid var(--cream4);
}
.status .media .media-wrapper details .unknown-attachment .placeholder {
  color: var(--choco1);
}
.status .media .media-wrapper details video.plyr-video {
  background: var(--cream3);
}

/* Status polls */
.status .text .poll {
  background-color: var(--cream1);
}
.status .text .poll .poll-info {
  background-color: var(--cream2);
}

/* Code snippets */
pre, pre[class*="language-"],
code, code[class*="language-"] {
  background-color: var(--cream3);
  color: var(--choco2);
}

/* Block quotes */
blockquote {
  background-color: var(--cream2);
  color: var(--choco1);
}
/* ===== 圆角美化 - 让页面更圆润 ===== */

/* 定义圆角变量 */
:root {
  --br: 1.5rem;
  --br-small: 0.5rem;
}

/* 主卡片 */
.about-section,
.status,
.profile .profile-header,
.profile .about-user,
.thread .status,
.settings-nav,
.form-section,
.with-form,
.page-footer,
.error-panel,
.info-panel,
button.btn,
input,
textarea,
select,
.account-card,
.media-wrapper,
.poll,
blockquote,
pre,
code,
.status .media .media-wrapper,
.status .text .poll .poll-info {
  border-radius: var(--br) !important;
}

/* 小元素圆角 */
.avatar,
.avatar-image-wrapper,
.emoji,
button,
.badge,
.labelinput,
.checkbox,
.radio {
  border-radius: var(--br-small) !important;
}

/* 导航栏圆角 */
header nav,
.header-nav {
  border-radius: 0 0 var(--br) var(--br);
}

/* 图片圆角 */
img,
.avatar img,
.media-wrapper img,
.media-wrapper video {
  border-radius: var(--br-small);
}

/* 确保嵌套元素也有圆角 */
.about-section-contents,
.status-info,
.status-content {
  border-radius: var(--br-small);
}


/* ===== 圆角显示修复 ===== */

/* 确保卡片之间有足够间距 */
.about-section,
.status,
.thread .status {
  margin-bottom: 1rem !important;
}

/* 确保父容器不截断圆角 */
main.about,
main.profile,
.thread,
.statuses-list {
  overflow: visible !important;
  padding: 0.5rem !important;
}

/* 确保卡片自身不被截断 */
.about-section,
.status,
.profile .profile-header,
.profile .about-user,
.settings-nav,
.form-section,
.with-form,
.page-footer,
.error-panel,
.info-panel {
  overflow: hidden !important;
}

/* 修复嵌套元素的圆角 */
.about-section-contents,
.status-info,
.status-content,
.profile .about-user .fields {
  border-radius: calc(var(--br) - 0.25rem);
  overflow: hidden;
}

/* 确保图片在圆角容器内 */
.about-section img,
.status img,
.profile img,
.media-wrapper img,
.media-wrapper video {
  border-radius: calc(var(--br-small) - 0.1rem);
}

/* 修复状态条目的圆角 */
.status .status-header,
.status .status-content,
.status .status-info {
  border-radius: var(--br-small);
}

morandi-auto.css
#

可以实现自动切换亮暗模式

/*
  theme-title: Morandi (auto)
  theme-description: Elegant Morandi theme that adapts to system preferences - mint chocolate for light, black pink for dark
*/

/* Default to dark theme (black pink) */
@import url("morandi-dark.css");

/* Light mode (mint chocolate) */
@import url("morandi-light.css") screen and (prefers-color-scheme: light);
@import url("morandi-dark.css") screen and (prefers-color-scheme: dark);

自定义css
# 

/* ===== GoToSocial Emoji Hover ===== */

img.emoji,
.custom-emoji {
	display: inline-block;
	vertical-align: middle;

	transition:
		transform 0.18s cubic-bezier(.2,.8,.2,1),
		filter 0.18s ease;

	transform-origin: center center;
	will-change: transform;

	position: relative;
	z-index: 1;
}

/* Hover 放大 */
img.emoji:hover,
.custom-emoji:hover {
	transform: scale(2.2) translateY(-2px);

	filter: drop-shadow(
		0 4px 8px rgb(0 0 0 / 0.25)
	);

	z-index: 999;
}

/* 点击时轻微回弹 */
img.emoji:active,
.custom-emoji:active {
	transform: scale(1.9) translateY(0);
	transition: transform 0.08s ease;
}


/* ===== 卡片间距 ===== */

.about-section,
.status {
	margin-bottom: 1.5rem;
}


/* ===== 帖子淡入动画 ===== */

.status {
	animation: fadeInUp 0.25s ease-out;

	/* GPU 加速 */
	will-change: transform, opacity;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 8px, 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}



/* ===== 平滑滚动 ===== */

html {
	scroll-behavior: smooth;
}
footer nav ul #version span {
  display: none;
}
← Hello World Mastodon 装修相关 →