Skip to content

Instantly share code, notes, and snippets.

@Onurtag
Last active February 25, 2024 07:23
Show Gist options
  • Save Onurtag/59754ca4604d71955ab62d18d29e5352 to your computer and use it in GitHub Desktop.
Save Onurtag/59754ca4604d71955ab62d18d29e5352 to your computer and use it in GitHub Desktop.
Anki bottom buttons user css

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.

/*
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;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment