Anki bottom buttons user css

README.md

Anki bottom buttons user css
This is used with the Large And Colorful Buttons addon.

Styled according to my tastes, so you might not like it.

Not guaranteed to work with future versions. Check Anki version number below.

user_bottom_buttons.css

/*
bottom buttons user css for the "Large And Colorful Buttons" addon.
Anki Version: 2.1.55 QT5
*/

/* give the default button a border */
.focus,
#defease:not(:focus),
#ansbut:not(:focus) {
    border-color: #7ec4ff9b !important;
    /* outline: 1px solid #899aa8f7;
    border-radius: 0px !important;
    outline-offset: 1px; */
}

/* focus outlines */
.nightMode button:focus {
    outline: none;
    box-shadow: 0 0 0 2px #7ec4ffb9;
}

#innertable {
    padding-top: 1px !important;
}

#innertable .stat>button[onclick="pycmd('edit');"] {
    margin-right: 2px !important;
}

#innertable .stat>button[onclick="pycmd('more');"] {
    margin-left: 3px !important;
}

/* Time/Status text above the buttons */
.nobold,
.stattxt {
    top: -2px;
}

/* All buttons at the bottom of the review screen
   (including the "Edit" and "More" button) */
button {
    height: 24px;
    width: calc(100% - 26px);
    min-width: 20px !important;
    font-size: 13px;
    border: solid 1px rgba(0, 0, 0, 0.0) !important;
    /* border: none !important; */
    border-radius: 8px;
    appearance: none;
    outline: none;
    color: #f3f3f3;
    /*cursor: pointer;*/
    margin-bottom: 5px;
    margin-right: 3px;
    margin-left: 3px;
    margin-top: 5px;
}

/* bring back edit and more buttons even if the window is small */
.stat {
    display: table-cell !important;
}

/* for only "Edit" and "More" buttons */
#innertable .stat>button {
    width: 44px;
    margin-right: 5px !important;
    margin-left: 5px !important;
}

/* middle rating buttons only */
#middle button {
    background: transparent;
    color: #f3f3f3 !important;
    width: calc(100% - 27px);
    margin: 0;
}

/* Align the table of middle buttons */
#middle,
#middle>table,
#middle>center>table {
    width: 94%;
}

#middle td[align=center] {
    padding-top: 13px;
}

#middle>center td[align=center] {
    width: 25%;
    padding-top: 15px;
}

/* the big "Show Answer" button */
#ansbut {
    color: #f3f3f3 !important;
    width: calc(100% - 26px) !important;
    background-color: #455A64 !important;
}

#middle button:hover {
    filter: brightness(110%);
}

/* the "Good" button #4CAF50*/
#defease {
    background-color: #39883C !important;
}

/* the "Again" button */
button[onclick*="ease1"]:not(#defease) {
    background-color: #D32F2F !important;
}

/* the "Hard" button */
button[onclick*="ease2"]:not(#defease) {
    background-color: #455A64 !important;
}

/* the "Easy" button #03A9F4*/
button[onclick*="ease3"]:not(#defease),
button[onclick*="ease4"]:not(#defease) {
    /*background-color: #03A9F4 !important;*/
    background-color: #0D7CAE !important;
}

/*
 the "Edit" button 
button[onclick*="edit"] {
    margin-right: 5px !important;
    margin-left: 5px !important;
}

 the "More" button 
button[onclick*="more"] {
    margin-right: 5px !important;
    margin-left: 5px !important;
}
*/