Tatoeba - Example of CSS for compact mode

tatoeba-compact-mode-example.css

/* 

EXAMPLE OF HOW TO CREATE A COMPACT MODE FOR TATOEBA

1) Install an addon that allows you to create user styles (such as Stylish).
2) Create a new style for tatoeba.org and copy-paste this code into it.
3) Adjust the code to your own taste. Please learn CSS :)

This code may break at any time if something is changed on the Tatoeba UI.

*/



/* Adjust the space between the translations */

.sentence-and-translations .sentence,
.sentence-and-translations .translation {
    padding: 2px 5px;
}
.sentence-and-translations .sentence .md-button,
.sentence-and-translations .translation .md-button{
    min-height: inherit;
    height: inherit;
    padding: 0;
}


/* Add space below the separator between the sentence and the translations */

.sentence-and-translations md-divider {
    margin-bottom: 10px;
}


/* Change size of icons */

.sentence-and-translations .sentence .material-icons,
.sentence-and-translations .translation .material-icons{
    font-size: 20px;
}


/* Adjust the color of the direct translations arrow */

.sentence-and-translations .direct .translation .chevron {
    color: #03a9f4;
}


/* Hide the labels "Translations" and "Translations of translations" */

.sentence-and-translations .translations .md-subheader {
    display: none;
}

What is this for the link and unlink icon that I see instead of the arrows?

/* Adjust the color of the direct translations arrow */

.sentence-and-translations .direct .translation .chevron {
color: #03a9f4;
}

No this is for changing the color of the > icon in front of the translations. These icons are not shown when the link/unlink icons are shown.

So, what I'm asking is how do I change this to be able to change the color of the link icon?

.sentence-and-translations .direct .translation .chevron {

So, what I'm asking is how do I change this to be able to change the color of the link icon?

Perhaps by changing .chevron to icon-with-progress .md-icon-button. In general, you can use the Inspect tool from the browser to check for the HTML/CSS structure and experiment things on your own.