The callouts snippet is pretty simple, hopefully the comments explain everything if people want to use this as a starting point to do something else.
This was a bit too much color for me but for anyone that prefers this version, just uncomment the code in the first block.
/* wider border, larger text, translucent background color, rounded corners */
.callouts-outlined .callout {
--callout-border-width: 2px;
--callout-title-size: 1.25em;
/* background-color: rgba(var(--callout-color), .05); */
border-radius: 10px;
}
/* translucent title background color, bottom border line, rounded corners, title position adjustment, left and right margin adjustment, width adjustment */
.callouts-outlined .callout .callout-title {
background-color: rgba(var(--callout-color), .1);
margin-top: -14px;
margin-left: -26px;
margin-right: -5px;
width: inherit;
border-bottom: 1px solid rgb(var(--callout-color));
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
/* padding adjustment to fix gap on title bar */
.callout {
padding-right: 5px;
}
/* moved collapse button to far right edge */
.callout:not([data-callout-metadata*=revert]) > .callout-title > .callout-title-inner {
flex-grow: var(--anp-callout-fold-position, 1);
}
/* shifts collapse button to the right just a bit more */
.callout-fold {
padding: 0px;
}
/* nested callouts were shifted to the right, this centers them */
.callout-content {
padding-right: 15px;
margin-left: -5px;
}
/* made icons a little bigger, making them significantly larger will mean having to readjust other title bar elements */
.callout-icon svg.svg-icon {
height: 20px;
width: 20px;
margin-right: 3px;
}
The kanban styling is along the same lines although the css is a bit more complicated:
Tags change to lane accent color on hover:
/* lane title font size */
body {
.kanban-plugin__lane-title p, .kanban-plugin__lane-title-count {
font-size: 1.5em;
}
/* bigger lane grip icons */
.kanban-plugin__lane-grip > svg{
min-width:25px;
min-height:25px;
/* shifts left so that it's aligned on the outside edge of the lane */
margin-left: -5px;
}
}
/* removes border for each lane container */
body .kanban-plugin__lane-items {
border: 0px;
}
/* separates cards */
.kanban-plugin__lane-items>div {
margin-bottom: 10px;
}
/* shifts lane header over to the left */
.kanban-plugin__lane-header-wrapper {
padding-left: 0px;
position: relative;
}
/* swaps count and title text */
.kanban-plugin__lane-header-wrapper {
.kanban-plugin__lane-grip {
order: -1;
}
.kanban-plugin__lane-title-count {
order: -1;
padding-right: .5em;
}
}
/* changes link color, removes underline on hover */
body .kanban-plugin__item-title a {
font-weight: bold;
color: var(--text-normal);
}
body .kanban-plugin__item-title a:hover {
text-decoration: none;
}
/* button styling */
/* changes background color to match editor */
body .kanban-plugin__item-button-wrapper>button {
background-color: var(--background-primary);
}
/* rounds top corners of button, sets width to same as other lane elements, center aligns */
body .kanban-plugin__lane:not(.will-prepend) .kanban-plugin__item-button-wrapper {
border-radius: 5px;
padding: 0px;
width: 262px;
align-self:center;
}
.kanban-plugin__lane button {
padding: 0px;
}
/* gets rid of partial border around card input line */
body .kanban-plugin__lane-wrapper .kanban-plugin__item-form {
border: none;
}
/* lane 1 */
body .kanban-plugin__lane-wrapper:nth-child(4n+1) {
/* header text, lane grip, count, icon color */
.kanban-plugin__lane-title-text p, .kanban-plugin__lane-grip, .kanban-plugin__lane-title-count, .kanban-plugin__icon {
color: var(--color-yellow);
}
/* background color of container box for whole lane */
.kanban-plugin__lane-items, .kanban-plugin__item-form {
background-color: var(--background-primary);
}
/* background color for each card */
.kanban-plugin__item-title-wrapper {
background-color: rgba(var(--color-yellow-rgb), .02);
}
/* borders for each card */
.kanban-plugin__item, .kanban-plugin__item-button-wrapper {
border: 2px solid rgba(var(--color-yellow-rgb), .5);
}
/* tag hover color */
.kanban-plugin__item-tags a.tag:hover {
background-color: rgba(var(--color-yellow-rgb), .5);
}
/* form input */
.kanban-plugin__item-form .kanban-plugin__item-input-wrapper {
border: 2px solid rgba(var(--color-yellow-rgb), .5);
}
}
/* lane 2 */
body .kanban-plugin__lane-wrapper:nth-child(4n+2) {
.kanban-plugin__lane-title-text p, .kanban-plugin__lane-grip, .kanban-plugin__lane-title-count, .kanban-plugin__icon {
color: var(--color-cyan);
}
.kanban-plugin__lane-items, .kanban-plugin__item-form {
background-color: var(--background-primary);
}
.kanban-plugin__item-title-wrapper {
background-color: rgba(var(--color-cyan-rgb), .02);
}
.kanban-plugin__item, .kanban-plugin__item-button-wrapper {
border: 2px solid rgba(var(--color-cyan-rgb), .5);
}
.kanban-plugin__item-tags a.tag:hover {
background-color: rgba(var(--color-cyan-rgb), .5);
}
/* form input */
.kanban-plugin__item-form .kanban-plugin__item-input-wrapper {
border: 2px solid rgba(var(--color-cyan-rgb), .5);
}
}
/* lane 3 */
body .kanban-plugin__lane-wrapper:nth-child(4n+3) {
.kanban-plugin__lane-title-text p, .kanban-plugin__lane-grip, .kanban-plugin__lane-title-count, .kanban-plugin__icon {
color: var(--color-red);
}
.kanban-plugin__lane-items, .kanban-plugin__item-form {
background-color: var(--background-primary);
}
.kanban-plugin__item-title-wrapper {
background-color: rgba(var(--color-red-rgb), .02);
}
.kanban-plugin__item, .kanban-plugin__item-button-wrapper {
border: 2px solid rgba(var(--color-red-rgb), .5);
}
.kanban-plugin__item-tags a.tag:hover {
background-color: rgba(var(--color-red-rgb), .5);
}
/* form input */
.kanban-plugin__item-form .kanban-plugin__item-input-wrapper {
border: 2px solid rgba(var(--color-red-rgb), .5);
}
}
/* lane 4 */
body .kanban-plugin__lane-wrapper:nth-child(4n+4) {
.kanban-plugin__lane-title-text p, .kanban-plugin__lane-grip, .kanban-plugin__lane-title-count, .kanban-plugin__icon {
color: var(--color-green);
}
.kanban-plugin__lane-items, .kanban-plugin__item-form {
background-color: var(--background-primary);
}
.kanban-plugin__item-title-wrapper {
background-color: rgba(var(--color-green-rgb), .02);
}
.kanban-plugin__item, .kanban-plugin__item-button-wrapper {
border: 2px solid rgba(var(--color-green-rgb), .5);
}
.kanban-plugin__item-tags a.tag:hover {
background-color: rgba(var(--color-green-rgb), .5);
}
/* form input */
.kanban-plugin__item-form .kanban-plugin__item-input-wrapper {
border: 2px solid rgba(var(--color-green-rgb), .5);
}
}
Again, I’ve commented the code so people can use this as a jumping off point to tweak things to their liking. It should be fairly self-explanatory for those that are familiar with CSS.
For people that are not familiar with CSS:
The colors pull from the yellow, cyan, red, and green that can be set with the extended colors for Minimal with the Style Settings plugin. You can of course hardcode your own colors in, but the advantage of using colors set with the plugin is that if you change your theme colors later you don’t have to manually change them in your CSS snippets. The variable names of colors set for Minimal with Style Settings are red, orange, yellow, green, cyan, blue, purple, pink. Just swap out color names anywhere you see a variation of var(--color-colorname) or var(--color-colorname-rgb).
Additionally, the rgb versions are used for transparency, that’s what the decimal numbers next to them are for. So you can change those around as you’d like, and setting them to 1 is completely opaque.
I only have 4 lanes coded out so the colors will repeat starting on lane 5.
You could theoretically add infinite colors, just copy and paste the code for a lane, swap the colors, and most importantly change the first line under each lane. The 4n+x part - the number in front of the ‘n’ indicates how many lanes/colors total you’re working with, and the ‘x’ is the lane number itself. So for the fifth lane, all lanes will need to have 5n, and the fifth one will have 5n+5.
Similarly, if you want to use less colors, you’ll need to change the 4n+x as well. 3 colors would be 3n+x. If you just want the same color for everything, you can get rid of that part altogether and the first line would then read as body .kanban-plugin__lane-wrapper {
I think that’s everything but more than happy to help people with this or answer any questions, it’s been fun digging into the CSS for this.