mirror/Tangerine-UI
1
0
Fork 0
mirror of https://github.com/nileane/TangerineUI-for-Mastodon synced 2025-01-19 00:02:50 +09:00
Code

Improved styling for focused fields

Browse Source
This commit is contained in:
Niléane 2023-12-20 16:00:03 +01:00
parent c767784f73
commit 006fcc72eb
No known key found for this signature in database
3 changed files with 467 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

241
TangerineUI-cherry.css
View File

@ -159,6 +159,12 @@
--icon-eye-shut: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzQ0NGE1YSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTA0Yy0xNi44MSwyMC44MS00Ny42Myw0OC05Niw0OHMtNzkuMTktMjcuMTktOTYtNDhjMTYuODEtMjAuODEsNDcuNjMtNDgsOTYtNDhTMjA3LjE5LDgzLjE5LDIyNCwxMDRaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMjI4LDE3NWE4LDgsMCwwLDEtMTAuOTItM2wtMTktMzMuMkExMjMuMjMsMTIzLjIzLDAsMCwxLDE2MiwxNTUuNDZsNS44NywzNS4yMmE4LDgsMCwwLDEtNi41OCw5LjIxQTguNCw4LjQsMCwwLDEsMTYwLDIwMGE4LDgsMCwwLDEtNy44OC02LjY5bC01Ljc3LTM0LjU4YTEzMy4wNiwxMzMuMDYsMCwwLDEtMzYuNjgsMGwtNS43NywzNC41OEE4LDgsMCwwLDEsOTYsMjAwYTguNCw4LjQsMCwwLDEtMS4zMi0uMTEsOCw4LDAsMCwxLTYuNTgtOS4yMUw5NCwxNTUuNDZhMTIzLjIzLDEyMy4yMywwLDAsMS0zNi4wNi0xNi42OUwzOSwxNzJBOCw4LDAsMSwxLDI1LjA2LDE2NGwyMC0zNWExNTMuNDcsMTUzLjQ3LDAsMCwxLTE5LjMtMjBBOCw4LDAsMSwxLDM4LjIyLDk5YzE2LjYsMjAuNTQsNDUuNjQsNDUsODkuNzgsNDVzNzMuMTgtMjQuNDksODkuNzgtNDVBOCw4LDAsMSwxLDIzMC4yMiwxMDlhMTUzLjQ3LDE1My40NywwLDAsMS0xOS4zLDIwbDIwLDM1QTgsOCwwLDAsMSwyMjgsMTc1WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-eye-open: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzQ0NGE1YSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNTZDNDgsNTYsMTYsMTI4LDE2LDEyOHMzMiw3MiwxMTIsNzIsMTEyLTcyLDExMi03MlMyMDgsNTYsMTI4LDU2Wm0wLDExMmE0MCw0MCwwLDEsMSw0MC00MEE0MCw0MCwwLDAsMSwxMjgsMTY4WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTI0Ny4zMSwxMjQuNzZjLS4zNS0uNzktOC44Mi0xOS41OC0yNy42NS0zOC40MUMxOTQuNTcsNjEuMjYsMTYyLjg4LDQ4LDEyOCw0OFM2MS40Myw2MS4yNiwzNi4zNCw4Ni4zNUMxNy41MSwxMDUuMTgsOSwxMjQsOC42OSwxMjQuNzZhOCw4LDAsMCwwLDAsNi41Yy4zNS43OSw4LjgyLDE5LjU3LDI3LjY1LDM4LjRDNjEuNDMsMTk0Ljc0LDkzLjEyLDIwOCwxMjgsMjA4czY2LjU3LTEzLjI2LDkxLjY2LTM4LjM0YzE4LjgzLTE4LjgzLDI3LjMtMzcuNjEsMjcuNjUtMzguNEE4LDgsMCwwLDAsMjQ3LjMxLDEyNC43NlpNMTI4LDE5MmMtMzAuNzgsMC01Ny42Ny0xMS4xOS03OS45My0zMy4yNUExMzMuNDcsMTMzLjQ3LDAsMCwxLDI1LDEyOCwxMzMuMzMsMTMzLjMzLDAsMCwxLDQ4LjA3LDk3LjI1QzcwLjMzLDc1LjE5LDk3LjIyLDY0LDEyOCw2NHM1Ny42NywxMS4xOSw3OS45MywzMy4yNUExMzMuNDYsMTMzLjQ2LDAsMCwxLDIzMS4wNSwxMjhDMjIzLjg0LDE0MS40NiwxOTIuNDMsMTkyLDEyOCwxOTJabTAtMTEyYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWiI+PC9wYXRoPjwvc3ZnPg==");
--icon-edited: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzQ0NGE1YSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMTUsNzAuNTQsMTg1LjQ2LDI1Ljg2YTIwLDIwLDAsMCwwLTI4LjI4LDBMMzMuODYsMTQ5LjE3QTE5Ljg2LDE5Ljg2LDAsMCwwLDI4LDE2My4zMVYyMDhhMjAsMjAsMCwwLDAsMjAsMjBIMjE2YTEyLDEyLDAsMCwwLDAtMjRIMTI1TDIzMC4xNSw5OC44M0EyMCwyMCwwLDAsMCwyMzAuMTUsNzAuNTRaTTkxLDIwNEg1MlYxNjVsODQtODQsMzksMzlaTTE5MiwxMDMsMTUzLDY0bDE4LjM0LTE4LjM0LDM5LDM5WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-timer: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2QzNDg3ZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNDRhOTYsOTYsMCwxLDAsOTYsOTZBOTYuMTEsOTYuMTEsMCwwLDAsMTI4LDQ0Wm0wLDE2OGE3Miw3MiwwLDEsMSw3Mi03MkE3Mi4wOCw3Mi4wOCwwLDAsMSwxMjgsMjEyWk0xNjQuNDksOTkuNTFhMTIsMTIsMCwwLDEsMCwxN2wtMjgsMjhhMTIsMTIsMCwwLDEtMTctMTdsMjgtMjhBMTIsMTIsMCwwLDEsMTY0LjQ5LDk5LjUxWk05MiwxNkExMiwxMiwwLDAsMSwxMDQsNGg0OGExMiwxMiwwLDAsMSwwLDI0SDEwNEExMiwxMiwwLDAsMSw5MiwxNloiPjwvcGF0aD48L3N2Zz4=");
--icon-timer-inv: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNDRhOTYsOTYsMCwxLDAsOTYsOTZBOTYuMTEsOTYuMTEsMCwwLDAsMTI4LDQ0Wm0wLDE2OGE3Miw3MiwwLDEsMSw3Mi03MkE3Mi4wOCw3Mi4wOCwwLDAsMSwxMjgsMjEyWk0xNjQuNDksOTkuNTFhMTIsMTIsMCwwLDEsMCwxN2wtMjgsMjhhMTIsMTIsMCwwLDEtMTctMTdsMjgtMjhBMTIsMTIsMCwwLDEsMTY0LjQ5LDk5LjUxWk05MiwxNkExMiwxMiwwLDAsMSwxMDQsNGg0OGExMiwxMiwwLDAsMSwwLDI0SDEwNEExMiwxMiwwLDAsMSw5MiwxNloiPjwvcGF0aD48L3N2Zz4=");
--icon-check-radio: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2QzNDg3ZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNzYuNDksOTUuNTFhMTIsMTIsMCwwLDEsMCwxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMGwtMjQtMjRhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MkExMiwxMiwwLDAsMSwxNzYuNDksOTUuNTFaTTIzNiwxMjhBMTA4LDEwOCwwLDEsMSwxMjgsMjAsMTA4LjEyLDEwOC4xMiwwLDAsMSwyMzYsMTI4Wm0tMjQsMGE4NCw4NCwwLDEsMC04NCw4NEE4NC4wOSw4NC4wOSwwLDAsMCwyMTIsMTI4WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-check-radio-inv: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNzYuNDksOTUuNTFhMTIsMTIsMCwwLDEsMCwxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMGwtMjQtMjRhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MkExMiwxMiwwLDAsMSwxNzYuNDksOTUuNTFaTTIzNiwxMjhBMTA4LDEwOCwwLDEsMSwxMjgsMjAsMTA4LjEyLDEwOC4xMiwwLDAsMSwyMzYsMTI4Wm0tMjQsMGE4NCw4NCwwLDEsMC04NCw4NEE4NC4wOSw4NC4wOSwwLDAsMCwyMTIsMTI4WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-check-box: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2QzNDg3ZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik03OS41MSwxNDQuNDlhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MmExMiwxMiwwLDAsMSwxNywxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMFpNMjI4LDQ4VjIwOGEyMCwyMCwwLDAsMS0yMCwyMEg0OGEyMCwyMCwwLDAsMS0yMC0yMFY0OEEyMCwyMCwwLDAsMSw0OCwyOEgyMDhBMjAsMjAsMCwwLDEsMjI4LDQ4Wm0tMjQsNEg1MlYyMDRIMjA0WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-check-box-inv: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik03OS41MSwxNDQuNDlhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MmExMiwxMiwwLDAsMSwxNywxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMFpNMjI4LDQ4VjIwOGEyMCwyMCwwLDAsMS0yMCwyMEg0OGEyMCwyMCwwLDAsMS0yMC0yMFY0OEEyMCwyMCwwLDAsMSw0OCwyOEgyMDhBMjAsMjAsMCwwLDEsMjI4LDQ4Wm0tMjQsNEg1MlYyMDRIMjA0WiI+PC9wYXRoPjwvc3ZnPg==");
}
@media (prefers-color-scheme: dark) {
:root {
@ -247,6 +253,9 @@
--icon-eye-shut: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTA0Yy0xNi44MSwyMC44MS00Ny42Myw0OC05Niw0OHMtNzkuMTktMjcuMTktOTYtNDhjMTYuODEtMjAuODEsNDcuNjMtNDgsOTYtNDhTMjA3LjE5LDgzLjE5LDIyNCwxMDRaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMjI4LDE3NWE4LDgsMCwwLDEtMTAuOTItM2wtMTktMzMuMkExMjMuMjMsMTIzLjIzLDAsMCwxLDE2MiwxNTUuNDZsNS44NywzNS4yMmE4LDgsMCwwLDEtNi41OCw5LjIxQTguNCw4LjQsMCwwLDEsMTYwLDIwMGE4LDgsMCwwLDEtNy44OC02LjY5bC01Ljc3LTM0LjU4YTEzMy4wNiwxMzMuMDYsMCwwLDEtMzYuNjgsMGwtNS43NywzNC41OEE4LDgsMCwwLDEsOTYsMjAwYTguNCw4LjQsMCwwLDEtMS4zMi0uMTEsOCw4LDAsMCwxLTYuNTgtOS4yMUw5NCwxNTUuNDZhMTIzLjIzLDEyMy4yMywwLDAsMS0zNi4wNi0xNi42OUwzOSwxNzJBOCw4LDAsMSwxLDI1LjA2LDE2NGwyMC0zNWExNTMuNDcsMTUzLjQ3LDAsMCwxLTE5LjMtMjBBOCw4LDAsMSwxLDM4LjIyLDk5YzE2LjYsMjAuNTQsNDUuNjQsNDUsODkuNzgsNDVzNzMuMTgtMjQuNDksODkuNzgtNDVBOCw4LDAsMSwxLDIzMC4yMiwxMDlhMTUzLjQ3LDE1My40NywwLDAsMS0xOS4zLDIwbDIwLDM1QTgsOCwwLDAsMSwyMjgsMTc1WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-eye-open: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNTZDNDgsNTYsMTYsMTI4LDE2LDEyOHMzMiw3MiwxMTIsNzIsMTEyLTcyLDExMi03MlMyMDgsNTYsMTI4LDU2Wm0wLDExMmE0MCw0MCwwLDEsMSw0MC00MEE0MCw0MCwwLDAsMSwxMjgsMTY4WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTI0Ny4zMSwxMjQuNzZjLS4zNS0uNzktOC44Mi0xOS41OC0yNy42NS0zOC40MUMxOTQuNTcsNjEuMjYsMTYyLjg4LDQ4LDEyOCw0OFM2MS40Myw2MS4yNiwzNi4zNCw4Ni4zNUMxNy41MSwxMDUuMTgsOSwxMjQsOC42OSwxMjQuNzZhOCw4LDAsMCwwLDAsNi41Yy4zNS43OSw4LjgyLDE5LjU3LDI3LjY1LDM4LjRDNjEuNDMsMTk0Ljc0LDkzLjEyLDIwOCwxMjgsMjA4czY2LjU3LTEzLjI2LDkxLjY2LTM4LjM0YzE4LjgzLTE4LjgzLDI3LjMtMzcuNjEsMjcuNjUtMzguNEE4LDgsMCwwLDAsMjQ3LjMxLDEyNC43NlpNMTI4LDE5MmMtMzAuNzgsMC01Ny42Ny0xMS4xOS03OS45My0zMy4yNUExMzMuNDcsMTMzLjQ3LDAsMCwxLDI1LDEyOCwxMzMuMzMsMTMzLjMzLDAsMCwxLDQ4LjA3LDk3LjI1QzcwLjMzLDc1LjE5LDk3LjIyLDY0LDEyOCw2NHM1Ny42NywxMS4xOSw3OS45MywzMy4yNUExMzMuNDYsMTMzLjQ2LDAsMCwxLDIzMS4wNSwxMjhDMjIzLjg0LDE0MS40NiwxOTIuNDMsMTkyLDEyOCwxOTJabTAtMTEyYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWiI+PC9wYXRoPjwvc3ZnPg==");
--icon-edited: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMTUsNzAuNTQsMTg1LjQ2LDI1Ljg2YTIwLDIwLDAsMCwwLTI4LjI4LDBMMzMuODYsMTQ5LjE3QTE5Ljg2LDE5Ljg2LDAsMCwwLDI4LDE2My4zMVYyMDhhMjAsMjAsMCwwLDAsMjAsMjBIMjE2YTEyLDEyLDAsMCwwLDAtMjRIMTI1TDIzMC4xNSw5OC44M0EyMCwyMCwwLDAsMCwyMzAuMTUsNzAuNTRaTTkxLDIwNEg1MlYxNjVsODQtODQsMzksMzlaTTE5MiwxMDMsMTUzLDY0bDE4LjM0LTE4LjM0LDM5LDM5WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-timer: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2QwNWM4YSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNDRhOTYsOTYsMCwxLDAsOTYsOTZBOTYuMTEsOTYuMTEsMCwwLDAsMTI4LDQ0Wm0wLDE2OGE3Miw3MiwwLDEsMSw3Mi03MkE3Mi4wOCw3Mi4wOCwwLDAsMSwxMjgsMjEyWk0xNjQuNDksOTkuNTFhMTIsMTIsMCwwLDEsMCwxN2wtMjgsMjhhMTIsMTIsMCwwLDEtMTctMTdsMjgtMjhBMTIsMTIsMCwwLDEsMTY0LjQ5LDk5LjUxWk05MiwxNkExMiwxMiwwLDAsMSwxMDQsNGg0OGExMiwxMiwwLDAsMSwwLDI0SDEwNEExMiwxMiwwLDAsMSw5MiwxNloiPjwvcGF0aD48L3N2Zz4=");
--icon-check-radio: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2QwNWM4YSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNzYuNDksOTUuNTFhMTIsMTIsMCwwLDEsMCwxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMGwtMjQtMjRhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MkExMiwxMiwwLDAsMSwxNzYuNDksOTUuNTFaTTIzNiwxMjhBMTA4LDEwOCwwLDEsMSwxMjgsMjAsMTA4LjEyLDEwOC4xMiwwLDAsMSwyMzYsMTI4Wm0tMjQsMGE4NCw4NCwwLDEsMC04NCw4NEE4NC4wOSw4NC4wOSwwLDAsMCwyMTIsMTI4WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-check-box: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2QwNWM4YSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik03OS41MSwxNDQuNDlhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MmExMiwxMiwwLDAsMSwxNywxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMFpNMjI4LDQ4VjIwOGEyMCwyMCwwLDAsMS0yMCwyMEg0OGEyMCwyMCwwLDAsMS0yMC0yMFY0OEEyMCwyMCwwLDAsMSw0OCwyOEgyMDhBMjAsMjAsMCwwLDEsMjI4LDQ4Wm0tMjQsNEg1MlYyMDRIMjA0WiI+PC9wYXRoPjwvc3ZnPg==");
}
}
.layout-multiple-columns {
@ -1118,9 +1127,11 @@ body.app-body {
border-radius: 8px;
padding: 8px 15px 8px 36px;
font-weight: 500;
transition: all .2s;
}
.app-body .compose-form .spoiler-input__input:focus {
border-color: var(--color-accent);
background-color: var(--color-content-bg);
}
.app-body .display-name {
color: var(--color-content-fg);
@ -1207,7 +1218,7 @@ body.app-body {
animation: bounce-sml .3s ease-out 1;
}
/* poll composer */
/* Poll composer */
.app-body .compose-form__poll {
gap: 3px;
}
@ -1224,16 +1235,146 @@ body.app-body {
}
.app-body .compose-form__poll__footer {
margin-top: 5px;
padding-inline-start: 51px;
padding-inline-start: 12px;
gap: 6px;
margin-bottom: -10px;
}
.app-body .compose-form__poll__select__label {
color: var(--color-content-fg)
display: none;
}
.app-body .compose-form__poll__select__value {
background-position: 8px center;
background-size: 15px;
background-repeat: no-repeat;
color: var(--color-accent);
padding: 4px 8px 4px 27px;
border-radius: 8px;
border: 1px solid var(--color-accent-bg);
font-size: 12px;
line-height: 16px;
transition:
background-color .2s,
border-color .2s;
cursor: pointer;
}
.app-body .compose-form__poll__select__value:is(:active, :hover, :focus) {
border-color: var(--color-accent);
outline: 0;
}
.app-body .compose-form__poll__select__value:active {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value {
background-image: var(--icon-timer);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value:active {
background-image: var(--icon-timer-inv);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value {
background-image: var(--icon-check-radio);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:active,
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked):active {
background-image: var(--icon-check-radio-inv);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked) {
background-image: var(--icon-check-radio);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked) {
background-image: var(--icon-check-box);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked):active {
background-image: var(--icon-check-box-inv);
}
.app-body .compose-form__poll__footer__sep {
background-color: var(--color-lines);
display: none;
}
.app-body .compose-form__poll .poll__option.empty:not(:focus-within) {
opacity: .8;
}
.app-body .compose-form__poll-wrapper,
.app-body .compose-form__poll-wrapper .poll__footer {
border-top: 0;
}
.app-body .compose-form__poll-wrapper ul {
background-color: var(--color-accent-bg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input,
.app-body .compose-form__poll-wrapper select {
background-color: var(--color-content-bg);
border: 1px solid var(--color-lines);
border-radius: 8px;
color: var(--color-content-fg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input:focus,
.app-body .compose-form__poll-wrapper select:focus {
border-color: var(--color-accent);
}
.app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary {
padding: 6px 16px;
}
.app-body .compose-form__poll-wrapper .icon-button.disabled {
color: transparent;
pointer-events: none;
}
.app-body .compose-form__poll-button .icon-button.active {
background-color: var(--color-accent);
}
.app-body .compose-form__poll-button .icon-button.active .icon-tasks {
background-image: var(--icon-poll-active);
}
/* Polls in posts */
.app-body .poll__chart,
.app-body .muted .poll__chart.leading {
background: var(--color-accent);
opacity: .4;
height: 12px;
border-radius: 10px;
}
.app-body .poll__chart.leading,
.app-body .muted .poll__chart.leading {
opacity: 1;
}
.app-body .muted .poll {
color: var(--color-content-fg-muted);
}
.app-body .poll__footer {
color: var(--color-content-fg);
}
.app-body .poll__link {
color: var(--color-accent);
text-decoration: none;
}
.app-body .poll__input {
border: 2px solid var(--color-content-fg);
background-color: var(--color-content-secondary-bg);
opacity: .5;
}
.app-body .poll__option.editable .poll__input {
display: none;
}
.app-body .poll__input:hover {
border-color: var(--color-accent);
background-color: var(--color-accent-bg);
opacity: 1;
}
.app-body .poll__input:is(.active, :active, :focus) {
background-color: var(--color-accent);
}
.app-body .poll__input.active {
border-color: var(--color-accent);
}
.app-body .poll__footer .button.button-secondary {
padding: 0 16px;
}
.app-body .poll__footer .button.button-secondary:hover {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
/* Emoji picker */
@ -2237,87 +2378,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
/* 📊 Polls */
.app-body .poll__chart,
.app-body .muted .poll__chart.leading {
background: var(--color-accent);
opacity: .4;
height: 12px;
border-radius: 10px;
}
.app-body .poll__chart.leading,
.app-body .muted .poll__chart.leading {
opacity: 1;
}
.app-body .muted .poll {
color: var(--color-content-fg-muted);
}
.app-body .poll__footer {
color: var(--color-content-fg);
}
.app-body .poll__link {
color: var(--color-accent);
text-decoration: none;
}
.app-body .poll__input,
.app-body .poll__option.editable .poll__input {
border: 2px solid var(--color-content-fg);
background-color: var(--color-content-secondary-bg);
opacity: .5;
}
.app-body .poll__input:hover,
.app-body .poll__option.editable .poll__input:is(:active, :hover, :focus) {
border-color: var(--color-accent);
background-color: var(--color-accent-bg);
opacity: 1;
}
.app-body .poll__input:is(.active, :active, :focus) {
background-color: var(--color-accent);
}
.app-body .poll__input.active {
border-color: var(--color-accent);
}
.app-body .poll__footer .button.button-secondary {
padding: 0 16px;
}
.app-body .poll__footer .button.button-secondary:hover {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
/* Poll composer */
.app-body .compose-form__poll-wrapper,
.app-body .compose-form__poll-wrapper .poll__footer {
border-top: 0;
}
.app-body .compose-form__poll-wrapper ul {
background-color: var(--color-accent-bg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input,
.app-body .compose-form__poll-wrapper select {
background-color: var(--color-content-bg);
border: 1px solid var(--color-lines);
border-radius: 8px;
color: var(--color-content-fg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input:focus,
.app-body .compose-form__poll-wrapper select:focus {
border-color: var(--color-accent);
}
.app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary {
padding: 6px 16px;
}
.app-body .compose-form__poll-wrapper .icon-button.disabled {
color: transparent;
pointer-events: none;
}
.app-body .compose-form__poll-button .icon-button.active {
background-color: var(--color-accent);
}
.app-body .compose-form__poll-button .icon-button.active .icon-tasks {
background-image: var(--icon-poll-active);
}
/* Empty columns */
.app-body .empty-column-indicator {
background-color: var(--color-content-secondary-bg);
@ -3558,6 +3618,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: var(--color-accent-bg);
color: var(--color-content-fg);
border: 1px solid var(--color-accent-lines);
transition:
border-color .2s,
background-color .2s;
}
.app-body .search__input::placeholder,
.app-body .compose-form .spoiler-input__input::placeholder {
@ -3565,7 +3628,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
color: var(--color-accent);
}
.app-body .search__input:focus {
border: 1px solid var(--color-accent);
border-color: var(--color-accent);
background-color: var(--color-content-bg);
}
.app-body .search__input:focus::placeholder,
.app-body .compose-form .spoiler-input__input:focus::placeholder {
color: var(--color-content-fg);
opacity: .4;
}
.app-body .search__icon .icon {
margin-right: 4px;

242
TangerineUI-purple.css
View File

@ -159,6 +159,12 @@
--icon-eye-shut: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzQ0NGE1YSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTA0Yy0xNi44MSwyMC44MS00Ny42Myw0OC05Niw0OHMtNzkuMTktMjcuMTktOTYtNDhjMTYuODEtMjAuODEsNDcuNjMtNDgsOTYtNDhTMjA3LjE5LDgzLjE5LDIyNCwxMDRaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMjI4LDE3NWE4LDgsMCwwLDEtMTAuOTItM2wtMTktMzMuMkExMjMuMjMsMTIzLjIzLDAsMCwxLDE2MiwxNTUuNDZsNS44NywzNS4yMmE4LDgsMCwwLDEtNi41OCw5LjIxQTguNCw4LjQsMCwwLDEsMTYwLDIwMGE4LDgsMCwwLDEtNy44OC02LjY5bC01Ljc3LTM0LjU4YTEzMy4wNiwxMzMuMDYsMCwwLDEtMzYuNjgsMGwtNS43NywzNC41OEE4LDgsMCwwLDEsOTYsMjAwYTguNCw4LjQsMCwwLDEtMS4zMi0uMTEsOCw4LDAsMCwxLTYuNTgtOS4yMUw5NCwxNTUuNDZhMTIzLjIzLDEyMy4yMywwLDAsMS0zNi4wNi0xNi42OUwzOSwxNzJBOCw4LDAsMSwxLDI1LjA2LDE2NGwyMC0zNWExNTMuNDcsMTUzLjQ3LDAsMCwxLTE5LjMtMjBBOCw4LDAsMSwxLDM4LjIyLDk5YzE2LjYsMjAuNTQsNDUuNjQsNDUsODkuNzgsNDVzNzMuMTgtMjQuNDksODkuNzgtNDVBOCw4LDAsMSwxLDIzMC4yMiwxMDlhMTUzLjQ3LDE1My40NywwLDAsMS0xOS4zLDIwbDIwLDM1QTgsOCwwLDAsMSwyMjgsMTc1WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-eye-open: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzQ0NGE1YSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNTZDNDgsNTYsMTYsMTI4LDE2LDEyOHMzMiw3MiwxMTIsNzIsMTEyLTcyLDExMi03MlMyMDgsNTYsMTI4LDU2Wm0wLDExMmE0MCw0MCwwLDEsMSw0MC00MEE0MCw0MCwwLDAsMSwxMjgsMTY4WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTI0Ny4zMSwxMjQuNzZjLS4zNS0uNzktOC44Mi0xOS41OC0yNy42NS0zOC40MUMxOTQuNTcsNjEuMjYsMTYyLjg4LDQ4LDEyOCw0OFM2MS40Myw2MS4yNiwzNi4zNCw4Ni4zNUMxNy41MSwxMDUuMTgsOSwxMjQsOC42OSwxMjQuNzZhOCw4LDAsMCwwLDAsNi41Yy4zNS43OSw4LjgyLDE5LjU3LDI3LjY1LDM4LjRDNjEuNDMsMTk0Ljc0LDkzLjEyLDIwOCwxMjgsMjA4czY2LjU3LTEzLjI2LDkxLjY2LTM4LjM0YzE4LjgzLTE4LjgzLDI3LjMtMzcuNjEsMjcuNjUtMzguNEE4LDgsMCwwLDAsMjQ3LjMxLDEyNC43NlpNMTI4LDE5MmMtMzAuNzgsMC01Ny42Ny0xMS4xOS03OS45My0zMy4yNUExMzMuNDcsMTMzLjQ3LDAsMCwxLDI1LDEyOCwxMzMuMzMsMTMzLjMzLDAsMCwxLDQ4LjA3LDk3LjI1QzcwLjMzLDc1LjE5LDk3LjIyLDY0LDEyOCw2NHM1Ny42NywxMS4xOSw3OS45MywzMy4yNUExMzMuNDYsMTMzLjQ2LDAsMCwxLDIzMS4wNSwxMjhDMjIzLjg0LDE0MS40NiwxOTIuNDMsMTkyLDEyOCwxOTJabTAtMTEyYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWiI+PC9wYXRoPjwvc3ZnPg==");
--icon-edited: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzQ0NGE1YSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMTUsNzAuNTQsMTg1LjQ2LDI1Ljg2YTIwLDIwLDAsMCwwLTI4LjI4LDBMMzMuODYsMTQ5LjE3QTE5Ljg2LDE5Ljg2LDAsMCwwLDI4LDE2My4zMVYyMDhhMjAsMjAsMCwwLDAsMjAsMjBIMjE2YTEyLDEyLDAsMCwwLDAtMjRIMTI1TDIzMC4xNSw5OC44M0EyMCwyMCwwLDAsMCwyMzAuMTUsNzAuNTRaTTkxLDIwNEg1MlYxNjVsODQtODQsMzksMzlaTTE5MiwxMDMsMTUzLDY0bDE4LjM0LTE4LjM0LDM5LDM5WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-timer: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNDRhOTYsOTYsMCwxLDAsOTYsOTZBOTYuMTEsOTYuMTEsMCwwLDAsMTI4LDQ0Wm0wLDE2OGE3Miw3MiwwLDEsMSw3Mi03MkE3Mi4wOCw3Mi4wOCwwLDAsMSwxMjgsMjEyWk0xNjQuNDksOTkuNTFhMTIsMTIsMCwwLDEsMCwxN2wtMjgsMjhhMTIsMTIsMCwwLDEtMTctMTdsMjgtMjhBMTIsMTIsMCwwLDEsMTY0LjQ5LDk5LjUxWk05MiwxNkExMiwxMiwwLDAsMSwxMDQsNGg0OGExMiwxMiwwLDAsMSwwLDI0SDEwNEExMiwxMiwwLDAsMSw5MiwxNloiPjwvcGF0aD48L3N2Zz4=");
--icon-timer-inv: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNDRhOTYsOTYsMCwxLDAsOTYsOTZBOTYuMTEsOTYuMTEsMCwwLDAsMTI4LDQ0Wm0wLDE2OGE3Miw3MiwwLDEsMSw3Mi03MkE3Mi4wOCw3Mi4wOCwwLDAsMSwxMjgsMjEyWk0xNjQuNDksOTkuNTFhMTIsMTIsMCwwLDEsMCwxN2wtMjgsMjhhMTIsMTIsMCwwLDEtMTctMTdsMjgtMjhBMTIsMTIsMCwwLDEsMTY0LjQ5LDk5LjUxWk05MiwxNkExMiwxMiwwLDAsMSwxMDQsNGg0OGExMiwxMiwwLDAsMSwwLDI0SDEwNEExMiwxMiwwLDAsMSw5MiwxNloiPjwvcGF0aD48L3N2Zz4=");
--icon-check-radio: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNzYuNDksOTUuNTFhMTIsMTIsMCwwLDEsMCwxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMGwtMjQtMjRhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MkExMiwxMiwwLDAsMSwxNzYuNDksOTUuNTFaTTIzNiwxMjhBMTA4LDEwOCwwLDEsMSwxMjgsMjAsMTA4LjEyLDEwOC4xMiwwLDAsMSwyMzYsMTI4Wm0tMjQsMGE4NCw4NCwwLDEsMC04NCw4NEE4NC4wOSw4NC4wOSwwLDAsMCwyMTIsMTI4WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-check-radio-inv: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNzYuNDksOTUuNTFhMTIsMTIsMCwwLDEsMCwxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMGwtMjQtMjRhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MkExMiwxMiwwLDAsMSwxNzYuNDksOTUuNTFaTTIzNiwxMjhBMTA4LDEwOCwwLDEsMSwxMjgsMjAsMTA4LjEyLDEwOC4xMiwwLDAsMSwyMzYsMTI4Wm0tMjQsMGE4NCw4NCwwLDEsMC04NCw4NEE4NC4wOSw4NC4wOSwwLDAsMCwyMTIsMTI4WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-check-box: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik03OS41MSwxNDQuNDlhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MmExMiwxMiwwLDAsMSwxNywxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMFpNMjI4LDQ4VjIwOGEyMCwyMCwwLDAsMS0yMCwyMEg0OGEyMCwyMCwwLDAsMS0yMC0yMFY0OEEyMCwyMCwwLDAsMSw0OCwyOEgyMDhBMjAsMjAsMCwwLDEsMjI4LDQ4Wm0tMjQsNEg1MlYyMDRIMjA0WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-check-box-inv: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik03OS41MSwxNDQuNDlhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MmExMiwxMiwwLDAsMSwxNywxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMFpNMjI4LDQ4VjIwOGEyMCwyMCwwLDAsMS0yMCwyMEg0OGEyMCwyMCwwLDAsMS0yMC0yMFY0OEEyMCwyMCwwLDAsMSw0OCwyOEgyMDhBMjAsMjAsMCwwLDEsMjI4LDQ4Wm0tMjQsNEg1MlYyMDRIMjA0WiI+PC9wYXRoPjwvc3ZnPg==");
}
@media (prefers-color-scheme: dark) {
:root {
@ -247,6 +253,9 @@
--icon-eye-shut: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTA0Yy0xNi44MSwyMC44MS00Ny42Myw0OC05Niw0OHMtNzkuMTktMjcuMTktOTYtNDhjMTYuODEtMjAuODEsNDcuNjMtNDgsOTYtNDhTMjA3LjE5LDgzLjE5LDIyNCwxMDRaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMjI4LDE3NWE4LDgsMCwwLDEtMTAuOTItM2wtMTktMzMuMkExMjMuMjMsMTIzLjIzLDAsMCwxLDE2MiwxNTUuNDZsNS44NywzNS4yMmE4LDgsMCwwLDEtNi41OCw5LjIxQTguNCw4LjQsMCwwLDEsMTYwLDIwMGE4LDgsMCwwLDEtNy44OC02LjY5bC01Ljc3LTM0LjU4YTEzMy4wNiwxMzMuMDYsMCwwLDEtMzYuNjgsMGwtNS43NywzNC41OEE4LDgsMCwwLDEsOTYsMjAwYTguNCw4LjQsMCwwLDEtMS4zMi0uMTEsOCw4LDAsMCwxLTYuNTgtOS4yMUw5NCwxNTUuNDZhMTIzLjIzLDEyMy4yMywwLDAsMS0zNi4wNi0xNi42OUwzOSwxNzJBOCw4LDAsMSwxLDI1LjA2LDE2NGwyMC0zNWExNTMuNDcsMTUzLjQ3LDAsMCwxLTE5LjMtMjBBOCw4LDAsMSwxLDM4LjIyLDk5YzE2LjYsMjAuNTQsNDUuNjQsNDUsODkuNzgsNDVzNzMuMTgtMjQuNDksODkuNzgtNDVBOCw4LDAsMSwxLDIzMC4yMiwxMDlhMTUzLjQ3LDE1My40NywwLDAsMS0xOS4zLDIwbDIwLDM1QTgsOCwwLDAsMSwyMjgsMTc1WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-eye-open: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNTZDNDgsNTYsMTYsMTI4LDE2LDEyOHMzMiw3MiwxMTIsNzIsMTEyLTcyLDExMi03MlMyMDgsNTYsMTI4LDU2Wm0wLDExMmE0MCw0MCwwLDEsMSw0MC00MEE0MCw0MCwwLDAsMSwxMjgsMTY4WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTI0Ny4zMSwxMjQuNzZjLS4zNS0uNzktOC44Mi0xOS41OC0yNy42NS0zOC40MUMxOTQuNTcsNjEuMjYsMTYyLjg4LDQ4LDEyOCw0OFM2MS40Myw2MS4yNiwzNi4zNCw4Ni4zNUMxNy41MSwxMDUuMTgsOSwxMjQsOC42OSwxMjQuNzZhOCw4LDAsMCwwLDAsNi41Yy4zNS43OSw4LjgyLDE5LjU3LDI3LjY1LDM4LjRDNjEuNDMsMTk0Ljc0LDkzLjEyLDIwOCwxMjgsMjA4czY2LjU3LTEzLjI2LDkxLjY2LTM4LjM0YzE4LjgzLTE4LjgzLDI3LjMtMzcuNjEsMjcuNjUtMzguNEE4LDgsMCwwLDAsMjQ3LjMxLDEyNC43NlpNMTI4LDE5MmMtMzAuNzgsMC01Ny42Ny0xMS4xOS03OS45My0zMy4yNUExMzMuNDcsMTMzLjQ3LDAsMCwxLDI1LDEyOCwxMzMuMzMsMTMzLjMzLDAsMCwxLDQ4LjA3LDk3LjI1QzcwLjMzLDc1LjE5LDk3LjIyLDY0LDEyOCw2NHM1Ny42NywxMS4xOSw3OS45MywzMy4yNUExMzMuNDYsMTMzLjQ2LDAsMCwxLDIzMS4wNSwxMjhDMjIzLjg0LDE0MS40NiwxOTIuNDMsMTkyLDEyOCwxOTJabTAtMTEyYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWiI+PC9wYXRoPjwvc3ZnPg==");
--icon-edited: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMTUsNzAuNTQsMTg1LjQ2LDI1Ljg2YTIwLDIwLDAsMCwwLTI4LjI4LDBMMzMuODYsMTQ5LjE3QTE5Ljg2LDE5Ljg2LDAsMCwwLDI4LDE2My4zMVYyMDhhMjAsMjAsMCwwLDAsMjAsMjBIMjE2YTEyLDEyLDAsMCwwLDAtMjRIMTI1TDIzMC4xNSw5OC44M0EyMCwyMCwwLDAsMCwyMzAuMTUsNzAuNTRaTTkxLDIwNEg1MlYxNjVsODQtODQsMzksMzlaTTE5MiwxMDMsMTUzLDY0bDE4LjM0LTE4LjM0LDM5LDM5WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-timer: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzdhN2FmOSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNDRhOTYsOTYsMCwxLDAsOTYsOTZBOTYuMTEsOTYuMTEsMCwwLDAsMTI4LDQ0Wm0wLDE2OGE3Miw3MiwwLDEsMSw3Mi03MkE3Mi4wOCw3Mi4wOCwwLDAsMSwxMjgsMjEyWk0xNjQuNDksOTkuNTFhMTIsMTIsMCwwLDEsMCwxN2wtMjgsMjhhMTIsMTIsMCwwLDEtMTctMTdsMjgtMjhBMTIsMTIsMCwwLDEsMTY0LjQ5LDk5LjUxWk05MiwxNkExMiwxMiwwLDAsMSwxMDQsNGg0OGExMiwxMiwwLDAsMSwwLDI0SDEwNEExMiwxMiwwLDAsMSw5MiwxNloiPjwvcGF0aD48L3N2Zz4=");
--icon-check-radio: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzdhN2FmOSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNzYuNDksOTUuNTFhMTIsMTIsMCwwLDEsMCwxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMGwtMjQtMjRhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MkExMiwxMiwwLDAsMSwxNzYuNDksOTUuNTFaTTIzNiwxMjhBMTA4LDEwOCwwLDEsMSwxMjgsMjAsMTA4LjEyLDEwOC4xMiwwLDAsMSwyMzYsMTI4Wm0tMjQsMGE4NCw4NCwwLDEsMC04NCw4NEE4NC4wOSw4NC4wOSwwLDAsMCwyMTIsMTI4WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-check-box: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzdhN2FmOSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik03OS41MSwxNDQuNDlhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MmExMiwxMiwwLDAsMSwxNywxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMFpNMjI4LDQ4VjIwOGEyMCwyMCwwLDAsMS0yMCwyMEg0OGEyMCwyMCwwLDAsMS0yMC0yMFY0OEEyMCwyMCwwLDAsMSw0OCwyOEgyMDhBMjAsMjAsMCwwLDEsMjI4LDQ4Wm0tMjQsNEg1MlYyMDRIMjA0WiI+PC9wYXRoPjwvc3ZnPg==");
}
}
.layout-multiple-columns {
@ -1118,9 +1127,11 @@ body.app-body {
border-radius: 8px;
padding: 8px 15px 8px 36px;
font-weight: 500;
transition: all .2s;
}
.app-body .compose-form .spoiler-input__input:focus {
border-color: var(--color-accent);
background-color: var(--color-content-bg);
}
.app-body .display-name {
color: var(--color-content-fg);
@ -1207,7 +1218,7 @@ body.app-body {
animation: bounce-sml .3s ease-out 1;
}
/* poll composer */
/* Poll composer */
.app-body .compose-form__poll {
gap: 3px;
}
@ -1218,22 +1229,153 @@ body.app-body {
border-radius: 8px;
border: 1px solid var(--color-lines);
background-color: var(--color-content-bg);
transition: all .2s;
}
.app-body .poll__option input[type=text]:focus {
border-color: var(--color-accent);
}
.app-body .compose-form__poll__footer {
margin-top: 5px;
padding-inline-start: 51px;
padding-inline-start: 12px;
gap: 6px;
margin-bottom: -10px;
}
.app-body .compose-form__poll__select__label {
color: var(--color-content-fg)
display: none;
}
.app-body .compose-form__poll__select__value {
background-position: 8px center;
background-size: 15px;
background-repeat: no-repeat;
color: var(--color-accent);
padding: 4px 8px 4px 27px;
border-radius: 8px;
border: 1px solid var(--color-accent-bg);
font-size: 12px;
line-height: 16px;
transition:
background-color .2s,
border-color .2s;
cursor: pointer;
}
.app-body .compose-form__poll__select__value:is(:active, :hover, :focus) {
border-color: var(--color-accent);
outline: 0;
}
.app-body .compose-form__poll__select__value:active {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value {
background-image: var(--icon-timer);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value:active {
background-image: var(--icon-timer-inv);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value {
background-image: var(--icon-check-radio);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:active,
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked):active {
background-image: var(--icon-check-radio-inv);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked) {
background-image: var(--icon-check-radio);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked) {
background-image: var(--icon-check-box);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked):active {
background-image: var(--icon-check-box-inv);
}
.app-body .compose-form__poll__footer__sep {
background-color: var(--color-lines);
display: none;
}
.app-body .compose-form__poll .poll__option.empty:not(:focus-within) {
opacity: .8;
}
.app-body .compose-form__poll-wrapper,
.app-body .compose-form__poll-wrapper .poll__footer {
border-top: 0;
}
.app-body .compose-form__poll-wrapper ul {
background-color: var(--color-accent-bg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input,
.app-body .compose-form__poll-wrapper select {
background-color: var(--color-content-bg);
border: 1px solid var(--color-lines);
border-radius: 8px;
color: var(--color-content-fg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input:focus,
.app-body .compose-form__poll-wrapper select:focus {
border-color: var(--color-accent);
}
.app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary {
padding: 6px 16px;
}
.app-body .compose-form__poll-wrapper .icon-button.disabled {
color: transparent;
pointer-events: none;
}
.app-body .compose-form__poll-button .icon-button.active {
background-color: var(--color-accent);
}
.app-body .compose-form__poll-button .icon-button.active .icon-tasks {
background-image: var(--icon-poll-active);
}
/* Polls in posts */
.app-body .poll__chart,
.app-body .muted .poll__chart.leading {
background: var(--color-accent);
opacity: .4;
height: 12px;
border-radius: 10px;
}
.app-body .poll__chart.leading,
.app-body .muted .poll__chart.leading {
opacity: 1;
}
.app-body .muted .poll {
color: var(--color-content-fg-muted);
}
.app-body .poll__footer {
color: var(--color-content-fg);
}
.app-body .poll__link {
color: var(--color-accent);
text-decoration: none;
}
.app-body .poll__input {
border: 2px solid var(--color-content-fg);
background-color: var(--color-content-secondary-bg);
opacity: .5;
}
.app-body .poll__option.editable .poll__input {
display: none;
}
.app-body .poll__input:hover {
border-color: var(--color-accent);
background-color: var(--color-accent-bg);
opacity: 1;
}
.app-body .poll__input:is(.active, :active, :focus) {
background-color: var(--color-accent);
}
.app-body .poll__input.active {
border-color: var(--color-accent);
}
.app-body .poll__footer .button.button-secondary {
padding: 0 16px;
}
.app-body .poll__footer .button.button-secondary:hover {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
/* Emoji picker */
@ -2237,87 +2379,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
/* 📊 Polls */
.app-body .poll__chart,
.app-body .muted .poll__chart.leading {
background: var(--color-accent);
opacity: .4;
height: 12px;
border-radius: 10px;
}
.app-body .poll__chart.leading,
.app-body .muted .poll__chart.leading {
opacity: 1;
}
.app-body .muted .poll {
color: var(--color-content-fg-muted);
}
.app-body .poll__footer {
color: var(--color-content-fg);
}
.app-body .poll__link {
color: var(--color-accent);
text-decoration: none;
}
.app-body .poll__input,
.app-body .poll__option.editable .poll__input {
border: 2px solid var(--color-content-fg);
background-color: var(--color-content-secondary-bg);
opacity: .5;
}
.app-body .poll__input:hover,
.app-body .poll__option.editable .poll__input:is(:active, :hover, :focus) {
border-color: var(--color-accent);
background-color: var(--color-accent-bg);
opacity: 1;
}
.app-body .poll__input:is(.active, :active, :focus) {
background-color: var(--color-accent);
}
.app-body .poll__input.active {
border-color: var(--color-accent);
}
.app-body .poll__footer .button.button-secondary {
padding: 0 16px;
}
.app-body .poll__footer .button.button-secondary:hover {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
/* Poll composer */
.app-body .compose-form__poll-wrapper,
.app-body .compose-form__poll-wrapper .poll__footer {
border-top: 0;
}
.app-body .compose-form__poll-wrapper ul {
background-color: var(--color-accent-bg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input,
.app-body .compose-form__poll-wrapper select {
background-color: var(--color-content-bg);
border: 1px solid var(--color-lines);
border-radius: 8px;
color: var(--color-content-fg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input:focus,
.app-body .compose-form__poll-wrapper select:focus {
border-color: var(--color-accent);
}
.app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary {
padding: 6px 16px;
}
.app-body .compose-form__poll-wrapper .icon-button.disabled {
color: transparent;
pointer-events: none;
}
.app-body .compose-form__poll-button .icon-button.active {
background-color: var(--color-accent);
}
.app-body .compose-form__poll-button .icon-button.active .icon-tasks {
background-image: var(--icon-poll-active);
}
/* Empty columns */
.app-body .empty-column-indicator {
background-color: var(--color-content-secondary-bg);
@ -3558,6 +3619,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: var(--color-accent-bg);
color: var(--color-content-fg);
border: 1px solid var(--color-accent-lines);
transition:
border-color .2s,
background-color .2s;
}
.app-body .search__input::placeholder,
.app-body .compose-form .spoiler-input__input::placeholder {
@ -3565,7 +3629,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
color: var(--color-accent);
}
.app-body .search__input:focus {
border: 1px solid var(--color-accent);
border-color: var(--color-accent);
background-color: var(--color-content-bg);
}
.app-body .search__input:focus::placeholder,
.app-body .compose-form .spoiler-input__input:focus::placeholder {
color: var(--color-content-fg);
opacity: .4;
}
.app-body .search__icon .icon {
margin-right: 4px;

242
TangerineUI.css
View File

@ -159,6 +159,12 @@
--icon-eye-shut: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzQ0NGE1YSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTA0Yy0xNi44MSwyMC44MS00Ny42Myw0OC05Niw0OHMtNzkuMTktMjcuMTktOTYtNDhjMTYuODEtMjAuODEsNDcuNjMtNDgsOTYtNDhTMjA3LjE5LDgzLjE5LDIyNCwxMDRaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMjI4LDE3NWE4LDgsMCwwLDEtMTAuOTItM2wtMTktMzMuMkExMjMuMjMsMTIzLjIzLDAsMCwxLDE2MiwxNTUuNDZsNS44NywzNS4yMmE4LDgsMCwwLDEtNi41OCw5LjIxQTguNCw4LjQsMCwwLDEsMTYwLDIwMGE4LDgsMCwwLDEtNy44OC02LjY5bC01Ljc3LTM0LjU4YTEzMy4wNiwxMzMuMDYsMCwwLDEtMzYuNjgsMGwtNS43NywzNC41OEE4LDgsMCwwLDEsOTYsMjAwYTguNCw4LjQsMCwwLDEtMS4zMi0uMTEsOCw4LDAsMCwxLTYuNTgtOS4yMUw5NCwxNTUuNDZhMTIzLjIzLDEyMy4yMywwLDAsMS0zNi4wNi0xNi42OUwzOSwxNzJBOCw4LDAsMSwxLDI1LjA2LDE2NGwyMC0zNWExNTMuNDcsMTUzLjQ3LDAsMCwxLTE5LjMtMjBBOCw4LDAsMSwxLDM4LjIyLDk5YzE2LjYsMjAuNTQsNDUuNjQsNDUsODkuNzgsNDVzNzMuMTgtMjQuNDksODkuNzgtNDVBOCw4LDAsMSwxLDIzMC4yMiwxMDlhMTUzLjQ3LDE1My40NywwLDAsMS0xOS4zLDIwbDIwLDM1QTgsOCwwLDAsMSwyMjgsMTc1WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-eye-open: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzQ0NGE1YSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNTZDNDgsNTYsMTYsMTI4LDE2LDEyOHMzMiw3MiwxMTIsNzIsMTEyLTcyLDExMi03MlMyMDgsNTYsMTI4LDU2Wm0wLDExMmE0MCw0MCwwLDEsMSw0MC00MEE0MCw0MCwwLDAsMSwxMjgsMTY4WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTI0Ny4zMSwxMjQuNzZjLS4zNS0uNzktOC44Mi0xOS41OC0yNy42NS0zOC40MUMxOTQuNTcsNjEuMjYsMTYyLjg4LDQ4LDEyOCw0OFM2MS40Myw2MS4yNiwzNi4zNCw4Ni4zNUMxNy41MSwxMDUuMTgsOSwxMjQsOC42OSwxMjQuNzZhOCw4LDAsMCwwLDAsNi41Yy4zNS43OSw4LjgyLDE5LjU3LDI3LjY1LDM4LjRDNjEuNDMsMTk0Ljc0LDkzLjEyLDIwOCwxMjgsMjA4czY2LjU3LTEzLjI2LDkxLjY2LTM4LjM0YzE4LjgzLTE4LjgzLDI3LjMtMzcuNjEsMjcuNjUtMzguNEE4LDgsMCwwLDAsMjQ3LjMxLDEyNC43NlpNMTI4LDE5MmMtMzAuNzgsMC01Ny42Ny0xMS4xOS03OS45My0zMy4yNUExMzMuNDcsMTMzLjQ3LDAsMCwxLDI1LDEyOCwxMzMuMzMsMTMzLjMzLDAsMCwxLDQ4LjA3LDk3LjI1QzcwLjMzLDc1LjE5LDk3LjIyLDY0LDEyOCw2NHM1Ny42NywxMS4xOSw3OS45MywzMy4yNUExMzMuNDYsMTMzLjQ2LDAsMCwxLDIzMS4wNSwxMjhDMjIzLjg0LDE0MS40NiwxOTIuNDMsMTkyLDEyOCwxOTJabTAtMTEyYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWiI+PC9wYXRoPjwvc3ZnPg==");
--icon-edited: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzQ0NGE1YSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMTUsNzAuNTQsMTg1LjQ2LDI1Ljg2YTIwLDIwLDAsMCwwLTI4LjI4LDBMMzMuODYsMTQ5LjE3QTE5Ljg2LDE5Ljg2LDAsMCwwLDI4LDE2My4zMVYyMDhhMjAsMjAsMCwwLDAsMjAsMjBIMjE2YTEyLDEyLDAsMCwwLDAtMjRIMTI1TDIzMC4xNSw5OC44M0EyMCwyMCwwLDAsMCwyMzAuMTUsNzAuNTRaTTkxLDIwNEg1MlYxNjVsODQtODQsMzksMzlaTTE5MiwxMDMsMTUzLDY0bDE4LjM0LTE4LjM0LDM5LDM5WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-timer: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNDRhOTYsOTYsMCwxLDAsOTYsOTZBOTYuMTEsOTYuMTEsMCwwLDAsMTI4LDQ0Wm0wLDE2OGE3Miw3MiwwLDEsMSw3Mi03MkE3Mi4wOCw3Mi4wOCwwLDAsMSwxMjgsMjEyWk0xNjQuNDksOTkuNTFhMTIsMTIsMCwwLDEsMCwxN2wtMjgsMjhhMTIsMTIsMCwwLDEtMTctMTdsMjgtMjhBMTIsMTIsMCwwLDEsMTY0LjQ5LDk5LjUxWk05MiwxNkExMiwxMiwwLDAsMSwxMDQsNGg0OGExMiwxMiwwLDAsMSwwLDI0SDEwNEExMiwxMiwwLDAsMSw5MiwxNloiPjwvcGF0aD48L3N2Zz4=");
--icon-timer-inv: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNDRhOTYsOTYsMCwxLDAsOTYsOTZBOTYuMTEsOTYuMTEsMCwwLDAsMTI4LDQ0Wm0wLDE2OGE3Miw3MiwwLDEsMSw3Mi03MkE3Mi4wOCw3Mi4wOCwwLDAsMSwxMjgsMjEyWk0xNjQuNDksOTkuNTFhMTIsMTIsMCwwLDEsMCwxN2wtMjgsMjhhMTIsMTIsMCwwLDEtMTctMTdsMjgtMjhBMTIsMTIsMCwwLDEsMTY0LjQ5LDk5LjUxWk05MiwxNkExMiwxMiwwLDAsMSwxMDQsNGg0OGExMiwxMiwwLDAsMSwwLDI0SDEwNEExMiwxMiwwLDAsMSw5MiwxNloiPjwvcGF0aD48L3N2Zz4=");
--icon-check-radio: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNzYuNDksOTUuNTFhMTIsMTIsMCwwLDEsMCwxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMGwtMjQtMjRhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MkExMiwxMiwwLDAsMSwxNzYuNDksOTUuNTFaTTIzNiwxMjhBMTA4LDEwOCwwLDEsMSwxMjgsMjAsMTA4LjEyLDEwOC4xMiwwLDAsMSwyMzYsMTI4Wm0tMjQsMGE4NCw4NCwwLDEsMC04NCw4NEE4NC4wOSw4NC4wOSwwLDAsMCwyMTIsMTI4WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-check-radio-inv: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNzYuNDksOTUuNTFhMTIsMTIsMCwwLDEsMCwxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMGwtMjQtMjRhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MkExMiwxMiwwLDAsMSwxNzYuNDksOTUuNTFaTTIzNiwxMjhBMTA4LDEwOCwwLDEsMSwxMjgsMjAsMTA4LjEyLDEwOC4xMiwwLDAsMSwyMzYsMTI4Wm0tMjQsMGE4NCw4NCwwLDEsMC04NCw4NEE4NC4wOSw4NC4wOSwwLDAsMCwyMTIsMTI4WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-check-box: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik03OS41MSwxNDQuNDlhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MmExMiwxMiwwLDAsMSwxNywxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMFpNMjI4LDQ4VjIwOGEyMCwyMCwwLDAsMS0yMCwyMEg0OGEyMCwyMCwwLDAsMS0yMC0yMFY0OEEyMCwyMCwwLDAsMSw0OCwyOEgyMDhBMjAsMjAsMCwwLDEsMjI4LDQ4Wm0tMjQsNEg1MlYyMDRIMjA0WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-check-box-inv: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik03OS41MSwxNDQuNDlhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MmExMiwxMiwwLDAsMSwxNywxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMFpNMjI4LDQ4VjIwOGEyMCwyMCwwLDAsMS0yMCwyMEg0OGEyMCwyMCwwLDAsMS0yMC0yMFY0OEEyMCwyMCwwLDAsMSw0OCwyOEgyMDhBMjAsMjAsMCwwLDEsMjI4LDQ4Wm0tMjQsNEg1MlYyMDRIMjA0WiI+PC9wYXRoPjwvc3ZnPg==");
}
@media (prefers-color-scheme: dark) {
:root {
@ -247,6 +253,9 @@
--icon-eye-shut: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTA0Yy0xNi44MSwyMC44MS00Ny42Myw0OC05Niw0OHMtNzkuMTktMjcuMTktOTYtNDhjMTYuODEtMjAuODEsNDcuNjMtNDgsOTYtNDhTMjA3LjE5LDgzLjE5LDIyNCwxMDRaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMjI4LDE3NWE4LDgsMCwwLDEtMTAuOTItM2wtMTktMzMuMkExMjMuMjMsMTIzLjIzLDAsMCwxLDE2MiwxNTUuNDZsNS44NywzNS4yMmE4LDgsMCwwLDEtNi41OCw5LjIxQTguNCw4LjQsMCwwLDEsMTYwLDIwMGE4LDgsMCwwLDEtNy44OC02LjY5bC01Ljc3LTM0LjU4YTEzMy4wNiwxMzMuMDYsMCwwLDEtMzYuNjgsMGwtNS43NywzNC41OEE4LDgsMCwwLDEsOTYsMjAwYTguNCw4LjQsMCwwLDEtMS4zMi0uMTEsOCw4LDAsMCwxLTYuNTgtOS4yMUw5NCwxNTUuNDZhMTIzLjIzLDEyMy4yMywwLDAsMS0zNi4wNi0xNi42OUwzOSwxNzJBOCw4LDAsMSwxLDI1LjA2LDE2NGwyMC0zNWExNTMuNDcsMTUzLjQ3LDAsMCwxLTE5LjMtMjBBOCw4LDAsMSwxLDM4LjIyLDk5YzE2LjYsMjAuNTQsNDUuNjQsNDUsODkuNzgsNDVzNzMuMTgtMjQuNDksODkuNzgtNDVBOCw4LDAsMSwxLDIzMC4yMiwxMDlhMTUzLjQ3LDE1My40NywwLDAsMS0xOS4zLDIwbDIwLDM1QTgsOCwwLDAsMSwyMjgsMTc1WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-eye-open: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNTZDNDgsNTYsMTYsMTI4LDE2LDEyOHMzMiw3MiwxMTIsNzIsMTEyLTcyLDExMi03MlMyMDgsNTYsMTI4LDU2Wm0wLDExMmE0MCw0MCwwLDEsMSw0MC00MEE0MCw0MCwwLDAsMSwxMjgsMTY4WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTI0Ny4zMSwxMjQuNzZjLS4zNS0uNzktOC44Mi0xOS41OC0yNy42NS0zOC40MUMxOTQuNTcsNjEuMjYsMTYyLjg4LDQ4LDEyOCw0OFM2MS40Myw2MS4yNiwzNi4zNCw4Ni4zNUMxNy41MSwxMDUuMTgsOSwxMjQsOC42OSwxMjQuNzZhOCw4LDAsMCwwLDAsNi41Yy4zNS43OSw4LjgyLDE5LjU3LDI3LjY1LDM4LjRDNjEuNDMsMTk0Ljc0LDkzLjEyLDIwOCwxMjgsMjA4czY2LjU3LTEzLjI2LDkxLjY2LTM4LjM0YzE4LjgzLTE4LjgzLDI3LjMtMzcuNjEsMjcuNjUtMzguNEE4LDgsMCwwLDAsMjQ3LjMxLDEyNC43NlpNMTI4LDE5MmMtMzAuNzgsMC01Ny42Ny0xMS4xOS03OS45My0zMy4yNUExMzMuNDcsMTMzLjQ3LDAsMCwxLDI1LDEyOCwxMzMuMzMsMTMzLjMzLDAsMCwxLDQ4LjA3LDk3LjI1QzcwLjMzLDc1LjE5LDk3LjIyLDY0LDEyOCw2NHM1Ny42NywxMS4xOSw3OS45MywzMy4yNUExMzMuNDYsMTMzLjQ2LDAsMCwxLDIzMS4wNSwxMjhDMjIzLjg0LDE0MS40NiwxOTIuNDMsMTkyLDEyOCwxOTJabTAtMTEyYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWiI+PC9wYXRoPjwvc3ZnPg==");
--icon-edited: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMTUsNzAuNTQsMTg1LjQ2LDI1Ljg2YTIwLDIwLDAsMCwwLTI4LjI4LDBMMzMuODYsMTQ5LjE3QTE5Ljg2LDE5Ljg2LDAsMCwwLDI4LDE2My4zMVYyMDhhMjAsMjAsMCwwLDAsMjAsMjBIMjE2YTEyLDEyLDAsMCwwLDAtMjRIMTI1TDIzMC4xNSw5OC44M0EyMCwyMCwwLDAsMCwyMzAuMTUsNzAuNTRaTTkxLDIwNEg1MlYxNjVsODQtODQsMzksMzlaTTE5MiwxMDMsMTUzLDY0bDE4LjM0LTE4LjM0LDM5LDM5WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-timer: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2U2ODkzMyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjgsNDRhOTYsOTYsMCwxLDAsOTYsOTZBOTYuMTEsOTYuMTEsMCwwLDAsMTI4LDQ0Wm0wLDE2OGE3Miw3MiwwLDEsMSw3Mi03MkE3Mi4wOCw3Mi4wOCwwLDAsMSwxMjgsMjEyWk0xNjQuNDksOTkuNTFhMTIsMTIsMCwwLDEsMCwxN2wtMjgsMjhhMTIsMTIsMCwwLDEtMTctMTdsMjgtMjhBMTIsMTIsMCwwLDEsMTY0LjQ5LDk5LjUxWk05MiwxNkExMiwxMiwwLDAsMSwxMDQsNGg0OGExMiwxMiwwLDAsMSwwLDI0SDEwNEExMiwxMiwwLDAsMSw5MiwxNloiPjwvcGF0aD48L3N2Zz4=");
--icon-check-radio: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2U2ODkzMyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNzYuNDksOTUuNTFhMTIsMTIsMCwwLDEsMCwxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMGwtMjQtMjRhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MkExMiwxMiwwLDAsMSwxNzYuNDksOTUuNTFaTTIzNiwxMjhBMTA4LDEwOCwwLDEsMSwxMjgsMjAsMTA4LjEyLDEwOC4xMiwwLDAsMSwyMzYsMTI4Wm0tMjQsMGE4NCw4NCwwLDEsMC04NCw4NEE4NC4wOSw4NC4wOSwwLDAsMCwyMTIsMTI4WiI+PC9wYXRoPjwvc3ZnPg==");
--icon-check-box: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2U2ODkzMyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik03OS41MSwxNDQuNDlhMTIsMTIsMCwxLDEsMTctMTdMMTEyLDE0M2w0Ny41MS00Ny41MmExMiwxMiwwLDAsMSwxNywxN2wtNTYsNTZhMTIsMTIsMCwwLDEtMTcsMFpNMjI4LDQ4VjIwOGEyMCwyMCwwLDAsMS0yMCwyMEg0OGEyMCwyMCwwLDAsMS0yMC0yMFY0OEEyMCwyMCwwLDAsMSw0OCwyOEgyMDhBMjAsMjAsMCwwLDEsMjI4LDQ4Wm0tMjQsNEg1MlYyMDRIMjA0WiI+PC9wYXRoPjwvc3ZnPg==");
}
}
.layout-multiple-columns {
@ -1118,9 +1127,11 @@ body.app-body {
border-radius: 8px;
padding: 8px 15px 8px 36px;
font-weight: 500;
transition: all .2s;
}
.app-body .compose-form .spoiler-input__input:focus {
border-color: var(--color-accent);
background-color: var(--color-content-bg);
}
.app-body .display-name {
color: var(--color-content-fg);
@ -1207,7 +1218,7 @@ body.app-body {
animation: bounce-sml .3s ease-out 1;
}
/* poll composer */
/* Poll composer */
.app-body .compose-form__poll {
gap: 3px;
}
@ -1218,22 +1229,153 @@ body.app-body {
border-radius: 8px;
border: 1px solid var(--color-lines);
background-color: var(--color-content-bg);
transition: all .2s;
}
.app-body .poll__option input[type=text]:focus {
border-color: var(--color-accent);
}
.app-body .compose-form__poll__footer {
margin-top: 5px;
padding-inline-start: 51px;
padding-inline-start: 12px;
gap: 6px;
margin-bottom: -10px;
}
.app-body .compose-form__poll__select__label {
color: var(--color-content-fg)
display: none;
}
.app-body .compose-form__poll__select__value {
background-position: 8px center;
background-size: 15px;
background-repeat: no-repeat;
color: var(--color-accent);
padding: 4px 8px 4px 27px;
border-radius: 8px;
border: 1px solid var(--color-accent-bg);
font-size: 12px;
line-height: 16px;
transition:
background-color .2s,
border-color .2s;
cursor: pointer;
}
.app-body .compose-form__poll__select__value:is(:active, :hover, :focus) {
border-color: var(--color-accent);
outline: 0;
}
.app-body .compose-form__poll__select__value:active {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value {
background-image: var(--icon-timer);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:first-child .compose-form__poll__select__value:active {
background-image: var(--icon-timer-inv);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value {
background-image: var(--icon-check-radio);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:active,
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked):active {
background-image: var(--icon-check-radio-inv);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:first-child:checked) {
background-image: var(--icon-check-radio);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked) {
background-image: var(--icon-check-box);
}
.app-body .compose-form__poll__footer .compose-form__poll__select:last-child .compose-form__poll__select__value:has(option:last-child:checked):active {
background-image: var(--icon-check-box-inv);
}
.app-body .compose-form__poll__footer__sep {
background-color: var(--color-lines);
display: none;
}
.app-body .compose-form__poll .poll__option.empty:not(:focus-within) {
opacity: .8;
}
.app-body .compose-form__poll-wrapper,
.app-body .compose-form__poll-wrapper .poll__footer {
border-top: 0;
}
.app-body .compose-form__poll-wrapper ul {
background-color: var(--color-accent-bg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input,
.app-body .compose-form__poll-wrapper select {
background-color: var(--color-content-bg);
border: 1px solid var(--color-lines);
border-radius: 8px;
color: var(--color-content-fg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input:focus,
.app-body .compose-form__poll-wrapper select:focus {
border-color: var(--color-accent);
}
.app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary {
padding: 6px 16px;
}
.app-body .compose-form__poll-wrapper .icon-button.disabled {
color: transparent;
pointer-events: none;
}
.app-body .compose-form__poll-button .icon-button.active {
background-color: var(--color-accent);
}
.app-body .compose-form__poll-button .icon-button.active .icon-tasks {
background-image: var(--icon-poll-active);
}
/* Polls in posts */
.app-body .poll__chart,
.app-body .muted .poll__chart.leading {
background: var(--color-accent);
opacity: .4;
height: 12px;
border-radius: 10px;
}
.app-body .poll__chart.leading,
.app-body .muted .poll__chart.leading {
opacity: 1;
}
.app-body .muted .poll {
color: var(--color-content-fg-muted);
}
.app-body .poll__footer {
color: var(--color-content-fg);
}
.app-body .poll__link {
color: var(--color-accent);
text-decoration: none;
}
.app-body .poll__input {
border: 2px solid var(--color-content-fg);
background-color: var(--color-content-secondary-bg);
opacity: .5;
}
.app-body .poll__option.editable .poll__input {
display: none;
}
.app-body .poll__input:hover {
border-color: var(--color-accent);
background-color: var(--color-accent-bg);
opacity: 1;
}
.app-body .poll__input:is(.active, :active, :focus) {
background-color: var(--color-accent);
}
.app-body .poll__input.active {
border-color: var(--color-accent);
}
.app-body .poll__footer .button.button-secondary {
padding: 0 16px;
}
.app-body .poll__footer .button.button-secondary:hover {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
/* Emoji picker */
@ -2237,87 +2379,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
}
/* 📊 Polls */
.app-body .poll__chart,
.app-body .muted .poll__chart.leading {
background: var(--color-accent);
opacity: .4;
height: 12px;
border-radius: 10px;
}
.app-body .poll__chart.leading,
.app-body .muted .poll__chart.leading {
opacity: 1;
}
.app-body .muted .poll {
color: var(--color-content-fg-muted);
}
.app-body .poll__footer {
color: var(--color-content-fg);
}
.app-body .poll__link {
color: var(--color-accent);
text-decoration: none;
}
.app-body .poll__input,
.app-body .poll__option.editable .poll__input {
border: 2px solid var(--color-content-fg);
background-color: var(--color-content-secondary-bg);
opacity: .5;
}
.app-body .poll__input:hover,
.app-body .poll__option.editable .poll__input:is(:active, :hover, :focus) {
border-color: var(--color-accent);
background-color: var(--color-accent-bg);
opacity: 1;
}
.app-body .poll__input:is(.active, :active, :focus) {
background-color: var(--color-accent);
}
.app-body .poll__input.active {
border-color: var(--color-accent);
}
.app-body .poll__footer .button.button-secondary {
padding: 0 16px;
}
.app-body .poll__footer .button.button-secondary:hover {
background-color: var(--color-accent);
color: var(--color-accent-fg);
}
/* Poll composer */
.app-body .compose-form__poll-wrapper,
.app-body .compose-form__poll-wrapper .poll__footer {
border-top: 0;
}
.app-body .compose-form__poll-wrapper ul {
background-color: var(--color-accent-bg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input,
.app-body .compose-form__poll-wrapper select {
background-color: var(--color-content-bg);
border: 1px solid var(--color-lines);
border-radius: 8px;
color: var(--color-content-fg);
}
.app-body .compose-form__poll-wrapper .autosuggest-input input:focus,
.app-body .compose-form__poll-wrapper select:focus {
border-color: var(--color-accent);
}
.app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary {
padding: 6px 16px;
}
.app-body .compose-form__poll-wrapper .icon-button.disabled {
color: transparent;
pointer-events: none;
}
.app-body .compose-form__poll-button .icon-button.active {
background-color: var(--color-accent);
}
.app-body .compose-form__poll-button .icon-button.active .icon-tasks {
background-image: var(--icon-poll-active);
}
/* Empty columns */
.app-body .empty-column-indicator {
background-color: var(--color-content-secondary-bg);
@ -3558,6 +3619,9 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
background-color: var(--color-accent-bg);
color: var(--color-content-fg);
border: 1px solid var(--color-accent-lines);
transition:
border-color .2s,
background-color .2s;
}
.app-body .search__input::placeholder,
.app-body .compose-form .spoiler-input__input::placeholder {
@ -3565,7 +3629,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
color: var(--color-accent);
}
.app-body .search__input:focus {
border: 1px solid var(--color-accent);
border-color: var(--color-accent);
background-color: var(--color-content-bg);
}
.app-body .search__input:focus::placeholder,
.app-body .compose-form .spoiler-input__input:focus::placeholder {
color: var(--color-content-fg);
opacity: .4;
}
.app-body .search__icon .icon {
margin-right: 4px;