search

rien7 / obsidian-colorful-tag

Make your tag more beautiful and powerful!
Apache License 2.0
126 stars 3 forks source link

[Enhancement] Not Transparent Background of Tag Detail #34

Closed sarantsatsral-qy closed 1 year ago

sarantsatsral-qy commented 1 year ago

Hello, thank you so much for the plugin. I started using the tag detail to give me a guidance while writing. However, the transparent background of the tag doesn't let me work this way. Is there any way to make this possible? Thank you so much for your plugin, once again!

Screenshot (4)

rien7 commented 1 year ago

can you provide your theme, css snippet and this tag setting?

sarantsatsral-qy commented 1 year ago

image

Thank you so much for looking at this problem!

ITS slrvb callout

/*Callout Positioning*/
:not(.is-live-preview) .callout.callout.callout:is([data-callout-metadata*="p+l"],
[data-callout-metadata*=left]) {
  float: left;
  margin: unset;
  margin-right: 8px;
}

:not(.is-live-preview) .callout.callout:is([data-callout-metadata*="p+r"],
[data-callout-metadata*=right]) {
  float: right;
  margin: unset;
  margin-left: 8px;
}

.callout.callout:is([data-callout-metadata*=ctr],
[data-callout-metadata*=center]) {
  display: block;
  margin: auto;
  float: unset;
}

.callout.callout[data-callout-metadata*=wtiny] {
  width: 20%;
}
.callout.callout[data-callout-metadata*=wsmall] {
  width: 30%;
}
.callout.callout[data-callout-metadata*=ws-med] {
  width: 40%;
}
.callout.callout[data-callout-metadata*=wm-sm] {
  width: 50%;
}
.callout.callout[data-callout-metadata*=wmed] {
  width: 60%;
}
.callout.callout[data-callout-metadata*=wm-tl] {
  width: 80%;
}
.callout.callout[data-callout-metadata*=wtall] {
  width: 95%;
}
.callout.callout[data-callout-metadata*=wfull] {
  width: 100%;
}
.callout.callout[data-callout-metadata*=wtiny-c] {
  width: 19%;
}
.callout.callout[data-callout-metadata*=wsmall-c] {
  width: 32.4%;
}
.callout.callout[data-callout-metadata*=ws-med-c] {
  width: 39%;
}
.callout.callout[data-callout-metadata*=wm-sm-c] {
  width: 49%;
}
.callout.callout[data-callout-metadata*=wmed-c] {
  width: 59%;
}
.callout.callout[data-callout-metadata*=wm-tl-c] {
  width: 79%;
}

body .callout.callout.callout:is([data-callout-metadata*=nmg], [data-callout-metadata*=no-margin]) {
  margin: 0;
}

.callout.callout.callout:is([data-callout-metadata*=nbrd], [data-callout-metadata*=no-border]) {
  border: 0;
}

.callout.callout:is([data-callout-metadata*=txt-l],
[data-callout-metadata*=text-Left]) .callout-content {
  text-align: left;
}

.callout.callout:is([data-callout-metadata*=txt-r],
[data-callout-metadata*=text-Right]) .callout-content {
  text-align: right;
}

.callout.callout:is([data-callout-metadata*=txt-c],
[data-callout-metadata*=text-Center]) .callout-content {
  text-align: center;
}

/*Callout Sizing*/
.callout.callout.callout:is([data-callout-metadata*=banner], [data-callout-metadata*=sban]) {
  width: 100%;
  max-width: unset;
}
.callout.callout.callout:is([data-callout-metadata*=banner], [data-callout-metadata*=sban]) :is(.internal-embed, img) {
  width: 100%;
  object-fit: cover;
}

.callout.callout[data-callout-metadata*=clean] .callout-content {
  padding: 0;
}

/*Caption Adjustments*/
.callout:is([data-callout-metadata*=no-t],
[data-callout-metadata*=no-title]) .callout-title {
  display: none;
}

.callout:is([data-callout-metadata*=n-th],
[data-callout-metadata*=no-table-header]) th {
  display: none;
}
.callout:is([data-callout-metadata*=n-th],
[data-callout-metadata*=no-table-header]) table {
  margin-bottom: 5px;
}

.callout[data-callout-metadata*=t-w] table td {
  width: calc(var(--tbl-w) / 2);
}

/*--Callout Types--*/
body {
  --kbn-radius: 3px;
  --co-radius: 7px;
}

/* Minimalist Style */
.alt-co .callout.callout {
  background: rgba(var(--callout-color), 0.1);
  border: 0;
  margin-left: 40px;
  margin-right: 40px;
  border-radius: var(--radius, var(--co-radius));
  box-shadow: 1px 1px 0 rgba(var(--callout-color), 0.2);
}
.alt-co .callout.callout p:first-child {
  margin-block-start: 5px;
}
.alt-co .callout.callout:not(.is-collapsed) .callout-title {
  padding-bottom: 0;
}
.alt-co .callout-title {
  background: transparent;
}

.co-ttl-ctr .callout-title {
  justify-content: center;
}
.co-ttl-ctr .callout-title-inner {
  display: block;
  flex: unset;
}

/*Infobox*/
:is(.is-mobile .is-live-preview, .is-live-preview) .callout[data-callout*=infobox] {
  float: unset !important;
  max-width: 100%;
  margin: 0 !important;
}

.callout[data-callout*=infobox] {
  --callout-color: var(--interactive-accent-rgb);
  background: var(--note, var(--background-primary));
  border: 0;
  box-shadow: none;
  margin: 0;
  margin-left: 8px;
  width: 26vh;
  float: right;
}
.callout[data-callout*=infobox] .callout-title {
  padding: 0;
  justify-content: center;
}
.callout[data-callout*=infobox].is-collapsed .callout-fold {
  border: 1px solid var(--hr, var(--background-modifier-border));
  padding: 5px 10px;
}
.callout[data-callout*=infobox]:not(:hover):not(.is-collapsed) .callout-title, .callout[data-callout*=infobox] .callout-title :is(.callout-icon, .callout-title-inner) {
  display: none;
}
.callout[data-callout*=infobox] .callout-content {
  padding: 1px;
  border: 1px solid var(--table, var(--background-modifier-border));
  margin: 0;
  border-radius: var(--radius, var(--co-radius));
}
.callout[data-callout*=infobox] table {
  width: 100%;
}
.callout[data-callout*=infobox] :is(p, table) {
  margin-block-start: 0;
  margin-block-end: 0;
  margin: 0;
}
.callout[data-callout*=infobox] :is(h1, h2, h3, h4, h5, h6) {
  font-size: 20px;
  text-align: center;
  margin: 0;
  padding: 2px;
  color: var(--text-normal);
  background: var(--outer-bar, var(--background-secondary));
}
.callout[data-callout*=infobox] p, .callout[data-callout*=infobox] .internal-embed, .callout[data-callout*=infobox] img {
  margin: auto;
  padding: auto;
  text-align: center;
}

/*Image Grid*/
.callout.callout:is([data-callout=grid], [data-callout=masonry]) {
  background: transparent;
  border: 0;
  margin: 0;
  box-shadow: none;
}
.callout.callout:is([data-callout=grid], [data-callout=masonry]) .callout-content {
  display: block;
  width: 100%;
  border: 0;
  box-shadow: unset;
  padding: 0;
}
.callout.callout:is([data-callout=grid], [data-callout=masonry]) .callout-title {
  display: none;
}

.callout.callout[data-callout=masonry] .callout-content p {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, auto));
  grid-gap: 2px;
  margin: 0;
  margin-top: 5px;
}
.callout.callout[data-callout=masonry] .callout-content img {
  display: flex;
  flex: 1;
  align-self: stretch;
  object-fit: cover;
}

.callout.callout[data-callout=grid] .callout-content p {
  display: flex;
  margin-block-start: 0;
  margin-block-end: 0;
  justify-content: center;
}
.callout.callout[data-callout=grid] .callout-content img {
  display: table-cell;
  vertical-align: middle;
  padding: 1px;
  max-height: 35vh;
}
.callout.callout[data-callout=grid] .callout-content img[alt=wfull] {
  max-height: unset;
}

/*Captions*/
.callout.callout[data-callout*=caption] {
  background: transparent;
  text-align: center;
  box-shadow: none;
  border: 0;
  padding: 0;
  margin: 0;
  margin-top: -10px;
  max-width: 30vh;
}
.callout.callout[data-callout*=caption] .callout-title {
  display: none;
}
.callout.callout[data-callout*=caption] p {
  margin-block-start: 0;
  margin-block-end: 0;
  color: var(--text-faint);
}

/*Kanban*/
.callout.callout[data-callout*=kanban] {
  --callout-color: var(--text-normal);
  --callout-icon: layout-dashboard;
  --item-outline: 0 0 0 1px var(--outline, var(--background-modifier-border));
  --box-shadow: 0 0 5px var(--outline, var(--background-modifier-box-shadow));
  --lane-width: 250px;
  background: transparent;
  box-shadow: none;
  border: 0;
  width: auto;
  padding: 0;
}
.callout.callout[data-callout*=kanban] .callout-title {
  justify-content: center;
  background: var(--background-primary-alt);
  padding: 5px;
  border-radius: var(--radius, var(--co-radius));
}
.callout.callout[data-callout*=kanban] .callout-title-inner {
  flex: unset;
}
.callout.callout[data-callout*=kanban] .callout-content {
  padding: 0;
}
.callout.callout[data-callout*=kanban] ul li::marker, .callout.callout[data-callout*=kanban] ul li::before, .callout.callout[data-callout*=kanban] ul::before, .callout.callout[data-callout*=kanban] :is(ul, ul ul) .list-collapse-indicator {
  list-style-type: none;
  color: transparent;
  display: none !important;
}
.callout.callout[data-callout*=kanban] ul {
  display: flex;
  padding-inline-start: 0;
  margin-block-start: 5px;
  text-align: center;
  overflow: auto;
}
.callout.callout[data-callout*=kanban] ul li {
  min-width: var(--lane-width);
  border: 0;
  padding: 5px;
  margin: 5px 3px;
  padding-top: 4px;
  background: var(--note, var(--background-primary-alt));
  border-radius: var(--radius, var(--kbn-radius));
  box-shadow: var(--item-outline), var(--box-shadow);
}
.callout.callout[data-callout*=kanban] ul ul {
  flex-direction: column;
  text-align: left;
  overflow: unset;
}
.callout.callout[data-callout*=kanban] ul ul li {
  min-width: calc(var(--lane-width) / 2);
  padding: 5px;
  box-shadow: var(--item-outline);
  background: var(--code-bg, var(--background-primary));
}
.callout.callout[data-callout*=kanban] ul ul li :is(img, .internal-embed) {
  margin-bottom: -6px;
}
.callout.callout[data-callout*=kanban] ul.contains-task-list {
  padding-inline-start: 20px;
}
.callout.callout[data-callout*=kanban] .task-list-item-checkbox {
  cursor: default;
}

/* Recite */
.callout.callout[data-callout=recite] {
  --callout-color: 193, 67, 67;
  --callout-icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path stroke="none" fill="none" d="M0 0h24v24H0z"/><path d="M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455z"/></svg>';
  padding: 10px;
  padding-top: 5px;
  margin: 10px;
  border-style: solid;
  border-width: 11px;
  border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAA8CAYAAADxJz2MAAAFWWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjgwIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iNjAiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSI4MCIKICAgdGlmZjpJbWFnZUxlbmd0aD0iNjAiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjMwMC8xIgogICB0aWZmOllSZXNvbHV0aW9uPSIzMDAvMSIKICAgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIKICAgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIgogICB4bXA6TW9kaWZ5RGF0ZT0iMjAyMi0wMS0wMlQxNjowNTo0MS0wODowMCIKICAgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMi0wMS0wMlQxNjowNTo0MS0wODowMCI+CiAgIDxkYzp0aXRsZT4KICAgIDxyZGY6QWx0PgogICAgIDxyZGY6bGkgeG1sOmxhbmc9IngtZGVmYXVsdCI+RCZhbXA7RCBCb3JkZXI8L3JkZjpsaT4KICAgIDwvcmRmOkFsdD4KICAgPC9kYzp0aXRsZT4KICAgPHhtcE1NOkhpc3Rvcnk+CiAgICA8cmRmOlNlcT4KICAgICA8cmRmOmxpCiAgICAgIHN0RXZ0OmFjdGlvbj0icHJvZHVjZWQiCiAgICAgIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFmZmluaXR5IERlc2lnbmVyIDEuMTAuNCIKICAgICAgc3RFdnQ6d2hlbj0iMjAyMi0wMS0wMlQxNjowNTo0MS0wODowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+SLcLyAAAAYFpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAACiRdZHPK0RRFMc/8xD50SiUhcVLWA35UWJjMZNfhcXMKIPNm2fejJo3Xu+NJFtlO0WJjV8L/gK2ylopIiVLWRMbpuc8o0Yy53bP/dzvPed077mgRNO66ZR3g5nJ2uHRoDoTm1Urn/Ch0EQdqqY71mRkJEpJe7+VaLHrTq9W6bh/rWYh4ejgqxIe0i07KzwmPLGStTzeEm7UU9qC8IlwwJYLCt94erzAzx4nC/zpsR0Nh0CpF1aTvzj+i/WUbQrLy2kz08v6z328l9QmMtMRWVtltuAQZpQgKuMME6KfHgbF99NJL12yo0R+93f+FEuSq4u3WMVmkSQpsgREXZbqCVkN0RMy0qx6/f/bV8fo6y1Urw1CxaPrvrZD5Sbkc677ceC6+UMoe4DzTDF/aR8G3kTPFbW2PfCvw+lFUYtvw9kGNN9bmq19S2UyFcOAl2Ooi0HDFVTPFXr2c87RHUTX5KsuYWcXOiTeP/8FK5Jny8RYHqYAAAAJcEhZcwAALiMAAC4jAXilP3YAAAG5SURBVHic7dyxSiNRFMbxv0OwEkvZfrEWleWAvbA+giB5ANtgcx/gFJK0+wAbwUdYV7bZRjiIirXYL1tbiajFXHV3Y5KBbIyTfL8yOQxfPu5kprkXKnCzRTfrVpmdBm7WdbPFKrNFhYt9As6BnVGD1cgOcJ5/+0CNfl+4WQG0AB80N8U+AiduloBOirh/bejVFehmH4AjYJ/ZLO9Jg7KDo9xJj54C3ewzcAlsjjdbrWwCl7mbvzyvLjebp7xdW28YrE6WgG9u1gFSiriFvALdbBk4QeVV0aL8b1wGKNysCVwA6xONVS/rwIWbNefc7GHSaeps6HugiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIyCzQTqURaafSiBpAE/gCLAwbThFzY0/0DlS8K2+A3SJFdIE14Gy8sabKGbCWIroFQIq4AjaA9kRj1UMb2MidvexYzzuw99zsB/CVcoe2vPgNNFPE9z8/7HmI5IEV4PiNgtXBMbDyb3nQ5ymcIn4BW8AecDfebO/aHWUHW7mTHn2PNMnnpLTd7CdwSHmOyiy5BrZTxOmgoaHvgfkCq8DBfwpWBwfA6rDyAB4BTjVxWZByO0gAAAAASUVORK5CYII=") 11;
  border-image-outset: 9px 0px;
  box-shadow: 0px 0px 10px var(--outline, var(--background-modifier-box-shadow));
  background: var(--note, var(--background-primary));
  text-align: justify;
}
.callout.callout[data-callout=recite] .callout-title {
  padding: 0;
  background: transparent;
  color: rgba(var(--callout-color), 1);
  justify-content: center;
}
.callout.callout[data-callout=recite] .callout-title-inner {
  flex: unset;
}
.callout.callout[data-callout=recite] .callout-content {
  padding: 0;
  padding-top: 10px;
}

/* Metadata */
.callout.callout[data-callout*=Metadata i] {
  --callout-icon: layers;
  --callout-color: 82, 139, 212;
  border-width: 2px;
  box-shadow: 0px 0px 0px 1px var(--outline);
}
.callout.callout[data-callout*=Metadata i] .callout-title {
  padding: 5px;
  background-color: transparent;
  justify-content: center;
}
.callout.callout[data-callout*=Metadata i] .callout-fold {
  color: rgb(var(--callout-color));
}
.callout.callout[data-callout*=Metadata i] .callout-title-inner {
  flex: unset;
  color: rgb(var(--callout-color));
}
.callout.callout[data-callout*=Metadata i] .callout-content {
  padding: 10px;
  padding-top: 0px;
}
.callout.callout[data-callout*=Metadata i] .callout-content strong {
  color: rgb(var(--callout-color));
}
.callout.callout[data-callout*=Metadata i] .dataview.inline-field-key {
  background: rgb(var(--callout-color));
  color: var(--text-on-accent);
  font-weight: 900;
}
.callout.callout[data-callout*=Metadata i] .dataview.inline-field-value {
  font-weight: unset;
  background: transparent;
}
.callout.callout[data-callout*=Metadata i] table th {
  background-color: var(--aside-bg, rgba(var(--callout-color), 0.5));
}
.callout.callout[data-callout*=Metadata i] table {
  --tbl-td-h: 0;
  --tbl-td-w: 5px;
  white-space: nowrap;
  margin: 0;
  width: 100%;
}
.callout.callout[data-callout*=Metadata i] .callout-content p:last-child {
  margin-bottom: 0;
}
.callout.callout[data-callout*=Metadata i] .callout-content p:first-child {
  margin-top: 0;
}
.callout.callout[data-callout*=Metadata i] .callout-content, .callout.callout[data-callout*=Metadata i] ul {
  margin: 0;
}

.callout-list .callout {
  border: 0;
  background-color: var(--note, var(--background-primary));
}
.callout-list .callout-title {
  padding: 5px 10px;
}
.callout-list .callout ul {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Cards */
.callout[data-callout*=cards] {
  --callout-color: none;
  --callout-icon: layout-dashboard;
  box-shadow: none;
  border: 0;
  width: auto;
  padding: 0;
  background: transparent;
}
.callout[data-callout*=cards] .callout-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 5px;
  border-radius: 0;
  padding-inline-start: 0px;
  padding: 0;
}
.callout[data-callout*=cards] p {
  margin-block-start: 0;
  margin-block-end: 0;
  padding: 0;
}
.callout[data-callout*=cards] strong {
  display: block;
  text-align: center;
  margin: auto;
  background-color: var(--outer-bar, var(--background-secondary));
}

.callout[data-callout*=cards] br {
  display: none;
}

.callout[data-callout*=cards][data-callout-metadata*=dataview] .callout-content {
  display: unset;
  grid-template-columns: unset;
}
.callout[data-callout*=cards][data-callout-metadata*=dataview] .dataview.table-view-table {
  display: grid;
}
.callout[data-callout*=cards][data-callout-metadata*=dataview] .dataview.table-view-table :is(td, tr) {
  border: 0;
  background: transparent;
  padding: 0;
}
.callout[data-callout*=cards][data-callout-metadata*=dataview] .dataview.table-view-table strong {
  background: transparent;
}
.callout[data-callout*=cards][data-callout-metadata*=dataview] .table-view-thead th {
  border: 0;
  background-color: transparent;
}
.callout[data-callout*=cards][data-callout-metadata*=dataview] .table-view-thead tr {
  display: none;
}
.callout[data-callout*=cards][data-callout-metadata*=dataview] .dataview.table-view-table tbody {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.callout[data-callout*=cards][data-callout-metadata*=dataview] .dataview.table-view-table tbody tr {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 10px;
  box-shadow: 0 0 0 1px var(--outline, var(--background-modifier-box-shadow)), 2px 2px 0 var(--outline, var(--background-modifier-box-shadow));
}

.callout[data-callout*=cards][data-callout-metadata*="2"] .dataview.table-view-table tbody, .callout[data-callout*=cards][data-callout-metadata*="2"] .callout-content {
  grid-template-columns: repeat(2, 1fr);
}
.callout[data-callout*=cards][data-callout-metadata*="4"] .dataview.table-view-table tbody, .callout[data-callout*=cards][data-callout-metadata*="4"] .callout-content {
  grid-template-columns: repeat(4, 1fr);
}

/* Unwrapped Table */
.callout.callout[data-callout*=table] {
  border: 0;
}
.callout.callout[data-callout*=table] .callout-content {
  padding: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
}
.callout.callout[data-callout*=table] .callout-title {
  display: none;
}
.callout.callout[data-callout*=table] table {
  white-space: nowrap;
  margin: 0;
  margin: auto;
}

/*@settings
name: Alternate Callouts
id: alternate-callouts
settings:
    -
        title: Alternate Callout Styling
        description: Simplistic callout styling applying the callout color as the background color
        id: alt-co
        type: class-toggle
    - 
        title: Center Callout Titles
        id: co-ttl-ctr
        type: class-toggle
    -
        title: Callout Border Radius
        description: Adjust how round or not round the callout corners are.
        id: co-radius
        type: variable-number-slider
        default: 7
        format: px
        min: 0
        max: 20
        step: 1
    -
        title: Kanban Callout Border Radius
        description: Adjust how round or not round the Kanban callout's list items corners are.
        id: kbn-radius
        type: variable-number-slider
        default: 3
        format: px
        min: 0
        max: 20
        step: 1
*/

Bluetopaz Zettelkasten CSS

/* bt设置 */
/* Specific Settings for Blue Topaz Transplant */

.zettelkasten table.dataview tbody {
    margin-top: 0px;
    margin-left: 5px;
}

.zettelkasten table.dataview tbody>tr>td .el-p {    
    word-wrap: break-word;
    word-break: break-word;
    white-space: pre-wrap;
    z-index: 2;
}

.zettelkasten table.dataview>tbody>tr {
    width: 100%;
    height: auto;
    box-shadow: 0 4px 6px 0 rgb(0 0 0 / 5%)
}

.zettelkasten table.dataview>tbody>tr:hover {
    box-shadow: 2px 8px 12px 6px rgb(0 0 0 / 100%) !important, 0 1px 3px 1px rgb(0 0 0 / 3%);
}

/* .zettelkasten table.dataview tbody>tr>td:first-child:after {
    background-color: green;
    z-index: -1;
} */

body:not(.no-wrapped-dvtable) :is(.markdown-preview-view,.markdown-rendered) .table-view-table>tbody>tr>td, body:not(.no-wrapped-dvtable) .markdown-source-view.mod-cm6 .table-view-table>tbody>tr>td {
    max-width: 100%;
}

.zettelkasten table.dataview tbody>tr>td:first-child, .markdown-source-view.mod-cm6.zettelkasten .dataview.table-view-table>tbody>tr>td:first-child {
    background-color: var(--zettelkasten-title-background);
    padding: 0px, 0px, 5.6px ;
}

/* 大一些的阴影取消 */
/* box shadow disabled */

:is(.markdown-preview-view,.markdown-rendered) table {
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.1);
}

/* minimal原本设置 */
/* minimal original settings */

:root {
    --zettelkasten-min-width: 180px;
    --zettelkasten-max-width: 1fr;
    --zettelkasten-mobile-width: 120px;
    --zettelkasten-image-height: 400px;
    --zettelkasten-padding: 1.2em;
    --zettelkasten-image-fit: contain;
    --zettelkasten-background: rgba(249, 249, 249, 0.925);
    --zettelkasten-border-width: 0px;
    /* 新参数 new params rgb(220, 239, 239)*/
    --zettelkasten-title-background: transparent
}

@media (max-width:400pt) {
    :root {
        --zettelkasten-min-width: var(--zettelkasten-mobile-width)
    }
}

.zettelkasten.table-100 table.dataview tbody,
.table-100 .zettelkasten table.dataview tbody {
    padding: .25rem .75rem
}

.zettelkasten .el-pre+.el-lang-dataview .table-view-thead {
    padding-top: 8px
}

.zettelkasten table.dataview>tbody>tr {
    /* background-color: rgba(249, 249, 249, 0.925); */
    background-color: var(--background-primary);
}

.zettelkasten table.dataview tbody {
    clear: both;
    padding: .5rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--zettelkasten-min-width), var(--zettelkasten-max-width)));
    grid-column-gap: 0.75rem;
    grid-row-gap: 0.75rem
}

.zettelkasten table.dataview>tbody>tr {
    background-color: var(--zettelkasten-background);
    border: var(--zettelkasten-border-width) solid var(--background-modifier-border);
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 0 calc(var(--zettelkasten-padding)/3) 0;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow .15s linear
}

.zettelkasten table.dataview>tbody>tr:hover {
    border: var(--zettelkasten-border-width) solid var(--background-modifier-border-hover);
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .05), 0 1px 3px 1px rgba(0, 0, 0, .025);
    transition: box-shadow .15s linear
}

.markdown-source-view.mod-cm6.zettelkasten .dataview.table-view-table>tbody>tr>td,
.trim-cols .zettelkasten table.dataview tbody>tr>td {
    white-space: normal
}

.zettelkasten table.dataview tbody>tr>td,
.markdown-source-view.mod-cm6.zettelkasten .dataview.table-view-table>tbody>tr>td {
    border-bottom: none;
    padding: 0 !important;
    line-height: 1.2;
    width: calc(100% - var(--zettelkasten-padding));
    margin: 0 auto;
    overflow: visible !important;
    max-width: 100%;
    display: flex
}

.zettelkasten table.dataview tbody>tr>td .el-p {
    display: block;
    width: 100%
}

.zettelkasten table.dataview tbody>tr>td:first-child {
    font-weight: var(--bold-weight)
}

.zettelkasten table.dataview tbody>tr>td:first-child a {
    padding: 0 0 calc(var(--zettelkasten-padding)/3);
    display: block
}

.zettelkasten table.dataview tbody>tr>td:not(:first-child) {
    font-size: 90%;
    color: var(--text-muted)
}

@media (max-width:400pt) {
    .zettelkasten table.dataview tbody>tr>td:not(:first-child) {
        font-size: 80%
    }
}

.zettelkasten-cover.zettelkasten table.dataview tbody>tr>td img {
    object-fit: cover
}

.zettelkasten-16-9.zettelkasten table.dataview tbody>tr>td img {
    aspect-ratio: 16/9
}

.zettelkasten-1-1.zettelkasten table.dataview tbody>tr>td img {
    aspect-ratio: 1/1
}

.zettelkasten-2-1.zettelkasten table.dataview tbody>tr>td img {
    aspect-ratio: 2/1
}

.zettelkasten-2-3.zettelkasten table.dataview tbody>tr>td img {
    aspect-ratio: 2/3
}

.zettelkasten-align-bottom.zettelkasten table.dataview tbody>tr>td:last-child {
    align-items: flex-end;
    flex-grow: 1
}

.zettelkasten-cols-1 table.dataview tbody {
    grid-template-columns: repeat(1, minmax(0, 1fr))
}

.zettelkasten-cols-2 table.dataview tbody {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

@media (min-width:400pt) {
    .zettelkasten-cols-3 table.dataview tbody {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .zettelkasten-cols-4 table.dataview tbody {
        grid-template-columns: repeat(4, minmax(0, 1fr))
    }

    .zettelkasten-cols-5 table.dataview tbody {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .zettelkasten-cols-6 table.dataview tbody {
        grid-template-columns: repeat(6, minmax(0, 1fr))
    }

    .zettelkasten-cols-7 table.dataview tbody {
        grid-template-columns: repeat(7, minmax(0, 1fr))
    }

    .zettelkasten-cols-8 table.dataview tbody {
        grid-template-columns: repeat(8, minmax(0, 1fr))
    }
}

.zettelkasten table.dataview tbody>tr>td>:not(.el-embed-image) {
    padding: calc(var(--zettelkasten-padding)/3) 0
}

.zettelkasten table.dataview tbody>tr>td:not(:last-child):not(:first-child)>.el-p:not(.el-embed-image) {
    border-bottom: 1px solid var(--background-modifier-border);
    width: 100%
}

.zettelkasten table.dataview tbody>tr>td a {
    text-decoration: none
}

.links-int-on .zettelkasten table.dataview tbody>tr>td a {
    text-decoration: none
}

.zettelkasten table.dataview tbody>tr>td>button {
    width: 100%;
    margin: calc(var(--zettelkasten-padding)/2) 0
}

.zettelkasten table.dataview tbody>tr>td:last-child>button {
    margin-bottom: calc(var(--zettelkasten-padding)/6)
}

.zettelkasten table.dataview tbody>tr>td>ul {
    width: 100%;
    padding: .25em 0 !important;
    margin: 0 auto !important
}

.zettelkasten table.dataview tbody>tr>td:not(:last-child)>ul {
    border-bottom: 1px solid var(--background-modifier-border)
}

.zettelkasten table.dataview tbody>tr>td .el-embed-image {
    background-color: var(--background-secondary);
    display: block;
    margin: 0 calc(var(--zettelkasten-padding)/-2) 0 calc(var(--zettelkasten-padding)/-2);
    width: calc(100% + var(--zettelkasten-padding))
}

.zettelkasten table.dataview tbody>tr>td img {
    width: 100%;
    object-fit: var(--zettelkasten-image-fit);
    max-height: var(--zettelkasten-image-height);
    background-color: var(--background-secondary);
    vertical-align: bottom
}

.markdown-source-view.mod-cm6.zettelkasten .edit-block-button {
    top: 0;
    right: 26px;
    opacity: 1;
    background-color: transparent
}

.zettelkasten.table-100 table.dataview thead>tr,
.table-100 .zettelkasten table.dataview thead>tr {
    right: .75rem
}

.zettelkasten.table-100 table.dataview thead:before,
.table-100 .zettelkasten table.dataview thead:before {
    margin-right: .75rem
}

.zettelkasten table.dataview thead {
    user-select: none;
    width: 180px;
    display: block;
    float: right;
    position: relative;
    text-align: right;
    height: 24px;
    padding-bottom: 4px
}

.zettelkasten table.dataview thead:before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    height: var(--icon-size);
    background-repeat: no-repeat;
    cursor: var(--cursor);
    text-align: right;
    padding: 4px 10px;
    margin-bottom: 2px;
    border-radius: 5px;
    font-weight: 500;
    font-size: var(--font-adaptive-small)
}

.zettelkasten table.dataview thead:before {
    opacity: .25;
    background-position: center center;
    background-size: var(--icon-size);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100"><path fill="white" d="M49.792 33.125l-5.892 5.892L33.333 28.45V83.333H25V28.45L14.438 39.017L8.542 33.125L29.167 12.5l20.625 20.625zm41.667 33.75L70.833 87.5l-20.625 -20.625l5.892 -5.892l10.571 10.567L66.667 16.667h8.333v54.883l10.567 -10.567l5.892 5.892z"></path></svg>')
}

.theme-light .zettelkasten table.dataview thead:before {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100"><path fill="black" d="M49.792 33.125l-5.892 5.892L33.333 28.45V83.333H25V28.45L14.438 39.017L8.542 33.125L29.167 12.5l20.625 20.625zm41.667 33.75L70.833 87.5l-20.625 -20.625l5.892 -5.892l10.571 10.567L66.667 16.667h8.333v54.883l10.567 -10.567l5.892 5.892z"></path></svg>')
}

.zettelkasten table.dataview thead:hover:before {
    opacity: .5
}

.zettelkasten table.dataview thead>tr {
    top: 0;
    position: absolute;
    display: none;
    z-index: 9;
    border: 1px solid var(--background-modifier-border);
    background-color: var(--background-secondary);
    box-shadow: 0 2px 8px var(--background-modifier-box-shadow);
    padding: 6px;
    border-radius: 6px;
    flex-direction: column;
    margin: 26px 0 0 0;
    width: 100%
}

.zettelkasten table.dataview thead:hover>tr {
    display: flex
}

.zettelkasten table.dataview thead>tr>th {
    display: block;
    padding: 3px 30px 3px 6px !important;
    border-radius: 5px;
    width: 100%;
    font-weight: 400;
    color: var(--text-muted);
    cursor: var(--cursor);
    border: none;
    font-size: var(--font-adaptive-small)
}

.zettelkasten table.dataview thead>tr>th[sortable-style=sortable-asc],
.zettelkasten table.dataview thead>tr>th[sortable-style=sortable-desc] {
    color: var(--text-normal)
}

.zettelkasten table.dataview thead>tr>th:hover {
    color: var(--text-normal);
    background-color: var(--background-tertiary)
}

/* @settings
name: Zettelkasten
id: zettelkasten-style
settings:
    - 
        id: zettelkasten-min-width
        title: Card minimum width
        type: variable-text
        default: 180px
    - 
        id: zettelkasten-max-width
        title: Card maximum width
        description: Default fills the available width, accepts valid CSS units
        type: variable-text
        default: 1fr
    - 
        id: zettelkasten-mobile-width
        title: Card minimum width on mobile
        type: variable-text
        default: 120px
    - 
        id: zettelkasten-padding
        title: Card padding
        type: variable-text
        default: 1.2em
    - 
        id: zettelkasten-image-height
        title: Card maximum image height
        type: variable-text
        default: 400px
    - 
        id: zettelkasten-border-width
        title: Card border width
        type: variable-text
        default: 1px
    -  
        id: zettelkasten-background
        title: Card background color
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
    -
        id: zettelkasten-title-background
        title: Card title background color
        type: variable-themed-color
        format: hex
        default-light: '#'
        default-dark: '#'
*/
chenxin0397 commented 1 year ago

me too,This is the effect of the default theme image

chenxin0397 commented 1 year ago

Hello, thank you so much for the plugin. I started using the tag detail to give me a guidance while writing. However, the transparent background of the tag doesn't let me work this way. Is there any way to make this possible? Thank you so much for your plugin, once again!

Screenshot (4)

I also use the same theme, why are all my TAGS forced to become theme styles? image

PencilMing commented 1 year ago

The same problem happen when i use tag item