Bigger edit icons

I have this add-on to make edit icons bigger:

from anki.hooks import addHook

CSS = """
    <style>
        .topbut {
            width: 32px;
            height: 32px;
        }
button {
    height: 44px;
    border: solid 1px rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    -webkit-appearance: none;
    outline: none;
    background-color: #3e4e58 !important;
}

    </style>
"""
JS = f"""
    document.head.insertAdjacentHTML('beforeend', `{CSS}`);
    adjustFieldsTopMargin();
"""

addHook('setupEditorShortcuts', lambda _, editor: editor.web.eval(JS))

It seems to me that in current version uses svg files for icons.

So, I have bigger icons’ frame and relatively small icons.

Can someone tell me how to adjust this code so that icons are 150 % bigger?

I need this because I have poor sight.

If you are using the latest version(2.1.50) of Anki, try installing CSS Injector - Change default editor styles, and then typing the following into editor.css:

.button-toolbar {
    --buttons-size: 2.5rem !important;
}

Change 2.5rem to your liking. To see the effect of the changes, close the editor window and re-open it. (No need to restart Anki.)

4 Likes

Fwiw, in Anki 2.1.50, I can just hold Ctrl and rotate the mouse wheel to change zoom of the editor. That makes everything bigger, the fields and the buttons as well.

2 Likes

Thank you it worked. By the way, do you know if it is possible to use this add-on to change the color of a specific field name in editor in a specific Note Type?

Something like:
Note type:Cloze; field_name:Headword; color:red

From the description on the add-on page and a quick glance at the add-on source code, it appears that this is probably not possible at this time.

2 Likes

Now it is :+1:

I have added support for a couple of new attributes to the 2.1.50+ branch of the add-on:

  • both html (editor) and anki-editable (field):
    • notetype name: [notetype]
  • only anki-editable:
    • field name: [field]
    • field index (starting with 1): [ord]

Here’s an overview of the possibilities:

image

2 Likes