Nyanon
July 25, 2023, 2:12pm
1
Hi, I want my Cards to match the CSS Styling of the AnkiMobile Statistics. For aesthetic reasons.
Currently I use:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: #F2F2F7 ;
}
.card.nightMode {
font-family: arial;
font-size: 20px;
text-align: center;
color: white;
background-color: #2C2C2C ;
}
.box {
background-color: #FFFFFF ;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
opacity: 0.98;
padding: 15px;
border-radius: 7px;
margin-bottom: 50px;
margin-top: 50px;
}
.nightMode .box {
background-color: #363636 ;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
opacity: 0.98;
padding: 15px;
border-radius: 7px;
margin-bottom: 50px;
margin-top: 50px;
}
.hr-style {
border-top: 2px solid #AAA ;
margin-top: 10px;
margin-bottom: 10px;
}
I think so far only the colors match but Iām not sure. I could definitely try to adjust settings and come as close as possible but I hoped maybe someone already figured it out.
Thanks a lot in advance!
If you want the exact color values used in the stats screen, check out this scss file: https://github.com/ankitects/anki/blob/main/sass/_vars.scss
2 Likes
Nyanon
July 27, 2023, 1:08pm
3
Blockquote
Thank you, I think I came very close with this in case anyone is interested:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: #000000 ;
background-color: #F2F2F7 ;
}
.card.nightMode {
color: #000000 ;
background-color: #FFFFFF ;
}
.box {
background-color: #FFFFFF ;
border: 1px solid #E4E4E4 ;
opacity: 0.98;
padding: 15px;
border-radius: 7px;
margin-top: 10px;
margin-bottom: 10px;
}
.nightMode .box {
background-color: #363636 ;
border: 1px solid #252525 ;
invert: ( amount )
}
.hr-style {
border: none;
height: 1px;
background-color: #C4C4C4 ;
margin-top: 10px;
margin-bottom: 10px;
}
.nightMode .hr-style {
background-color: #202020 ;
}
Nishat
July 30, 2023, 9:31am
4
where to paste it ? Card template or somewhere else ?
system
Closed
August 29, 2023, 9:32am
5
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.