Skip to content

Obsidian 样式 - Thino 现代风格美化

Obsidian Style - Thino Modern Style Beautification

The Blue Topaz theme, maintained by PKMer members, added styling for the Thino plugin interface in a recent update. However, some friends’ usual themes are not the Blue Topaz theme. To allow everyone to experience Thino’s new look, I have ported out the Thino-related part from the Blue Topaz theme and am sharing it here.

Thino’s Brand new modern appearance display

The following four images show how Thino’s List View, Chat View, Dynamic View, and Card Sharing interfaces work together with the new modern look:

Obsidian Style - Thino Modern Style Beautification--Thino’s Brand new modern appearance display

Obsidian Style - Thino Modern Style Beautification--Thino’s Brand new modern appearance display

Obsidian Style - Thino Modern Style Beautification--Thino’s Brand new modern appearance display

Obsidian Style - Thino Modern Style Beautification--Thino’s Brand new modern appearance display

CSS Snippets Code

Introduction to Settings

The Thino settings glorified by this CSS include:

  • Thino Style
    • Put input box to bottom
    • hider Thino header
    • add Thino list scroll
    • hide thino modern moment banner
    • moment banner gradient
    • thino style
      • default
      • frosted style(Transparent)
      • frosted style
    • custom thino background
      • Default
      • custom color
      • custom background image
  • Thino background color
    • Hide Share Thino Banner Images
    • Thino Sharing Card Background Styles
      • Default
      • Same as workspace background
      • Same as the Thino background set above
      • Customized Sharing Background
    • Share Card Background Transparency

Below are the corresponding CSS Snippets code:

/* Thino.css from Blue Topaz Theme, Extracted by @ProudBenzene */
/* You can also use other important features of the Blue Topaz theme here: https://github.com/ProudBenzene/Blue-Topaz-Legacy */
/* @settings
name: Thino
id: Thino
settings:
-
id: style-options-for-Thino-plugin-heading-1
title: Thino style
title.zh: Thino 全局样式
type: heading
level: 1
collapsed: true
-
id: memos-inputbox
title: Put input box to bottom
title.zh: PC端Thino输入框置于页面底部
type: class-toggle
default: false
-
id: memos-hide-header
title: hider Thino header
title.zh: 隐藏thino 视图的头部
type: class-toggle
default: false
-
id: memos-scroll
title: add Thino list scroll
title.zh: 列表 瀑布流模式下给thino 增加一个滚动条
type: class-toggle
default: false
-
id: hider-memos-modern-banner
title: hide thino modern moment banner
title.zh: 隐藏Thino modern 主题下的动态视图的banner
type: class-toggle
default: false
-
id: memos-banner-gradient
title: moment banner gradient
title.zh: 动态视图的 banner 渐变显示
type: class-toggle
default: true
-
id: thino-view-style
title: thino style
title.zh: Thino的风格
type: class-select
allowEmpty: false
default: thino-frosted-style
options:
-
label: default
value: thino-default
-
label: Frosted Style(Transparent)
value: thino-frosted-style
-
label: Frosted Style
value: thino-frosted-style-default
-
id: thino-view-background
title: custom thino background
title.zh: 自定义Thino背景
type: class-select
allowEmpty: false
default: thino-background-default
options:
-
label: default
value: thino-background-default
-
label: custom color
value: thino-background-color
-
label: Custom background img
value: custom-thino-background
-
id: thino-modern-primary
title: thino background color
title.zh: thino 背景色
type: variable-themed-color
opacity: true
format: hsl-split
default-light: '#ebf3ee'
default-dark: '#1e1e1e'
-
id: thino-background-light-custom
title: Custom thino background light (url)
title.zh: 自定义Thino背景(亮色模式)
description: Customise the background image. Use the format in the Default below for an Online image.
description.zh: 需在上方选项种选择Custom,以自定义背景。使用Default内格式设置在线图片。
type: variable-text
default: url("https://")
-
id: thino-background-dark-custom
title: Custom thino background dark (url)
title.zh: 自定义Thino背景(暗色模式)
description: Customise the background image. Use the format in the Default below for an Online image.
description.zh: 需在上方选项种选择Custom,以自定义背景。使用Default内格式设置在线图片。
type: variable-text
default: url("https://")
-
id: style-options-for-Thino-plugin-share-heading
title: Thino share style
title.zh: Thino 卡片分享样式
type: heading
level: 1
collapsed: true
-
id: hide-share-thino-banner
title: hide share thino banner
title.zh: 隐藏分享Thino的横幅图片
type: class-toggle
default: false
-
id: share-thino-style
title: share thino style
title.zh: Thino分享样式
type: class-select
allowEmpty: false
default: thino-share-default
options:
-
label: default
value: thino-share-default
-
label: Same as workspace background
value: share-thino-with-workspace-background
-
label: Same as thino background
value: share-thino-with-thino-background
-
label: Custom share background
value: custom-thino-share-background
-
id: share-card-background-opacity-cp
title: Share Card Background Opacity
title.zh: 分享卡片背景透明度
type: variable-number-slider
default: 0.6
min: 0
max: 1
step: 0.05
-
id: share-thino-background-light-custom
title: Custom thino share background light (url)
description: Customise the background image. Use the format in the Default below for an Online image.
description.zh: 需在上方选项种选择Custom,以自定义背景。使用Default内格式设置在线图片。
type: variable-text
default: url("https://")
-
id: share-thino-background-dark-custom
title: Custom thino share background dark (url)
description: Customise the background image. Use the format in the Default below for an Online image.
description.zh: 需在上方选项种选择Custom,以自定义背景。使用Default内格式设置在线图片。
type: variable-text
default: url("https://")
*/
body {
/***thino***/
--share-thino-background-light-custom:url("https://");
--share-thino-background-dark-custom:url("https://");
--thino-background-light-custom:url("https://");
--thino-background-dark-custom:url("https://");
--share-card-background-opacity-cp:0.6;
--bg-color-settings-0: #07070747;
--bg-color-settings-0-1: #ffffff00;
--bg-color-settings-1: #7c7c7c6d;
--bg-color-settings-2: #1f1f1f52;
--bg-color-settings-3: #141414be;
--bg-color-settings-4: #2e2e2e9d;
--bg-color-settings-5: #424242aa;
--bg-color-settings-6: #191919c7;
}
/*****style setting logic******/
body:not(.custom-thino-background) .setting-item[data-id="thino-background-dark-custom"],
body:not(.custom-thino-background) .setting-item[data-id="thino-background-light-custom"],
body:not(.custom-thino-share-background) .setting-item[data-id="share-thino-background-dark-custom"],
body:not(.custom-thino-share-background) .setting-item[data-id="share-thino-background-light-custom"],
body:not(.thino-background-color) .setting-item[data-id="thino-modern-primary"]
{
display: none;
}
body:not(:is(.share-thino-with-workspace-background,.share-thino-with-thino-background,.custom-thino-share-background)) .setting-item[data-id="blur-thino-share-frosted-glass"]
{
display: none;
}
/* ================================== */
/* ============== Memos Thino============= */
/* ================================== */
body:not(.thino-default) div[data-type='thino_view']
{
--activeline-background: transparent;
--thino-wrapper-border: transparent;
--memos-icon-hover: var(--background-modifier-border);
--memos-memo-border: transparent;
--memos-location-wrapper-bg: transparent;
--memos-bg-accent:var(--theme-color-translucent-04);
--thino-background-primary:var(--bg-color-settings-0-1);
--memos-bg-light-blue: var(--theme-color-translucent-02);
--memos-text-blue:var(--interactive-accent);
}
body:is(.thino-default,.thino-frosted-style-default) div[data-type=thino_view] .memo-editor-wrapper{
background-color: var(--background-primary-bg-4-bt, var(--background-primary));
}
body:is(.thino-default,.thino-frosted-style-default) div[data-type=thino_view] .memolist-wrapper>.memolist-container {
background-color: transparent;
}
body:is(.thino-default,.thino-frosted-style-default) div[data-type=thino_view] .memo-wrapper,
body:is(.thino-default,.thino-frosted-style-default) .thino-hover-popover .memo-wrapper,
body:is(.thino-default,.thino-frosted-style-default) .block-language-thino .thino-embed-container .memo-wrapper {
background-color: var(--background-primary-bg-4-bt, var(--background-primary));
}
div[data-type=thino_view] .memo-editor-wrapper>.tip-text {
padding-left:1.5em;
}
.thino-editor-modal .common-editor-wrapper .common-editor-inputer {
border: none;
}
body.custom-thino-background div[data-type='thino_view'].workspace-leaf-content
{
background-image: var(--thino-background-light-custom) ;
--background-primary:var(--bg-color-settings-2);
--memos-memo-bg:var(--bg-color-settings-0-1);
--memos-memo-border:var(--bg-color-settings-0-1);
background-size: cover;
}
body.custom-thino-background.theme-dark div[data-type='thino_view'].workspace-leaf-content
{
background-image: var(--thino-background-dark-custom);
--background-primary: var(--bg-color-settings-2);
--memos-memo-bg: var(--bg-color-settings-0-1);
--memos-memo-border: var(--bg-color-settings-0-1);
background-size: cover;
}
body.custom-thino-background.theme-dark div[data-type='thino_view'] #page-wrapper {
background: var(--bg-color-settings-2);
}
.workspace-tab-container:fullscreen div[data-type='thino_view'],
.workspace-tab-container:fullscreen .workspace-leaf-content {
background-color: var(--background-primary-alt);
}
.theme-dark div[data-type=thino_view] .usage-heat-map-wrapper .stat-container {
background-color: #2a2a2a8a;
box-shadow: none;
}
body:not(:is(.hider-memos-modern-banner, .memos-banner-gradient)) div[data-type=thino_view] .moments-view .moments-view-background-wrapper .moments-view-background-overlay .moments-view-user-info .moments-view-user-name {
color: white;
font-weight: bold;
letter-spacing: 1px;
}
.theme-dark div[data-type=thino_view] .memo-editor-wrapper,
.theme-dark .thino-editor-modal .memo-editor-wrapper {
border: none;
}
.modal.thino-editor-modal .modal-content
{
background-color:var(--bg-color-settings-3);
}
div[data-type=thino_view] .moments-view .thino-moment-wrapper .thino-moment-container .thino-moment-user-name {
color: #66789d;
}
div[data-type=thino_view] .moments-view .moments-view-background-wrapper .moments-view-background-overlay .moments-view-user-idea {
font-size: 12px;
}
div[data-type=thino_view] .memo-wrapper>.memo-top-wrapper>.memo-top-left-wrapper>.memo-type-img
{
align-items: flex-end;
}
div[data-type=thino_view] .moments-view .memo-content-text p a[href^="#收集"] {
display: block;
position: absolute;
left: 180px;
top: calc(100% - 31px);
font-size: 10px;
padding-top: 4px;
padding-bottom: 4px;
color: var(--tag-color);
}
div[data-type=thino_view].mobile-view .memos-sidebar-wrapper
{
background: linear-gradient(to right, var(--color-base-00) 30%, var(--background-mobile-drawer-2) 100%);
backdrop-filter: blur(10px);
}
div[data-type=thino_view] .common-editor-inputer:has(.cm-focused) + .common-tools-wrapper >.btns-container>.confirm-btn
{
background-color:var(--interactive-accent);
}
div[data-type=thino_view] button:not(.clickable-icon):hover
{
box-shadow: none;
}
div[data-type=thino_view] .queries-wrapper>.create-query-btn-container>.btn
{
border: 1px solid var(--memos-memo-border);
}
body:not(.thino-default) .heatmap-date-picker-wrapper>.date-picker-day-container>.date-picker-day-content>.day-item.current {
background-color: var(--memos-stat-day-L1-bg);
filter: opacity(0.8);
}
body:not(.thino-default) .heatmap-date-picker-wrapper>.date-picker-day-container>.date-picker-day-content>.day-item.current .day-item-text {
color:var(--color-base-70);
}
body:is(.thino-frosted-style) div[data-type=thino_view] .modern#page-wrapper,
body:is(.thino-frosted-style) div[data-type=thino_view] .memo-wrapper, .thino-hover-popover .memo-wrapper,
body:is(.thino-frosted-style) .block-language-thino .thino-embed-container .memo-wrapper,
body:is(.thino-frosted-style) div[data-type=thino_view] .memo-editor-wrapper, .thino-editor-modal .memo-editor-wrapper
{
--memos-memo-bg: transparent;
--memos-memo-bg-primary: transparent;
}
body:is(.thino-background-default,.custom-thino-background) div[data-type=thino_view] .modern#page-wrapper,
body:is(.thino-background-default,.custom-thino-background) div[data-type=thino_view] .memo-wrapper, .thino-hover-popover .memo-wrapper,
body:is(.thino-background-default,.custom-thino-background) .block-language-thino .thino-embed-container .memo-wrapper,
body:is(.thino-background-default,.custom-thino-background) div[data-type=thino_view] .memo-editor-wrapper, .thino-editor-modal .memo-editor-wrapper
{
--memos-memo-bg: var(--bg-color-settings-0-1);
--memos-memo-bg-primary: var(--bg-color-settings-0-1);
}
body:is(.thino-background-default,.thino-frosted-style,.custom-thino-background,.thino-background-color) div[data-type=thino_view] .modern#page-wrapper:is(.memos-chat-view,.memos-moments-view,.memos-list-view,.memos-table-view,.memos-calendar-view,.memos-waterfall-view) {
background-color: transparent;
--thino-modern-secondary:transparent;
--thino-modern-primary:transparent;
}
body.thino-frosted-style-default div[data-type=thino_view] .modern#page-wrapper:is(.memos-chat-view,.memos-moments-view,.memos-list-view,.memos-table-view,.memos-calendar-view,.memos-waterfall-view)
{
--thino-modern-primary: var(--bg-color-settings-0-1);
--thino-modern-secondary: transparent;
}
body.thino-frosted-style-default div[data-type=thino_view] .moments-view .thino-moment-wrapper {
border-radius: var(--radius-m);
background-color: var(--bg-color-settings-2);
}
body.thino-frosted-style-default div[data-type=thino_view] .moments-view .thino-moment-wrapper:after
{
display: none;
}
body.thino-background-color div[data-type=thino_view].workspace-leaf-content
{
--start-color: hsla(
var(--thino-modern-primary-h),
var(--thino-modern-primary-s),
var(--thino-modern-primary-l),
var(--thino-modern-primary-a)
);
--end-color: hsla(
calc(var(--thino-modern-primary-h) + 30),
calc(var(--thino-modern-primary-s) + 5%),
calc(var(--thino-modern-primary-l) + 13%),
calc(var(--thino-modern-primary-a) * 0.8)
);
background: linear-gradient(117deg, var(--start-color), var(--end-color));
--background-primary:var(--bg-color-settings-2);
--memos-memo-bg:var(--bg-color-settings-0-1);
--memos-memo-border:var(--bg-color-settings-0-1);}
body:not(.thino-default) div[data-type=thino_view] .menu-btns-popup {
background-color:var(--bg-color-settings-0-1);
backdrop-filter: blur(10px);
}
body:not:is(.thino-background-default,.custom-thino-background,.thino-frosted-style) div[data-type=thino_view] .memo-editor-wrapper>.memo-editor, .thino-editor-modal .memo-editor-wrapper>.memo-editor {
background: linear-gradient(to bottom, var(--background-secondary), transparent);
}
div[data-type=thino_view] .memos-chat-view .memolist-wrapper .memolist-container .chat-view {
--memos-memo-bg: transparent;
}
div[data-type=thino_view] .memos-chat-view .memolist-wrapper .memolist-container .chat-view:is(.fluent-style,.inline-style) .thino-bubble.right .wrap>.content:has(:is(.callout,img)) {
border: 1px solid var(--memos-memo-border);
}
div[data-type=thino_view] .memos-chat-view .memolist-wrapper .memolist-container .chat-view:is(.fluent-style,.inline-style) .thino-bubble.right .wrap>.content:has(:is(.callout,img)):before {
display:none;
}
body:not(.thino-default) div[data-type=thino_view].mobile-view .search-bar-container>.quickly-action-wrapper>.quickly-action-container
{
background-color:var(--bg-color-settings-0-1);
backdrop-filter: blur(10px);
}
body:not(.thino-default) div[data-type=thino_view] .memo-wrapper>.memo-top-wrapper>.memo-top-right-wrapper>.btns-container>.more-action-btns-wrapper>.more-action-btns-container,
body:not(.thino-default) .thino-hover-popover .memo-wrapper>.memo-top-wrapper>.memo-top-right-wrapper>.btns-container>.more-action-btns-wrapper>.more-action-btns-container,
body:not(.thino-default) .block-language-thino .thino-embed-container .memo-wrapper>.memo-top-wrapper>.memo-top-right-wrapper>.btns-container>.more-action-btns-wrapper>.more-action-btns-container,
body:not(.thino-default) div[data-type=thino_view] .menu {
background-color:var(--bg-color-settings-3);
backdrop-filter: blur(10px);
}
div[data-type=thino_view].mobile-view .search-bar-container>.quickly-action-wrappe {
padding: 0px;
width: 275px;
}
div[data-type=thino_view].mobile-view .section-header-container>.memos-header-search-section .thino-inline-filter-container
{
width: 275px;
}
div[data-type=thino_view] #cMenuToolbarModalBar .cMenuToolbarCommandItem {
backdrop-filter: unset;
}
div[data-type=thino_view] #cMenuToolbarModalBar .more-menu
{
border:none;
}
div[data-type=thino_view] #cMenuToolbarModalBar.cMenuToolbarGlassAesthetic,
div[data-type=thino_view] #cMenuToolbarModalBar.cMenuToolbarGlassAesthetic~#cMenuToolbarPopoverBar
{
backdrop-filter: unset;
}
div[data-type=thino_view].mobile-view .search-bar-container {
width: auto;
}
div[data-type=thino_view] .search-bar-container>.search-bar-inputer{
background-color: transparent!important;
padding:0;
}
div[data-type=thino_view].mobile-view .search-bar-container>.search-bar-inputer input:focus{
background-color: var(--memos-bg-searchbar-lightgray);
}
div[data-type=thino_view] .daily-thinos-list-wrapper .daily-thinos-view-wrapper .daily-thinos-view-container .date-card-container>.date-container-details .details-text
{
font-size:18px;
}
div[data-type=thino_view].mobile-view .thino-inline-filter-container .btns-container
{
flex-wrap: wrap;
}
div[data-type=thino_view].mobile-view .memo-editor-wrapper,
.thino-editor-modal .memo-editor-wrapper
{
padding:8px;
}
body div[data-type='thino_view'] .memo-editor-wrapper:has(.cm-focused) {
border: 1px solid var(--color-base-30);
}
div[data-type=thino_view] .user-banner-container>.userinfo-header-container>.userinfo-container .thino-user-icon
{
background-color: transparent!important;
box-shadow:none;
}
div[data-type=thino_view]:not(.mobile-view) .memos-moments-view .section-header-container.memos-header-container
{
justify-content: flex-start;
height: 40px;
flex-wrap: nowrap;
margin-top: 0;
padding: 0 20px;
}
div[data-type=thino_view] .moments-view .moments-view-background-wrapper .moments-show-editor-btn
{
top:20px;
}
div[data-type=thino_view].mobile-view .search-bar-container>.quickly-action-wrapper>.quickly-action-container,
div[data-type=thino_view] .search-bar-container>.quickly-action-wrapper>.quickly-action-container,
.thino-canvas-filter-group .search-bar-container>.quickly-action-wrapper>.quickly-action-container {
background-color:var(--color-base-20);
}
div[data-type=thino_view] .section-header-container>.memos-header-search-section .thino-inline-filter-container
{
background-color:var(--color-base-20);
}
div[data-type=thino_view] .modern input:not([type=checkbox])
{
border: 1px solid var(--background-modifier-border);
}
div[data-type=thino_view].mobile-view .modern .content-wrapper:has(.moments-view:not(.show-editor)) .section-header-container,
div[data-type=thino_view] .content-wrapper:has(.moments-view:not(.show-editor)) .section-header-container {
/* position: absolute; */
z-index:1;
width:calc(100% - 55px);
}
div[data-type=thino_view] .memos-moments-view .filter-query-container {
z-index: 1;
padding: 6px 0 0 20px;
justify-content: flex-start;
}
div[data-type=thino_view] .memos-chat-view .filter-query-container {
padding-bottom:20px;
padding-left:0px;
}
div[data-type=thino_view] .moments-view .thino-moment-wrapper .thino-moment-container .thino-moment-user-content .memo-wrapper .memo-top-wrapper .btn.more-action-btn {
background-color: transparent;
}
div[data-type=thino_view] .memos-moments-view .content-wrapper:not(:has(.edit-ing)) .memolist-wrapper {
margin-top: -60px;
transition: all 0.1s linear;
}
body.is-mobile div[data-type=thino_view] .memos-moments-view .memolist-wrapper {
margin-top: 6px;
}
body.is-mobile div[data-type=thino_view] .view-header:has(+.view-content>.memos-moments-view) {
position: absolute;
background: transparent;
border: none;
}
body div[data-type=thino_view] .section-header-container>.memos-header-search-section >*
{
border-color: transparent!important;
}
body.is-mobile div[data-type=thino_view] .moments-view .moments-view-background-wrapper .moments-show-editor-btn {
top: 8px;
}
body.is-mobile div[data-type=thino_view].mobile-view .search-bar-container>.search-bar-inputer input:focus
{
background-color: transparent;
}
body.is-mobile div[data-type=thino_view].mobile-view .search-bar-container {
width: 110px;
}
body.is-mobile div[data-type=thino_view] .memos-moments-view .memos-sidebar-wrapper
{
margin-top: 48px;
height: calc(100% - 85px);
}
body.is-mobile div[data-type=thino_view].mobile-view .tags-wrapper
{
background-color: transparent;
}
div[data-type=thino_view].mobile-view .modern#page-wrapper.memos-moments-view .content-wrapper .section-header-container .search-bar-container .search-bar-inputer
{
max-width:280px;
}
.share-memo-image-dialog .memo-content-text.markdown-rendered blockquote,
div[data-type=thino_view] .memo-content-text.markdown-rendered blockquote
{
margin-inline-start: 0;
margin-inline-end: 0;
}
/****thino 分享文字背景**/
body.hide-share-thino-banner .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background>.property-image
{
height:auto;
}
body.hide-share-thino-banner .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background>.background-container
{
height:auto;
}
body.hide-share-thino-banner .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background>.thino-user-header {
padding-top: var(--size-4-8);
}
body.share-thino-with-workspace-background .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background {
background-image: var(--theme-background);
background-size: cover;
}
body.theme-dark .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background {
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
body.share-thino-with-thino-background.theme-dark .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background {
background-image: var(--thino-background-dark-custom);
background-size: cover;
}
body.share-thino-with-thino-background .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background {
background-image: var(--thino-background-light-custom);
background-size: cover;
}
body.custom-thino-share-background .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background {
background-image: var(--share-thino-background-light-custom);
background-size: cover;
}
body.custom-thino-share-background.theme-dark .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background {
background-image: var(--share-thino-background-dark-custom);
background-size: cover;
}
.share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background>.memo-content-text,
.share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background>.thino-user-header,
.share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background>.watermark-container ,
.share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background>.thino-time-footer
{
background:rgba(255, 255, 255, var(--share-card-background-opacity-cp));
overflow: hidden;
}
.share-memo-image-dialog .memo-content-text p br {
display: block;
margin-top: 0.5em;
content: '\A';
white-space: pre;
}
.theme-dark .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background>.memo-content-text,
.theme-dark .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background>.thino-user-header,
.theme-dark .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background>.watermark-container ,
.theme-dark .share-memo-image-dialog>.dialog-container>.dialog-content-container>.memo-container>.memo-background>.thino-time-footer
{
background:rgba(24, 24, 24, var(--share-card-background-opacity-cp));
overflow: hidden;
}
/**********thino 加滚动条***/
body.memos-scroll div[data-type=thino_view] .memolist-wrapper .memolist-container .masonry-memolist {
max-height: 660px;
overflow: auto;
}
/**********动态海报渐变显示***/
body.memos-banner-gradient div[data-type=thino_view] .moments-view .moments-view-background-wrapper .moments-view-background {
mask-image: linear-gradient(to bottom,black 50%,transparent);
-webkit-mask-image: linear-gradient(to bottom,black 50%,transparent);
}
/**********隐藏头部信息***/
/* thino 隐藏头部信息 */
body.memos-hide-header
div[data-type="thino_view"]
.view-header
:is(.view-header-nav-buttons, .view-header-title-container) {
display: none;
}
body.memos-hide-header div[data-type="thino_view"] .view-header {
position: absolute;
right: 0;
background-color: transparent !important;
top: 12px;
transition: all 0.1s linear;
transform: translateY(-15px);
}
body.memos-hide-header div[data-type="thino_view"] .view-actions {
position: relative;
}
body.memos-hide-header div[data-type="thino_view"] .view-header:not(:hover) {
transform: translateY(calc(-1 * var(--header-height)));
transition: all 0.6s linear;
}
div[data-type=thino_view] .moments-view .moments-view-background-wrapper .moments-view-background-overlay .moments-view-user-info .moments-view-user-icon,
div[data-type=thino_view] .moments-view .thino-moment-wrapper .thino-moment-icon
{
background-color: transparent;
}
div[data-type=thino_view] .memos-moments-view .search-bar-container>.quickly-action-wrapper, .thino-canvas-filter-group .search-bar-container>.quickly-action-wrapper {
top: 38px;
left: 220px;
right:0;
}
.is-mobile div[data-type=thino_view].tiny-view .section-header-container>.memos-header-search-section .memos-view-switcher-wrapper,
div[data-type=thino_view] .memos-header-container>.memos-header-search-section .memos-view-switcher-wrapper {
border-color: transparent;
}
/********moden 动态视图模式***/
body.hider-memos-modern-banner div[data-type=thino_view]:not(.mobile-view) .memos-moments-view.modern .content-wrapper:has(.moments-view:not(.show-editor)) .section-header-container {
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
margin-top: 9px;
}
body.hider-memos-modern-banner div[data-type=thino_view] .memos-moments-view.modern .moments-show-editor-btn {
top: 22px ;
right: 0px;
}
body.hider-memos-modern-banner div[data-type=thino_view] .moments-view .moments-view-background-wrapper
{
position:unset;
}
body.hider-memos-modern-banner div[data-type=thino_view] .memos-moments-view.modern .search-bar-inputer {
width: 90%;
}
body.hider-memos-modern-banner div[data-type=thino_view] .memos-moments-view.modern .search-bar-container>.quickly-action-wrapper {
right: 80px;
}
body.hider-memos-modern-banner div[data-type=thino_view] .memos-moments-view.modern .moments-view .moments-view-background-wrapper .moments-view-background {
display: none;
}
body.hider-memos-modern-banner div[data-type=thino_view] .memos-moments-view.modern .moments-view .moments-view-background-wrapper .moments-view-background-overlay {
margin-top: -20px;
}
body.hider-memos-modern-banner div[data-type=thino_view] .view-header:has(+.view-content>.memos-moments-view.modern) {
display: none;
}
body.hider-memos-modern-banner div[data-type=thino_view] .memos-moments-view.modern .moments-view .moments-view-background-wrapper .moments-view-background-overlay .moments-view-user-info .moments-view-user-icon
{
width: 40px;
height: 40px;
margin-top: -12px;;
}
body:is(.custom-thino-background,.thino-background-color) div[data-type='thino_view'] .view-content
{
background: var(--bg-color-settings-0-1) ;
}
body.thino-frosted-style-default:not(.is-mobile) div[data-type='thino_view']:not(.mobile-view) .view-content ,
body.thino-frosted-style:not(.is-mobile) div[data-type='thino_view']:not(.mobile-view) .view-content {
background: var(--bg-color-settings-2) ;
backdrop-filter: blur(10px);
width: 95% ;
height: 95% ;
margin: auto;
box-shadow: var( --window-shadow2);
border-radius:var(--radius-l);
}
body:is(.thino-frosted-style,.custom-thino-background,.thino-background-color) div[data-type=thino_view] #page-wrapper:is(.memos-chat-view,.memos-moments-view,.memos-list-view,.memos-table-view,.memos-calendar-view,.memos-waterfall-view) {
background: var(--bg-color-settings-2) ;
}
/**memos 输入框移到下方***/
body.memos-inputbox div[data-type='thino_view']:not(.mobile-view) #page-wrapper .memo-editor-wrapper {
bottom: 0;
margin-bottom: -145px;
position: absolute;
padding:8px;
}
body.memos-inputbox div[data-type='thino_view']:not(.mobile-view) .memolist-wrapper.completed {
padding-bottom: 20px;
}
body.memos-inputbox div[data-type='thino_view']:not(.mobile-view) #page-wrapper > .content-wrapper {
height: calc(100% - 150px);
}
body.memos-inputbox div[data-type='thino_view']:not(.mobile-view) .memolist-wrapper {
flex-direction: column-reverse;
}
body.memos-inputbox div[data-type=thino_view] .memolist-wrapper .memolist-container .list-view .masonry-memolist-grid_column {
flex-direction: column-reverse;
}
body.memos-inputbox div[data-type=thino_view] .common-editor-wrapper .common-editor-inputer
{
min-height: 78px;
}
/******另一部分Thino******/
.memo-context-menu{
background-color:var(--bg-color-settings-0-1);
backdrop-filter: blur(10px);
}