diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css index db3163e..d57109c 100644 --- a/TangerineUI-purple.css +++ b/TangerineUI-purple.css @@ -88,6 +88,7 @@ --icon-post-notification: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjAsMTI4YTE2LDE2LDAsMSwxLTE2LTE2QTE2LDE2LDAsMCwxLDEyMCwxMjhabTMyLTE2YTE2LDE2LDAsMSwwLDE2LDE2QTE2LDE2LDAsMCwwLDE1MiwxMTJabTg0LDE2QTEwOCwxMDgsMCwwLDEsNzguNzcsMjI0LjE1TDQ2LjM0LDIzNUEyMCwyMCwwLDAsMSwyMSwyMDkuNjZsMTAuODEtMzIuNDNBMTA4LDEwOCwwLDEsMSwyMzYsMTI4Wm0tMjQsMEE4NCw4NCwwLDEsMCw1NS4yNywxNzAuMDZhMTIsMTIsMCwwLDEsMSw5LjgxbC05LjkzLDI5Ljc5LDI5Ljc5LTkuOTNhMTIuMSwxMi4xLDAsMCwxLDMuOC0uNjIsMTIsMTIsMCwwLDEsNiwxLjYyQTg0LDg0LDAsMCwwLDIxMiwxMjhaIj48L3BhdGg+PC9zdmc+"); --icon-post-notification-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTI4QTk2LDk2LDAsMCwxLDc5LjkzLDIxMS4xMWgwTDQyLjU0LDIyMy41OGE4LDgsMCwwLDEtMTAuMTItMTAuMTJsMTIuNDctMzcuMzloMEE5Niw5NiwwLDEsMSwyMjQsMTI4WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTEyOCwyNEExMDQsMTA0LDAsMCwwLDM2LjE4LDE3Ni44OEwyNC44MywyMTAuOTNhMTYsMTYsMCwwLDAsMjAuMjQsMjAuMjRsMzQuMDUtMTEuMzVBMTA0LDEwNCwwLDEsMCwxMjgsMjRabTAsMTkyYTg3Ljg3LDg3Ljg3LDAsMCwxLTQ0LjA2LTExLjgxLDgsOCwwLDAsMC00LTEuMDgsNy44NSw3Ljg1LDAsMCwwLTIuNTMuNDJMNDAsMjE2LDUyLjQ3LDE3OC42YTgsOCwwLDAsMC0uNjYtNi41NEE4OCw4OCwwLDEsMSwxMjgsMjE2Wm0xMi04OGExMiwxMiwwLDEsMS0xMi0xMkExMiwxMiwwLDAsMSwxNDAsMTI4Wm0tNDQsMGExMiwxMiwwLDEsMS0xMi0xMkExMiwxMiwwLDAsMSw5NiwxMjhabTg4LDBhMTIsMTIsMCwxLDEtMTItMTJBMTIsMTIsMCwwLDEsMTg0LDEyOFoiPjwvcGF0aD48L3N2Zz4="); --icon-users: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMzYsMTA4QTUyLDUyLDAsMSwxLDg0LDU2LDUyLDUyLDAsMCwxLDEzNiwxMDhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTE3LjI1LDE1Ny45MmE2MCw2MCwwLDEsMC02Ni41LDBBOTUuODMsOTUuODMsMCwwLDAsMy41MywxOTUuNjNhOCw4LDAsMSwwLDEzLjQsOC43NCw4MCw4MCwwLDAsMSwxMzQuMTQsMCw4LDgsMCwwLDAsMTMuNC04Ljc0QTk1LjgzLDk1LjgzLDAsMCwwLDExNy4yNSwxNTcuOTJaTTQwLDEwOGE0NCw0NCwwLDEsMSw0NCw0NEE0NC4wNSw0NC4wNSwwLDAsMSw0MCwxMDhabTIxMC4xNCw5OC43YTgsOCwwLDAsMS0xMS4wNy0yLjMzQTc5LjgzLDc5LjgzLDAsMCwwLDE3MiwxNjhhOCw4LDAsMCwxLDAtMTYsNDQsNDQsMCwxLDAtMTYuMzQtODQuODcsOCw4LDAsMSwxLTUuOTQtMTQuODUsNjAsNjAsMCwwLDEsNTUuNTMsMTA1LjY0LDk1LjgzLDk1LjgzLDAsMCwxLDQ3LjIyLDM3LjcxQTgsOCwwLDAsMSwyNTAuMTQsMjA2LjdaIj48L3BhdGg+PC9zdmc+"); + --icon-users-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMzYsMTA4QTUyLDUyLDAsMSwxLDg0LDU2LDUyLDUyLDAsMCwxLDEzNiwxMDhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTE3LjI1LDE1Ny45MmE2MCw2MCwwLDEsMC02Ni41LDBBOTUuODMsOTUuODMsMCwwLDAsMy41MywxOTUuNjNhOCw4LDAsMSwwLDEzLjQsOC43NCw4MCw4MCwwLDAsMSwxMzQuMTQsMCw4LDgsMCwwLDAsMTMuNC04Ljc0QTk1LjgzLDk1LjgzLDAsMCwwLDExNy4yNSwxNTcuOTJaTTQwLDEwOGE0NCw0NCwwLDEsMSw0NCw0NEE0NC4wNSw0NC4wNSwwLDAsMSw0MCwxMDhabTIxMC4xNCw5OC43YTgsOCwwLDAsMS0xMS4wNy0yLjMzQTc5LjgzLDc5LjgzLDAsMCwwLDE3MiwxNjhhOCw4LDAsMCwxLDAtMTYsNDQsNDQsMCwxLDAtMTYuMzQtODQuODcsOCw4LDAsMSwxLTUuOTQtMTQuODUsNjAsNjAsMCwwLDEsNTUuNTMsMTA1LjY0LDk1LjgzLDk1LjgzLDAsMCwxLDQ3LjIyLDM3LjcxQTgsOCwwLDAsMSwyNTAuMTQsMjA2LjdaIj48L3BhdGg+PC9zdmc+"); --icon-user-plus: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNTYsMTM2YTEyLDEyLDAsMCwxLTEyLDEyaC04djhhMTIsMTIsMCwwLDEtMjQsMHYtOGgtOGExMiwxMiwwLDAsMSwwLTI0aDh2LThhMTIsMTIsMCwwLDEsMjQsMHY4aDhBMTIsMTIsMCwwLDEsMjU2LDEzNlptLTU0LjgxLDU2LjI4YTEyLDEyLDAsMSwxLTE4LjM4LDE1LjQ0QzE2OS4xMiwxOTEuNDIsMTQ1LDE3MiwxMDgsMTcyYy0yOC44OSwwLTU1LjQ2LDEyLjY4LTc0LjgxLDM1LjcyYTEyLDEyLDAsMCwxLTE4LjM4LTE1LjQ0QTEyNC4wOCwxMjQuMDgsMCwwLDEsNjMuNSwxNTYuNTNhNzIsNzIsMCwxLDEsODksMEExMjQsMTI0LDAsMCwxLDIwMS4xOSwxOTIuMjhaTTEwOCwxNDhhNDgsNDgsMCwxLDAtNDgtNDhBNDguMDUsNDguMDUsMCwwLDAsMTA4LDE0OFoiPjwvcGF0aD48L3N2Zz4="); --icon-user-plus-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHN0eWxlPSItLW5vaXItaW5saW5lLWZpbGw6ICNjOWM1YmU7IiBkYXRhLW5vaXItaW5saW5lLWZpbGw9IiI+PHBhdGggZD0iTTE2OCwxMDBhNjAsNjAsMCwxLDEtNjAtNjBBNjAsNjAsMCwwLDEsMTY4LDEwMFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0yNTYsMTM2YTgsOCwwLDAsMS04LDhIMjMydjE2YTgsOCwwLDAsMS0xNiwwVjE0NEgyMDBhOCw4LDAsMCwxLDAtMTZoMTZWMTEyYTgsOCwwLDAsMSwxNiwwdjE2aDE2QTgsOCwwLDAsMSwyNTYsMTM2Wm0tNTcuODcsNTguODVhOCw4LDAsMCwxLTEyLjI2LDEwLjNDMTY1Ljc1LDE4MS4xOSwxMzguMDksMTY4LDEwOCwxNjhzLTU3Ljc1LDEzLjE5LTc3Ljg3LDM3LjE1YTgsOCwwLDAsMS0xMi4yNS0xMC4zYzE0Ljk0LTE3Ljc4LDMzLjUyLTMwLjQxLDU0LjE3LTM3LjE3YTY4LDY4LDAsMSwxLDcxLjksMEMxNjQuNiwxNjQuNDQsMTgzLjE4LDE3Ny4wNywxOTguMTMsMTk0Ljg1Wk0xMDgsMTUyYTUyLDUyLDAsMSwwLTUyLTUyQTUyLjA2LDUyLjA2LDAsMCwwLDEwOCwxNTJaIj48L3BhdGg+PC9zdmc+"); --icon-user-plus-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHN0eWxlPSItLW5vaXItaW5saW5lLWZpbGw6ICM1ZjlhZmY7IiBkYXRhLW5vaXItaW5saW5lLWZpbGw9IiI+PHBhdGggZD0iTTE2OCwxMDBhNjAsNjAsMCwxLDEtNjAtNjBBNjAsNjAsMCwwLDEsMTY4LDEwMFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0yNTYsMTM2YTgsOCwwLDAsMS04LDhIMjMydjE2YTgsOCwwLDAsMS0xNiwwVjE0NEgyMDBhOCw4LDAsMCwxLDAtMTZoMTZWMTEyYTgsOCwwLDAsMSwxNiwwdjE2aDE2QTgsOCwwLDAsMSwyNTYsMTM2Wm0tNTcuODcsNTguODVhOCw4LDAsMCwxLTEyLjI2LDEwLjNDMTY1Ljc1LDE4MS4xOSwxMzguMDksMTY4LDEwOCwxNjhzLTU3Ljc1LDEzLjE5LTc3Ljg3LDM3LjE1YTgsOCwwLDAsMS0xMi4yNS0xMC4zYzE0Ljk0LTE3Ljc4LDMzLjUyLTMwLjQxLDU0LjE3LTM3LjE3YTY4LDY4LDAsMSwxLDcxLjksMEMxNjQuNiwxNjQuNDQsMTgzLjE4LDE3Ny4wNywxOTguMTMsMTk0Ljg1Wk0xMDgsMTUyYTUyLDUyLDAsMSwwLTUyLTUyQTUyLjA2LDUyLjA2LDAsMCwwLDEwOCwxNTJaIj48L3BhdGg+PC9zdmc+"); @@ -114,6 +115,7 @@ --icon-list: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-list-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-settings: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMSwxMDguNzYsMTk4LjI1LDkwLjYyYy0uNjQtMS4xNi0xLjMxLTIuMjktMi0zLjQxbC0uMTItMzZBMTA0LjYxLDEwNC42MSwwLDAsMCwxNjIsMzJMMTMwLDQ5Ljg5Yy0xLjM0LDAtMi42OSwwLTQsMEw5NCwzMkExMDQuNTgsMTA0LjU4LDAsMCwwLDU5Ljg5LDUxLjI1bC0uMTYsMzZjLS43LDEuMTItMS4zNywyLjI2LTIsMy40MWwtMzEuODQsMTguMWE5OS4xNSw5OS4xNSwwLDAsMCwwLDM4LjQ2bDMxLjg1LDE4LjE0Yy42NCwxLjE2LDEuMzEsMi4yOSwyLDMuNDFsLjEyLDM2QTEwNC42MSwxMDQuNjEsMCwwLDAsOTQsMjI0bDMyLTE3Ljg3YzEuMzQsMCwyLjY5LDAsNCwwTDE2MiwyMjRhMTA0LjU4LDEwNC41OCwwLDAsMCwzNC4wOC0xOS4yNWwuMTYtMzZjLjctMS4xMiwxLjM3LTIuMjYsMi0zLjQxbDMxLjg0LTE4LjFBOTkuMTUsOTkuMTUsMCwwLDAsMjMwLjEsMTA4Ljc2Wk0xMjgsMTY4YTQwLDQwLDAsMSwxLDQwLTQwQTQwLDQwLDAsMCwxLDEyOCwxNjhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDgwYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWm0xMDkuOTQtNTIuNzlhOCw4LDAsMCwwLTMuODktNS40bC0yOS44My0xNy0uMTItMzMuNjJhOCw4LDAsMCwwLTIuODMtNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLTM2LjcyLTIwLjY3LDgsOCwwLDAsMC02LjQ2LjU5TDEyOCw0MS44NSw5Ny44OCwyNWE4LDgsMCwwLDAtNi40Ny0uNkExMTEuOTIsMTExLjkyLDAsMCwwLDU0LjczLDQ1LjE1YTgsOCwwLDAsMC0yLjgzLDYuMDdsLS4xNSwzMy42NS0yOS44MywxN2E4LDgsMCwwLDAtMy44OSw1LjQsMTA2LjQ3LDEwNi40NywwLDAsMCwwLDQxLjU2LDgsOCwwLDAsMCwzLjg5LDUuNGwyOS44MywxNywuMTIsMzMuNjNhOCw4LDAsMCwwLDIuODMsNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLDM2LjcyLDIwLjY3LDgsOCwwLDAsMCw2LjQ2LS41OUwxMjgsMjE0LjE1LDE1OC4xMiwyMzFhNy45MSw3LjkxLDAsMCwwLDMuOSwxLDguMDksOC4wOSwwLDAsMCwyLjU3LS40MiwxMTIuMSwxMTIuMSwwLDAsMCwzNi42OC0yMC43Myw4LDgsMCwwLDAsMi44My02LjA3bC4xNS0zMy42NSwyOS44My0xN2E4LDgsMCwwLDAsMy44OS01LjRBMTA2LjQ3LDEwNi40NywwLDAsMCwyMzcuOTQsMTA3LjIxWm0tMTUsMzQuOTEtMjguNTcsMTYuMjVhOCw4LDAsMCwwLTMsM2MtLjU4LDEtMS4xOSwyLjA2LTEuODEsMy4wNmE3Ljk0LDcuOTQsMCwwLDAtMS4yMiw0LjIxbC0uMTUsMzIuMjVhOTUuODksOTUuODksMCwwLDEtMjUuMzcsMTQuM0wxMzQsMTk5LjEzYTgsOCwwLDAsMC0zLjkxLTFoLS4xOWMtMS4yMSwwLTIuNDMsMC0zLjY0LDBhOC4xLDguMSwwLDAsMC00LjEsMWwtMjguODQsMTYuMUE5Niw5NiwwLDAsMSw2Ny44OCwyMDFsLS4xMS0zMi4yYTgsOCwwLDAsMC0xLjIyLTQuMjJjLS42Mi0xLTEuMjMtMi0xLjgtMy4wNmE4LjA5LDguMDksMCwwLDAtMy0zLjA2bC0yOC42LTE2LjI5YTkwLjQ5LDkwLjQ5LDAsMCwxLDAtMjguMjZMNjEuNjcsOTcuNjNhOCw4LDAsMCwwLDMtM2MuNTgtMSwxLjE5LTIuMDYsMS44MS0zLjA2YTcuOTQsNy45NCwwLDAsMCwxLjIyLTQuMjFsLjE1LTMyLjI1YTk1Ljg5LDk1Ljg5LDAsMCwxLDI1LjM3LTE0LjNMMTIyLDU2Ljg3YTgsOCwwLDAsMCw0LjEsMWMxLjIxLDAsMi40MywwLDMuNjQsMGE4LDgsMCwwLDAsNC4xLTFsMjguODQtMTYuMUE5Niw5NiwwLDAsMSwxODguMTIsNTVsLjExLDMyLjJhOCw4LDAsMCwwLDEuMjIsNC4yMmMuNjIsMSwxLjIzLDIsMS44LDMuMDZhOC4wOSw4LjA5LDAsMCwwLDMsMy4wNmwyOC42LDE2LjI5QTkwLjQ5LDkwLjQ5LDAsMCwxLDIyMi45LDE0Mi4xMloiPjwvcGF0aD48L3N2Zz4="); + --icon-logout: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsMTI4bC00MCw0MFY4OFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0xMTIsMjE2YTgsOCwwLDAsMS04LDhINDhhMTYsMTYsMCwwLDEtMTYtMTZWNDhBMTYsMTYsMCwwLDEsNDgsMzJoNTZhOCw4LDAsMCwxLDAsMTZINDhWMjA4aDU2QTgsOCwwLDAsMSwxMTIsMjE2Wm0xMDkuNjYtODIuMzQtNDAsNDBBOCw4LDAsMCwxLDE2OCwxNjhWMTM2SDEwNGE4LDgsMCwwLDEsMC0xNmg2NFY4OGE4LDgsMCwwLDEsMTMuNjYtNS42Nmw0MCw0MEE4LDgsMCwwLDEsMjIxLjY2LDEzMy42NlptLTE3LTUuNjZMMTg0LDEwNy4zMXY0MS4zOFoiPjwvcGF0aD48L3N2Zz4="); /* Post visibility icons */ --icon-globe-visibility: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNDguNTksNTguNjdjLTYuMzEtMTAuODctMjMtMjEuMDYtNjYuMTYtOS43MUE5NS45NCw5NS45NCwwLDAsMCwzMiwxMjhxMCwzLjYuMjYsNy4xNEMuNTYsMTY2Ljg2LDEuMSwxODYuNCw3LjQ0LDE5Ny4zMywxMy40LDIwNy42MSwyNS4zLDIxMiw0MC42OCwyMTJjOS43OSwwLDIxLTEuNzgsMzIuOTUtNC45MUE5NS45NCw5NS45NCwwLDAsMCwyMjQsMTI4YzAtMi40MS0uMDktNC43OS0uMjctNy4xNiwxNC4zMS0xNC4zOCwyMy44Ni0yOC4yMSwyNy00MEMyNTMuNTUsNzAuNDIsMjUxLjEyLDYzLDI0OC41OSw1OC42N1pNMTI4LDU2YTcyLjExLDcyLjExLDAsMCwxLDcwLjE5LDU2QzE4NCwxMjQuNzMsMTY1LDEzOC41OSwxNDEuOTIsMTUxLjg2Yy0yMS43NCwxMi40OS00My41NSwyMi4zNi02My4wOSwyOC42NUE3Miw3MiwwLDAsMSwxMjgsNTZaTTI4LjE5LDE4NS4yOWMtLjYxLTEuMDctLjE3LTguMjIsMTAuNjctMjEuNzFBOTUuNzcsOTUuNzcsMCwwLDAsNTIuMzUsMTg3QzM1LjEyLDE4OS42MSwyOC44NSwxODYuNDEsMjguMTksMTg1LjI5Wk0xMjgsMjAwYTcxLjY2LDcxLjY2LDAsMCwxLTIyLjU2LTMuNjQsMzk0LjEsMzk0LjEsMCwwLDAsNDguNDItMjMuNjlBMzg4LjExLDM4OC4xMSwwLDAsMCwxOTguNDMsMTQzLDcyLjEyLDcyLjEyLDAsMCwxLDEyOCwyMDBaTTIyNy41Nyw3NC42NWMtMS4yOCw0Ljc4LTQuODEsMTAuODctMTAuMzksMTcuOEE5NS43NCw5NS43NCwwLDAsMCwyMDMuNjgsNjljMTUuODMtMi4zNywyMy4xNywwLDI0LjE1LDEuNzFDMjI4LDcxLDIyOC4yMSw3Mi4yOCwyMjcuNTcsNzQuNjVaIj48L3BhdGg+PC9zdmc+"); @@ -196,6 +198,7 @@ --icon-list: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzdhN2FmOSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-list-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-settings: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzdhN2FmOSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMSwxMDguNzYsMTk4LjI1LDkwLjYyYy0uNjQtMS4xNi0xLjMxLTIuMjktMi0zLjQxbC0uMTItMzZBMTA0LjYxLDEwNC42MSwwLDAsMCwxNjIsMzJMMTMwLDQ5Ljg5Yy0xLjM0LDAtMi42OSwwLTQsMEw5NCwzMkExMDQuNTgsMTA0LjU4LDAsMCwwLDU5Ljg5LDUxLjI1bC0uMTYsMzZjLS43LDEuMTItMS4zNywyLjI2LTIsMy40MWwtMzEuODQsMTguMWE5OS4xNSw5OS4xNSwwLDAsMCwwLDM4LjQ2bDMxLjg1LDE4LjE0Yy42NCwxLjE2LDEuMzEsMi4yOSwyLDMuNDFsLjEyLDM2QTEwNC42MSwxMDQuNjEsMCwwLDAsOTQsMjI0bDMyLTE3Ljg3YzEuMzQsMCwyLjY5LDAsNCwwTDE2MiwyMjRhMTA0LjU4LDEwNC41OCwwLDAsMCwzNC4wOC0xOS4yNWwuMTYtMzZjLjctMS4xMiwxLjM3LTIuMjYsMi0zLjQxbDMxLjg0LTE4LjFBOTkuMTUsOTkuMTUsMCwwLDAsMjMwLjEsMTA4Ljc2Wk0xMjgsMTY4YTQwLDQwLDAsMSwxLDQwLTQwQTQwLDQwLDAsMCwxLDEyOCwxNjhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDgwYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWm0xMDkuOTQtNTIuNzlhOCw4LDAsMCwwLTMuODktNS40bC0yOS44My0xNy0uMTItMzMuNjJhOCw4LDAsMCwwLTIuODMtNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLTM2LjcyLTIwLjY3LDgsOCwwLDAsMC02LjQ2LjU5TDEyOCw0MS44NSw5Ny44OCwyNWE4LDgsMCwwLDAtNi40Ny0uNkExMTEuOTIsMTExLjkyLDAsMCwwLDU0LjczLDQ1LjE1YTgsOCwwLDAsMC0yLjgzLDYuMDdsLS4xNSwzMy42NS0yOS44MywxN2E4LDgsMCwwLDAtMy44OSw1LjQsMTA2LjQ3LDEwNi40NywwLDAsMCwwLDQxLjU2LDgsOCwwLDAsMCwzLjg5LDUuNGwyOS44MywxNywuMTIsMzMuNjNhOCw4LDAsMCwwLDIuODMsNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLDM2LjcyLDIwLjY3LDgsOCwwLDAsMCw2LjQ2LS41OUwxMjgsMjE0LjE1LDE1OC4xMiwyMzFhNy45MSw3LjkxLDAsMCwwLDMuOSwxLDguMDksOC4wOSwwLDAsMCwyLjU3LS40MiwxMTIuMSwxMTIuMSwwLDAsMCwzNi42OC0yMC43Myw4LDgsMCwwLDAsMi44My02LjA3bC4xNS0zMy42NSwyOS44My0xN2E4LDgsMCwwLDAsMy44OS01LjRBMTA2LjQ3LDEwNi40NywwLDAsMCwyMzcuOTQsMTA3LjIxWm0tMTUsMzQuOTEtMjguNTcsMTYuMjVhOCw4LDAsMCwwLTMsM2MtLjU4LDEtMS4xOSwyLjA2LTEuODEsMy4wNmE3Ljk0LDcuOTQsMCwwLDAtMS4yMiw0LjIxbC0uMTUsMzIuMjVhOTUuODksOTUuODksMCwwLDEtMjUuMzcsMTQuM0wxMzQsMTk5LjEzYTgsOCwwLDAsMC0zLjkxLTFoLS4xOWMtMS4yMSwwLTIuNDMsMC0zLjY0LDBhOC4xLDguMSwwLDAsMC00LjEsMWwtMjguODQsMTYuMUE5Niw5NiwwLDAsMSw2Ny44OCwyMDFsLS4xMS0zMi4yYTgsOCwwLDAsMC0xLjIyLTQuMjJjLS42Mi0xLTEuMjMtMi0xLjgtMy4wNmE4LjA5LDguMDksMCwwLDAtMy0zLjA2bC0yOC42LTE2LjI5YTkwLjQ5LDkwLjQ5LDAsMCwxLDAtMjguMjZMNjEuNjcsOTcuNjNhOCw4LDAsMCwwLDMtM2MuNTgtMSwxLjE5LTIuMDYsMS44MS0zLjA2YTcuOTQsNy45NCwwLDAsMCwxLjIyLTQuMjFsLjE1LTMyLjI1YTk1Ljg5LDk1Ljg5LDAsMCwxLDI1LjM3LTE0LjNMMTIyLDU2Ljg3YTgsOCwwLDAsMCw0LjEsMWMxLjIxLDAsMi40MywwLDMuNjQsMGE4LDgsMCwwLDAsNC4xLTFsMjguODQtMTYuMUE5Niw5NiwwLDAsMSwxODguMTIsNTVsLjExLDMyLjJhOCw4LDAsMCwwLDEuMjIsNC4yMmMuNjIsMSwxLjIzLDIsMS44LDMuMDZhOC4wOSw4LjA5LDAsMCwwLDMsMy4wNmwyOC42LDE2LjI5QTkwLjQ5LDkwLjQ5LDAsMCwxLDIyMi45LDE0Mi4xMloiPjwvcGF0aD48L3N2Zz4="); + --icon-logout: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsMTI4bC00MCw0MFY4OFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0xMTIsMjE2YTgsOCwwLDAsMS04LDhINDhhMTYsMTYsMCwwLDEtMTYtMTZWNDhBMTYsMTYsMCwwLDEsNDgsMzJoNTZhOCw4LDAsMCwxLDAsMTZINDhWMjA4aDU2QTgsOCwwLDAsMSwxMTIsMjE2Wm0xMDkuNjYtODIuMzQtNDAsNDBBOCw4LDAsMCwxLDE2OCwxNjhWMTM2SDEwNGE4LDgsMCwwLDEsMC0xNmg2NFY4OGE4LDgsMCwwLDEsMTMuNjYtNS42Nmw0MCw0MEE4LDgsMCwwLDEsMjIxLjY2LDEzMy42NlptLTE3LTUuNjZMMTg0LDEwNy4zMXY0MS4zOFoiPjwvcGF0aD48L3N2Zz4="); /* Post visibility icons */ --icon-globe-visibility: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNDguNTksNTguNjdjLTYuMzEtMTAuODctMjMtMjEuMDYtNjYuMTYtOS43MUE5NS45NCw5NS45NCwwLDAsMCwzMiwxMjhxMCwzLjYuMjYsNy4xNEMuNTYsMTY2Ljg2LDEuMSwxODYuNCw3LjQ0LDE5Ny4zMywxMy40LDIwNy42MSwyNS4zLDIxMiw0MC42OCwyMTJjOS43OSwwLDIxLTEuNzgsMzIuOTUtNC45MUE5NS45NCw5NS45NCwwLDAsMCwyMjQsMTI4YzAtMi40MS0uMDktNC43OS0uMjctNy4xNiwxNC4zMS0xNC4zOCwyMy44Ni0yOC4yMSwyNy00MEMyNTMuNTUsNzAuNDIsMjUxLjEyLDYzLDI0OC41OSw1OC42N1pNMTI4LDU2YTcyLjExLDcyLjExLDAsMCwxLDcwLjE5LDU2QzE4NCwxMjQuNzMsMTY1LDEzOC41OSwxNDEuOTIsMTUxLjg2Yy0yMS43NCwxMi40OS00My41NSwyMi4zNi02My4wOSwyOC42NUE3Miw3MiwwLDAsMSwxMjgsNTZaTTI4LjE5LDE4NS4yOWMtLjYxLTEuMDctLjE3LTguMjIsMTAuNjctMjEuNzFBOTUuNzcsOTUuNzcsMCwwLDAsNTIuMzUsMTg3QzM1LjEyLDE4OS42MSwyOC44NSwxODYuNDEsMjguMTksMTg1LjI5Wk0xMjgsMjAwYTcxLjY2LDcxLjY2LDAsMCwxLTIyLjU2LTMuNjQsMzk0LjEsMzk0LjEsMCwwLDAsNDguNDItMjMuNjlBMzg4LjExLDM4OC4xMSwwLDAsMCwxOTguNDMsMTQzLDcyLjEyLDcyLjEyLDAsMCwxLDEyOCwyMDBaTTIyNy41Nyw3NC42NWMtMS4yOCw0Ljc4LTQuODEsMTAuODctMTAuMzksMTcuOEE5NS43NCw5NS43NCwwLDAsMCwyMDMuNjgsNjljMTUuODMtMi4zNywyMy4xNywwLDI0LjE1LDEuNzFDMjI4LDcxLDIyOC4yMSw3Mi4yOCwyMjcuNTcsNzQuNjVaIj48L3BhdGg+PC9zdmc+"); @@ -225,88 +228,88 @@ } } -body.layout-single-column { +body.app-body { background-color: var(--color-bg); color: var(--color-fg); font-family: ui-rounded, "mastodon-font-sans-serif", sans-serif; } /* πŸ–±οΈ Scrollbars */ -:root:has(.layout-single-column) *::-webkit-scrollbar-track { +:root:has(.app-body) *::-webkit-scrollbar-track { background-color: var(--color-bg); padding: 2px; } -:root:has(.layout-single-column) *::-webkit-scrollbar-thumb { +:root:has(.app-body) *::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 50px; opacity: .4; } -:root:has(.layout-single-column) *::-webkit-scrollbar-track:hover { +:root:has(.app-body) *::-webkit-scrollbar-track:hover { background-color: var(--color-bg); } -:root:has(.layout-single-column) *::-webkit-scrollbar-thumb:hover { +:root:has(.app-body) *::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent); opacity: .7; } @media screen and (max-width:1174px) { - :root:has(.layout-single-column) *::-webkit-scrollbar { + :root:has(.app-body) *::-webkit-scrollbar { display: none; } } -.layout-single-column .loading-bar { +.app-body .loading-bar { background-color: var(--color-accent); } -.layout-single-column .getting-started, -.layout-single-column .regeneration-indicator, -.layout-single-column .audio-player, -.layout-single-column .compose-form .spoiler-input__input, -.layout-single-column .compose-form__autosuggest-wrapper, -.layout-single-column .compose-form__poll-wrapper select, -.layout-single-column .poll__option input[type=text], -.layout-single-column .report-dialog-modal__textarea, -.layout-single-column .search__input, -.layout-single-column .setting-text, -.layout-single-column .compose-form .compose-form__buttons-wrapper, -.layout-single-column .about__section__body { +.app-body .getting-started, +.app-body .regeneration-indicator, +.app-body .audio-player, +.app-body .compose-form .spoiler-input__input, +.app-body .compose-form__autosuggest-wrapper, +.app-body .compose-form__poll-wrapper select, +.app-body .poll__option input[type=text], +.app-body .report-dialog-modal__textarea, +.app-body .search__input, +.app-body .setting-text, +.app-body .compose-form .compose-form__buttons-wrapper, +.app-body .about__section__body { border: 0; } -.layout-single-column .column-inline-form, -.layout-single-column .column>.scrollable, -.layout-single-column .getting-started, -.layout-single-column .regeneration-indicator { +.app-body .column-inline-form, +.app-body .column>.scrollable, +.app-body .getting-started, +.app-body .regeneration-indicator { background: transparent; } -.layout-single-column .account__avatar img { +.app-body .account__avatar img { border-radius: 50%; } /* Rordered layout */ -.layout-single-column .columns-area__panels__pane--navigational { +.app-body .columns-area__panels__pane--navigational { order: 1; } -.layout-single-column .columns-area__panels__main { +.app-body .columns-area__panels__main { order: 2; } -.layout-single-column .columns-area__panels__pane--compositional { +.app-body .columns-area__panels__pane--compositional { order: 3; } -.layout-single-column .columns-area--mobile .column { +.app-body .columns-area--mobile .column { flex: unset; height: auto; } -.layout-single-column .columns-area--mobile .column:focus-within { +.app-body .columns-area--mobile .column:focus-within { overflow: visible; } -.layout-single-column .scrollable, -.layout-single-column .column > .scrollable { +.app-body .scrollable, +.app-body .column > .scrollable { max-height: max-content; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .dismissable-banner + .scrollable { +.app-body .dismissable-banner + .scrollable { border-top-left-radius: 0; border-top-right-radius: 0; } @@ -314,7 +317,7 @@ body.layout-single-column { /* *️⃣ Icons -------- */ -.layout-single-column +.app-body :is( .icon-bookmark, .icon-star, @@ -332,7 +335,8 @@ body.layout-single-column { .icon-bookmarks, .icon-list-ul, .column-link .icon-cog, - .compose__action-bar-dropdown .icon-bars, + .drawer__tab .icon-cog, + .icon-bars, .compose__action-bar-dropdown .icon-close, .icon-user-plus, .icon-user, @@ -354,13 +358,14 @@ body.layout-single-column { .icon-check, .status__action-bar .icon-close, .detailed-status__action-bar .icon-close, - .account__header__tabs__buttons .icon-close + .account__header__tabs__buttons .icon-close, + .icon-sign-out ) path { display: none; } -.layout-single-column +.app-body :is( .icon-bookmark, .icon-star, @@ -378,7 +383,8 @@ body.layout-single-column { .icon-bookmarks, .icon-list-ul, .column-link .icon-cog, - .compose__action-bar-dropdown .icon-bars, + .drawer__tab .icon-cog, + .icon-bars, .compose__action-bar-dropdown .icon-close, .icon-user-plus, .icon-user, @@ -400,7 +406,8 @@ body.layout-single-column { .icon-check, .status__action-bar .icon-close, .detailed-status__action-bar .icon-close, - .account__header__tabs__buttons .icon-close + .account__header__tabs__buttons .icon-close, + .icon-sign-out ) { background-repeat: no-repeat; background-size: 100%; @@ -408,44 +415,44 @@ body.layout-single-column { } /* Bookmark */ -.layout-single-column .icon-bookmark { +.app-body .icon-bookmark { background-image: var(--icon-bookmark-accent); } -.layout-single-column .detailed-status__button .icon-bookmark { +.app-body .detailed-status__button .icon-bookmark { background-image: var(--icon-bookmark-accent); } -.layout-single-column .icon-button.active .icon-bookmark { +.app-body .icon-button.active .icon-bookmark { background-image: var(--icon-bookmark-active); } /* Favorite */ -.layout-single-column .icon-star { +.app-body .icon-star { background-image: var(--icon-star-accent); } -.layout-single-column button.icon-button.active .icon-star, -.layout-single-column .notification .icon-star { +.app-body button.icon-button.active .icon-star, +.app-body .notification .icon-star { background-image: var(--icon-star-active); } -.layout-single-column .detailed-status__link .icon-star { +.app-body .detailed-status__link .icon-star { background-image: var(--icon-star); margin: 0 4px -2px 0; } /* Boost */ -.layout-single-column .icon-retweet { +.app-body .icon-retweet { background-image: var(--icon-boost-accent); } -.layout-single-column button.icon-button.active .icon-retweet, -.layout-single-column .detailed-status__button button.icon-button.active:hover .icon-retweet { +.app-body button.icon-button.active .icon-retweet, +.app-body .detailed-status__button button.icon-button.active:hover .icon-retweet { background-image: var(--icon-boost-active); } -.layout-single-column .status__prepend-icon.icon-retweet, -.layout-single-column .notification .icon-retweet { +.app-body .status__prepend-icon.icon-retweet, +.app-body .notification .icon-retweet { background-image: var(--icon-boost-active); } -.layout-single-column .detailed-status__link .icon-retweet { +.app-body .detailed-status__link .icon-retweet { background-image: var(--icon-boost); margin: 0 4px -2px 0; } -.layout-single-column +.app-body button.icon-button:is( .reblogPrivate, .reblogPrivate:hover, @@ -457,208 +464,214 @@ body.layout-single-column { opacity: .2; pointer-events: none; } -.layout-single-column .boost-modal__action-bar .icon-retweet { +.app-body .boost-modal__action-bar .icon-retweet { background-image: var(--icon-boost-accent); vertical-align: middle; } /* Reply */ -.layout-single-column .icon-reply, -.layout-single-column .icon-reply-all { +.app-body .icon-reply, +.app-body .icon-reply-all { background-image: var(--icon-reply-accent); } -.layout-single-column .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) { +.app-body .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) { background-image: var(--icon-reply-accent); } /* Ellipsis */ -.layout-single-column :is(.icon-ellipsis-h, .icon-ellipsis-v) { +.app-body :is(.icon-ellipsis-h, .icon-ellipsis-v) { background-image: var(--icon-ellipsis-accent); } -.layout-single-column .detailed-status__action-bar .icon-ellipsis-h { +.app-body .detailed-status__action-bar .icon-ellipsis-h { background-image: var(--icon-ellipsis-accent); } -.layout-single-column :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close { +.app-body :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close { background-image: var(--icon-ellipsis-active); } /* Poll icon */ -.layout-single-column .icon-tasks { +.app-body .icon-tasks { background-image: var(--icon-poll); } -.layout-single-column .notification__message .icon-tasks { +.app-body .notification__message .icon-tasks { background-image: var(--icon-poll-accent); } /* Post icon */ -.layout-single-column .icon-quote-right { +.app-body .icon-quote-right { background-image: var(--icon-post); } /* Navigation panel icons */ -.layout-single-column .column-link__icon { +.app-body .column-link__icon { transform: scale(1.3); margin-right: 7px; margin-left: 2px; } /* Home icon */ -.layout-single-column .icon-home { +.app-body .icon-home { background-image: var(--icon-home); } -.layout-single-column :is(.column-link.active .icon-home, .column-header__icon.icon-home) { +.app-body :is(.column-link.active .icon-home, .column-header__icon.icon-home) { background-image: var(--icon-home-active); } -.layout-single-column .notification__message .icon-home { +.app-body .notification__message .icon-home { background-image: var(--icon-post-notification-accent); } /* Globe icon */ -.layout-single-column .column-link .icon-globe, -.layout-single-column .column-header__icon.icon-globe { +.app-body .column-link .icon-globe, +.app-body .column-header__icon.icon-globe { background-image: var(--icon-globe); } -.layout-single-column .column-link.active .icon-globe, -.layout-single-column .column-header__icon.icon-globe { +.app-body .column-link.active .icon-globe, +.app-body .column-header__icon.icon-globe { background-image: var(--icon-globe-active); } /* Explore + Hashtag icon */ -.layout-single-column .icon-hashtag { +.app-body .icon-hashtag { background-image: var(--icon-hashtag-active); } -.layout-single-column .column-link .icon-hashtag { +.app-body .column-link .icon-hashtag { background-image: var(--icon-hashtag); } -.layout-single-column .column-link.active .icon-hashtag { +.app-body .column-link.active .icon-hashtag { background-image: var(--icon-hashtag-active); } /* Search icon */ -.layout-single-column .icon-search { +.app-body .icon-search { background-image: var(--icon-search); } -.layout-single-column .ui__header__links .icon-search { +.app-body .ui__header__links .icon-search, +.app-body .search__icon .icon-search { background-image: var(--icon-search-active); } -.layout-single-column .column-link .icon-search { +.app-body .column-link .icon-search { background-image: var(--icon-search-column-link); } -.layout-single-column .column-link.active .icon-search { +.app-body .column-link.active .icon-search { background-image: var(--icon-search-column-link-active); } -.layout-single-column .column-header__icon.icon-search { +.app-body .column-header__icon.icon-search { background-image: var(--icon-search-column-link-active); } -.layout-single-column .icon-times-circle { +.app-body .icon-times-circle { background-image: var(--icon-close); } /* Notifications icon */ -.layout-single-column .column-link .icon-bell { +.app-body .column-link .icon-bell { background-image: var(--icon-bell); } -.layout-single-column .column-link.active .icon-bell, -.layout-single-column .column-header__icon.icon-bell { +.app-body .column-link.active .icon-bell, +.app-body .column-header__icon.icon-bell { background-image: var(--icon-bell-active); } /* Direct messages icon */ -.layout-single-column .column-link .icon-at { +.app-body .column-link .icon-at { background-image: var(--icon-direct-messages); } -.layout-single-column .column-link.active .icon-at { +.app-body .column-link.active .icon-at, +.app-body .column-header__icon.icon-at { background-image: var(--icon-direct-messages-active); } /* Bookmarks icon */ -.layout-single-column .icon-bookmarks { +.app-body .icon-bookmarks { background-image: var(--icon-bookmark-column-link); } -.layout-single-column .column-link.active .icon-bookmarks, -.layout-single-column .column-header__icon.icon-bookmarks { +.app-body .column-link.active .icon-bookmarks, +.app-body .column-header__icon.icon-bookmarks { background-image: var(--icon-bookmark-column-link-active); } /* Favorites icon */ -.layout-single-column .column-link .icon-star { +.app-body .column-link .icon-star { background-image: var(--icon-star-column-link); } -.layout-single-column .column-link.active .icon-star, -.layout-single-column .column-header__icon.icon-star { +.app-body .column-link.active .icon-star, +.app-body .column-header__icon.icon-star { background-image: var(--icon-star-column-link-active); } /* Lists icon */ -.layout-single-column .icon-list-ul { +.app-body .icon-list-ul { background-image: var(--icon-list); } -.layout-single-column .column-link.active .icon-list-ul { +.app-body .column-link.active .icon-list-ul, +.app-body .column-header__icon.icon-list-ul { background-image: var(--icon-list-active); } /* Settings icon */ -.layout-single-column .column-link .icon-cog { +.app-body .column-link .icon-cog { background-image: var(--icon-settings); } /* Profile settings */ -.layout-single-column .compose__action-bar-dropdown .icon-bars { +.app-body .compose__action-bar-dropdown .icon-bars { background-image: var(--icon-gear); } -.layout-single-column .compose__action-bar-dropdown .active .icon-close { +.app-body .compose__action-bar-dropdown .active .icon-close { background-image: var(--icon-gear-active); } /* Follow user icon */ -.layout-single-column .icon-user-plus, -.layout-single-column .icon-user { +.app-body .icon-user-plus, +.app-body .icon-user { background-image: var(--icon-user-plus-accent); } -.layout-single-column .active .icon-user-plus { +.app-body .active .icon-user-plus { background-image: var(--icon-user-plus); } -.layout-single-column .column-link.active .icon-user-plus, -.layout-single-column .column-header__icon.icon-user-plus { +.app-body .column-link.active .icon-user-plus, +.app-body .column-header__icon.icon-user-plus { background-image: var(--icon-user-plus-active); } /* Users icon */ -.layout-single-column .icon-users { +.app-body .icon-users { background-image: var(--icon-users); } +.app-body .column-link .icon-users { + background-image: var(--icon-users-accent); +} /* Announcement icon */ -.layout-single-column .icon-bullhorn { +.app-body .icon-bullhorn { background-image: var(--icon-megaphone); } /* Column settings icon */ -.layout-single-column .icon-sliders { +.app-body .icon-sliders { background-image: var(--icon-sliders); } /* Post visibility icons */ -.layout-single-column .icon-globe { +.app-body .icon-globe { background-image: var(--icon-globe-visibility); } -.layout-single-column .icon-unlock { +.app-body .icon-unlock { background-image: var(--icon-unlock); } -.layout-single-column .icon-lock { +.app-body .icon-lock { background-image: var(--icon-lock); } -.layout-single-column .icon-at { +.app-body .icon-at { background-image: var(--icon-at); } /* Other icons */ -.layout-single-column .icon-paperclip { +.app-body .icon-paperclip { background-image: var(--icon-paperclip); } -.layout-single-column .icon-check { +.app-body .icon-check { background-image: var(--icon-verified); } -.layout-single-column .follow-request-banner .button:is(:active, :focus, :hover) .icon-check { +.app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } -.layout-single-column .account__relationship .icon-check, -.layout-single-column .follow-request-banner .button .icon-check { +.app-body .account__relationship .icon-check, +.app-body .follow-request-banner .button .icon-check { background-image: var(--icon-check); } -.layout-single-column .icon-bell { +.app-body .icon-bell { background-image: var(--icon-bell-ringing); } -.layout-single-column .icon-bell-o { +.app-body .icon-bell-o { background-image: var(--icon-bell-still); } -.layout-single-column .icon-thumb-tack { +.app-body .icon-thumb-tack { background-image: var(--icon-pin); } -.layout-single-column .icon-file-text { +.app-body .icon-file-text { background-image: var(--icon-link); } -.layout-single-column +.app-body :is( .account--panel, .follow-request-banner, @@ -667,83 +680,83 @@ body.layout-single-column { .icon-times { background-image: var(--icon-reject); } -.layout-single-column .account--panel .icon-times, -.layout-single-column .follow-request-banner .button:is(:active, :focus, :hover) .icon-times { +.app-body .account--panel .icon-times, +.app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } -.layout-single-column .account__relationship .icon-times, -.layout-single-column .follow-request-banner .button .icon-times { +.app-body .account__relationship .icon-times, +.app-body .follow-request-banner .button .icon-times { background-image: var(--icon-reject); } @media screen and (max-width:1174px) { - .layout-single-column .column-link .icon-home { + .app-body .column-link .icon-home { background-image: var(--icon-home-active); } - .layout-single-column .column-link.active .icon-home { + .app-body .column-link.active .icon-home { background-image: var(--icon-home); } - .layout-single-column .column-link .icon-bell { + .app-body .column-link .icon-bell { background-image: var(--icon-bell-active); } - .layout-single-column .column-link.active .icon-bell { + .app-body .column-link.active .icon-bell { background-image: var(--icon-bell); } - .layout-single-column .column-link .icon-hashtag { + .app-body .column-link .icon-hashtag { background-image: var(--icon-hashtag-active); } - .layout-single-column .column-link.active .icon-hashtag { + .app-body .column-link.active .icon-hashtag { background-image: var(--icon-hashtag); } - .layout-single-column .column-link .icon-search { + .app-body .column-link .icon-search { background-image: var(--icon-search-column-link-active); } - .layout-single-column .column-link.active .icon-search { + .app-body .column-link.active .icon-search { background-image: var(--icon-search-column-link); } - .layout-single-column .column-link .icon-globe { + .app-body .column-link .icon-globe { background-image: var(--icon-globe-active); } - .layout-single-column .column-link.active .icon-globe { + .app-body .column-link.active .icon-globe { background-image: var(--icon-globe); } - .layout-single-column .column-link .icon-at { + .app-body .column-link .icon-at { background-image: var(--icon-direct-messages-active); } - .layout-single-column .column-link.active .icon-at { + .app-body .column-link.active .icon-at { background-image: var(--icon-direct-messages); } - .layout-single-column .column-link .icon-bookmarks { + .app-body .column-link .icon-bookmarks { background-image: var(--icon-bookmark-column-link-active); } - .layout-single-column .column-link.active .icon-bookmarks { + .app-body .column-link.active .icon-bookmarks { background-image: var(--icon-bookmark-column-link); } - .layout-single-column .column-link .icon-star { + .app-body .column-link .icon-star { background-image: var(--icon-star-column-link-active); } - .layout-single-column .column-link.active .icon-star { + .app-body .column-link.active .icon-star { background-image: var(--icon-star-column-link); } - .layout-single-column .column-link .icon-list-ul { + .app-body .column-link .icon-list-ul { background-image: var(--icon-list-active); } - .layout-single-column .column-link.active .icon-list-ul { + .app-body .column-link.active .icon-list-ul { background-image: var(--icon-list); } - .layout-single-column .column-link .icon-cog { + .app-body .column-link .icon-cog { background-image: var(--icon-gear); } - .layout-single-column .column-link .icon-ellipsis-h { + .app-body .column-link .icon-ellipsis-h { background-image: var(--icon-ellipsis); } - .layout-single-column .column-link.active .icon-ellipsis-h { + .app-body .column-link.active .icon-ellipsis-h { background-image: var(--icon-ellipsis-active); } - .layout-single-column .column-link .icon-user-plus { + .app-body .column-link .icon-user-plus { background-image: var(--icon-user-plus-active); } - .layout-single-column .column-link.active .icon-user-plus { + .app-body .column-link.active .icon-user-plus { background-image: var(--icon-user-plus-accent); } } @@ -751,10 +764,10 @@ body.layout-single-column { /* πŸ“ Compose panel ---------------- */ -.layout-single-column .compose-form { +.app-body .compose-form { padding: 0 0 71px; } -.layout-single-column .navigation-bar { +.app-body .navigation-bar { border-radius: 8px 8px 0 0; padding: 21px 11px 22px 15px; background-color: var(--color-content-secondary-bg); @@ -762,22 +775,22 @@ body.layout-single-column { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .navigation-bar strong { +.app-body .navigation-bar strong { color: var(--color-content-fg); } -.layout-single-column .compose-form__highlightable.active { +.app-body .compose-form__highlightable.active { box-shadow: none; } -.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__highlightable.active), -.layout-single-column .compose-form__highlightable.active .compose-form__autosuggest-wrapper, -.layout-single-column .compose-form__highlightable.active .compose-form__buttons-wrapper, -.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within, -.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__autosuggest-wrapper:focus-within), -.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, -.layout-single-column .compose-form:has(.compose-form__autosuggest-wrapper:focus-within) :is(.reply-indicator, .autosuggest-input, .compose-form__warning) { +.app-body .navigation-bar:has(+ .compose-form .compose-form__highlightable.active), +.app-body .compose-form__highlightable.active .compose-form__autosuggest-wrapper, +.app-body .compose-form__highlightable.active .compose-form__buttons-wrapper, +.app-body .compose-form .compose-form__autosuggest-wrapper:focus-within, +.app-body .navigation-bar:has(+ .compose-form .compose-form__autosuggest-wrapper:focus-within), +.app-body .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, +.app-body .compose-form:has(.compose-form__autosuggest-wrapper:focus-within) :is(.reply-indicator, .autosuggest-input, .compose-form__warning) { border-color: var(--color-accent); } -.layout-single-column .compose-form +.app-body .compose-form :is( .autosuggest-textarea__suggestions, .autosuggest-textarea__textarea, @@ -785,63 +798,63 @@ body.layout-single-column { .compose-form__buttons-wrapper, .compose-form__modifiers ), -.layout-single-column .compose-form__autosuggest-wrapper { +.app-body .compose-form__autosuggest-wrapper { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; border-top: 0; border-radius: 0; } -.layout-single-column .compose-form__autosuggest-wrapper, -.layout-single-column .compose-form .compose-form__buttons-wrapper { +.app-body .compose-form__autosuggest-wrapper, +.app-body .compose-form .compose-form__buttons-wrapper { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .compose-form .compose-form__buttons-wrapper { +.app-body .compose-form .compose-form__buttons-wrapper { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .compose-form .compose-form__buttons-wrapper :is(.icon-button, .text-icon-button), -.layout-single-column .compose-form .character-counter { +.app-body .compose-form .compose-form__buttons-wrapper :is(.icon-button, .text-icon-button), +.app-body .compose-form .character-counter { color: var(--color-content-fg); height: 27px; } -.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active { +.app-body .compose-form .compose-form__buttons-wrapper .icon-button.active { color: var(--color-accent); } -.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { +.app-body .compose-form .compose-form__buttons-wrapper .text-icon-button.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .compose-panel .autosuggest-textarea__textarea { +.app-body .compose-form .autosuggest-textarea__textarea { padding-left: 20px; padding-right: 45px; padding-top: 20px; } -.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder { +.app-body .compose-form .autosuggest-textarea__textarea::placeholder { font-size: 130%; opacity: .5; } -.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder, -.layout-single-column .compose-form .autosuggest-account .display-name__html { +.app-body .compose-panel .autosuggest-textarea__textarea::placeholder, +.app-body .compose-form .autosuggest-account .display-name__html { color: var(--color-content-fg); } -.layout-single-column .compose-form .autosuggest-account .display-name__account { +.app-body .compose-form .autosuggest-account .display-name__account { color: var(--color-content-fg-muted); } -.layout-single-column .compose-form .autosuggest-textarea__suggestions--visible, -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item { +.app-body .compose-form .autosuggest-textarea__suggestions--visible, +.app-body .compose-form .autosuggest-textarea__suggestions__item { border-radius: 8px; } -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover), -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) { +.app-body .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover), +.app-body .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .compose-form .compose-form__buttons-wrapper { +.app-body .compose-form .compose-form__buttons-wrapper { border-radius: 0 0 8px 8px; } -.layout-single-column .reply-indicator, -.layout-single-column .compose-form .compose-form__warning { +.app-body .reply-indicator, +.app-body .compose-form .compose-form__warning { background-color: var(--color-accent-bg); border-left: 1px solid var(--color-accent-lines); border-right: 1px solid var(--color-accent-lines); @@ -851,33 +864,33 @@ body.layout-single-column { margin: 0; border-radius: 0; } -.layout-single-column .compose-form .compose-form__warning, -.layout-single-column .simple_form .recommended, -.layout-single-column .compose-form .compose-form__warning, -.layout-single-column .compose-form .compose-form__warning a, -.layout-single-column .reply-indicator__content a, -.layout-single-column .navigation-bar__profile-edit { +.app-body .compose-form .compose-form__warning, +.app-body .simple_form .recommended, +.app-body .compose-form .compose-form__warning, +.app-body .compose-form .compose-form__warning a, +.app-body .reply-indicator__content a, +.app-body .navigation-bar__profile-edit { color: var(--color-accent); } -.layout-single-column .compose-form__sensitive-button .icon-button:hover { +.app-body .compose-form__sensitive-button .icon-button:hover { background-color: transparent; } -.layout-single-column .compose-form__sensitive-button input[type=checkbox]:checked { +.app-body .compose-form__sensitive-button input[type=checkbox]:checked { background-color: var(--color-accent); border-color: var(--color-accent); } -.layout-single-column .compose-form .autosuggest-input { +.app-body .compose-form .autosuggest-input { box-sizing: border-box; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .compose-form .spoiler-input.spoiler-input--visible { +.app-body .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; background-color: var(--color-content-bg); } -.layout-single-column .compose-form .spoiler-input__input { +.app-body .compose-form .spoiler-input__input { background-color: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 0; @@ -886,58 +899,58 @@ body.layout-single-column { box-shadow: 0 0 0 4px inset var(--color-content-bg); } -.layout-single-column .compose-form .spoiler-input__input:focus { +.app-body .compose-form .spoiler-input__input:focus { box-shadow: 0 0 0 4px inset var(--color-content-bg), 0 0 0 6px inset var(--color-accent), 0 0 0 1px inset var(--color-content-bg); } -.layout-single-column .display-name { +.app-body .display-name { color: var(--color-content-fg); } -.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button { +.app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button { color: #ffffff; } -.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) { +.app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) { background-color: rgba(0, 0, 0, .4); } @media screen and (max-width:1174px) { - .layout-single-column .compose-form { + .app-body .compose-form { padding: 0 10px 10px; } - .layout-single-column .navigation-bar { + .app-body .navigation-bar { border-radius: 8px 8px 0 0; margin: 10px 10px 0; } } /* Publish button */ -.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper { +.app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper { padding-top: 10px; width: 100%; } -.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { +.app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { padding: 10px 18px; } -.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button .icon-lock { +.app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button .icon-lock { background-image: var(--icon-lock-inv); } /* Emoji picker */ -.layout-single-column .compose-form .emoji-button { +.app-body .compose-form .emoji-button { margin: 15px 10px 0 0; background-image: var(--icon-emoji); background-size: 26px; background-position: bottom left; background-repeat: no-repeat; } -.layout-single-column .compose-form .emoji-button .emojione { +.app-body .compose-form .emoji-button .emojione { opacity: 0; } -.layout-single-column .compose-form .emoji-button:hover { +.app-body .compose-form .emoji-button:hover { background-image: var(--icon-emoji-accent); } -.layout-single-column .emoji-picker-dropdown__menu { +.app-body .emoji-picker-dropdown__menu { overflow: hidden; border-radius: 8px; background-color: var(--color-content-bg); @@ -945,68 +958,68 @@ body.layout-single-column { 0 0 0 1px var(--color-lines), 0 0 5px rgba(0, 0, 0, .15); } -.layout-single-column .emoji-mart { +.app-body .emoji-mart { width: 100% !important; display: block; } -.layout-single-column .emoji-mart-bar:first-child { +.app-body .emoji-mart-bar:first-child { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); } -.layout-single-column .emoji-mart-anchor-bar { +.app-body .emoji-mart-anchor-bar { background-color: var(--color-accent); } -.layout-single-column .emoji-mart-anchor-selected { +.app-body .emoji-mart-anchor-selected { color: var(--color-accent); } -.layout-single-column .emoji-mart-anchor-icon svg path, -.layout-single-column .emoji-mart-anchor-icon svg rect { +.app-body .emoji-mart-anchor-icon svg path, +.app-body .emoji-mart-anchor-icon svg rect { fill: var(--color-content-fg); } -.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, -.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, -.layout-single-column .emoji-mart-search-icon svg path { +.app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, +.app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, +.app-body .emoji-mart-search-icon svg path { fill: var(--color-accent); } -.layout-single-column .emoji-mart-search-icon, -.layout-single-column .emoji-mart-search-icon:disabled, -.layout-single-column .emoji-mart-search-icon svg { +.app-body .emoji-mart-search-icon, +.app-body .emoji-mart-search-icon:disabled, +.app-body .emoji-mart-search-icon svg { opacity: 1; } -.layout-single-column .emoji-mart-scroll::-webkit-scrollbar-track { +.app-body .emoji-mart-scroll::-webkit-scrollbar-track { background-color: var(--color-content-bg); } -.layout-single-column .emoji-mart-search, -.layout-single-column .emoji-mart-scroll, -.layout-single-column .emoji-mart-category-label span { +.app-body .emoji-mart-search, +.app-body .emoji-mart-scroll, +.app-body .emoji-mart-category-label span { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .emoji-mart-search input { +.app-body .emoji-mart-search input { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } -.layout-single-column .emoji-mart-search input:focus { +.app-body .emoji-mart-search input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 1px inset var(--color-accent); outline: 0; } -.layout-single-column .emoji-mart-search input::placeholder { +.app-body .emoji-mart-search input::placeholder { color: var(--color-accent); } /* Zoom on emojis on hover (in post content only */ -.layout-single-column .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ +.app-body .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ overflow: visible; } -.layout-single-column .status__content .emojione { +.app-body .status__content .emojione { transition: transform .8s .8s; } -.layout-single-column .status__content .emojione:hover { +.app-body .status__content .emojione:hover { transform: scale(2.5); } @@ -1015,25 +1028,25 @@ body.layout-single-column { /* πŸ’¬ Posts -------- */ -.layout-single-column .reply-indicator__content, -.layout-single-column .status__content { +.app-body .reply-indicator__content, +.app-body .status__content { color: var(--color-content-fg); } -.layout-single-column .account__display-name strong, -.layout-single-column .status__display-name strong, -.layout-single-column .status__info .status__display-name .display-name__account { +.app-body .account__display-name strong, +.app-body .status__display-name strong, +.app-body .status__info .status__display-name .display-name__account { color: var(--color-content-fg); } -.layout-single-column .translate-button { +.app-body .translate-button { color: var(--color-content-fg-muted); } -.layout-single-column .translate-button__meta, -.layout-single-column .translate-button button, -.layout-single-column .status__content__translate-button { +.app-body .translate-button__meta, +.app-body .translate-button button, +.app-body .status__content__translate-button { font-size: 85%; } -.layout-single-column .status__content__translate-button, -.layout-single-column .translate-button .link-button { +.app-body .status__content__translate-button, +.app-body .translate-button .link-button { width: 32px; height: 32px; bottom: 13px; @@ -1048,51 +1061,51 @@ body.layout-single-column { transition: all .3s; background-color: transparent; } -.layout-single-column .detailed-status .status__content__translate-button, -.layout-single-column .detailed-status .translate-button .link-button { +.app-body .detailed-status .status__content__translate-button, +.app-body .detailed-status .translate-button .link-button { background-image: var(--icon-translate-accent); background-size: 25px; width: 40px; height: 40px; right: 60px; } -.layout-single-column .translate-button .link-button, -.layout-single-column .detailed-status .translate-button .link-button { +.app-body .translate-button .link-button, +.app-body .detailed-status .translate-button .link-button { background-image: var(--icon-translate-active); } -.layout-single-column .status__content__translate-button:hover, -.layout-single-column .translate-button .link-button:hover { +.app-body .status__content__translate-button:hover, +.app-body .translate-button .link-button:hover { background-color: var(--color-accent-bg); } @media screen and (max-width:889px) { - .layout-single-column .status__content__translate-button, - .layout-single-column .translate-button .link-button { + .app-body .status__content__translate-button, + .app-body .translate-button .link-button { bottom: 10px; } - .layout-single-column .detailed-status .status__content__translate-button, - .layout-single-column .detailed-status .translate-button .link-button { + .app-body .detailed-status .status__content__translate-button, + .app-body .detailed-status .translate-button .link-button { bottom: 13px; } } -.layout-single-column .status__content__translate-button > span, -.layout-single-column .translate-button .link-button > span, -.layout-single-column .notification .status__content__translate-button { +.app-body .status__content__translate-button > span, +.app-body .translate-button .link-button > span, +.app-body .notification .status__content__translate-button { display: none; } -.layout-single-column .account__display-name strong, -.layout-single-column .status__display-name strong { +.app-body .account__display-name strong, +.app-body .status__display-name strong { font-weight: bold; } -.layout-single-column .status { +.app-body .status { margin-left: 56px; padding: 0 10px; border-bottom: 0; } -.layout-single-column .status__wrapper { +.app-body .status__wrapper { transition: background .3s; } -.layout-single-column .status__wrapper, -.layout-single-column .detailed-status__wrapper { +.app-body .status__wrapper, +.app-body .detailed-status__wrapper { background-color: var(--color-content-bg); padding: 13px 12px; border-left: 1px solid var(--color-lines); @@ -1100,48 +1113,48 @@ body.layout-single-column { position: relative; } @media screen and (max-width:889px) { - .layout-single-column .status__wrapper, - .layout-single-column .detailed-status__wrapper { + .app-body .status__wrapper, + .app-body .detailed-status__wrapper { border-left: 0; border-right: 0; } - .layout-single-column .status__wrapper { + .app-body .status__wrapper { padding: 10px 8px; } } -.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, -.layout-single-column .scrollable > div:first-child > .status__wrapper, -.layout-single-column .explore__search-results > div:first-child > .status__wrapper { +.app-body .scrollable > div:first-child > div:first-child > .status__wrapper, +.app-body .scrollable > div:first-child > .status__wrapper, +.app-body .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } -.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, -.layout-single-column .search-results__section > div:last-child >.status__wrapper { +.app-body .scrollable > div:last-child > div:last-child > .status__wrapper, +.app-body .scrollable > div:last-child > .status__wrapper, +.app-body .scrollable > div > article:last-child > div > .status__wrapper, +.app-body .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { +.app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top: 0; } @media screen and (min-width:890px) { - .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, - .layout-single-column .explore__search-results > div:first-child > .status__wrapper { + .app-body .scrollable > div:first-child > div:first-child > .status__wrapper, + .app-body .explore__search-results > div:first-child > .status__wrapper { border-top-left-radius: 8px; border-top-right-radius: 8px; } - .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, - .layout-single-column .scrollable > div:last-child > .status__wrapper, - .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, - .layout-single-column .search-results__section > div:last-child >.status__wrapper { + .app-body .scrollable > div:last-child > div:last-child > .status__wrapper, + .app-body .scrollable > div:last-child > .status__wrapper, + .app-body .scrollable > div > article:last-child > div > .status__wrapper, + .app-body .search-results__section > div:last-child >.status__wrapper { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } - .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + .app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top-left-radius: 0; border-top-right-radius: 0; } } -.layout-single-column .status__info { +.app-body .status__info { height: 22px; margin-left: -56px; padding: 0; @@ -1149,47 +1162,47 @@ body.layout-single-column { line-height: 10px; align-items: start; } -.layout-single-column .status__info .status__display-name { +.app-body .status__info .status__display-name { overflow: visible; align-items: start; max-width: calc(100% - 4em); } -.layout-single-column .status__info .status__display-name .display-name bdi, -.layout-single-column .status__info .status__display-name .display-name__account { +.app-body .status__info .status__display-name .display-name bdi, +.app-body .status__info .status__display-name .display-name__account { vertical-align: top; } -.layout-single-column .status__info .status__display-name .display-name__account { +.app-body .status__info .status__display-name .display-name__account { display: inline; opacity: .7; } -.layout-single-column .status__relative-time { +.app-body .status__relative-time { height: 22px; position: absolute; right: 22px; color: var(--color-content-fg); opacity: .6; } -.layout-single-column .status__avatar { +.app-body .status__avatar { margin-bottom: -10px; z-index: 2; } -.layout-single-column .reply-indicator__content, -.layout-single-column .status__content { +.app-body .reply-indicator__content, +.app-body .status__content { line-height: 19px; position: static; } -.layout-single-column .e-content blockquote, -.layout-single-column .reply-indicator__content blockquote, -.layout-single-column .status__content__text blockquote { +.app-body .e-content blockquote, +.app-body .reply-indicator__content blockquote, +.app-body .status__content__text blockquote { color: var(--color-content-fg-muted); border-color: var(--color-lines); } /* πŸ“ Post dividers */ /* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */ -.layout-single-column .status::before, -.layout-single-column .notification__message::before { +.app-body .status::before, +.app-body .notification__message::before { position: absolute; background-color: var(--color-lines); height: 1px; @@ -1200,43 +1213,43 @@ body.layout-single-column { opacity: .7; } @media screen and (max-width:889px) { - .layout-single-column .status::before, - .layout-single-column .notification__message::before { + .app-body .status::before, + .app-body .notification__message::before { width: calc(100% - 73px); } } @media (prefers-color-scheme: dark) { - .layout-single-column .status::before, - .layout-single-column .notification__message::before { + .app-body .status::before, + .app-body .notification__message::before { opacity: 1; } } /* Remove border between posts when applicable */ -.layout-single-column .notification .status::before, /* no dividers on posts _inside_ notifications */ -.layout-single-column .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ -.layout-single-column .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ -.layout-single-column .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ -.layout-single-column .hashtag-header + article .status::before, -.layout-single-column .search-results__section .search-results__section__header + div .status::before { +.app-body .notification .status::before, /* no dividers on posts _inside_ notifications */ +.app-body .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ +.app-body .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ +.app-body .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ +.app-body .hashtag-header + article .status::before, +.app-body .search-results__section .search-results__section__header + div .status::before { display: none; } @media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ - .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, - .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper .status::before{ + .app-body .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, + .app-body .scrollable > div > article:first-child > div > .status__wrapper .status::before{ display: none; } } /* πŸ‘₯ Threaded replies */ -.layout-single-column .status--first-in-thread { +.app-body .status--first-in-thread { border-top: 0; } -.layout-single-column .status--first-in-thread::before { +.app-body .status--first-in-thread::before { width: 100%; right: 0; } -.layout-single-column .status--in-thread +.app-body .status--in-thread :is( .attachment-list, .audio-player, @@ -1251,92 +1264,92 @@ body.layout-single-column { margin-left: 0; width: auto; } -.layout-single-column .status__line--first { +.app-body .status__line--first { height: 100%; } -.layout-single-column .status__line--full { +.app-body .status__line--full { height: calc(100% + 32px); } /* Default lines when replying in real time */ -.layout-single-column div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { +.app-body div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { height: 0; } /* Hide line before first in thread */ -.layout-single-column div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), -.layout-single-column div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { +.app-body div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), +.app-body div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { height: 0; } -.layout-single-column div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line { +.app-body div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line { height: calc(100% - 32px) !important; } -.layout-single-column div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, -.layout-single-column .status__line--full.status__line--first { +.app-body div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, +.app-body .status__line--full.status__line--first { top: 32px; height: 100%; z-index: 1; } -.layout-single-column .detailed-status { +.app-body .detailed-status { background-color: transparent; border-top: 0; } /* Threaded line, actually */ -.layout-single-column .status__line { +.app-body .status__line { margin-inline-start: 5px; border-inline-start: 2px solid var(--color-accent); -webkit-border-start: 2px solid var(--color-accent); opacity: .6; } -.layout-single-column .status__line--full::before { +.app-body .status__line--full::before { background-color: var(--color-accent); } /* Hide the "stub" from the first status line */ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, -.layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line, -.layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { +.app-body .status-reply.status--in-thread.status--first-in-thread > .status__line, +.app-body .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { top: 32px; } @media screen and (max-width:889px) { - .layout-single-column .status__line { + .app-body .status__line { inset-inline-start: 35px; } } /* ⏺️ Posts when in focus */ -.layout-single-column +.app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus, -.layout-single-column +.app-body :is(.focusable, .status__wrapper.focusable):focus :is(.detailed-status, .detailed-status__action-bar) { outline: 0; background: var(--color-content-bg-focus); } @media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ - .layout-single-column .status__wrapper:has(.status__content:hover), - .layout-single-column .notification__message:has(+ div > .status__wrapper .status__content:hover) { + .app-body .status__wrapper:has(.status__content:hover), + .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) { background: var(--color-content-bg-focus); } } /* πŸ‘οΈ Post detailed view */ -.layout-single-column .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ +.app-body .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } -.layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ +.app-body .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ border-top: 0; } -.layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ +.app-body .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ border-bottom: 1px solid var(--color-lines); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } -.layout-single-column .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ +.app-body .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ box-shadow: none; } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { + .app-body .scrollable > div:first-child > .detailed-status__wrapper { margin-top: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -1344,153 +1357,153 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } @media screen and (max-width:889px) { - .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { + .app-body .scrollable > div:last-child .detailed-status__wrapper:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } - .layout-single-column .detailed-status { + .app-body .detailed-status { padding: 8px 8px 14px; } } -.layout-single-column .detailed-status__display-avatar .account__avatar { +.app-body .detailed-status__display-avatar .account__avatar { width: 60px !important; height: 60px !important; } -.layout-single-column .detailed-status .status__content { +.app-body .detailed-status .status__content { line-height: 24px; } -.layout-single-column .detailed-status, -.layout-single-column .detailed-status__action-bar { +.app-body .detailed-status, +.app-body .detailed-status__action-bar { background-color: var(--color-content-bg); border: 0; } -.layout-single-column .detailed-status__display-name strong, -.layout-single-column .detailed-status__display-name .display-name__account { +.app-body .detailed-status__display-name strong, +.app-body .detailed-status__display-name .display-name__account { color: var(--color-content-fg); } -.layout-single-column .detailed-status__display-name strong { +.app-body .detailed-status__display-name strong { font-size: 18px; font-weight: bold; } .detailed-status__display-name .display-name__account{ opacity: .7; } -.layout-single-column .detailed-status__meta { +.app-body .detailed-status__meta { color: var(--color-fg); opacity: .8; } -.layout-single-column .detailed-status__action-bar { +.app-body .detailed-status__action-bar { padding: 0 16px; justify-content: left; gap: 8px; width: 32px; } -.layout-single-column .detailed-status__action-bar-dropdown { +.app-body .detailed-status__action-bar-dropdown { position: absolute; right: 18px; } -.layout-single-column .status__action-bar .animated-number { +.app-body .status__action-bar .animated-number { color: var(--color-accent); font-weight: 600; } -.layout-single-column .status__action-bar__button:has(.icon-button__counter > .animated-number) { +.app-body .status__action-bar__button:has(.icon-button__counter > .animated-number) { padding-left: 4px; padding-right: 4px; margin-right: 2px; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) .active .icon-retweet + .icon-button__counter > .animated-number { color: #D3487F; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) .active .icon-star + .icon-button__counter > .animated-number { color: #EBBB59; } -.layout-single-column .detailed-status__meta .animated-number { +.app-body .detailed-status__meta .animated-number { transform: translate(0, -1px); } -.layout-single-column article > .account { +.app-body article > .account { padding: 16px; } -.layout-single-column article:last-child > .account { +.app-body article:last-child > .account { border-bottom: 1px solid var(--color-lines); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .detailed-status__link { +.app-body .detailed-status__link { display: inline-block; position: static; } /* Hashtag bar */ -.layout-single-column .hashtag-bar a, -.layout-single-column .hashtag-bar .link-button { +.app-body .hashtag-bar a, +.app-body .hashtag-bar .link-button { color: var(--color-fg-muted); font-size: 90%; transition: all .1s; } -.layout-single-column .hashtag-bar .link-button { +.app-body .hashtag-bar .link-button { font-size: 80%; margin-left: 3px; } -.layout-single-column .hashtag-bar a { +.app-body .hashtag-bar a { background-color: var(--color-content-secondary-bg); transition: all .3s; padding: 3px 8px; border-radius: 8px; } -.layout-single-column .hashtag-bar a:hover, -.layout-single-column .hashtag-bar .link-button:hover { +.app-body .hashtag-bar a:hover, +.app-body .hashtag-bar .link-button:hover { color: var(--color-accent); } -.layout-single-column .hashtag-bar a:hover { +.app-body .hashtag-bar a:hover { background-color: var(--color-accent-bg); } -.layout-single-column .hashtag-bar a:active, -.layout-single-column .hashtag-bar a:focus { +.app-body .hashtag-bar a:active, +.app-body .hashtag-bar a:focus { color: var(--color-accent-fg); background-color: var(--color-accent); } -.layout-single-column .hashtag-bar a:hover span { +.app-body .hashtag-bar a:hover span { text-decoration: none; } @media (prefers-color-scheme: dark) { - .layout-single-column .hashtag-bar a, - .layout-single-column .hashtag-bar .link-button { + .app-body .hashtag-bar a, + .app-body .hashtag-bar .link-button { color: var(--color-accent); } - .layout-single-column .hashtag-bar a:hover, - .layout-single-column .hashtag-bar .link-button:hover { + .app-body .hashtag-bar a:hover, + .app-body .hashtag-bar .link-button:hover { color: var(--color-content-fg); } } /* ⭐ Action bar */ -.layout-single-column .status__action-bar { +.app-body .status__action-bar { justify-content: left; margin-top: 8px; gap: 8px; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) :is(button, .status__action-bar__dropdown) { transition: all .3s; } -.layout-single-column .status__action-bar button:last-child { +.app-body .status__action-bar button:last-child { position: absolute; right: 18px; } -.layout-single-column .status__action-bar .icon-button.disabled { +.app-body .status__action-bar .icon-button.disabled { pointer-events: none; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) .icon-button:is( :active, @@ -1500,12 +1513,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu ) { background-color: transparent; } -.layout-single-column .icon-button.star-icon.deactivate>.icon-star, -.layout-single-column .icon-button.star-icon.activate>.icon-star { /* Disable default star spinning animation */ +.app-body .icon-button.star-icon.deactivate>.icon-star, +.app-body .icon-button.star-icon.activate>.icon-star { /* Disable default star spinning animation */ animation: none; } -.layout-single-column .status__action-bar .icon-button.star-icon.active>.icon-star, -.layout-single-column .detailed-status__action-bar .icon-button.star-icon.active>.icon-star { +.app-body .status__action-bar .icon-button.star-icon.active>.icon-star, +.app-body .detailed-status__action-bar .icon-button.star-icon.active>.icon-star { animation: bounce .4s ease-out !important; } @keyframes bounce { @@ -1522,13 +1535,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: scale(1); } } -.layout-single-column .status__action-bar .icon-button.reblogPrivate>.icon-retweet { +.app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet { opacity: 1; } -.layout-single-column .status__action-bar .icon-button.active>.icon-retweet { +.app-body .status__action-bar .icon-button.active>.icon-retweet { animation: launch 1.2s ease-in !important; } -.layout-single-column .detailed-status__action-bar .icon-button.active>.icon-retweet { +.app-body .detailed-status__action-bar .icon-button.active>.icon-retweet { animation: launch-detailed 1.2s ease-out !important; } @keyframes launch { @@ -1583,8 +1596,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu opacity: 1; } } -.layout-single-column .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark, -.layout-single-column .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark { +.app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark, +.app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark { animation: bounce-vertical .4s ease-out !important; } @keyframes bounce-vertical { @@ -1601,27 +1614,27 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: translate(0); } } -.layout-single-column .status__action-bar .icon-button, -.layout-single-column .detailed-status__action-bar .icon-button { +.app-body .status__action-bar .icon-button, +.app-body .detailed-status__action-bar .icon-button { min-width: 32px; height: 32px; border-radius: 8px; position: relative; } -.layout-single-column .detailed-status__action-bar .icon-button { +.app-body .detailed-status__action-bar .icon-button { min-width: 40px; height: 40px; } -.layout-single-column .detailed-status__action-bar .icon-button > .icon { +.app-body .detailed-status__action-bar .icon-button > .icon { width: 25px; height: 25px; } -.layout-single-column .detailed-status__action-bar .icon-button -.layout-single-column .icon-button.star-icon.active, -.layout-single-column .notification__favourite-icon-wrapper .star-icon { +.app-body .detailed-status__action-bar .icon-button +.app-body .icon-button.star-icon.active, +.app-body .notification__favourite-icon-wrapper .star-icon { color: #ffb609; } -.layout-single-column .status__prepend { +.app-body .status__prepend { padding-top: 2px; padding-right: 0; padding-bottom: 1px; @@ -1630,98 +1643,98 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 25px; color: var(--color-content-fg); } -.layout-single-column .status__prepend-icon-wrapper { +.app-body .status__prepend-icon-wrapper { width: 56px; text-align: right; } -.layout-single-column .status__prepend-icon-wrapper .icon { +.app-body .status__prepend-icon-wrapper .icon { transform: translateY(1px) scale(1.1); } -.layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper { +.app-body .detailed-status__wrapper .status__prepend-icon-wrapper { width: 46px; } -.layout-single-column .status__prepend .muted .emojione { +.app-body .status__prepend .muted .emojione { opacity: 1; } -.layout-single-column .status-card, -.layout-single-column .status-card.compact { +.app-body .status-card, +.app-body .status-card.compact { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); box-shadow: none; transition: all .3s; border-radius: 8px; } -.layout-single-column a.status-card:hover, -.layout-single-column a.status-card.compact:hover { +.app-body a.status-card:hover, +.app-body a.status-card.compact:hover { background-color: var(--color-content-bg-focus); border-color: var(--color-lines); } -.layout-single-column .status-card__image { +.app-body .status-card__image { background: var(--color-content-secondary-bg); } -.layout-single-column .status-card__image .icon { +.app-body .status-card__image .icon { width: 32px; height: 32px; } -.layout-single-column .status-card__title, -.layout-single-column .status-card__description, -.layout-single-column .status-card__author, -.layout-single-column .status-card__host { +.app-body .status-card__title, +.app-body .status-card__description, +.app-body .status-card__author, +.app-body .status-card__host { color: var(--color-content-fg); transition: all .2s; } -.layout-single-column .status-card__host { +.app-body .status-card__host { color: var(--color-content-fg-muted); } -.layout-single-column .status-card:active .status-card__host, -.layout-single-column .status-card:focus .status-card__host, -.layout-single-column .status-card:hover .status-card__host { +.app-body .status-card:active .status-card__host, +.app-body .status-card:focus .status-card__host, +.app-body .status-card:hover .status-card__host { color: var(--color-accent); } -.layout-single-column .status-card:active .status-card__author, -.layout-single-column .status-card:active .status-card__description, -.layout-single-column .status-card:active .status-card__title, -.layout-single-column .status-card:focus .status-card__author, -.layout-single-column .status-card:focus .status-card__description, -.layout-single-column .status-card:focus .status-card__title, -.layout-single-column .status-card:hover .status-card__author, -.layout-single-column .status-card:hover .status-card__description, -.layout-single-column .status-card:hover .status-card__title { +.app-body .status-card:active .status-card__author, +.app-body .status-card:active .status-card__description, +.app-body .status-card:active .status-card__title, +.app-body .status-card:focus .status-card__author, +.app-body .status-card:focus .status-card__description, +.app-body .status-card:focus .status-card__title, +.app-body .status-card:hover .status-card__author, +.app-body .status-card:hover .status-card__description, +.app-body .status-card:hover .status-card__title { color: var(--color-content-fg); } -.layout-single-column .status-card__author strong { +.app-body .status-card__author strong { font-weight: 800; } -.layout-single-column .status__content p { +.app-body .status__content p { margin-bottom: 12px; } -.layout-single-column .status__content p:last-child { +.app-body .status__content p:last-child { margin-bottom: 0; } -.layout-single-column .status__content > p:first-child:has(.status__content__spoiler-link) { +.app-body .status__content > p:first-child:has(.status__content__spoiler-link) { margin-bottom: 1px; } -.layout-single-column .status__content > p:first-child:has(.status__content__spoiler-link) span { +.app-body .status__content > p:first-child:has(.status__content__spoiler-link) span { font-weight: bold; } -.layout-single-column .media-gallery { +.app-body .media-gallery { border-radius: 8px; } -.layout-single-column .icon-button.overlayed { +.app-body .icon-button.overlayed { background-color: #ffffff; color: #444b5d; opacity: .6; transition: opacity .3s; } -.layout-single-column .icon-button.overlayed:hover { +.app-body .icon-button.overlayed:hover { background-color: #ffffff; color: #444b5d; opacity: 1; } -.layout-single-column .status__wrapper--filtered__button { +.app-body .status__wrapper--filtered__button { color: var(--color-accent); } -.layout-single-column .status__wrapper--filtered { +.app-body .status__wrapper--filtered { color: var(--color-content-fg); border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); @@ -1729,69 +1742,69 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu margin-top: -1px; } -.layout-single-column .audio-player, -.layout-single-column .media-gallery, -.layout-single-column .video-player { +.app-body .audio-player, +.app-body .media-gallery, +.app-body .video-player { border: 1px solid var(--color-lines); } /* πŸ“Š Polls */ -.layout-single-column .poll__chart, -.layout-single-column .muted .poll__chart.leading { +.app-body .poll__chart, +.app-body .muted .poll__chart.leading { background: var(--color-accent); opacity: .4; height: 12px; border-radius: 10px; } -.layout-single-column .poll__chart.leading, -.layout-single-column .muted .poll__chart.leading { +.app-body .poll__chart.leading, +.app-body .muted .poll__chart.leading { opacity: 1; } -.layout-single-column .muted .poll { +.app-body .muted .poll { color: var(--color-content-fg-muted); } -.layout-single-column .poll__footer { +.app-body .poll__footer { color: var(--color-content-fg); } -.layout-single-column .poll__link { +.app-body .poll__link { color: var(--color-accent); text-decoration: none; } -.layout-single-column .poll__input { +.app-body .poll__input { border: 2px solid var(--color-content-fg); } -.layout-single-column .poll__input:hover { +.app-body .poll__input:hover { border-color: var(--color-accent); background-color: var(--color-accent-bg); } -.layout-single-column .poll__input:is(.active, :active, :focus) { +.app-body .poll__input:is(.active, :active, :focus) { background-color: var(--color-accent); } -.layout-single-column .poll__input.active { +.app-body .poll__input.active { border-color: var(--color-accent); } -.layout-single-column .poll__footer .button.button-secondary { +.app-body .poll__footer .button.button-secondary { padding: 0 16px; } -.layout-single-column .poll__footer .button.button-secondary:hover { +.app-body .poll__footer .button.button-secondary:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } /* Poll composer */ -.layout-single-column .compose-form__poll-wrapper, -.layout-single-column .compose-form__poll-wrapper .poll__footer { +.app-body .compose-form__poll-wrapper, +.app-body .compose-form__poll-wrapper .poll__footer { border-top: 0; } -.layout-single-column .compose-form__poll-wrapper ul { +.app-body .compose-form__poll-wrapper ul { background-color: var(--color-accent-bg); } -.layout-single-column .compose-form__poll-wrapper .autosuggest-input input:focus { +.app-body .compose-form__poll-wrapper .autosuggest-input input:focus { box-shadow: 0 0 0 2px var(--color-accent); } -.layout-single-column .compose-form__poll-wrapper .poll__footer .button.button-secondary { +.app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } -.layout-single-column .compose-form__poll-wrapper .icon-button.disabled { +.app-body .compose-form__poll-wrapper .icon-button.disabled { color: transparent; pointer-events: none; } @@ -1799,29 +1812,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* Empty columns */ -.layout-single-column .empty-column-indicator { +.app-body .empty-column-indicator { background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); border: 1px solid var(--color-lines); border-radius: 0 0 8px 8px; contain: content; } -.layout-single-column .empty-column-indicator a { +.app-body .empty-column-indicator a { color: var(--color-accent); } -.layout-single-column .explore__links > .empty-column-indicator { +.app-body .explore__links > .empty-column-indicator { border: 0; } /* Timeline hint */ -.layout-single-column .timeline-hint { +.app-body .timeline-hint { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .timeline-hint a { +.app-body .timeline-hint a { color: var(--color-accent); } -.layout-single-column article + .timeline-hint:last-child { +.app-body article + .timeline-hint:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-bottom: 1px solid var(--color-lines); @@ -1831,49 +1844,49 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ“€ DMs */ -.layout-single-column .follow_requests-unlocked_explanation { +.app-body .follow_requests-unlocked_explanation { background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .follow_requests-unlocked_explanation a { +.app-body .follow_requests-unlocked_explanation a { color: var(--color-accent); } -.layout-single-column .conversation__unread { +.app-body .conversation__unread { background-color: var(--color-accent); } -.layout-single-column .conversation.conversation--unread { +.app-body .conversation.conversation--unread { background-color: var(--color-content-bg-focus); } -.layout-single-column .conversation__unread { +.app-body .conversation__unread { color: var(--color-accent-fg); } -.layout-single-column .conversation__content__names a strong { +.app-body .conversation__content__names a strong { font-weight: bold; } -.layout-single-column .conversation__content__names, -.layout-single-column .conversation__content__names a, -.layout-single-column .conversation__content__relative-time, -.layout-single-column .conversation .attachment-list__list a, -.layout-single-column .conversation .status__content p { +.app-body .conversation__content__names, +.app-body .conversation__content__names a, +.app-body .conversation__content__relative-time, +.app-body .conversation .attachment-list__list a, +.app-body .conversation .status__content p { color: var(--color-content-fg); } -.layout-single-column .conversation { +.app-body .conversation { background-color: var(--color-content-bg); border-bottom: 1px solid var(--color-lines); } -.layout-single-column .conversation__content__relative-time { +.app-body .conversation__content__relative-time { opacity: .7; } @media screen and (min-width:890px) { - .layout-single-column .conversation { + .app-body .conversation { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } } /* Speech bubble look DMs */ -.layout-single-column :is(.status-direct, .detailed-status-direct, .detailed-status__wrapper-direct) .status__content { +.app-body :is(.status-direct, .detailed-status-direct, .detailed-status__wrapper-direct) .status__content { padding: .7em 1.2em .7em 1em; margin-top: 4px; background: var(--color-content-secondary-bg); @@ -1881,11 +1894,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 4px 12px 12px 12px; display: inline-block; } -.layout-single-column .status-direct.muted .status__content { +.app-body .status-direct.muted .status__content { background: rgba(155, 174, 200, 0.1); border-color: var(--color-lines); } -.layout-single-column :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend { +.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend { display: none; } @@ -1893,25 +1906,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ⏺️ Column headers ----------------- */ -.layout-single-column .tabs-bar__wrapper { +.app-body .tabs-bar__wrapper { background-color: transparent; border-radius: 8px 8px 0 0; box-shadow: inset 0 10px var(--color-bg), 0 -30px var(--color-bg); } -.layout-single-column .column-header__wrapper.active:before { +.app-body .column-header__wrapper.active:before { background: none; opacity: 40%; } -.layout-single-column .column-header__wrapper.active { +.app-body .column-header__wrapper.active { box-shadow: 0 0; } -.layout-single-column .column-header { +.app-body .column-header { border-radius: 8px; } -.layout-single-column .column-header, -.layout-single-column .column-back-button { +.app-body .column-header, +.app-body .column-back-button { background-color: rgba(255, 255, 255, .75); color: var(--color-content-fg); border-top: 1px solid var(--color-lines); @@ -1927,114 +1940,116 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu backdrop-filter: blur(20px); } @media (prefers-color-scheme: dark) { - .layout-single-column .column-header, - .layout-single-column .column-back-button { + .app-body .column-header, + .app-body .column-back-button { background-color: rgba(3, 3, 3, .65); } } -.layout-single-column .column-header__button, -.layout-single-column .column-header__back-button { +.app-body .column-header__button, +.app-body .column-header__back-button { background-color: transparent; border: 0; } -.layout-single-column .column-header__button { +.app-body .column-header__button { color: var(--color-content-fg); transition: all .2s; - height: 50px; + border-radius: 6px; + height: 42px; + margin: 4px 4px 4px 0; } -.layout-single-column .column-header__icon { +.app-body .column-header__icon { transform: scale(1.1); margin-right: 4px; } -.layout-single-column .column-header.active .column-header__icon { +.app-body .column-header.active .column-header__icon { color: var(--color-accent); text-shadow: none; } -.layout-single-column .column-header__button:is(.active, .active:hover, :hover) { +.app-body .column-header__button:is(.active, .active:hover, :hover) { color: var(--color-accent); background-color: var(--color-accent-bg); } @media screen and (max-width:1174px) { - .layout-single-column .column-header__wrapper::after, - .layout-single-column .column-back-button::after { + .app-body .column-header__wrapper::after, + .app-body .column-back-button::after { display: none; } - .layout-single-column .column-header__button:is(.active, .active:hover, :hover), - .layout-single-column .column-header, - .layout-single-column .column-back-button { + .app-body .column-header__button:is(.active, .active:hover, :hover), + .app-body .column-header, + .app-body .column-back-button { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } } -.layout-single-column .column-back-button--slim-button::after { +.app-body .column-back-button--slim-button::after { display: none; } -.layout-single-column .column-back-button--slim-button { +.app-body .column-back-button--slim-button { top: -50px } @media screen and (max-width:1174px) { - .layout-single-column .column-back-button--slim-button { + .app-body .column-back-button--slim-button { height: 50px; } } @media screen and (min-width:1175px) { - .layout-single-column .column-back-button--slim-button { + .app-body .column-back-button--slim-button { display: none; } } -.layout-single-column .load-gap, -.layout-single-column .load-more { +.app-body .load-gap, +.app-body .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); border-bottom: 0; } -.layout-single-column .load-gap:hover, -.layout-single-column .load-more:hover { +.app-body .load-gap:hover, +.app-body .load-more:hover { background-color: var(--color-accent-lines); } -.layout-single-column .column-header__collapsible { +.app-body .column-header__collapsible { border-bottom: 0; box-shadow: 0 -20px 0 var(--color-bg); background-color: var(--color-secondary-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .column-header__collapsible::-webkit-scrollbar-track { +.app-body .column-header__collapsible::-webkit-scrollbar-track { background-color: transparent; } @media screen and (max-width:1174px) { - .layout-single-column .column-header__collapsible { + .app-body .column-header__collapsible { box-shadow: none; border-radius: 0; } } -.layout-single-column .column-header__collapsible-inner { +.app-body .column-header__collapsible-inner { background: var(--color-secondary-bg); border: 0; } -.layout-single-column .column-settings__section { +.app-body .column-settings__section { color: var(--color-content-fg-bold); } -.layout-single-column .setting-toggle__label { +.app-body .setting-toggle__label { color: var(--color-content-fg); } -.layout-single-column .column-header > button { +.app-body .column-header > button { padding: 0 0 0 15px; font-weight: bold; } @media screen and (max-width:1174px) { - .layout-single-column .ui__header { + .app-body .ui__header { background-color: transparent; border-bottom: 0; } - .layout-single-column .ui__header__logo { + .app-body .ui__header__logo { margin-left: 3px; } - .layout-single-column .tabs-bar__wrapper { + .app-body .tabs-bar__wrapper { box-shadow: none; display: block; margin-bottom: -2px; @@ -2042,22 +2057,22 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 45px; border-bottom: 1px solid rgba(0, 0, 0, .1); } - .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal) { + .app-body .tabs-bar__wrapper:has(> #tabs-bar__portal) { display: none; } - .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), - .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ + .app-body .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), + .app-body .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ display: block; } - .layout-single-column .column-header, - .layout-single-column .column-back-button, - .layout-single-column .column-header__button, - .layout-single-column .column-header__back-button { + .app-body .column-header, + .app-body .column-back-button, + .app-body .column-header__button, + .app-body .column-header__back-button { background-color: transparent; height: 50px; border: 0; } - .layout-single-column .ui::after { /* Set a backdrop blur background to both top bars */ + .app-body .ui::after { /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.75); @@ -2069,23 +2084,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu width: 100%; z-index: 1; } - .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after { + .app-body .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after { height: 55px; } - .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after, - .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ + .app-body .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after, + .app-body .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ height: 100px; } - .layout-single-column .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */ + .app-body .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */ margin-top: 0; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { - .layout-single-column .ui::after { + .app-body .ui::after { background-color: rgba(3, 3, 3, .65); } - .layout-single-column .tabs-bar__wrapper { + .app-body .tabs-bar__wrapper { border-color: var(--color-lines); } } @@ -2095,37 +2110,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ⏺️ Horizontal selectors (used to navigate subsections on the Explore, Live Feeds and Account pages) */ -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) { background: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .account__header + .account__section-headline { +.app-body .account__header + .account__section-headline { border-radius: 8px 8px 0 0; } -.layout-single-column .account__section-headline:has(+ .explore__suggestions) { +.app-body .account__section-headline:has(+ .explore__suggestions) { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; margin-bottom: 10px; } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .explore__search-header + .account__section-headline { + .app-body .explore__search-header + .account__section-headline { border-top-left-radius: 8px; border-top-right-radius: 8px; } - .layout-single-column .notification__filter-bar { + .app-body .notification__filter-bar { border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 10px; } } @media screen and (max-width:889px) { - .layout-single-column :is(.account__section-headline, .notification__filter-bar) { + .app-body :is(.account__section-headline, .notification__filter-bar) { border-left: 0; border-right: 0; } } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button) { background-color: var(--color-accent-bg); @@ -2136,36 +2151,36 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu max-height: 45px; padding: 14px 10px; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) .icon { margin-top: -1.5px; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):hover { background-color: var(--color-accent-lines); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { background-color: var(--color-content-bg); color: var(--color-content-fg); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active::before { display: none; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) button { background-color: transparent; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button, a.active, button.active)::after { display: block; @@ -2183,52 +2198,52 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: unset; border: 0; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):last-child::after { display: none; } @media (prefers-color-scheme: dark) { - .layout-single-column + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { background-color: var(--color-bg); } } -.layout-single-column .notification__filter-bar .icon-reply-all { +.app-body .notification__filter-bar .icon-reply-all { background-image: var(--icon-reply-accent); } -.layout-single-column .notification__filter-bar .active .icon-reply-all { +.app-body .notification__filter-bar .active .icon-reply-all { background-image: var(--icon-reply); } -.layout-single-column .notification__filter-bar .icon-star { +.app-body .notification__filter-bar .icon-star { background-image: var(--icon-star-accent); } -.layout-single-column .notification__filter-bar .active .icon-star { +.app-body .notification__filter-bar .active .icon-star { background-image: var(--icon-star); } -.layout-single-column .notification__filter-bar .icon-retweet { +.app-body .notification__filter-bar .icon-retweet { background-image: var(--icon-boost-accent); } -.layout-single-column .notification__filter-bar .active .icon-retweet { +.app-body .notification__filter-bar .active .icon-retweet { background-image: var(--icon-boost); } -.layout-single-column .notification__filter-bar .icon-tasks { +.app-body .notification__filter-bar .icon-tasks { background-image: var(--icon-poll-accent); } -.layout-single-column .notification__filter-bar .active .icon-tasks { +.app-body .notification__filter-bar .active .icon-tasks { background-image: var(--icon-poll); } -.layout-single-column .notification__filter-bar .icon-home { +.app-body .notification__filter-bar .icon-home { background-image: var(--icon-post-notification-accent); } -.layout-single-column .notification__filter-bar .active .icon-home { +.app-body .notification__filter-bar .active .icon-home { background-image: var(--icon-post-notification); } @media screen and (max-width:889px) { - .layout-single-column .account__header + .account__section-headline { + .app-body .account__header + .account__section-headline { border-radius: 0; } } @@ -2238,79 +2253,79 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu ------------------- */ @media screen and (min-width:1175px) { /* Order of the side nav items */ - .layout-single-column .navigation-panel__logo { + .app-body .navigation-panel__logo { order: 1; } - .layout-single-column .column-link[href="/home"] { + .app-body .column-link[href="/home"] { order: 2; } - .layout-single-column .column-link[href="/notifications"] { + .app-body .column-link[href="/notifications"] { order: 3; } - .layout-single-column .column-link[href="/explore"] { + .app-body .column-link[href="/explore"] { order: 4; } - .layout-single-column .column-link[href="/public/local"] { + .app-body .column-link[href="/public/local"] { order: 5; } - .layout-single-column .column-link[href="/public"] { + .app-body .column-link[href="/public"] { order: 6; } - .layout-single-column .column-link[href="/conversations"] { + .app-body .column-link[href="/conversations"] { order: 7; } - .layout-single-column .column-link[href="/follow_requests"] { + .app-body .column-link[href="/follow_requests"] { order: 8; } - .layout-single-column .column-link[href="/bookmarks"] { + .app-body .column-link[href="/bookmarks"] { order: 9; } - .layout-single-column .column-link[href="/favourites"] { + .app-body .column-link[href="/favourites"] { order: 10; } - .layout-single-column .column-link[href="/lists"] { + .app-body .column-link[href="/lists"] { order: 12; } - .layout-single-column .list-panel { + .app-body .list-panel { order: 13; } - .layout-single-column .column-link[href="/settings/preferences"] { + .app-body .column-link[href="/settings/preferences"] { order: 11; } - .layout-single-column .navigation-panel__sign-in-banner, - .layout-single-column .navigation-panel__legal { + .app-body .navigation-panel__sign-in-banner, + .app-body .navigation-panel__legal { order: 14; } - .layout-single-column .flex-spacer { + .app-body .flex-spacer { order: 15; } - .layout-single-column .getting-started__trends { + .app-body .getting-started__trends { order: 16; } } -.layout-single-column .column-link--transparent { +.app-body .column-link--transparent { color: var(--color-fg); } -.layout-single-column .ui__header__logo .logo--icon { +.app-body .ui__header__logo .logo--icon { display: none; } -.layout-single-column .ui__header__links .button.button-secondary { +.app-body .ui__header__links .button.button-secondary { padding: 8px 15px; } -.layout-single-column .ui__header__links .button.button-secondary[href="/publish"] { +.app-body .ui__header__links .button.button-secondary[href="/publish"] { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { +.app-body .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { background-color: var(--color-accent-focus); color: var(--color-accent-fg); } -.layout-single-column .column-link--logo { +.app-body .column-link--logo { margin-left: 4px; } -.layout-single-column .column-link.column-link--logo, -.layout-single-column .ui__header__logo { +.app-body .column-link.column-link--logo, +.app-body .ui__header__logo { display: inline-flex; padding: 0; width: 50px; @@ -2320,40 +2335,40 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-position: center; background-size: 32px auto; } -.layout-single-column .column-link.column-link--logo svg, -.layout-single-column .ui__header__logo svg { +.app-body .column-link.column-link--logo svg, +.app-body .ui__header__logo svg { display: none; } -.layout-single-column .navigation-panel__logo { +.app-body .navigation-panel__logo { margin-bottom: 10px; } -.layout-single-column .column-link:not(.column-link--logo) { +.app-body .column-link:not(.column-link--logo) { padding: 13px 20px 14px 13px; margin-left: 3px; font-weight: 500; font-size: 18px; overflow: visible; } -.layout-single-column .column-link--transparent:is(.active, .active:hover) { +.app-body .column-link--transparent:is(.active, .active:hover) { color: var(--color-content-fg); font-weight: bold; } -.layout-single-column .column-link--transparent:hover { +.app-body .column-link--transparent:hover { border-radius: 8px; padding-right: 20px; } -.layout-single-column .column-link--transparent span { +.app-body .column-link--transparent span { position: relative; } @media screen and (min-width:1175px) { - .layout-single-column .column-link:not(.column-link--logo) { + .app-body .column-link:not(.column-link--logo) { transition: all .2s; } - .layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { + .app-body .column-link:not(.column-link--logo)[href="/settings/preferences"] { padding-bottom: 13px; } - .layout-single-column .column-link--transparent span::before { + .app-body .column-link--transparent span::before { content: " "; left: -44px; background-color: transparent; @@ -2365,21 +2380,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu z-index: -1; bottom: -12px; } - .layout-single-column .column-link--transparent:hover span::before { + .app-body .column-link--transparent:hover span::before { background-color: var(--color-accent-bg); } - .layout-single-column .column-link--transparent:is(.active, .active:hover) span::before { + .app-body .column-link--transparent:is(.active, .active:hover) span::before { background-color: var(--color-content-secondary-bg); } } @media (prefers-color-scheme: dark) { @media screen and (min-width:1175px) { - .layout-single-column .column-link--transparent:is(.active, .active:hover) span::before { + .app-body .column-link--transparent:is(.active, .active:hover) span::before { background-color: var(--color-content-secondary-bg); } } } -.layout-single-column .icon-with-badge__badge { +.app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); border-radius: 20px; @@ -2388,39 +2403,39 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border: 0; z-index: 1; } -.layout-single-column .compose-panel hr, .navigation-panel hr { +.app-body .compose-panel hr, .navigation-panel hr { display: none; } -.layout-single-column .column-link span { +.app-body .column-link span { vertical-align: middle; } -.layout-single-column .column-link .fa::before { +.app-body .column-link .fa::before { position: relative; top: 1px; } -.layout-single-column .column-link .fa.fa-cog { +.app-body .column-link .fa.fa-cog { transform: scale(1) translate(1px, -1px); } -.layout-single-column .list-panel { +.app-body .list-panel { padding: 5px 9px 50px 27px; margin: 0 0 5px; display: none; } -.layout-single-column .list-panel .icon { +.app-body .list-panel .icon { display: none; } -.layout-single-column .list-panel .column-link span::before { +.app-body .list-panel .column-link span::before { left: -15px; top: -10px; right: -15px; bottom: -10px; } -.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { +.app-body .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { background-color: var(--color-accent-bg); } @media screen and (min-width:1175px) { - .layout-single-column .column-link[href="/lists"]:is(.active, :hover) + .list-panel, - .layout-single-column .list-panel:hover { + .app-body .column-link[href="/lists"]:is(.active, :hover) + .list-panel, + .app-body .list-panel:hover { display: block; animation: fadein .5s 1; } @@ -2436,14 +2451,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } @media screen and (max-width:1174px) { - .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { + .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; height: calc(4.2em + env(safe-area-inset-bottom)); bottom: 0; left: 0; z-index: 3; } - .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { + .app-body .columns-area__panels__pane--navigational .navigation-panel { width: 100vw; height: 4.2em; padding-bottom: env(safe-area-inset-bottom); @@ -2453,8 +2468,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-top: 1px solid var(--color-lines); border-left: 0; } - .layout-single-column .navigation-panel :is(.column-link, .navigation-panel__legal), - .layout-single-column .column-link--transparent:is(.active, .active:hover, :active) { + .app-body .navigation-panel :is(.column-link, .navigation-panel__legal), + .app-body .column-link--transparent:is(.active, .active:hover, :active) { flex: 0 0 20vw; margin: 6px 0 8px; padding: 4px 0 3px; @@ -2466,63 +2481,63 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-sizing: border-box; background-color: transparent; } - .layout-single-column + .app-body .navigation-panel:has(> *:nth-child(4):last-child) :is(.column-link, .navigation-panel__legal) { flex: 50vw; } - .layout-single-column + .app-body .navigation-panel:has(> *:nth-child(5):last-child) :is(.column-link, .navigation-panel__legal) { flex: calc(100vw / 3); } - .layout-single-column + .app-body .navigation-panel:has(> *:nth-child(6):last-child) :is(.column-link, .navigation-panel__legal) { flex: 25vw; } - .layout-single-column .column-link--transparent:is(.active, .active:hover, :active) { + .app-body .column-link--transparent:is(.active, .active:hover, :active) { margin: 6px 0 8px; padding: 4px 0 3px; border-radius: 8px; border: 0; background-color: #ffffff; } - .layout-single-column .column-link__icon { + .app-body .column-link__icon { margin: 0; } - .layout-single-column .column-link span { + .app-body .column-link span { padding-left: .5em; } - .layout-single-column .columns-area__panels__main { + .app-body .columns-area__panels__main { width: calc(100% - 285px); margin-left: -285px; } - .layout-single-column .columns-area__panels { + .app-body .columns-area__panels { padding-bottom: 6em; } - .layout-single-column .columns-area__panels .navigation-panel__legal { + .app-body .columns-area__panels .navigation-panel__legal { margin: 0; padding: 0; } - .layout-single-column .columns-area__panels .navigation-panel__legal .column-link--transparent { + .app-body .columns-area__panels .navigation-panel__legal .column-link--transparent { height: calc(100% - 13px); box-sizing: border-box; border: 0; } - .layout-single-column .navigation-panel .flex-spacer { + .app-body .navigation-panel .flex-spacer { display: none; } } @media screen and (max-width:889px) { - .layout-single-column .columns-area__panels__main { + .app-body .columns-area__panels__main { width: 100%; margin-left: -55px; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { - .layout-single-column .column-link--transparent:is(.active, .active:hover, :active) { + .app-body .column-link--transparent:is(.active, .active:hover, :active) { background-color: var(--color-bg); } } @@ -2532,34 +2547,34 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ‘€ Account view --------------- */ -.layout-single-column .account__header { +.app-body .account__header { border-radius: 0 0 8px 8px; margin-bottom: 10px; background-color: var(--color-content-bg); border: 1px solid var(--color-lines); } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .account__header { + .app-body .account__header { margin-top: 15px; border-radius: 8px; } } @media screen and (max-width:889px) { - .layout-single-column .account__header { + .app-body .account__header { border-left: 0; border-right: 0; border-radius: 0; } } -.layout-single-column .account__header__image { +.app-body .account__header__image { height: 159px; background-color: var(--color-secondary-bg); border-bottom: 0; } -.layout-single-column .account__header__bar { +.app-body .account__header__bar { border: 0; } -.layout-single-column .account__header__bar .avatar .account__avatar { +.app-body .account__header__bar .avatar .account__avatar { border-radius: 50%; border-width: 5px; width: 100px !important; @@ -2567,77 +2582,77 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-content-bg); border-color: var(--color-content-bg); } -.layout-single-column .account__header__tabs__name h1, -.layout-single-column .account__header__tabs__name h1 small { +.app-body .account__header__tabs__name h1, +.app-body .account__header__tabs__name h1 small { color: var(--color-content-fg); } -.layout-single-column .account__header__tabs__name h1 > span { +.app-body .account__header__tabs__name h1 > span { font-size: 18px; } -.layout-single-column .account__header__tabs__name h1 small { +.app-body .account__header__tabs__name h1 small { opacity: .7; } -.layout-single-column .account__header__tabs__name .icon-lock { +.app-body .account__header__tabs__name .icon-lock { vertical-align: bottom; } -.layout-single-column .account__header__content a { +.app-body .account__header__content a { color: var(--color-accent); text-decoration: none; } -.layout-single-column .account__header__content a:hover { +.app-body .account__header__content a:hover { text-decoration: underline; } -.layout-single-column .account__header__extra__links a strong { +.app-body .account__header__extra__links a strong { color: var(--color-content-fg-bold); } -.layout-single-column .account__header__account-note label { +.app-body .account__header__account-note label { margin-bottom: 0; } -.layout-single-column .account__header__account-note label, -.layout-single-column .account__header__account-note textarea::placeholder { +.app-body .account__header__account-note label, +.app-body .account__header__account-note textarea::placeholder { color: var(--color-content-fg-bold); opacity: .5; } -.layout-single-column .account__header__account-note textarea { +.app-body .account__header__account-note textarea { color: var(--color-content-fg); } -.layout-single-column .account__header__account-note textarea:focus { +.app-body .account__header__account-note textarea:focus { background-color: var(--color-accent-bg); } -.layout-single-column .account__header__badges .account-role { +.app-body .account__header__badges .account-role { border-radius: 8px; border-color: var(--color-accent); color: var(--color-accent); } -.layout-single-column .account-role svg { +.app-body .account-role svg { opacity: 1; } -.layout-single-column .account__header__extra__links a, -.layout-single-column .account__header__bio .account__header__content, -.layout-single-column .account__header__bio .account__header__fields dd { +.app-body .account__header__extra__links a, +.app-body .account__header__bio .account__header__content, +.app-body .account__header__bio .account__header__fields dd { color: var(--color-content-fg); } -.layout-single-column .account__header__bio .account__header__fields { +.app-body .account__header__bio .account__header__fields { background-color: var(--color-content-secondary-bg); border-radius: 8px; } @media (prefers-color-scheme: dark) { - .layout-single-column .account__header__bio .account__header__fields { + .app-body .account__header__bio .account__header__fields { background-color: var(--color-secondary-bg); } } -.layout-single-column .account__header__bio .account__header__fields:has(dl:only-child) { +.app-body .account__header__bio .account__header__fields:has(dl:only-child) { display: none; } -.layout-single-column .account__header__bio .account__header__fields dt { +.app-body .account__header__bio .account__header__fields dt { font-weight: bold; font-size: 12px; } -.layout-single-column .account__header__bio .account__header__fields :is(dl, .verified) { +.app-body .account__header__bio .account__header__fields :is(dl, .verified) { border-bottom: 0; position: relative; } -.layout-single-column .account__header__bio .account__header__fields dl:not(:last-child):after { +.app-body .account__header__bio .account__header__fields dl:not(:last-child):after { display: block; content: " "; height: 1px; @@ -2648,58 +2663,58 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu position: absolute; border-radius: 50px; } -.layout-single-column .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ +.app-body .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 0; } -.layout-single-column .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ +.app-body .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ margin-top: 0; border-top-width: 0; } -.layout-single-column .account__header__bio .account__header__fields .verified :is(a, dd) { +.app-body .account__header__bio .account__header__fields .verified :is(a, dd) { color: var(--color-accent); } -.layout-single-column .account__header__bio .account__header__fields :is(.verified dt, dt) { +.app-body .account__header__bio .account__header__fields :is(.verified dt, dt) { color: var(--color-content-fg); } -.layout-single-column .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ +.app-body .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ border-top: 0; border-right: 0; border-left: 0; background: none; } -.layout-single-column .account__header__extra .account__header__fields .verified dd > span:first-child { +.app-body .account__header__extra .account__header__fields .verified dd > span:first-child { vertical-align: bottom; } -.layout-single-column .account__header__extra .account__header__fields .verified__mark { +.app-body .account__header__extra .account__header__fields .verified__mark { float: left; margin-right: 2px; } -.layout-single-column .account__header__bio .account__header__fields .verified:last-child { +.app-body .account__header__bio .account__header__fields .verified:last-child { border-bottom: 0; } @media screen and (max-width:889px) { - .layout-single-column .account-timeline__header + article :is(.status__wrapper, .account) { + .app-body .account-timeline__header + article :is(.status__wrapper, .account) { border-left: 0; border-right: 0; border-radius: 0; } } -.layout-single-column .follow-request-banner, -.layout-single-column .moved-account-banner { +.app-body .follow-request-banner, +.app-body .moved-account-banner { background-color: var(--color-accent-bg); } -.layout-single-column .moved-account-banner { +.app-body .moved-account-banner { margin-bottom: 10px; border-radius: 8px; } -.layout-single-column .follow-request-banner__message, -.layout-single-column .moved-account-banner__message { +.app-body .follow-request-banner__message, +.app-body .moved-account-banner__message { color: var(--color-content-fg); } -.layout-single-column .moved-account-banner__message { +.app-body .moved-account-banner__message { font-weight: bold; } @@ -2707,50 +2722,50 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ✨ Explore tab -------------- */ @media screen and (min-width:890px) { - .layout-single-column .account__section-headline + .scrollable article:last-child .status__wrapper { + .app-body .account__section-headline + .scrollable article:last-child .status__wrapper { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } } /* #️⃣ Trending hashtags */ -.layout-single-column .trends__item__sparkline path:last-child { +.app-body .trends__item__sparkline path:last-child { stroke: var(--color-accent) !important; } -.layout-single-column .trends__item__sparkline path:first-child { +.app-body .trends__item__sparkline path:first-child { fill: var(--color-accent) !important; fill-opacity: 0.2 !important; } -.layout-single-column .explore__links { +.app-body .explore__links { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); overflow: hidden; margin-top: -1px; } @media screen and (max-width:889px) { - .layout-single-column .explore__links { + .app-body .explore__links { border-left: 0; border-right: 0; } } -.layout-single-column .columns-area__panels__main .trends__item { +.app-body .columns-area__panels__main .trends__item { background-color: var(--color-content-bg); border-bottom: 2px solid var(--color-content-secondary-bg); } -.layout-single-column .explore__links .trends__item:last-child { +.app-body .explore__links .trends__item:last-child { border-bottom: 0; } -.layout-single-column .trends__item__name, -.layout-single-column .trends__item__current { +.app-body .trends__item__name, +.app-body .trends__item__current { color: var(--color-fg-muted); } -.layout-single-column .trends__item__name a { +.app-body .trends__item__name a { color: var(--color-fg); } /* Hashtag header */ -.layout-single-column .hashtag-header { +.app-body .hashtag-header { font-size: 15px; padding: 22px 20px 24px; color: var(--color-content-fg); @@ -2758,13 +2773,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-top: 1px solid var(--color-lines); border-bottom: 0; } -.layout-single-column .hashtag-header__header { +.app-body .hashtag-header__header { margin-bottom: 0; } -.layout-single-column .hashtag-header__header h1 { +.app-body .hashtag-header__header h1 { color: var(--color-content-fg); } -.layout-single-column .hashtag-header .hashtag-header__header + div { +.app-body .hashtag-header .hashtag-header__header + div { color: var(--color-content-fg); font-size: 85%; opacity: .8; @@ -2773,34 +2788,34 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .hashtag-header { + .app-body .hashtag-header { margin-top: 15px; } } @media screen and (min-width:890px) { - .layout-single-column .hashtag-header { + .app-body .hashtag-header { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } - .layout-single-column .hashtag-header .hashtag-header__header button { + .app-body .hashtag-header .hashtag-header__header button { transform: translate(0, 8px); } } /* Account recommendations (For You Tab + User directory */ -.layout-single-column .scrollable .account-card { +.app-body .scrollable .account-card { margin: 0 0 10px; background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); } @media screen and (max-width:889px) { - .layout-single-column .scrollable .account-card { + .app-body .scrollable .account-card { margin: 0 10px 10px; } } -.layout-single-column .account-card__header { +.app-body .account-card__header { padding: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -2809,163 +2824,163 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 128px; overflow: hidden; } -.layout-single-column .scrollable .account-card__bio:after { +.app-body .scrollable .account-card__bio:after { background: linear-gradient(270deg, var(--color-content-bg), transparent); } -.layout-single-column .account-card__title__avatar .account__avatar { +.app-body .account-card__title__avatar .account__avatar { border: 0; border-radius: 50%; overflow: visible; } -.layout-single-column .account-card__title__avatar img { +.app-body .account-card__title__avatar img { border: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--color-content-bg); } -.layout-single-column .account-card__title .display-name bdi, -.layout-single-column .account-card__counters__item, -.layout-single-column .account-card__counters__item small { +.app-body .account-card__title .display-name bdi, +.app-body .account-card__counters__item, +.app-body .account-card__counters__item small { color: var(--color-content-fg-bold); } -.layout-single-column .account-card__counters__item small { +.app-body .account-card__counters__item small { opacity: .7; } -.layout-single-column .account-card__bio a { +.app-body .account-card__bio a { color: var(--color-accent); } -.layout-single-column .filter-form { +.app-body .filter-form { background-color: var(--color-accent-bg); border-radius: 8px; margin-bottom: 10px; } -.layout-single-column .filter-form__column { +.app-body .filter-form__column { padding: 10px 15px; } /* πŸ“° Trending stories */ -.layout-single-column .story { +.app-body .story { background-color: var(--color-content-bg); transition: background-color .2s; } -.layout-single-column .story:not(:last-child) { +.app-body .story:not(:last-child) { border-bottom: 2px solid var(--color-content-secondary-separator); } -.layout-single-column .story, -.layout-single-column .story__details__title { +.app-body .story, +.app-body .story__details__title { color: var(--color-content-fg); } -.layout-single-column .story:hover { +.app-body .story:hover { background-color: var(--color-content-bg-focus); } -.layout-single-column .story__details__publisher, -.layout-single-column .story__details__shared { +.app-body .story__details__publisher, +.app-body .story__details__shared { color: var(--color-fg); } -.layout-single-column .story .story__details__publisher, -.layout-single-column .story .story__details__shared { +.app-body .story .story__details__publisher, +.app-body .story .story__details__shared { transition: all .3s; } -.layout-single-column .story:is(:active, :focus, :hover) :is(.story__details__publisher, .story__details__shared) { +.app-body .story:is(:active, :focus, :hover) :is(.story__details__publisher, .story__details__shared) { color: var(--color-accent); } -.layout-single-column .story.expanded .story__thumbnail { +.app-body .story.expanded .story__thumbnail { margin: 0 0 -25px; } -.layout-single-column .story.expanded .story__thumbnail img { +.app-body .story.expanded .story__thumbnail img { width: calc(100% + 30px); margin: -15px -15px 0 -15px; border-radius: 0 0 0 0; } /* πŸ” Search field and search results */ -.layout-single-column .search { +.app-body .search { margin-bottom: 10px; } -.layout-single-column .search__input { +.app-body .search__input { border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .search__input::placeholder, -.layout-single-column .compose-form .spoiler-input__input::placeholder { +.app-body .search__input::placeholder, +.app-body .compose-form .spoiler-input__input::placeholder { font-weight: 500; color: var(--color-accent); } -.layout-single-column .search__input:focus { +.app-body .search__input:focus { border: 1px solid var(--color-accent); } -.layout-single-column .search__icon .icon { +.app-body .search__icon .icon { margin-right: 4px; transform: scale(.9); } -.layout-single-column .compose-panel .icon-search, -.layout-single-column .compose-panel .icon-search.active, -.layout-single-column .explore__search-header .icon-search { +.app-body .compose-panel .icon-search, +.app-body .compose-panel .icon-search.active, +.app-body .explore__search-header .icon-search { background-image: var(--icon-search-active); } -.layout-single-column .compose-panel .icon-search.active, -.layout-single-column .search__icon .icon-search.active { +.app-body .compose-panel .icon-search.active, +.app-body .search__icon .icon-search.active { opacity: 1; z-index: 1; } -.layout-single-column .explore__search-results { +.app-body .explore__search-results { background-color: transparent; overflow: hidden; } -.layout-single-column .explore__search-header { +.app-body .explore__search-header { background-color: transparent; } -.layout-single-column .explore__search-results .account { +.app-body .explore__search-results .account { padding-top: 16px; } -.layout-single-column .explore__search-results article:last-child > .account { +.app-body .explore__search-results article:last-child > .account { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .explore__search-results .trends__item { +.app-body .explore__search-results .trends__item { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .explore__search-results article:first-child > .trends__item, -.layout-single-column .search-results__section > .trends__item:first-child, -.layout-single-column .search-results__section > .account:first-child { +.app-body .explore__search-results article:first-child > .trends__item, +.app-body .search-results__section > .trends__item:first-child, +.app-body .search-results__section > .account:first-child { border-top: 1px solid var(--color-lines); } -.layout-single-column .explore__search-results article:last-child > .trends__item, -.layout-single-column .search-results__section > .trends__item:last-child, -.layout-single-column .search-results__section > .account:last-child { +.app-body .explore__search-results article:last-child > .trends__item, +.app-body .search-results__section > .trends__item:last-child, +.app-body .search-results__section > .account:last-child { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .search-results__section { +.app-body .search-results__section { background-color: var(--color-bg); border-bottom: 0; } -.layout-single-column .search-results__section__header { +.app-body .search-results__section__header { background-color: var(--color-content-secondary-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); border-bottom: 0; color: var(--color-content-fg); } -.layout-single-column .search-results__section__header button { +.app-body .search-results__section__header button { color: var(--color-accent); } @media screen and (min-width:890px) { - .layout-single-column .explore__search-results + .app-body .explore__search-results :is(article:last-child > .account, article:last-child > .trends__item, .load-more:last-child), - .layout-single-column .search-results__section:last-child > :is(.trends__item, .account):last-child { + .app-body .search-results__section:last-child > :is(.trends__item, .account):last-child { border-radius: 0 0 8px 8px; } } -.layout-single-column .account .account__details > span { +.app-body .account .account__details > span { color: var(--color-content-fg); } -.layout-single-column .account .account__details .verified-badge { +.app-body .account .account__details .verified-badge { color: var(--color-accent); } -.layout-single-column .account .account__details .verified-badge span { +.app-body .account .account__details .verified-badge span { font-weight: 500; } @keyframes fadein-short { @@ -2978,7 +2993,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu opacity: 1; } } -.layout-single-column .search__popout { +.app-body .search__popout { background-color: var(--color-content-bg); border-radius: 8px; box-shadow: none; @@ -2986,49 +3001,49 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border: 1px solid var(--color-lines); animation: .3s fadein-short 1; } -.layout-single-column .search__popout h4 { +.app-body .search__popout h4 { font-weight: bold; } -.layout-single-column .search__popout h4, -.layout-single-column .search__popout__menu__message, -.layout-single-column .search__popout__menu__item { +.app-body .search__popout h4, +.app-body .search__popout__menu__message, +.app-body .search__popout__menu__item { color: var(--color-content-fg); } -.layout-single-column .search__popout__menu__item { +.app-body .search__popout__menu__item { align-items: initial; } -.layout-single-column .search__popout__menu__item mark { +.app-body .search__popout__menu__item mark { color: var(--color-content-fg-bold); } -.layout-single-column .search__popout__menu__item .icon-button:is(:active, :focus, :hover) { +.app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover) { background-color: transparent; color: var(--color-accent-fg); } -.layout-single-column .search__popout__menu__item:is(.selected, :active, :focus, :hover), -.layout-single-column .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark { +.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover), +.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark { background-color: var(--color-accent); color: var(--color-accent-fg); } @media screen and (max-width:1174px) { - .layout-single-column .search { + .app-body .search { margin-bottom: 0; } - .layout-single-column .explore__search-header { + .app-body .explore__search-header { padding-top: 2px; } - .layout-single-column .search__input { + .app-body .search__input { padding: 13px; } - .layout-single-column .explore__search-header { + .app-body .explore__search-header { padding: 10px 0; } - .layout-single-column .search__icon .icon { + .app-body .search__icon .icon { top: 11px; } } @media screen and (max-width:889px) { - .layout-single-column .explore__search-header { + .app-body .explore__search-header { padding: 10px; } } @@ -3036,57 +3051,57 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* Dismissable banners */ -.layout-single-column .dismissable-banner { +.app-body .dismissable-banner { background-color: var(--color-accent); box-shadow: 0 5px var(--color-content-bg); border-radius: 0; border: 1px solid var(--color-lines); margin: 0; } -.layout-single-column .explore__links .dismissable-banner { +.app-body .explore__links .dismissable-banner { border: 0; } @media screen and (max-width:889px) { - .layout-single-column .dismissable-banner, - .layout-single-column .explore__links .dismissable-banner { + .app-body .dismissable-banner, + .app-body .explore__links .dismissable-banner { border-left: 0; border-right: 0; } } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .dismissable-banner { + .app-body .dismissable-banner { margin-top: 10px; } - .layout-single-column .explore__links .dismissable-banner { + .app-body .explore__links .dismissable-banner { margin-top: 0; } } -.layout-single-column .dismissable-banner__message, -.layout-single-column .dismissable-banner__action .icon-button { +.app-body .dismissable-banner__message, +.app-body .dismissable-banner__action .icon-button { color: var(--color-accent-fg); } -.layout-single-column .dismissable-banner__message h1 { +.app-body .dismissable-banner__message h1 { color: var(--color-accent-fg); margin-top: 10px; } -.layout-single-column .dismissable-banner__message__actions__wrapper { +.app-body .dismissable-banner__message__actions__wrapper { flex-flow: row-reverse; } -.layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { +.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: linear-gradient(to bottom, rgba(247, 105, 2, 0.8), rgba(247, 105, 2, 0.5)); padding-left: 10px; padding-right: 10px; } -.layout-single-column .dismissable-banner__background-image { +.app-body .dismissable-banner__background-image { display: none; } -.layout-single-column .dismissable-banner__message__actions .button, -.layout-single-column .dismissable-banner__message__actions .button.button-tertiary { +.app-body .dismissable-banner__message__actions .button, +.app-body .dismissable-banner__message__actions .button.button-tertiary { line-height: 28px; padding: 6px 17px; } @media (prefers-color-scheme: dark) { - .layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: linear-gradient(to top, rgba(230, 137, 51, .5), rgba(230, 137, 51, .3)); } } @@ -3095,16 +3110,16 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ”” Notifications ---------------- */ -.layout-single-column .status.muted +.app-body .status.muted :is(.status__content, .status__content a, .status__content p, .status__display-name strong), -.layout-single-column .attachment-list__list a { +.app-body .attachment-list__list a { color: var(--color-content-fg-muted); } -.layout-single-column .notification.unread::before, -.layout-single-column .status__wrapper.unread::before { +.app-body .notification.unread::before, +.app-body .status__wrapper.unread::before { background-color: var(--color-accent); width: 8px; border: 0; @@ -3115,35 +3130,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu left: 5px; z-index: 1; } -.layout-single-column .notification__message { +.app-body .notification__message { padding: 12px 12px 5px; background-color: var(--color-content-bg); color: var(--color-content-fg-bold); transition: all .3s; } -.layout-single-column .notification__display-name { +.app-body .notification__display-name { font-weight: bold; } -.layout-single-column .notification__report { +.app-body .notification__report { background-color: var(--color-content-bg); border-bottom: 0; padding-top: 10px; gap: 15px; } -.layout-single-column .notification__report__details { +.app-body .notification__report__details { color: var(--color-content-fg); } @media screen and (min-width:889px) { - .layout-single-column .notification__message { + .app-body .notification__message { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } - .layout-single-column .notification__report { + .app-body .notification__report { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } } -.layout-single-column .notification__message .icon { +.app-body .notification__message .icon { color: var(--color-accent); width: 18px; margin-left: 38px; @@ -3151,14 +3166,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-position: center right; } @media screen and (max-width:889px) { - .layout-single-column .notification__message .icon { + .app-body .notification__message .icon { margin-left: 34px; } } -.layout-single-column .notification .status__wrapper { +.app-body .notification .status__wrapper { padding-top: 0; } -.layout-single-column +.app-body :is(.notification-favourite, .notification-reblog, .notification-poll, @@ -3166,22 +3181,22 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .status__action-bar { display: none; } -.layout-single-column .account { +.app-body .account { background-color: var(--color-content-bg); border-bottom: 0; padding-left: 22px; padding-top: 4px; } -.layout-single-column .explore__search-results .account { +.app-body .explore__search-results .account { padding-top: 16px; } -.layout-single-column +.app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) .display-name__account { display: block; } -.layout-single-column +.app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) .display-name { @@ -3189,94 +3204,94 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } @media screen and (min-width:890px) { - .layout-single-column .account { + .app-body .account { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } - .layout-single-column .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 32px; padding-right: 22px; } } @media screen and (max-width:889px) { - .layout-single-column .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 27px; } } @media screen and (max-width:1174px) { - .layout-single-column .account { + .app-body .account { padding-left: 18px; } } -.layout-single-column .notification .account__relationship .icon-button { +.app-body .notification .account__relationship .icon-button { padding: 5px; border-radius: 8px; } -.layout-single-column .notification .account__relationship .icon-button:first-child { +.app-body .notification .account__relationship .icon-button:first-child { background-color: rgba(121, 189, 154, 0.3); } -.layout-single-column .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) { +.app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) { background-color: #79bd9a; } -.layout-single-column .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) .icon-check { +.app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } -.layout-single-column .notification .account__relationship .icon-button:last-child { +.app-body .notification .account__relationship .icon-button:last-child { background-color: rgba(223, 64, 90, 0.3); } -.layout-single-column .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) { +.app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) { background-color: #df405a; } -.layout-single-column .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) .icon-times { +.app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } /* πŸ“‹ Lists tab */ -.layout-single-column .column-inline-form { +.app-body .column-inline-form { background-color: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); border-radius: 0 0 8px 8px; margin-bottom: 10px; } @media screen and (max-width:1174px) { - .layout-single-column .column-inline-form { + .app-body .column-inline-form { margin-top: 10px; } } @media screen and (max-width:889px) { - .layout-single-column .column-inline-form { + .app-body .column-inline-form { margin-left: 10px; margin-right: 10px; } } -.layout-single-column .column-inline-form label :is(input, input:focus) { +.app-body .column-inline-form label :is(input, input:focus) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 8px; } -.layout-single-column .column-inline-form label input:focus { +.app-body .column-inline-form label input:focus { box-shadow: 0 0 0 1px var(--color-accent); } -.layout-single-column :is(.column-subheading, .columns-area__panels__main .column-link) { +.app-body :is(.column-subheading, .columns-area__panels__main .column-link) { background-color: var(--color-content-bg); color: var(--color-fg); } -.layout-single-column .item-list .column-subheading { +.app-body .item-list .column-subheading { color: var(--color-fg-muted); border: 1px solid var(--color-lines); border-bottom: 0; border-radius: 8px 8px 0 0; } @media screen and (max-width:889px) { - .layout-single-column .item-list .column-subheading { + .app-body .item-list .column-subheading { border-left: 0; border-right: 0; border-radius: 0; } } -.layout-single-column .columns-area__panels__main .column-link { +.app-body .columns-area__panels__main .column-link { margin-left: 0; width: 100%; border-left: 1px solid var(--color-lines); @@ -3284,33 +3299,33 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-bottom: 2px solid var(--color-content-secondary-separator); box-sizing: border-box; } -.layout-single-column .columns-area__panels__main .column-link:hover { +.app-body .columns-area__panels__main .column-link:hover { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } -.layout-single-column .columns-area__panels__main article:last-child .column-link { +.app-body .columns-area__panels__main article:last-child .column-link { border-bottom: 1px solid var(--color-lines); border-radius: 0 0 8px 8px; } @media screen and (max-width:889px) { - .layout-single-column .columns-area__panels__main .column-link { + .app-body .columns-area__panels__main .column-link { border-left: 0; border-right: 0; } - .layout-single-column .columns-area__panels__main article:last-child .column-link { + .app-body .columns-area__panels__main article:last-child .column-link { border-radius: 0; } } /* List adder dialog */ -.layout-single-column :is(.list-adder, .list-adder__account, .list-adder__lists) { +.app-body :is(.list-adder, .list-adder__account, .list-adder__lists) { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .list-adder__account { +.app-body .list-adder__account { margin-top: 12px; } -.layout-single-column .list-adder .column-inline-form { +.app-body .list-adder .column-inline-form { border-radius: 0; } .list-adder .list { @@ -3319,69 +3334,69 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* βž• Follow requests */ -.layout-single-column #Follow-requests { +.app-body #Follow-requests { margin-bottom: 0; z-index: 0; } -.layout-single-column .account-authorize__wrapper { +.app-body .account-authorize__wrapper { margin: 0; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } -.layout-single-column article:last-child > .account-authorize__wrapper, -.layout-single-column article:last-child > .account-authorize__wrapper .account--panel { +.app-body article:last-child > .account-authorize__wrapper, +.app-body article:last-child > .account-authorize__wrapper .account--panel { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .account-authorize { +.app-body .account-authorize { background-color: var(--color-content-bg); padding: 20px } -.layout-single-column .account--panel { +.app-body .account--panel { background-color: var(--color-content-bg); border: 0; padding: 0 5px; } -.layout-single-column .account__header__content { +.app-body .account__header__content { color: var(--color-content-fg); } -.layout-single-column .account--panel__button { +.app-body .account--panel__button { padding: 0 5px 12px 5px; } -.layout-single-column .account--panel__button .icon-button { +.app-body .account--panel__button .icon-button { padding: 10px; box-sizing: border-box; width: 100%; border-radius: 8px; transition: all .3s; } -.layout-single-column .account--panel button .icon-check { +.app-body .account--panel button .icon-check { background-image: var(--icon-check); } -.layout-single-column .account--panel button:is(:active, :focus, :hover) .icon-check { +.app-body .account--panel button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } -.layout-single-column .account--panel__button:first-child .icon-button { +.app-body .account--panel__button:first-child .icon-button { background-color: rgba(121, 189, 154, 0.3); } -.layout-single-column .account--panel__button:first-child .icon-button:is(:hover, :active) { +.app-body .account--panel__button:first-child .icon-button:is(:hover, :active) { background-color: #79bd9a; } -.layout-single-column .account--panel button .icon-times { +.app-body .account--panel button .icon-times { background-image: var(--icon-reject); } -.layout-single-column .account--panel button:is(:active, :focus, :hover) .icon-times { +.app-body .account--panel button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } -.layout-single-column .account--panel__button:nth-child(2) .icon-button { +.app-body .account--panel__button:nth-child(2) .icon-button { background-color: rgba(223, 64, 90, 0.3); } -.layout-single-column .account--panel__button:nth-child(2) .icon-button:is(:hover, :active) { +.app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active) { background-color: #df405a; } @media screen and (max-width:1174px) { - .layout-single-column #Follow-requests + .column-back-button--slim .column-back-button { + .app-body #Follow-requests + .column-back-button--slim .column-back-button { position: absolute; right: 0; margin: 0; @@ -3389,7 +3404,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } @media screen and (max-width:889px) { - .layout-single-column .account-authorize__wrapper { + .app-body .account-authorize__wrapper { border-left: 0; border-right: 0; } @@ -3398,126 +3413,126 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ⏺️ Other UI components : buttons, toggles, ... ----------------------------------------- */ -.layout-single-column .button, -.layout-single-column .account__header__tabs__buttons .icon-button { +.app-body .button, +.app-body .account__header__tabs__buttons .icon-button { border-radius: 8px; } -.layout-single-column .button, -.layout-single-column .button.logo-button, -.layout-single-column .rules-list li:before, -.layout-single-column .icon-with-badge__badge { +.app-body .button, +.app-body .button.logo-button, +.app-body .rules-list li:before, +.app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); transition: all .2s; } -.layout-single-column .button:disabled, -.layout-single-column .button.disabled { +.app-body .button:disabled, +.app-body .button.disabled { opacity: .7; } -.layout-single-column .text-icon-button.active, -.layout-single-column .button.button-tertiary, -.layout-single-column .account__header__fields a, -.layout-single-column .account__header__bio .account__header__fields a, -.layout-single-column .reply-indicator__content a.unhandled-link, -.layout-single-column .status__content a, -.layout-single-column .status__content a.hashtag, -.layout-single-column .status__content a.unhandled-link, -.layout-single-column .column-back-button, -.layout-single-column .about__section__title, -.layout-single-column .prose a, -.layout-single-column .column-link--transparent.active, -.layout-single-column .column-header > .column-header__back-button, -.layout-single-column .column-header__back-button, -.layout-single-column .interaction-modal__icon, -.layout-single-column .status__content a.mention, -.layout-single-column .status__content__read-more-button, -.layout-single-column .link-button, -.layout-single-column .translate-button button, -.layout-single-column .status__content__translate-button, -.layout-single-column .status__action-bar__dropdown .icon-button.active, -.layout-single-column .account__relationship .icon-button.active, -.layout-single-column .account__header__tabs__buttons .icon-button.active, -.layout-single-column .text-btn, -.layout-single-column .detailed-status__action-bar-dropdown .icon-button, -.layout-single-column .notification-bar-action { +.app-body .text-icon-button.active, +.app-body .button.button-tertiary, +.app-body .account__header__fields a, +.app-body .account__header__bio .account__header__fields a, +.app-body .reply-indicator__content a.unhandled-link, +.app-body .status__content a, +.app-body .status__content a.hashtag, +.app-body .status__content a.unhandled-link, +.app-body .column-back-button, +.app-body .about__section__title, +.app-body .prose a, +.app-body .column-link--transparent.active, +.app-body .column-header > .column-header__back-button, +.app-body .column-header__back-button, +.app-body .interaction-modal__icon, +.app-body .status__content a.mention, +.app-body .status__content__read-more-button, +.app-body .link-button, +.app-body .translate-button button, +.app-body .status__content__translate-button, +.app-body .status__action-bar__dropdown .icon-button.active, +.app-body .account__relationship .icon-button.active, +.app-body .account__header__tabs__buttons .icon-button.active, +.app-body .text-btn, +.app-body .detailed-status__action-bar-dropdown .icon-button, +.app-body .notification-bar-action { color: var(--color-accent); } -.layout-single-column .icon-button, -.layout-single-column .icon-button.inverted, -.layout-single-column .reply-indicator__content .status__content__spoiler-link, -.layout-single-column .status__content .status__content__spoiler-link { +.app-body .icon-button, +.app-body .icon-button.inverted, +.app-body .reply-indicator__content .status__content__spoiler-link, +.app-body .status__content .status__content__spoiler-link { color: var(--color-content-fg); } -.layout-single-column .reply-indicator__content .status__content__spoiler-link, -.layout-single-column .status__content .status__content__spoiler-link { +.app-body .reply-indicator__content .status__content__spoiler-link, +.app-body .status__content .status__content__spoiler-link { background-color: var(--color-accent-bg); border-radius: 8px; } -.layout-single-column .account__header__tabs__buttons .icon-button { +.app-body .account__header__tabs__buttons .icon-button { padding: 6px; border: 0; color: var(--color-content-fg); background-color: var(--color-content-secondary-bg); } -.layout-single-column .account__header__tabs__buttons .icon-button:hover { +.app-body .account__header__tabs__buttons .icon-button:hover { background-color: var(--color-accent-bg); color: var(--color-accent); } -.layout-single-column .icon-button:is(:active, :focus, :hover) { +.app-body .icon-button:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-accent); } -.layout-single-column .language-dropdown__dropdown { +.app-body .language-dropdown__dropdown { background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); box-shadow: 0 0 5px rgba(0, 0, 0, .15); } -.layout-single-column .language-dropdown__dropdown__results__item { +.app-body .language-dropdown__dropdown__results__item { border-radius: 8px; } -.layout-single-column .language-dropdown__dropdown__results__item.active, -.layout-single-column .language-dropdown__dropdown__results__item.active:hover { +.app-body .language-dropdown__dropdown__results__item.active, +.app-body .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { +.app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } -.layout-single-column .language-dropdown__dropdown__results__item__native-name { +.app-body .language-dropdown__dropdown__results__item__native-name { font-weight: bold; } -.layout-single-column .language-dropdown__dropdown__results__item__common-name { +.app-body .language-dropdown__dropdown__results__item__common-name { opacity: .7; } -.layout-single-column +.app-body :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-content-fg); } -.layout-single-column +.app-body .language-dropdown__dropdown__results__item:is(.active, .active:hover) :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-accent-fg); } -.layout-single-column +.app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) :is(.language-dropdown__dropdown__results__item__native-name, .language-dropdown__dropdown__results__item__common-name) { color: var(--color-accent); } -.layout-single-column .button:not(.button-secondary):is(:active, :focus, :hover), -.layout-single-column .button.button-tertiary:is(:active, :focus, :hover), -.layout-single-column .button.logo-button:is(:active, :focus, :hover) { +.app-body .button:not(.button-secondary):is(:active, :focus, :hover), +.app-body .button.button-tertiary:is(:active, :focus, :hover), +.app-body .button.logo-button:is(:active, :focus, :hover) { background-color: var(--color-accent-focus); } /* ⏺️ Toggles */ -.layout-single-column .setting-toggle__label { +.app-body .setting-toggle__label { vertical-align: top; } -.layout-single-column .react-toggle-track { +.app-body .react-toggle-track { background-color: var(--color-accent-lines); box-shadow: 0 0 0 20px var(--color-accent-lines) inset, @@ -3525,126 +3540,126 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 0 0 0 1px var(--color-accent-lines) inset, 0 0 0 1px var(--color-accent-lines) inset } -.layout-single-column .react-toggle-thumb { +.app-body .react-toggle-thumb { border: 0; } -.layout-single-column .react-toggle.react-toggle--checked .react-toggle-track, -.layout-single-column .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, -.layout-single-column .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { +.app-body .react-toggle.react-toggle--checked .react-toggle-track, +.app-body .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, +.app-body .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-accent); } -.layout-single-column .react-toggle--checked .react-toggle-thumb { +.app-body .react-toggle--checked .react-toggle-thumb { border-color: var(--color-accent); } -.layout-single-column .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { +.app-body .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-accent-focus); } /* ⏺️ Radio buttons */ -.layout-single-column .radio-button { +.app-body .radio-button { color: var(--color-content-fg); } -.layout-single-column .radio-button__input { +.app-body .radio-button__input { border-width: 2px; border-color: var(--color-content-fg-muted); background-color: var(--color-content-bg); } -.layout-single-column .radio-button__input.checked { +.app-body .radio-button__input.checked { border-color: var(--color-accent); background-color: var(--color-accent); } -.layout-single-column .dropdown-menu { +.app-body .dropdown-menu { border: 1px solid var(--color-lines); border-radius: 8px; } -.layout-single-column .dropdown-menu, -.layout-single-column .dropdown-menu__container__header, -.layout-single-column .dropdown-menu__item.edited-timestamp__history__item, -.layout-single-column .dropdown-menu__item :is(a, button) { +.app-body .dropdown-menu, +.app-body .dropdown-menu__container__header, +.app-body .dropdown-menu__item.edited-timestamp__history__item, +.app-body .dropdown-menu__item :is(a, button) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-color: var(--color-lines); } -.layout-single-column .dropdown-menu__item a, -.layout-single-column .dropdown-menu__arrow:before { +.app-body .dropdown-menu__item a, +.app-body .dropdown-menu__arrow:before { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; } -.layout-single-column .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) { +.app-body .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) { background: var(--color-accent); color: var(--color-accent-fg); outline: 0; } -.layout-single-column .dropdown-menu__separator { +.app-body .dropdown-menu__separator { border-color: var(--color-content-secondary-separator); } -.layout-single-column .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active), -.layout-single-column .privacy-dropdown__option:is(.active, .active:hover, :hover) { +.app-body .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active), +.app-body .privacy-dropdown__option:is(.active, .active:hover, :hover) { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content, -.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content strong, -.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content, -.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, -.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active .icon-button, -.layout-single-column .privacy-dropdown .icon-button.inverted.active { +.app-body .privacy-dropdown__option.active .privacy-dropdown__option__content, +.app-body .privacy-dropdown__option.active .privacy-dropdown__option__content strong, +.app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content, +.app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, +.app-body .privacy-dropdown.active .privacy-dropdown__value.active .icon-button, +.app-body .privacy-dropdown .icon-button.inverted.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe { background-image: var(--icon-globe-visibility-inv); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock { background-image: var(--icon-unlock-inv); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock { background-image: var(--icon-lock-inv); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { background-image: var(--icon-at-inv); } -.layout-single-column .button.button-tertiary:is(.button--confirmation, .button--destructive) { +.app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) { background-color: transparent; } -.layout-single-column .button.button-tertiary.button--confirmation { +.app-body .button.button-tertiary.button--confirmation { color: #4e8a6b; background-color: rgba(121, 189, 154, 0.3); } -.layout-single-column .button.button-tertiary.button--destructive { +.app-body .button.button-tertiary.button--destructive { color: #df405a; background-color: rgba(223, 64, 90, 0.3); } -.layout-single-column .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { +.app-body .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { background-color: #79bd9a; color: #ffffff; } -.layout-single-column .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { +.app-body .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { background-color: #df405a; color: #ffffff; } @media (prefers-color-scheme: dark) { - .layout-single-column .button.button-tertiary.button--confirmation { + .app-body .button.button-tertiary.button--confirmation { color: #72cb9d; } - .layout-single-column .button.button-tertiary.button--destructive { + .app-body .button.button-tertiary.button--destructive { color: #f3637b; } } -.layout-single-column .app-body +.app-body .app-body :is(.block-modal__cancel-button, .confirmation-modal__cancel-button, .confirmation-modal__secondary-button, .mute-modal__cancel-button) { background-color: transparent; } -.layout-single-column .status__content a.hashtag { +.app-body .status__content a.hashtag { color: var(--color-accent); } @@ -3652,102 +3667,102 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ–±οΈ Interaction modals --------------------- */ -.layout-single-column .modal-root__modal { +.app-body .modal-root__modal { border: 1px solid var(--color-lines); } -.layout-single-column .interaction-modal { +.app-body .interaction-modal { background-color: var(--color-content-bg); } -.layout-single-column .interaction-modal, -.layout-single-column .interaction-modal__lead h3 { +.app-body .interaction-modal, +.app-body .interaction-modal__lead h3 { color: var(--color-content-fg); } -.layout-single-column .interaction-modal__lead p, -.layout-single-column .interaction-modal__choices__choice p { +.app-body .interaction-modal__lead p, +.app-body .interaction-modal__choices__choice p { color: var(--color-fg); } -.layout-single-column .interaction-modal__icon { +.app-body .interaction-modal__icon { vertical-align: middle; } -.layout-single-column .interaction-modal p { +.app-body .interaction-modal p { color: var(--color-content-fg); } -.layout-single-column .interaction-modal p.hint { +.app-body .interaction-modal p.hint { color: var(--color-content-fg-muted); } -.layout-single-column .interaction-modal :is(.button, .button.button-tertiary) { +.app-body .interaction-modal :is(.button, .button.button-tertiary) { padding: 10px 18px; } -.layout-single-column .interaction-modal .button.button-tertiary:hover { +.app-body .interaction-modal .button.button-tertiary:hover { background-color: var(--color-content-secondary-separator); } -.layout-single-column .copypaste input, -.layout-single-column .interaction-modal__login__input { +.app-body .copypaste input, +.app-body .interaction-modal__login__input { border-color: var(--color-accent); background-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } -.layout-single-column .interaction-modal__login.expanded .interaction-modal__login__input { +.app-body .interaction-modal__login.expanded .interaction-modal__login__input { border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .interaction-modal__login__input input::placeholder { +.app-body .interaction-modal__login__input input::placeholder { color: var(--color-accent); } -.layout-single-column .interaction-modal__login.focused .interaction-modal__login__input { +.app-body .interaction-modal__login.focused .interaction-modal__login__input { background-color: var(--color-content-bg); border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); } -.layout-single-column .interaction-modal__login .search__popout { +.app-body .interaction-modal__login .search__popout { border-color: var(--color-lines); } -.layout-single-column .interaction-modal .copypaste button { +.app-body .interaction-modal .copypaste button { padding: 8px 18px; } -.layout-single-column .modal-root__overlay { +.app-body .modal-root__overlay { background-color: hsla(0, 0%, 1%, 0.7); } -.layout-single-column .modal-root__modal, -.layout-single-column .boost-modal__container, -.layout-single-column .mute-modal__container, -.layout-single-column .block-modal__container { +.app-body .modal-root__modal, +.app-body .boost-modal__container, +.app-body .mute-modal__container, +.app-body .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .boost-modal__container { +.app-body .boost-modal__container { margin-bottom: -11px; } -.layout-single-column .confirmation-modal__container, -.layout-single-column .mute-modal__container, -.layout-single-column .block-modal__container { +.app-body .confirmation-modal__container, +.app-body .mute-modal__container, +.app-body .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .block-modal__action-bar, -.layout-single-column .boost-modal__action-bar, -.layout-single-column .confirmation-modal__action-bar, -.layout-single-column .mute-modal__action-bar { +.app-body .block-modal__action-bar, +.app-body .boost-modal__action-bar, +.app-body .confirmation-modal__action-bar, +.app-body .mute-modal__action-bar { background-color: var(--color-accent-bg); } -.layout-single-column .block-modal__action-bar > div, -.layout-single-column .boost-modal__action-bar > div, -.layout-single-column .confirmation-modal__action-bar > div, -.layout-single-column .mute-modal__action-bar > div, -.layout-single-column .boost-modal__container .status__content__text, -.layout-single-column .boost-modal__container .display-name strong.display-name__html, -.layout-single-column .boost-modal__container .status__info, -.layout-single-column .boost-modal__container .status__relative-time time, -.layout-single-column .boost-modal__container .status.light .status__visibility-icon { +.app-body .block-modal__action-bar > div, +.app-body .boost-modal__action-bar > div, +.app-body .confirmation-modal__action-bar > div, +.app-body .mute-modal__action-bar > div, +.app-body .boost-modal__container .status__content__text, +.app-body .boost-modal__container .display-name strong.display-name__html, +.app-body .boost-modal__container .status__info, +.app-body .boost-modal__container .status__relative-time time, +.app-body .boost-modal__container .status.light .status__visibility-icon { color: var(--color-content-fg); } -.layout-single-column .actions-modal ul li:not(:empty) a { +.app-body .actions-modal ul li:not(:empty) a { color: var(--color-content-fg); } -.layout-single-column .actions-modal ul li:not(:empty) +.app-body .actions-modal ul li:not(:empty) a:is(.active, .active button, :active, @@ -3762,110 +3777,110 @@ a:is(.active, /* Media modals */ -.layout-single-column .modal-root__modal.media-modal { +.app-body .modal-root__modal.media-modal { background-color: rgba(255, 255, 255, .8); } -.layout-single-column .media-modal__overlay .picture-in-picture__footer { +.app-body .media-modal__overlay .picture-in-picture__footer { background-color: transparent; } -.layout-single-column .media-modal__nav, -.layout-single-column .media-modal__overlay .picture-in-picture__footer .icon-button { +.app-body .media-modal__nav, +.app-body .media-modal__overlay .picture-in-picture__footer .icon-button { color: var(--color-content-fg); } -.layout-single-column .media-modal__page-dot { +.app-body .media-modal__page-dot { background-color: var(--color-content-fg); } @media (prefers-color-scheme: dark) { - .layout-single-column .modal-root__modal.media-modal { + .app-body .modal-root__modal.media-modal { background-color: rgba(0, 0, 0, .6); } } /* Report modals */ -.layout-single-column .report-dialog-modal__container { +.app-body .report-dialog-modal__container { border-top: 0; } -.layout-single-column .report-dialog-modal__lead { +.app-body .report-dialog-modal__lead { color: var(--color-content-fg-muted); } -.layout-single-column .report-dialog-modal .poll__option.dialog-option { +.app-body .report-dialog-modal .poll__option.dialog-option { border-color: var(--color-lines); } -.layout-single-column .report-dialog-modal .dialog-option .poll__input { +.app-body .report-dialog-modal .dialog-option .poll__input { border-color: var(--color-accent); } -.layout-single-column .report-dialog-modal .dialog-option .poll__input.active { +.app-body .report-dialog-modal .dialog-option .poll__input.active { border-color: var(--color-accent); background-color: var(--color-accent); } -.layout-single-column .report-dialog-modal .poll__option.dialog-option>.poll__option__text { +.app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text { color: var(--color-content-fg); } -.layout-single-column .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { +.app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { color: var(--color-content-fg-bold) } -.layout-single-column .report-modal__comment, -.layout-single-column .report-modal__container { +.app-body .report-modal__comment, +.app-body .report-modal__container { border-color: var(--color-lines); } -.layout-single-column .report-modal__comment .setting-text-label { +.app-body .report-modal__comment .setting-text-label { color: var(--color-content-fg); } -.layout-single-column .report-dialog-modal .status__content__text p { +.app-body .report-dialog-modal .status__content__text p { color: var(--color-content-fg); } /* πŸ–ΌοΈ Picture in Picture */ -.layout-single-column .picture-in-picture { +.app-body .picture-in-picture { box-shadow: 0 0 5px rgba(0, 0, 0, .2); border-radius: 8px; } -.layout-single-column .picture-in-picture__footer, -.layout-single-column .picture-in-picture__header { +.app-body .picture-in-picture__footer, +.app-body .picture-in-picture__header { background-color: var(--color-content-bg); } -.layout-single-column .picture-in-picture__header .display-name span { +.app-body .picture-in-picture__header .display-name span { color: var(--color-content-fg-muted); } /* ⏯️ Video controls */ -.layout-single-column .video-player__seek__progress, -.layout-single-column .video-player__volume__handle, -.layout-single-column .video-player__volume__current, -.layout-single-column .video-player__seek__handle { +.app-body .video-player__seek__progress, +.app-body .video-player__volume__handle, +.app-body .video-player__volume__current, +.app-body .video-player__seek__handle { background-color: var(--color-accent); } /* πŸ“„ Meta ------- */ -.layout-single-column .link-footer p, -.layout-single-column .link-footer a { +.app-body .link-footer p, +.app-body .link-footer a { color: var(--color-fg-muted); } /* Server banner */ -.layout-single-column .server-banner__introduction { +.app-body .server-banner__introduction { display: none; } -.layout-single-column .server-banner { +.app-body .server-banner { padding: 0 0 20px; } -.layout-single-column .server-banner__hero { +.app-body .server-banner__hero { border-radius: 8px 8px 0 0; margin-bottom: 0; } -.layout-single-column .server-banner__description { +.app-body .server-banner__description { padding: 20px 15px 20px; margin-bottom: 0; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .server-banner__meta { +.app-body .server-banner__meta { padding: 0 15px 20px; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); @@ -3876,53 +3891,53 @@ a:is(.active, border-radius: 0 0 8px 8px; align-items: end; } -.layout-single-column .server-banner h4 { +.app-body .server-banner h4 { color: var(--color-fg); font-size: 80%; } -.layout-single-column .server-banner__number { +.app-body .server-banner__number { color: var(--color-content-fg-bold); } -.layout-single-column .server-banner__number-label { +.app-body .server-banner__number-label { color: var(--color-content-fg); } -.layout-single-column .server-banner .account { +.app-body .server-banner .account { background-color: transparent; box-shadow: none; padding: 0; border-left: 0; border-right: 0; } -.layout-single-column .server-banner__meta__column:first-child { +.app-body .server-banner__meta__column:first-child { width: calc(60% - 5px); } -.layout-single-column .server-banner__meta__column:nth-child(2) { +.app-body .server-banner__meta__column:nth-child(2) { width: calc(40% - 5px); } -.layout-single-column .server-banner .button.button-secondary { +.app-body .server-banner .button.button-secondary { padding: 10px; margin: 10px 0; } -.layout-single-column .button.button-secondary, -.layout-single-column .button.button-tertiary { +.app-body .button.button-secondary, +.app-body .button.button-tertiary { border: 0; background-color: var(--color-accent-bg); color: var(--color-accent); } -.layout-single-column .button:is(.button-secondary, .button-tertiary):hover { +.app-body .button:is(.button-secondary, .button-tertiary):hover { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .sign-in-banner .button, -.layout-single-column .button:is(.button-secondary, .button-tertiary) { +.app-body .sign-in-banner .button, +.app-body .button:is(.button-secondary, .button-tertiary) { padding: 10px 18px; } @media screen and (max-width:1174px) { - .layout-single-column .button.button-tertiary { + .app-body .button.button-tertiary { padding: 7px 18px; } } -.layout-single-column .sign-in-banner p { +.app-body .sign-in-banner p { color: var(--color-fg); opacity: .5; } @@ -3930,131 +3945,131 @@ a:is(.active, /* πŸ€— Onboarding */ -.layout-single-column .scrollable.follow-recommendations-container, -.layout-single-column .column-list { +.app-body .scrollable.follow-recommendations-container, +.app-body .column-list { background-color: var(--color-content-bg); } -.layout-single-column .column-title .logo { +.app-body .column-title .logo { display: none; } -.layout-single-column .column-title h3, -.layout-single-column .column-title p { +.app-body .column-title h3, +.app-body .column-title p { color: var(--color-content-fg); } -.layout-single-column .column-list { +.app-body .column-list { border: 0; } -.layout-single-column .account__note { +.app-body .account__note { color: var(--color-content-fg-muted); } -.layout-single-column .onboarding__steps__item, -.layout-single-column .onboarding__link { +.app-body .onboarding__steps__item, +.app-body .onboarding__link { background-color: var(--color-content-secondary-bg); transition: all .2s; } -.layout-single-column .onboarding__steps__item:is(:active, :focus, :hover), -.layout-single-column .onboarding__link:is(:active, :focus, :hover) { +.app-body .onboarding__steps__item:is(:active, :focus, :hover), +.app-body .onboarding__link:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } -.layout-single-column .onboarding__steps__item__icon, -.layout-single-column .onboarding__steps__item__description h6, -.layout-single-column .onboarding__link { +.app-body .onboarding__steps__item__icon, +.app-body .onboarding__steps__item__description h6, +.app-body .onboarding__link { color: var(--color-accent); } -.layout-single-column .onboarding__steps__item__description p, -.layout-single-column .onboarding__lead, -.layout-single-column .onboarding__lead strong { +.app-body .onboarding__steps__item__description p, +.app-body .onboarding__lead, +.app-body .onboarding__lead strong { color: var(--color-content-fg); } -.layout-single-column .onboarding__steps__item__go svg path, -.layout-single-column .onboarding__link svg path { +.app-body .onboarding__steps__item__go svg path, +.app-body .onboarding__link svg path { fill: var(--color-accent); } -.layout-single-column .follow-recommendations { +.app-body .follow-recommendations { background-color: var(--color-content-bg); } -.layout-single-column .follow-recommendations .account { +.app-body .follow-recommendations .account { border-left: 0; border-right: 0; margin-bottom: 15px; } -.layout-single-column .follow-recommendations .account__note { +.app-body .follow-recommendations .account__note { color: var(--color-content-fg); opacity: .7; } -.layout-single-column .follow-recommendations .account__note p { +.app-body .follow-recommendations .account__note p { overflow: hidden; } -.layout-single-column .copy-paste-text { +.app-body .copy-paste-text { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); } -.layout-single-column .copy-paste-text:is(:focus, :active), -.layout-single-column .tip-carousel:focus { +.app-body .copy-paste-text:is(:focus, :active), +.app-body .tip-carousel:focus { border-color: var(--color-accent); } -.layout-single-column .copy-paste-text:has(textarea:focus) { +.app-body .copy-paste-text:has(textarea:focus) { border-color: var(--color-accent); } /* πŸ“’ Announcements */ -.layout-single-column .announcements, -.layout-single-column .announcements::after { +.app-body .announcements, +.app-body .announcements::after { background-color: var(--color-accent-bg); color: var(--color-content-fg); } -.layout-single-column .announcements { +.app-body .announcements { overflow: visible; z-index: 0; box-shadow: 0 -20px var(--color-bg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .announcements__item strong { +.app-body .announcements__item strong { font-weight: 800; color: var(--color-content-fg-bold); } -.layout-single-column .announcements__item__unread { +.app-body .announcements__item__unread { color: var(--color-accent); } -.layout-single-column .announcements__pagination, -.layout-single-column .announcements__pagination .icon-button { +.app-body .announcements__pagination, +.app-body .announcements__pagination .icon-button { color: var(--color-content-fg); } -.layout-single-column .announcements__mastodon { +.app-body .announcements__mastodon { border-radius: 0 0 0 8px; } -.layout-single-column .reactions-bar__item { +.app-body .reactions-bar__item { background-color: var(--color-content-bg); } -.layout-single-column .reactions-bar__item.active { +.app-body .reactions-bar__item.active { background-color: var(--color-accent); } -.layout-single-column .reactions-bar__item__count, -.layout-single-column .reactions-bar__item__count .animated-number { +.app-body .reactions-bar__item__count, +.app-body .reactions-bar__item__count .animated-number { color: var(--color-content-fg); } -.layout-single-column .reactions-bar__item.active .reactions-bar__item__count .animated-number { +.app-body .reactions-bar__item.active .reactions-bar__item__count .animated-number { color: var(--color-accent-fg); } -.layout-single-column .reactions-bar .emoji-button, -.layout-single-column .announcements__item__content a.unhandled-link, -.layout-single-column .announcements__item__content a { +.app-body .reactions-bar .emoji-button, +.app-body .announcements__item__content a.unhandled-link, +.app-body .announcements__item__content a { color: var(--color-accent); } -.layout-single-column .announcements .emoji-button { +.app-body .announcements .emoji-button { margin: 0; } @media screen and (max-width:1174px) { - .layout-single-column .announcements { + .app-body .announcements { box-shadow: none; margin-top: -10px; border-radius: 0; } - .layout-single-column .announcements__mastodon { + .app-body .announcements__mastodon { border-radius: 0; } } @@ -4062,25 +4077,25 @@ a:is(.active, /* 404 */ -.layout-single-column .empty-column-indicator, -.layout-single-column .error-column { +.app-body .empty-column-indicator, +.app-body .error-column { background-color: var(--color-content-bg); color: var(--color-content-fg); margin-top: -1px; } -.layout-single-column .error-column { +.app-body .error-column { border: 1px solid var(--color-lines); border-radius: 8px !important; } -.layout-single-column .error-column__message h1, -.layout-single-column .error-column__message { +.app-body .error-column__message h1, +.app-body .error-column__message { color: var(--color-content-fg); } -.layout-single-column .error-column__image { +.app-body .error-column__image { margin-top: 0; } @media screen and (max-width:889px) { - .layout-single-column .error-column { + .app-body .error-column { border-radius: 0 !important; border-left: 0; border-right: 0; @@ -4091,147 +4106,147 @@ a:is(.active, /* πŸ“œ About page ------------- */ -.layout-single-column .scrollable.about { +.app-body .scrollable.about { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); display: flex; flex-flow: column; } @media screen and (max-width:889px) { - .layout-single-column .scrollable.about { + .app-body .scrollable.about { border-left: 0; border-right: 0; } } -.layout-single-column .about__header { +.app-body .about__header { order: 1; margin-bottom: 10px; } -.layout-single-column .about__section:nth-child(3) { +.app-body .about__section:nth-child(3) { order: 3; } -.layout-single-column .about__meta { +.app-body .about__meta { order: 2; } -.layout-single-column .about__section:nth-child(4) { +.app-body .about__section:nth-child(4) { order: 4; } -.layout-single-column .about__section:nth-child(5) { +.app-body .about__section:nth-child(5) { order: 5; } -.layout-single-column .about .link-footer { +.app-body .about .link-footer { order: 6; } -.layout-single-column .about__footer { +.app-body .about__footer { order: 7; } -.layout-single-column .about__header h1, -.layout-single-column .about__header p, -.layout-single-column #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { +.app-body .about__header h1, +.app-body .about__header p, +.app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { display: none; } -.layout-single-column .about__header p, -.layout-single-column .about__meta h4 { +.app-body .about__header p, +.app-body .about__meta h4 { color: var(--color-fg); } -.layout-single-column .about__header__hero { +.app-body .about__header__hero { margin: -20px -20px 20px; width: calc(100% + 40px); border-radius: 0; background-color: var(--color-content-bg); } -.layout-single-column .about__header__hero, -.layout-single-column .about__meta { +.app-body .about__header__hero, +.app-body .about__meta { margin-bottom: 10px; } -.layout-single-column .about__header h1 { +.app-body .about__header h1 { margin-bottom: 0; } @media screen and (min-width:890px) { - .layout-single-column .scrollable.about { + .app-body .scrollable.about { border-radius: 8px !important; } - .layout-single-column .about__header__hero { + .app-body .about__header__hero { border-radius: 8px 8px 0 0; } } -.layout-single-column .about__mail { +.app-body .about__mail { color: var(--color-content-fg); } -.layout-single-column .about__meta h4 { +.app-body .about__meta h4 { font-size: 12px; font-weight: bold; margin-bottom: 8px; } -.layout-single-column .about__meta .account { +.app-body .about__meta .account { background: none; box-shadow: none; padding: 0; border-left: 0; border-right: 0; } -.layout-single-column .about__meta__divider { +.app-body .about__meta__divider { border-left: 3px solid var(--color-content-secondary-separator); } @media screen and (max-width:600px) { - .layout-single-column .about__meta__divider { + .app-body .about__meta__divider { border-top: 3px solid var(--color-content-secondary-separator); width: 90%; } } -.layout-single-column .about__section:nth-child(3) .about__section__body { +.app-body .about__section:nth-child(3) .about__section__body { padding-bottom: 3em; } -.layout-single-column .about__meta, -.layout-single-column .about__section__title { +.app-body .about__meta, +.app-body .about__section__title { color: var(--color-accent); background-color: var(--color-content-secondary-bg); border: 0; border-radius: 8px; } -.layout-single-column .about__section.active .about__section__title { +.app-body .about__section.active .about__section__title { border-radius: 8px 8px 0 0; } -.layout-single-column .about__section.active:not(:nth-of-type(3)) .about__section__body { +.app-body .about__section.active:not(:nth-of-type(3)) .about__section__body { border: 0 !important; background-color: var(--color-content-secondary-bg); border-radius: 0 0 8px 8px; } -.layout-single-column .prose, -.layout-single-column .prose p, -.layout-single-column .prose b, -.layout-single-column .prose h1, -.layout-single-column .prose h2, -.layout-single-column .prose h3, -.layout-single-column .prose h4, -.layout-single-column .prose h5, -.layout-single-column .prose h6, -.layout-single-column .prose strong, -.layout-single-column .rules-list, -.layout-single-column .about__domain-blocks__domain h6, -.layout-single-column .about__domain-blocks__domain__type { +.app-body .prose, +.app-body .prose p, +.app-body .prose b, +.app-body .prose h1, +.app-body .prose h2, +.app-body .prose h3, +.app-body .prose h4, +.app-body .prose h5, +.app-body .prose h6, +.app-body .prose strong, +.app-body .rules-list, +.app-body .about__domain-blocks__domain h6, +.app-body .about__domain-blocks__domain__type { color: var(--color-content-fg); } -.layout-single-column .prose ul>li:before { +.app-body .prose ul>li:before { background-color: var(--color-fg); } -.layout-single-column .about__section__body .prose hr { +.app-body .about__section__body .prose hr { border-color: var(--color-content-secondary-separator); margin-top: 2em; margin-bottom: 2em; border-width: 3px; } -.layout-single-column .about__section__body .prose a, -.layout-single-column .about__section__body .prose a:hover, -.layout-single-column .prose a strong { +.app-body .about__section__body .prose a, +.app-body .about__section__body .prose a:hover, +.app-body .prose a strong { color: var(--color-accent); text-decoration: none; } -.layout-single-column .about__section__body .prose a:hover { +.app-body .about__section__body .prose a:hover { text-decoration: underline; } -.layout-single-column .about__section__body .prose small.lang_label { +.app-body .about__section__body .prose small.lang_label { margin-left: -2em; margin-top: 1px; display: block; @@ -4243,11 +4258,11 @@ a:is(.active, .about__section.active .about__section__title { background-color: var(--color-accent-bg); } -.layout-single-column .rules-list li { +.app-body .rules-list li { border-bottom: 2px solid var(--color-accent-lines); padding: 1em 1.75em 1em 3.4em; } -.layout-single-column .rules-list li:last-child { +.app-body .rules-list li:last-child { border-bottom: 0; } .about__domain-blocks { @@ -4265,7 +4280,7 @@ a:is(.active, /* Privacy Policy page */ -.layout-single-column .column > .scrollable.privacy-policy { +.app-body .column > .scrollable.privacy-policy { border: 1px solid var(--color-lines); background-color: var(--color-content-bg); } @@ -4273,12 +4288,122 @@ a:is(.active, /* πŸ‘‹ Hide superfluous UI */ -.layout-single-column div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr, -.layout-single-column .navigation-panel__legal > hr, -.layout-single-column .about__footer, /* Hide meta footer */ -.layout-single-column .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */ -.layout-single-column .search-banner ~ .search, /* Hide search field for logged out users */ -.layout-single-column .getting-started__trends h4, /* Hide Trending header in sidebar */ -.layout-single-column .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ { +.app-body div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr, +.app-body .navigation-panel__legal > hr, +.app-body .about__footer, /* Hide meta footer */ +.app-body .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */ +.app-body .search-banner ~ .search, /* Hide search field for logged out users */ +.app-body .getting-started__trends h4, /* Hide Trending header in sidebar */ +.app-body .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ { display: none; } + +/* Multi-column layout */ +.layout-multiple-columns { + --color-bg: #f5f2ef; +} +:root:has(.layout-multiple-columns) *::-webkit-scrollbar { + width: 4px; +} +:root:has(.layout-multiple-columns) *::-webkit-scrollbar-track { + background-color: var(--color-accent-bg); + border-right: 1px solid var(--color-lines); +} +:root:has(.layout-multiple-columns) *::-webkit-scrollbar-thumb { + opacity: .8; +} +.layout-multiple-columns .scrollable, +.layout-multiple-columns .column > .scrollable { + max-height: 100%; +} +.layout-multiple-columns .column { + width: 400px; + padding-bottom: 0; +} +.layout-multiple-columns .drawer__inner__mastodon { + display: none; +} +.layout-multiple-columns :is(.drawer__inner, .drawer__inner.darker) { + background: transparent; +} +.layout-multiple-columns .drawer__header { + background-color: var(--color-content-bg); + border-top: 1px solid var(--color-lines); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + border-radius: 8px 8px 0 0; + margin-bottom: 0; +} +.layout-multiple-columns .search__input { + border-radius: 0 0 8px 8px; +} +.layout-multiple-columns .drawer__tab { + transition: all .3s; + border-radius: 6px; + height: 40px; + padding: 5px; + margin: 5px; + box-sizing: border-box; + border: 0; +} +.layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) { + background-color: var(--color-accent-bg); +} +.layout-multiple-columns .drawer__tab .icon-cog { + background-image: var(--icon-gear); +} +.layout-multiple-columns .drawer__tab .icon-globe { + background-image: var(--icon-globe-active); +} +.layout-multiple-columns .drawer__tab .icon-users { + background-image: var(--icon-users); +} +.layout-multiple-columns .drawer__tab .icon-bars { + background-image: var(--icon-ellipsis); +} +.layout-multiple-columns .drawer__tab .icon-sign-out { + background-image: var(--icon-logout); +} +.layout-multiple-columns .column-header__icon.icon-bars { + background-image: var(--icon-globe-active); +} + +.layout-multiple-columns .flex-spacer, +.layout-multiple-columns .getting-started, +.layout-multiple-columns .getting-started__wrapper { + background-color: var(--color-content-bg); +} +.layout-multiple-columns .getting-started__wrapper { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines); + padding-bottom: 10px; + border-radius: 0 0 8px 8px; +} +.layout-multiple-columns .getting-started .column-link { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + margin: 0 5px 2px; + border-radius: 8px; +} +.layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) { + background-color: var(--color-accent-bg); + color: var(--color-accent); +} + +.layout-multiple-columns .column-link__badge { + background-color: var(--color-accent); + color: var(--color-accent-fg); + border-radius: 8px; + line-height: 15px; + font-weight: bold; +} + +.layout-multiple-columns .column-header, +.layout-multiple-columns .column-back-button { + background-color: var(--color-content-bg); +} + +.layout-multiple-columns .column-header__setting-btn { + font-weight: 600; +} diff --git a/TangerineUI.css b/TangerineUI.css index 74a39a6..faeab5f 100644 --- a/TangerineUI.css +++ b/TangerineUI.css @@ -88,6 +88,7 @@ --icon-post-notification: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjAsMTI4YTE2LDE2LDAsMSwxLTE2LTE2QTE2LDE2LDAsMCwxLDEyMCwxMjhabTMyLTE2YTE2LDE2LDAsMSwwLDE2LDE2QTE2LDE2LDAsMCwwLDE1MiwxMTJabTg0LDE2QTEwOCwxMDgsMCwwLDEsNzguNzcsMjI0LjE1TDQ2LjM0LDIzNUEyMCwyMCwwLDAsMSwyMSwyMDkuNjZsMTAuODEtMzIuNDNBMTA4LDEwOCwwLDEsMSwyMzYsMTI4Wm0tMjQsMEE4NCw4NCwwLDEsMCw1NS4yNywxNzAuMDZhMTIsMTIsMCwwLDEsMSw5LjgxbC05LjkzLDI5Ljc5LDI5Ljc5LTkuOTNhMTIuMSwxMi4xLDAsMCwxLDMuOC0uNjIsMTIsMTIsMCwwLDEsNiwxLjYyQTg0LDg0LDAsMCwwLDIxMiwxMjhaIj48L3BhdGg+PC9zdmc+"); --icon-post-notification-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTI4QTk2LDk2LDAsMCwxLDc5LjkzLDIxMS4xMWgwTDQyLjU0LDIyMy41OGE4LDgsMCwwLDEtMTAuMTItMTAuMTJsMTIuNDctMzcuMzloMEE5Niw5NiwwLDEsMSwyMjQsMTI4WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTEyOCwyNEExMDQsMTA0LDAsMCwwLDM2LjE4LDE3Ni44OEwyNC44MywyMTAuOTNhMTYsMTYsMCwwLDAsMjAuMjQsMjAuMjRsMzQuMDUtMTEuMzVBMTA0LDEwNCwwLDEsMCwxMjgsMjRabTAsMTkyYTg3Ljg3LDg3Ljg3LDAsMCwxLTQ0LjA2LTExLjgxLDgsOCwwLDAsMC00LTEuMDgsNy44NSw3Ljg1LDAsMCwwLTIuNTMuNDJMNDAsMjE2LDUyLjQ3LDE3OC42YTgsOCwwLDAsMC0uNjYtNi41NEE4OCw4OCwwLDEsMSwxMjgsMjE2Wm0xMi04OGExMiwxMiwwLDEsMS0xMi0xMkExMiwxMiwwLDAsMSwxNDAsMTI4Wm0tNDQsMGExMiwxMiwwLDEsMS0xMi0xMkExMiwxMiwwLDAsMSw5NiwxMjhabTg4LDBhMTIsMTIsMCwxLDEtMTItMTJBMTIsMTIsMCwwLDEsMTg0LDEyOFoiPjwvcGF0aD48L3N2Zz4="); --icon-users: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMzYsMTA4QTUyLDUyLDAsMSwxLDg0LDU2LDUyLDUyLDAsMCwxLDEzNiwxMDhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTE3LjI1LDE1Ny45MmE2MCw2MCwwLDEsMC02Ni41LDBBOTUuODMsOTUuODMsMCwwLDAsMy41MywxOTUuNjNhOCw4LDAsMSwwLDEzLjQsOC43NCw4MCw4MCwwLDAsMSwxMzQuMTQsMCw4LDgsMCwwLDAsMTMuNC04Ljc0QTk1LjgzLDk1LjgzLDAsMCwwLDExNy4yNSwxNTcuOTJaTTQwLDEwOGE0NCw0NCwwLDEsMSw0NCw0NEE0NC4wNSw0NC4wNSwwLDAsMSw0MCwxMDhabTIxMC4xNCw5OC43YTgsOCwwLDAsMS0xMS4wNy0yLjMzQTc5LjgzLDc5LjgzLDAsMCwwLDE3MiwxNjhhOCw4LDAsMCwxLDAtMTYsNDQsNDQsMCwxLDAtMTYuMzQtODQuODcsOCw4LDAsMSwxLTUuOTQtMTQuODUsNjAsNjAsMCwwLDEsNTUuNTMsMTA1LjY0LDk1LjgzLDk1LjgzLDAsMCwxLDQ3LjIyLDM3LjcxQTgsOCwwLDAsMSwyNTAuMTQsMjA2LjdaIj48L3BhdGg+PC9zdmc+"); + --icon-users-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMzYsMTA4QTUyLDUyLDAsMSwxLDg0LDU2LDUyLDUyLDAsMCwxLDEzNiwxMDhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTE3LjI1LDE1Ny45MmE2MCw2MCwwLDEsMC02Ni41LDBBOTUuODMsOTUuODMsMCwwLDAsMy41MywxOTUuNjNhOCw4LDAsMSwwLDEzLjQsOC43NCw4MCw4MCwwLDAsMSwxMzQuMTQsMCw4LDgsMCwwLDAsMTMuNC04Ljc0QTk1LjgzLDk1LjgzLDAsMCwwLDExNy4yNSwxNTcuOTJaTTQwLDEwOGE0NCw0NCwwLDEsMSw0NCw0NEE0NC4wNSw0NC4wNSwwLDAsMSw0MCwxMDhabTIxMC4xNCw5OC43YTgsOCwwLDAsMS0xMS4wNy0yLjMzQTc5LjgzLDc5LjgzLDAsMCwwLDE3MiwxNjhhOCw4LDAsMCwxLDAtMTYsNDQsNDQsMCwxLDAtMTYuMzQtODQuODcsOCw4LDAsMSwxLTUuOTQtMTQuODUsNjAsNjAsMCwwLDEsNTUuNTMsMTA1LjY0LDk1LjgzLDk1LjgzLDAsMCwxLDQ3LjIyLDM3LjcxQTgsOCwwLDAsMSwyNTAuMTQsMjA2LjdaIj48L3BhdGg+PC9zdmc+"); --icon-user-plus: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNTYsMTM2YTEyLDEyLDAsMCwxLTEyLDEyaC04djhhMTIsMTIsMCwwLDEtMjQsMHYtOGgtOGExMiwxMiwwLDAsMSwwLTI0aDh2LThhMTIsMTIsMCwwLDEsMjQsMHY4aDhBMTIsMTIsMCwwLDEsMjU2LDEzNlptLTU0LjgxLDU2LjI4YTEyLDEyLDAsMSwxLTE4LjM4LDE1LjQ0QzE2OS4xMiwxOTEuNDIsMTQ1LDE3MiwxMDgsMTcyYy0yOC44OSwwLTU1LjQ2LDEyLjY4LTc0LjgxLDM1LjcyYTEyLDEyLDAsMCwxLTE4LjM4LTE1LjQ0QTEyNC4wOCwxMjQuMDgsMCwwLDEsNjMuNSwxNTYuNTNhNzIsNzIsMCwxLDEsODksMEExMjQsMTI0LDAsMCwxLDIwMS4xOSwxOTIuMjhaTTEwOCwxNDhhNDgsNDgsMCwxLDAtNDgtNDhBNDguMDUsNDguMDUsMCwwLDAsMTA4LDE0OFoiPjwvcGF0aD48L3N2Zz4="); --icon-user-plus-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHN0eWxlPSItLW5vaXItaW5saW5lLWZpbGw6ICNjOWM1YmU7IiBkYXRhLW5vaXItaW5saW5lLWZpbGw9IiI+PHBhdGggZD0iTTE2OCwxMDBhNjAsNjAsMCwxLDEtNjAtNjBBNjAsNjAsMCwwLDEsMTY4LDEwMFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0yNTYsMTM2YTgsOCwwLDAsMS04LDhIMjMydjE2YTgsOCwwLDAsMS0xNiwwVjE0NEgyMDBhOCw4LDAsMCwxLDAtMTZoMTZWMTEyYTgsOCwwLDAsMSwxNiwwdjE2aDE2QTgsOCwwLDAsMSwyNTYsMTM2Wm0tNTcuODcsNTguODVhOCw4LDAsMCwxLTEyLjI2LDEwLjNDMTY1Ljc1LDE4MS4xOSwxMzguMDksMTY4LDEwOCwxNjhzLTU3Ljc1LDEzLjE5LTc3Ljg3LDM3LjE1YTgsOCwwLDAsMS0xMi4yNS0xMC4zYzE0Ljk0LTE3Ljc4LDMzLjUyLTMwLjQxLDU0LjE3LTM3LjE3YTY4LDY4LDAsMSwxLDcxLjksMEMxNjQuNiwxNjQuNDQsMTgzLjE4LDE3Ny4wNywxOTguMTMsMTk0Ljg1Wk0xMDgsMTUyYTUyLDUyLDAsMSwwLTUyLTUyQTUyLjA2LDUyLjA2LDAsMCwwLDEwOCwxNTJaIj48L3BhdGg+PC9zdmc+"); --icon-user-plus-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNjgsMTAwYTYwLDYwLDAsMSwxLTYwLTYwQTYwLDYwLDAsMCwxLDE2OCwxMDBaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMjU2LDEzNmE4LDgsMCwwLDEtOCw4SDIzMnYxNmE4LDgsMCwwLDEtMTYsMFYxNDRIMjAwYTgsOCwwLDAsMSwwLTE2aDE2VjExMmE4LDgsMCwwLDEsMTYsMHYxNmgxNkE4LDgsMCwwLDEsMjU2LDEzNlptLTU3Ljg3LDU4Ljg1YTgsOCwwLDAsMS0xMi4yNiwxMC4zQzE2NS43NSwxODEuMTksMTM4LjA5LDE2OCwxMDgsMTY4cy01Ny43NSwxMy4xOS03Ny44NywzNy4xNWE4LDgsMCwwLDEtMTIuMjUtMTAuM2MxNC45NC0xNy43OCwzMy41Mi0zMC40MSw1NC4xNy0zNy4xN2E2OCw2OCwwLDEsMSw3MS45LDBDMTY0LjYsMTY0LjQ0LDE4My4xOCwxNzcuMDcsMTk4LjEzLDE5NC44NVpNMTA4LDE1MmE1Miw1MiwwLDEsMC01Mi01MkE1Mi4wNiw1Mi4wNiwwLDAsMCwxMDgsMTUyWiI+PC9wYXRoPjwvc3ZnPg=="); @@ -114,6 +115,7 @@ --icon-list: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-list-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-settings: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMSwxMDguNzYsMTk4LjI1LDkwLjYyYy0uNjQtMS4xNi0xLjMxLTIuMjktMi0zLjQxbC0uMTItMzZBMTA0LjYxLDEwNC42MSwwLDAsMCwxNjIsMzJMMTMwLDQ5Ljg5Yy0xLjM0LDAtMi42OSwwLTQsMEw5NCwzMkExMDQuNTgsMTA0LjU4LDAsMCwwLDU5Ljg5LDUxLjI1bC0uMTYsMzZjLS43LDEuMTItMS4zNywyLjI2LTIsMy40MWwtMzEuODQsMTguMWE5OS4xNSw5OS4xNSwwLDAsMCwwLDM4LjQ2bDMxLjg1LDE4LjE0Yy42NCwxLjE2LDEuMzEsMi4yOSwyLDMuNDFsLjEyLDM2QTEwNC42MSwxMDQuNjEsMCwwLDAsOTQsMjI0bDMyLTE3Ljg3YzEuMzQsMCwyLjY5LDAsNCwwTDE2MiwyMjRhMTA0LjU4LDEwNC41OCwwLDAsMCwzNC4wOC0xOS4yNWwuMTYtMzZjLjctMS4xMiwxLjM3LTIuMjYsMi0zLjQxbDMxLjg0LTE4LjFBOTkuMTUsOTkuMTUsMCwwLDAsMjMwLjEsMTA4Ljc2Wk0xMjgsMTY4YTQwLDQwLDAsMSwxLDQwLTQwQTQwLDQwLDAsMCwxLDEyOCwxNjhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDgwYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWm0xMDkuOTQtNTIuNzlhOCw4LDAsMCwwLTMuODktNS40bC0yOS44My0xNy0uMTItMzMuNjJhOCw4LDAsMCwwLTIuODMtNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLTM2LjcyLTIwLjY3LDgsOCwwLDAsMC02LjQ2LjU5TDEyOCw0MS44NSw5Ny44OCwyNWE4LDgsMCwwLDAtNi40Ny0uNkExMTEuOTIsMTExLjkyLDAsMCwwLDU0LjczLDQ1LjE1YTgsOCwwLDAsMC0yLjgzLDYuMDdsLS4xNSwzMy42NS0yOS44MywxN2E4LDgsMCwwLDAtMy44OSw1LjQsMTA2LjQ3LDEwNi40NywwLDAsMCwwLDQxLjU2LDgsOCwwLDAsMCwzLjg5LDUuNGwyOS44MywxNywuMTIsMzMuNjNhOCw4LDAsMCwwLDIuODMsNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLDM2LjcyLDIwLjY3LDgsOCwwLDAsMCw2LjQ2LS41OUwxMjgsMjE0LjE1LDE1OC4xMiwyMzFhNy45MSw3LjkxLDAsMCwwLDMuOSwxLDguMDksOC4wOSwwLDAsMCwyLjU3LS40MiwxMTIuMSwxMTIuMSwwLDAsMCwzNi42OC0yMC43Myw4LDgsMCwwLDAsMi44My02LjA3bC4xNS0zMy42NSwyOS44My0xN2E4LDgsMCwwLDAsMy44OS01LjRBMTA2LjQ3LDEwNi40NywwLDAsMCwyMzcuOTQsMTA3LjIxWm0tMTUsMzQuOTEtMjguNTcsMTYuMjVhOCw4LDAsMCwwLTMsM2MtLjU4LDEtMS4xOSwyLjA2LTEuODEsMy4wNmE3Ljk0LDcuOTQsMCwwLDAtMS4yMiw0LjIxbC0uMTUsMzIuMjVhOTUuODksOTUuODksMCwwLDEtMjUuMzcsMTQuM0wxMzQsMTk5LjEzYTgsOCwwLDAsMC0zLjkxLTFoLS4xOWMtMS4yMSwwLTIuNDMsMC0zLjY0LDBhOC4xLDguMSwwLDAsMC00LjEsMWwtMjguODQsMTYuMUE5Niw5NiwwLDAsMSw2Ny44OCwyMDFsLS4xMS0zMi4yYTgsOCwwLDAsMC0xLjIyLTQuMjJjLS42Mi0xLTEuMjMtMi0xLjgtMy4wNmE4LjA5LDguMDksMCwwLDAtMy0zLjA2bC0yOC42LTE2LjI5YTkwLjQ5LDkwLjQ5LDAsMCwxLDAtMjguMjZMNjEuNjcsOTcuNjNhOCw4LDAsMCwwLDMtM2MuNTgtMSwxLjE5LTIuMDYsMS44MS0zLjA2YTcuOTQsNy45NCwwLDAsMCwxLjIyLTQuMjFsLjE1LTMyLjI1YTk1Ljg5LDk1Ljg5LDAsMCwxLDI1LjM3LTE0LjNMMTIyLDU2Ljg3YTgsOCwwLDAsMCw0LjEsMWMxLjIxLDAsMi40MywwLDMuNjQsMGE4LDgsMCwwLDAsNC4xLTFsMjguODQtMTYuMUE5Niw5NiwwLDAsMSwxODguMTIsNTVsLjExLDMyLjJhOCw4LDAsMCwwLDEuMjIsNC4yMmMuNjIsMSwxLjIzLDIsMS44LDMuMDZhOC4wOSw4LjA5LDAsMCwwLDMsMy4wNmwyOC42LDE2LjI5QTkwLjQ5LDkwLjQ5LDAsMCwxLDIyMi45LDE0Mi4xMloiPjwvcGF0aD48L3N2Zz4="); + --icon-logout: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsMTI4bC00MCw0MFY4OFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0xMTIsMjE2YTgsOCwwLDAsMS04LDhINDhhMTYsMTYsMCwwLDEtMTYtMTZWNDhBMTYsMTYsMCwwLDEsNDgsMzJoNTZhOCw4LDAsMCwxLDAsMTZINDhWMjA4aDU2QTgsOCwwLDAsMSwxMTIsMjE2Wm0xMDkuNjYtODIuMzQtNDAsNDBBOCw4LDAsMCwxLDE2OCwxNjhWMTM2SDEwNGE4LDgsMCwwLDEsMC0xNmg2NFY4OGE4LDgsMCwwLDEsMTMuNjYtNS42Nmw0MCw0MEE4LDgsMCwwLDEsMjIxLjY2LDEzMy42NlptLTE3LTUuNjZMMTg0LDEwNy4zMXY0MS4zOFoiPjwvcGF0aD48L3N2Zz4="); /* Post visibility icons */ --icon-globe-visibility: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNDguNTksNTguNjdjLTYuMzEtMTAuODctMjMtMjEuMDYtNjYuMTYtOS43MUE5NS45NCw5NS45NCwwLDAsMCwzMiwxMjhxMCwzLjYuMjYsNy4xNEMuNTYsMTY2Ljg2LDEuMSwxODYuNCw3LjQ0LDE5Ny4zMywxMy40LDIwNy42MSwyNS4zLDIxMiw0MC42OCwyMTJjOS43OSwwLDIxLTEuNzgsMzIuOTUtNC45MUE5NS45NCw5NS45NCwwLDAsMCwyMjQsMTI4YzAtMi40MS0uMDktNC43OS0uMjctNy4xNiwxNC4zMS0xNC4zOCwyMy44Ni0yOC4yMSwyNy00MEMyNTMuNTUsNzAuNDIsMjUxLjEyLDYzLDI0OC41OSw1OC42N1pNMTI4LDU2YTcyLjExLDcyLjExLDAsMCwxLDcwLjE5LDU2QzE4NCwxMjQuNzMsMTY1LDEzOC41OSwxNDEuOTIsMTUxLjg2Yy0yMS43NCwxMi40OS00My41NSwyMi4zNi02My4wOSwyOC42NUE3Miw3MiwwLDAsMSwxMjgsNTZaTTI4LjE5LDE4NS4yOWMtLjYxLTEuMDctLjE3LTguMjIsMTAuNjctMjEuNzFBOTUuNzcsOTUuNzcsMCwwLDAsNTIuMzUsMTg3QzM1LjEyLDE4OS42MSwyOC44NSwxODYuNDEsMjguMTksMTg1LjI5Wk0xMjgsMjAwYTcxLjY2LDcxLjY2LDAsMCwxLTIyLjU2LTMuNjQsMzk0LjEsMzk0LjEsMCwwLDAsNDguNDItMjMuNjlBMzg4LjExLDM4OC4xMSwwLDAsMCwxOTguNDMsMTQzLDcyLjEyLDcyLjEyLDAsMCwxLDEyOCwyMDBaTTIyNy41Nyw3NC42NWMtMS4yOCw0Ljc4LTQuODEsMTAuODctMTAuMzksMTcuOEE5NS43NCw5NS43NCwwLDAsMCwyMDMuNjgsNjljMTUuODMtMi4zNywyMy4xNywwLDI0LjE1LDEuNzFDMjI4LDcxLDIyOC4yMSw3Mi4yOCwyMjcuNTcsNzQuNjVaIj48L3BhdGg+PC9zdmc+"); @@ -196,6 +198,7 @@ --icon-list: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2U2ODkzMyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-list-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-settings: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2U2ODkzMyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMSwxMDguNzYsMTk4LjI1LDkwLjYyYy0uNjQtMS4xNi0xLjMxLTIuMjktMi0zLjQxbC0uMTItMzZBMTA0LjYxLDEwNC42MSwwLDAsMCwxNjIsMzJMMTMwLDQ5Ljg5Yy0xLjM0LDAtMi42OSwwLTQsMEw5NCwzMkExMDQuNTgsMTA0LjU4LDAsMCwwLDU5Ljg5LDUxLjI1bC0uMTYsMzZjLS43LDEuMTItMS4zNywyLjI2LTIsMy40MWwtMzEuODQsMTguMWE5OS4xNSw5OS4xNSwwLDAsMCwwLDM4LjQ2bDMxLjg1LDE4LjE0Yy42NCwxLjE2LDEuMzEsMi4yOSwyLDMuNDFsLjEyLDM2QTEwNC42MSwxMDQuNjEsMCwwLDAsOTQsMjI0bDMyLTE3Ljg3YzEuMzQsMCwyLjY5LDAsNCwwTDE2MiwyMjRhMTA0LjU4LDEwNC41OCwwLDAsMCwzNC4wOC0xOS4yNWwuMTYtMzZjLjctMS4xMiwxLjM3LTIuMjYsMi0zLjQxbDMxLjg0LTE4LjFBOTkuMTUsOTkuMTUsMCwwLDAsMjMwLjEsMTA4Ljc2Wk0xMjgsMTY4YTQwLDQwLDAsMSwxLDQwLTQwQTQwLDQwLDAsMCwxLDEyOCwxNjhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDgwYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWm0xMDkuOTQtNTIuNzlhOCw4LDAsMCwwLTMuODktNS40bC0yOS44My0xNy0uMTItMzMuNjJhOCw4LDAsMCwwLTIuODMtNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLTM2LjcyLTIwLjY3LDgsOCwwLDAsMC02LjQ2LjU5TDEyOCw0MS44NSw5Ny44OCwyNWE4LDgsMCwwLDAtNi40Ny0uNkExMTEuOTIsMTExLjkyLDAsMCwwLDU0LjczLDQ1LjE1YTgsOCwwLDAsMC0yLjgzLDYuMDdsLS4xNSwzMy42NS0yOS44MywxN2E4LDgsMCwwLDAtMy44OSw1LjQsMTA2LjQ3LDEwNi40NywwLDAsMCwwLDQxLjU2LDgsOCwwLDAsMCwzLjg5LDUuNGwyOS44MywxNywuMTIsMzMuNjNhOCw4LDAsMCwwLDIuODMsNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLDM2LjcyLDIwLjY3LDgsOCwwLDAsMCw2LjQ2LS41OUwxMjgsMjE0LjE1LDE1OC4xMiwyMzFhNy45MSw3LjkxLDAsMCwwLDMuOSwxLDguMDksOC4wOSwwLDAsMCwyLjU3LS40MiwxMTIuMSwxMTIuMSwwLDAsMCwzNi42OC0yMC43Myw4LDgsMCwwLDAsMi44My02LjA3bC4xNS0zMy42NSwyOS44My0xN2E4LDgsMCwwLDAsMy44OS01LjRBMTA2LjQ3LDEwNi40NywwLDAsMCwyMzcuOTQsMTA3LjIxWm0tMTUsMzQuOTEtMjguNTcsMTYuMjVhOCw4LDAsMCwwLTMsM2MtLjU4LDEtMS4xOSwyLjA2LTEuODEsMy4wNmE3Ljk0LDcuOTQsMCwwLDAtMS4yMiw0LjIxbC0uMTUsMzIuMjVhOTUuODksOTUuODksMCwwLDEtMjUuMzcsMTQuM0wxMzQsMTk5LjEzYTgsOCwwLDAsMC0zLjkxLTFoLS4xOWMtMS4yMSwwLTIuNDMsMC0zLjY0LDBhOC4xLDguMSwwLDAsMC00LjEsMWwtMjguODQsMTYuMUE5Niw5NiwwLDAsMSw2Ny44OCwyMDFsLS4xMS0zMi4yYTgsOCwwLDAsMC0xLjIyLTQuMjJjLS42Mi0xLTEuMjMtMi0xLjgtMy4wNmE4LjA5LDguMDksMCwwLDAtMy0zLjA2bC0yOC42LTE2LjI5YTkwLjQ5LDkwLjQ5LDAsMCwxLDAtMjguMjZMNjEuNjcsOTcuNjNhOCw4LDAsMCwwLDMtM2MuNTgtMSwxLjE5LTIuMDYsMS44MS0zLjA2YTcuOTQsNy45NCwwLDAsMCwxLjIyLTQuMjFsLjE1LTMyLjI1YTk1Ljg5LDk1Ljg5LDAsMCwxLDI1LjM3LTE0LjNMMTIyLDU2Ljg3YTgsOCwwLDAsMCw0LjEsMWMxLjIxLDAsMi40MywwLDMuNjQsMGE4LDgsMCwwLDAsNC4xLTFsMjguODQtMTYuMUE5Niw5NiwwLDAsMSwxODguMTIsNTVsLjExLDMyLjJhOCw4LDAsMCwwLDEuMjIsNC4yMmMuNjIsMSwxLjIzLDIsMS44LDMuMDZhOC4wOSw4LjA5LDAsMCwwLDMsMy4wNmwyOC42LDE2LjI5QTkwLjQ5LDkwLjQ5LDAsMCwxLDIyMi45LDE0Mi4xMloiPjwvcGF0aD48L3N2Zz4="); + --icon-logout: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsMTI4bC00MCw0MFY4OFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0xMTIsMjE2YTgsOCwwLDAsMS04LDhINDhhMTYsMTYsMCwwLDEtMTYtMTZWNDhBMTYsMTYsMCwwLDEsNDgsMzJoNTZhOCw4LDAsMCwxLDAsMTZINDhWMjA4aDU2QTgsOCwwLDAsMSwxMTIsMjE2Wm0xMDkuNjYtODIuMzQtNDAsNDBBOCw4LDAsMCwxLDE2OCwxNjhWMTM2SDEwNGE4LDgsMCwwLDEsMC0xNmg2NFY4OGE4LDgsMCwwLDEsMTMuNjYtNS42Nmw0MCw0MEE4LDgsMCwwLDEsMjIxLjY2LDEzMy42NlptLTE3LTUuNjZMMTg0LDEwNy4zMXY0MS4zOFoiPjwvcGF0aD48L3N2Zz4="); /* Post visibility icons */ --icon-globe-visibility: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNDguNTksNTguNjdjLTYuMzEtMTAuODctMjMtMjEuMDYtNjYuMTYtOS43MUE5NS45NCw5NS45NCwwLDAsMCwzMiwxMjhxMCwzLjYuMjYsNy4xNEMuNTYsMTY2Ljg2LDEuMSwxODYuNCw3LjQ0LDE5Ny4zMywxMy40LDIwNy42MSwyNS4zLDIxMiw0MC42OCwyMTJjOS43OSwwLDIxLTEuNzgsMzIuOTUtNC45MUE5NS45NCw5NS45NCwwLDAsMCwyMjQsMTI4YzAtMi40MS0uMDktNC43OS0uMjctNy4xNiwxNC4zMS0xNC4zOCwyMy44Ni0yOC4yMSwyNy00MEMyNTMuNTUsNzAuNDIsMjUxLjEyLDYzLDI0OC41OSw1OC42N1pNMTI4LDU2YTcyLjExLDcyLjExLDAsMCwxLDcwLjE5LDU2QzE4NCwxMjQuNzMsMTY1LDEzOC41OSwxNDEuOTIsMTUxLjg2Yy0yMS43NCwxMi40OS00My41NSwyMi4zNi02My4wOSwyOC42NUE3Miw3MiwwLDAsMSwxMjgsNTZaTTI4LjE5LDE4NS4yOWMtLjYxLTEuMDctLjE3LTguMjIsMTAuNjctMjEuNzFBOTUuNzcsOTUuNzcsMCwwLDAsNTIuMzUsMTg3QzM1LjEyLDE4OS42MSwyOC44NSwxODYuNDEsMjguMTksMTg1LjI5Wk0xMjgsMjAwYTcxLjY2LDcxLjY2LDAsMCwxLTIyLjU2LTMuNjQsMzk0LjEsMzk0LjEsMCwwLDAsNDguNDItMjMuNjlBMzg4LjExLDM4OC4xMSwwLDAsMCwxOTguNDMsMTQzLDcyLjEyLDcyLjEyLDAsMCwxLDEyOCwyMDBaTTIyNy41Nyw3NC42NWMtMS4yOCw0Ljc4LTQuODEsMTAuODctMTAuMzksMTcuOEE5NS43NCw5NS43NCwwLDAsMCwyMDMuNjgsNjljMTUuODMtMi4zNywyMy4xNywwLDI0LjE1LDEuNzFDMjI4LDcxLDIyOC4yMSw3Mi4yOCwyMjcuNTcsNzQuNjVaIj48L3BhdGg+PC9zdmc+"); @@ -225,88 +228,88 @@ } } -body.layout-single-column { +body.app-body { background-color: var(--color-bg); color: var(--color-fg); font-family: ui-rounded, "mastodon-font-sans-serif", sans-serif; } /* πŸ–±οΈ Scrollbars */ -:root:has(.layout-single-column) *::-webkit-scrollbar-track { +:root:has(.app-body) *::-webkit-scrollbar-track { background-color: var(--color-bg); padding: 2px; } -:root:has(.layout-single-column) *::-webkit-scrollbar-thumb { +:root:has(.app-body) *::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 50px; opacity: .4; } -:root:has(.layout-single-column) *::-webkit-scrollbar-track:hover { +:root:has(.app-body) *::-webkit-scrollbar-track:hover { background-color: var(--color-bg); } -:root:has(.layout-single-column) *::-webkit-scrollbar-thumb:hover { +:root:has(.app-body) *::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent); opacity: .7; } @media screen and (max-width:1174px) { - :root:has(.layout-single-column) *::-webkit-scrollbar { + :root:has(.app-body) *::-webkit-scrollbar { display: none; } } -.layout-single-column .loading-bar { +.app-body .loading-bar { background-color: var(--color-accent); } -.layout-single-column .getting-started, -.layout-single-column .regeneration-indicator, -.layout-single-column .audio-player, -.layout-single-column .compose-form .spoiler-input__input, -.layout-single-column .compose-form__autosuggest-wrapper, -.layout-single-column .compose-form__poll-wrapper select, -.layout-single-column .poll__option input[type=text], -.layout-single-column .report-dialog-modal__textarea, -.layout-single-column .search__input, -.layout-single-column .setting-text, -.layout-single-column .compose-form .compose-form__buttons-wrapper, -.layout-single-column .about__section__body { +.app-body .getting-started, +.app-body .regeneration-indicator, +.app-body .audio-player, +.app-body .compose-form .spoiler-input__input, +.app-body .compose-form__autosuggest-wrapper, +.app-body .compose-form__poll-wrapper select, +.app-body .poll__option input[type=text], +.app-body .report-dialog-modal__textarea, +.app-body .search__input, +.app-body .setting-text, +.app-body .compose-form .compose-form__buttons-wrapper, +.app-body .about__section__body { border: 0; } -.layout-single-column .column-inline-form, -.layout-single-column .column>.scrollable, -.layout-single-column .getting-started, -.layout-single-column .regeneration-indicator { +.app-body .column-inline-form, +.app-body .column>.scrollable, +.app-body .getting-started, +.app-body .regeneration-indicator { background: transparent; } -.layout-single-column .account__avatar img { +.app-body .account__avatar img { border-radius: 50%; } /* Rordered layout */ -.layout-single-column .columns-area__panels__pane--navigational { +.app-body .columns-area__panels__pane--navigational { order: 1; } -.layout-single-column .columns-area__panels__main { +.app-body .columns-area__panels__main { order: 2; } -.layout-single-column .columns-area__panels__pane--compositional { +.app-body .columns-area__panels__pane--compositional { order: 3; } -.layout-single-column .columns-area--mobile .column { +.app-body .columns-area--mobile .column { flex: unset; height: auto; } -.layout-single-column .columns-area--mobile .column:focus-within { +.app-body .columns-area--mobile .column:focus-within { overflow: visible; } -.layout-single-column .scrollable, -.layout-single-column .column > .scrollable { +.app-body .scrollable, +.app-body .column > .scrollable { max-height: max-content; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .dismissable-banner + .scrollable { +.app-body .dismissable-banner + .scrollable { border-top-left-radius: 0; border-top-right-radius: 0; } @@ -314,7 +317,7 @@ body.layout-single-column { /* *️⃣ Icons -------- */ -.layout-single-column +.app-body :is( .icon-bookmark, .icon-star, @@ -332,7 +335,8 @@ body.layout-single-column { .icon-bookmarks, .icon-list-ul, .column-link .icon-cog, - .compose__action-bar-dropdown .icon-bars, + .drawer__tab .icon-cog, + .icon-bars, .compose__action-bar-dropdown .icon-close, .icon-user-plus, .icon-user, @@ -354,13 +358,14 @@ body.layout-single-column { .icon-check, .status__action-bar .icon-close, .detailed-status__action-bar .icon-close, - .account__header__tabs__buttons .icon-close + .account__header__tabs__buttons .icon-close, + .icon-sign-out ) path { display: none; } -.layout-single-column +.app-body :is( .icon-bookmark, .icon-star, @@ -378,7 +383,8 @@ body.layout-single-column { .icon-bookmarks, .icon-list-ul, .column-link .icon-cog, - .compose__action-bar-dropdown .icon-bars, + .drawer__tab .icon-cog, + .icon-bars, .compose__action-bar-dropdown .icon-close, .icon-user-plus, .icon-user, @@ -400,7 +406,8 @@ body.layout-single-column { .icon-check, .status__action-bar .icon-close, .detailed-status__action-bar .icon-close, - .account__header__tabs__buttons .icon-close + .account__header__tabs__buttons .icon-close, + .icon-sign-out ) { background-repeat: no-repeat; background-size: 100%; @@ -408,44 +415,44 @@ body.layout-single-column { } /* Bookmark */ -.layout-single-column .icon-bookmark { +.app-body .icon-bookmark { background-image: var(--icon-bookmark-accent); } -.layout-single-column .detailed-status__button .icon-bookmark { +.app-body .detailed-status__button .icon-bookmark { background-image: var(--icon-bookmark-accent); } -.layout-single-column .icon-button.active .icon-bookmark { +.app-body .icon-button.active .icon-bookmark { background-image: var(--icon-bookmark-active); } /* Favorite */ -.layout-single-column .icon-star { +.app-body .icon-star { background-image: var(--icon-star-accent); } -.layout-single-column button.icon-button.active .icon-star, -.layout-single-column .notification .icon-star { +.app-body button.icon-button.active .icon-star, +.app-body .notification .icon-star { background-image: var(--icon-star-active); } -.layout-single-column .detailed-status__link .icon-star { +.app-body .detailed-status__link .icon-star { background-image: var(--icon-star); margin: 0 4px -2px 0; } /* Boost */ -.layout-single-column .icon-retweet { +.app-body .icon-retweet { background-image: var(--icon-boost-accent); } -.layout-single-column button.icon-button.active .icon-retweet, -.layout-single-column .detailed-status__button button.icon-button.active:hover .icon-retweet { +.app-body button.icon-button.active .icon-retweet, +.app-body .detailed-status__button button.icon-button.active:hover .icon-retweet { background-image: var(--icon-boost-active); } -.layout-single-column .status__prepend-icon.icon-retweet, -.layout-single-column .notification .icon-retweet { +.app-body .status__prepend-icon.icon-retweet, +.app-body .notification .icon-retweet { background-image: var(--icon-boost-active); } -.layout-single-column .detailed-status__link .icon-retweet { +.app-body .detailed-status__link .icon-retweet { background-image: var(--icon-boost); margin: 0 4px -2px 0; } -.layout-single-column +.app-body button.icon-button:is( .reblogPrivate, .reblogPrivate:hover, @@ -457,208 +464,214 @@ body.layout-single-column { opacity: .2; pointer-events: none; } -.layout-single-column .boost-modal__action-bar .icon-retweet { +.app-body .boost-modal__action-bar .icon-retweet { background-image: var(--icon-boost-accent); vertical-align: middle; } /* Reply */ -.layout-single-column .icon-reply, -.layout-single-column .icon-reply-all { +.app-body .icon-reply, +.app-body .icon-reply-all { background-image: var(--icon-reply-accent); } -.layout-single-column .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) { +.app-body .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) { background-image: var(--icon-reply-accent); } /* Ellipsis */ -.layout-single-column :is(.icon-ellipsis-h, .icon-ellipsis-v) { +.app-body :is(.icon-ellipsis-h, .icon-ellipsis-v) { background-image: var(--icon-ellipsis-accent); } -.layout-single-column .detailed-status__action-bar .icon-ellipsis-h { +.app-body .detailed-status__action-bar .icon-ellipsis-h { background-image: var(--icon-ellipsis-accent); } -.layout-single-column :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close { +.app-body :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close { background-image: var(--icon-ellipsis-active); } /* Poll icon */ -.layout-single-column .icon-tasks { +.app-body .icon-tasks { background-image: var(--icon-poll); } -.layout-single-column .notification__message .icon-tasks { +.app-body .notification__message .icon-tasks { background-image: var(--icon-poll-accent); } /* Post icon */ -.layout-single-column .icon-quote-right { +.app-body .icon-quote-right { background-image: var(--icon-post); } /* Navigation panel icons */ -.layout-single-column .column-link__icon { +.app-body .column-link__icon { transform: scale(1.3); margin-right: 7px; margin-left: 2px; } /* Home icon */ -.layout-single-column .icon-home { +.app-body .icon-home { background-image: var(--icon-home); } -.layout-single-column :is(.column-link.active .icon-home, .column-header__icon.icon-home) { +.app-body :is(.column-link.active .icon-home, .column-header__icon.icon-home) { background-image: var(--icon-home-active); } -.layout-single-column .notification__message .icon-home { +.app-body .notification__message .icon-home { background-image: var(--icon-post-notification-accent); } /* Globe icon */ -.layout-single-column .column-link .icon-globe, -.layout-single-column .column-header__icon.icon-globe { +.app-body .column-link .icon-globe, +.app-body .column-header__icon.icon-globe { background-image: var(--icon-globe); } -.layout-single-column .column-link.active .icon-globe, -.layout-single-column .column-header__icon.icon-globe { +.app-body .column-link.active .icon-globe, +.app-body .column-header__icon.icon-globe { background-image: var(--icon-globe-active); } /* Explore + Hashtag icon */ -.layout-single-column .icon-hashtag { +.app-body .icon-hashtag { background-image: var(--icon-hashtag-active); } -.layout-single-column .column-link .icon-hashtag { +.app-body .column-link .icon-hashtag { background-image: var(--icon-hashtag); } -.layout-single-column .column-link.active .icon-hashtag { +.app-body .column-link.active .icon-hashtag { background-image: var(--icon-hashtag-active); } /* Search icon */ -.layout-single-column .icon-search { +.app-body .icon-search { background-image: var(--icon-search); } -.layout-single-column .ui__header__links .icon-search { +.app-body .ui__header__links .icon-search, +.app-body .search__icon .icon-search { background-image: var(--icon-search-active); } -.layout-single-column .column-link .icon-search { +.app-body .column-link .icon-search { background-image: var(--icon-search-column-link); } -.layout-single-column .column-link.active .icon-search { +.app-body .column-link.active .icon-search { background-image: var(--icon-search-column-link-active); } -.layout-single-column .column-header__icon.icon-search { +.app-body .column-header__icon.icon-search { background-image: var(--icon-search-column-link-active); } -.layout-single-column .icon-times-circle { +.app-body .icon-times-circle { background-image: var(--icon-close); } /* Notifications icon */ -.layout-single-column .column-link .icon-bell { +.app-body .column-link .icon-bell { background-image: var(--icon-bell); } -.layout-single-column .column-link.active .icon-bell, -.layout-single-column .column-header__icon.icon-bell { +.app-body .column-link.active .icon-bell, +.app-body .column-header__icon.icon-bell { background-image: var(--icon-bell-active); } /* Direct messages icon */ -.layout-single-column .column-link .icon-at { +.app-body .column-link .icon-at { background-image: var(--icon-direct-messages); } -.layout-single-column .column-link.active .icon-at { +.app-body .column-link.active .icon-at, +.app-body .column-header__icon.icon-at { background-image: var(--icon-direct-messages-active); } /* Bookmarks icon */ -.layout-single-column .icon-bookmarks { +.app-body .icon-bookmarks { background-image: var(--icon-bookmark-column-link); } -.layout-single-column .column-link.active .icon-bookmarks, -.layout-single-column .column-header__icon.icon-bookmarks { +.app-body .column-link.active .icon-bookmarks, +.app-body .column-header__icon.icon-bookmarks { background-image: var(--icon-bookmark-column-link-active); } /* Favorites icon */ -.layout-single-column .column-link .icon-star { +.app-body .column-link .icon-star { background-image: var(--icon-star-column-link); } -.layout-single-column .column-link.active .icon-star, -.layout-single-column .column-header__icon.icon-star { +.app-body .column-link.active .icon-star, +.app-body .column-header__icon.icon-star { background-image: var(--icon-star-column-link-active); } /* Lists icon */ -.layout-single-column .icon-list-ul { +.app-body .icon-list-ul { background-image: var(--icon-list); } -.layout-single-column .column-link.active .icon-list-ul { +.app-body .column-link.active .icon-list-ul, +.app-body .column-header__icon.icon-list-ul { background-image: var(--icon-list-active); } /* Settings icon */ -.layout-single-column .column-link .icon-cog { +.app-body .column-link .icon-cog { background-image: var(--icon-settings); } /* Profile settings */ -.layout-single-column .compose__action-bar-dropdown .icon-bars { +.app-body .compose__action-bar-dropdown .icon-bars { background-image: var(--icon-gear); } -.layout-single-column .compose__action-bar-dropdown .active .icon-close { +.app-body .compose__action-bar-dropdown .active .icon-close { background-image: var(--icon-gear-active); } /* Follow user icon */ -.layout-single-column .icon-user-plus, -.layout-single-column .icon-user { +.app-body .icon-user-plus, +.app-body .icon-user { background-image: var(--icon-user-plus-accent); } -.layout-single-column .active .icon-user-plus { +.app-body .active .icon-user-plus { background-image: var(--icon-user-plus); } -.layout-single-column .column-link.active .icon-user-plus, -.layout-single-column .column-header__icon.icon-user-plus { +.app-body .column-link.active .icon-user-plus, +.app-body .column-header__icon.icon-user-plus { background-image: var(--icon-user-plus-active); } /* Users icon */ -.layout-single-column .icon-users { +.app-body .icon-users { background-image: var(--icon-users); } +.app-body .column-link .icon-users { + background-image: var(--icon-users-accent); +} /* Announcement icon */ -.layout-single-column .icon-bullhorn { +.app-body .icon-bullhorn { background-image: var(--icon-megaphone); } /* Column settings icon */ -.layout-single-column .icon-sliders { +.app-body .icon-sliders { background-image: var(--icon-sliders); } /* Post visibility icons */ -.layout-single-column .icon-globe { +.app-body .icon-globe { background-image: var(--icon-globe-visibility); } -.layout-single-column .icon-unlock { +.app-body .icon-unlock { background-image: var(--icon-unlock); } -.layout-single-column .icon-lock { +.app-body .icon-lock { background-image: var(--icon-lock); } -.layout-single-column .icon-at { +.app-body .icon-at { background-image: var(--icon-at); } /* Other icons */ -.layout-single-column .icon-paperclip { +.app-body .icon-paperclip { background-image: var(--icon-paperclip); } -.layout-single-column .icon-check { +.app-body .icon-check { background-image: var(--icon-verified); } -.layout-single-column .follow-request-banner .button:is(:active, :focus, :hover) .icon-check { +.app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } -.layout-single-column .account__relationship .icon-check, -.layout-single-column .follow-request-banner .button .icon-check { +.app-body .account__relationship .icon-check, +.app-body .follow-request-banner .button .icon-check { background-image: var(--icon-check); } -.layout-single-column .icon-bell { +.app-body .icon-bell { background-image: var(--icon-bell-ringing); } -.layout-single-column .icon-bell-o { +.app-body .icon-bell-o { background-image: var(--icon-bell-still); } -.layout-single-column .icon-thumb-tack { +.app-body .icon-thumb-tack { background-image: var(--icon-pin); } -.layout-single-column .icon-file-text { +.app-body .icon-file-text { background-image: var(--icon-link); } -.layout-single-column +.app-body :is( .account--panel, .follow-request-banner, @@ -667,83 +680,83 @@ body.layout-single-column { .icon-times { background-image: var(--icon-reject); } -.layout-single-column .account--panel .icon-times, -.layout-single-column .follow-request-banner .button:is(:active, :focus, :hover) .icon-times { +.app-body .account--panel .icon-times, +.app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } -.layout-single-column .account__relationship .icon-times, -.layout-single-column .follow-request-banner .button .icon-times { +.app-body .account__relationship .icon-times, +.app-body .follow-request-banner .button .icon-times { background-image: var(--icon-reject); } @media screen and (max-width:1174px) { - .layout-single-column .column-link .icon-home { + .app-body .column-link .icon-home { background-image: var(--icon-home-active); } - .layout-single-column .column-link.active .icon-home { + .app-body .column-link.active .icon-home { background-image: var(--icon-home); } - .layout-single-column .column-link .icon-bell { + .app-body .column-link .icon-bell { background-image: var(--icon-bell-active); } - .layout-single-column .column-link.active .icon-bell { + .app-body .column-link.active .icon-bell { background-image: var(--icon-bell); } - .layout-single-column .column-link .icon-hashtag { + .app-body .column-link .icon-hashtag { background-image: var(--icon-hashtag-active); } - .layout-single-column .column-link.active .icon-hashtag { + .app-body .column-link.active .icon-hashtag { background-image: var(--icon-hashtag); } - .layout-single-column .column-link .icon-search { + .app-body .column-link .icon-search { background-image: var(--icon-search-column-link-active); } - .layout-single-column .column-link.active .icon-search { + .app-body .column-link.active .icon-search { background-image: var(--icon-search-column-link); } - .layout-single-column .column-link .icon-globe { + .app-body .column-link .icon-globe { background-image: var(--icon-globe-active); } - .layout-single-column .column-link.active .icon-globe { + .app-body .column-link.active .icon-globe { background-image: var(--icon-globe); } - .layout-single-column .column-link .icon-at { + .app-body .column-link .icon-at { background-image: var(--icon-direct-messages-active); } - .layout-single-column .column-link.active .icon-at { + .app-body .column-link.active .icon-at { background-image: var(--icon-direct-messages); } - .layout-single-column .column-link .icon-bookmarks { + .app-body .column-link .icon-bookmarks { background-image: var(--icon-bookmark-column-link-active); } - .layout-single-column .column-link.active .icon-bookmarks { + .app-body .column-link.active .icon-bookmarks { background-image: var(--icon-bookmark-column-link); } - .layout-single-column .column-link .icon-star { + .app-body .column-link .icon-star { background-image: var(--icon-star-column-link-active); } - .layout-single-column .column-link.active .icon-star { + .app-body .column-link.active .icon-star { background-image: var(--icon-star-column-link); } - .layout-single-column .column-link .icon-list-ul { + .app-body .column-link .icon-list-ul { background-image: var(--icon-list-active); } - .layout-single-column .column-link.active .icon-list-ul { + .app-body .column-link.active .icon-list-ul { background-image: var(--icon-list); } - .layout-single-column .column-link .icon-cog { + .app-body .column-link .icon-cog { background-image: var(--icon-gear); } - .layout-single-column .column-link .icon-ellipsis-h { + .app-body .column-link .icon-ellipsis-h { background-image: var(--icon-ellipsis); } - .layout-single-column .column-link.active .icon-ellipsis-h { + .app-body .column-link.active .icon-ellipsis-h { background-image: var(--icon-ellipsis-active); } - .layout-single-column .column-link .icon-user-plus { + .app-body .column-link .icon-user-plus { background-image: var(--icon-user-plus-active); } - .layout-single-column .column-link.active .icon-user-plus { + .app-body .column-link.active .icon-user-plus { background-image: var(--icon-user-plus-accent); } } @@ -751,10 +764,10 @@ body.layout-single-column { /* πŸ“ Compose panel ---------------- */ -.layout-single-column .compose-form { +.app-body .compose-form { padding: 0 0 71px; } -.layout-single-column .navigation-bar { +.app-body .navigation-bar { border-radius: 8px 8px 0 0; padding: 21px 11px 22px 15px; background-color: var(--color-content-secondary-bg); @@ -762,22 +775,22 @@ body.layout-single-column { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .navigation-bar strong { +.app-body .navigation-bar strong { color: var(--color-content-fg); } -.layout-single-column .compose-form__highlightable.active { +.app-body .compose-form__highlightable.active { box-shadow: none; } -.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__highlightable.active), -.layout-single-column .compose-form__highlightable.active .compose-form__autosuggest-wrapper, -.layout-single-column .compose-form__highlightable.active .compose-form__buttons-wrapper, -.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within, -.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__autosuggest-wrapper:focus-within), -.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, -.layout-single-column .compose-form:has(.compose-form__autosuggest-wrapper:focus-within) :is(.reply-indicator, .autosuggest-input, .compose-form__warning) { +.app-body .navigation-bar:has(+ .compose-form .compose-form__highlightable.active), +.app-body .compose-form__highlightable.active .compose-form__autosuggest-wrapper, +.app-body .compose-form__highlightable.active .compose-form__buttons-wrapper, +.app-body .compose-form .compose-form__autosuggest-wrapper:focus-within, +.app-body .navigation-bar:has(+ .compose-form .compose-form__autosuggest-wrapper:focus-within), +.app-body .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, +.app-body .compose-form:has(.compose-form__autosuggest-wrapper:focus-within) :is(.reply-indicator, .autosuggest-input, .compose-form__warning) { border-color: var(--color-accent); } -.layout-single-column .compose-form +.app-body .compose-form :is( .autosuggest-textarea__suggestions, .autosuggest-textarea__textarea, @@ -785,63 +798,63 @@ body.layout-single-column { .compose-form__buttons-wrapper, .compose-form__modifiers ), -.layout-single-column .compose-form__autosuggest-wrapper { +.app-body .compose-form__autosuggest-wrapper { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; border-top: 0; border-radius: 0; } -.layout-single-column .compose-form__autosuggest-wrapper, -.layout-single-column .compose-form .compose-form__buttons-wrapper { +.app-body .compose-form__autosuggest-wrapper, +.app-body .compose-form .compose-form__buttons-wrapper { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .compose-form .compose-form__buttons-wrapper { +.app-body .compose-form .compose-form__buttons-wrapper { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .compose-form .compose-form__buttons-wrapper :is(.icon-button, .text-icon-button), -.layout-single-column .compose-form .character-counter { +.app-body .compose-form .compose-form__buttons-wrapper :is(.icon-button, .text-icon-button), +.app-body .compose-form .character-counter { color: var(--color-content-fg); height: 27px; } -.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active { +.app-body .compose-form .compose-form__buttons-wrapper .icon-button.active { color: var(--color-accent); } -.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { +.app-body .compose-form .compose-form__buttons-wrapper .text-icon-button.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .compose-panel .autosuggest-textarea__textarea { +.app-body .compose-form .autosuggest-textarea__textarea { padding-left: 20px; padding-right: 45px; padding-top: 20px; } -.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder { +.app-body .compose-form .autosuggest-textarea__textarea::placeholder { font-size: 130%; opacity: .5; } -.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder, -.layout-single-column .compose-form .autosuggest-account .display-name__html { +.app-body .compose-panel .autosuggest-textarea__textarea::placeholder, +.app-body .compose-form .autosuggest-account .display-name__html { color: var(--color-content-fg); } -.layout-single-column .compose-form .autosuggest-account .display-name__account { +.app-body .compose-form .autosuggest-account .display-name__account { color: var(--color-content-fg-muted); } -.layout-single-column .compose-form .autosuggest-textarea__suggestions--visible, -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item { +.app-body .compose-form .autosuggest-textarea__suggestions--visible, +.app-body .compose-form .autosuggest-textarea__suggestions__item { border-radius: 8px; } -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover), -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) { +.app-body .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover), +.app-body .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .compose-form .compose-form__buttons-wrapper { +.app-body .compose-form .compose-form__buttons-wrapper { border-radius: 0 0 8px 8px; } -.layout-single-column .reply-indicator, -.layout-single-column .compose-form .compose-form__warning { +.app-body .reply-indicator, +.app-body .compose-form .compose-form__warning { background-color: var(--color-accent-bg); border-left: 1px solid var(--color-accent-lines); border-right: 1px solid var(--color-accent-lines); @@ -851,33 +864,33 @@ body.layout-single-column { margin: 0; border-radius: 0; } -.layout-single-column .compose-form .compose-form__warning, -.layout-single-column .simple_form .recommended, -.layout-single-column .compose-form .compose-form__warning, -.layout-single-column .compose-form .compose-form__warning a, -.layout-single-column .reply-indicator__content a, -.layout-single-column .navigation-bar__profile-edit { +.app-body .compose-form .compose-form__warning, +.app-body .simple_form .recommended, +.app-body .compose-form .compose-form__warning, +.app-body .compose-form .compose-form__warning a, +.app-body .reply-indicator__content a, +.app-body .navigation-bar__profile-edit { color: var(--color-accent); } -.layout-single-column .compose-form__sensitive-button .icon-button:hover { +.app-body .compose-form__sensitive-button .icon-button:hover { background-color: transparent; } -.layout-single-column .compose-form__sensitive-button input[type=checkbox]:checked { +.app-body .compose-form__sensitive-button input[type=checkbox]:checked { background-color: var(--color-accent); border-color: var(--color-accent); } -.layout-single-column .compose-form .autosuggest-input { +.app-body .compose-form .autosuggest-input { box-sizing: border-box; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .compose-form .spoiler-input.spoiler-input--visible { +.app-body .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; background-color: var(--color-content-bg); } -.layout-single-column .compose-form .spoiler-input__input { +.app-body .compose-form .spoiler-input__input { background-color: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 0; @@ -886,58 +899,58 @@ body.layout-single-column { box-shadow: 0 0 0 4px inset var(--color-content-bg); } -.layout-single-column .compose-form .spoiler-input__input:focus { +.app-body .compose-form .spoiler-input__input:focus { box-shadow: 0 0 0 4px inset var(--color-content-bg), 0 0 0 6px inset var(--color-accent), 0 0 0 1px inset var(--color-content-bg); } -.layout-single-column .display-name { +.app-body .display-name { color: var(--color-content-fg); } -.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button { +.app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button { color: #ffffff; } -.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) { +.app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) { background-color: rgba(0, 0, 0, .4); } @media screen and (max-width:1174px) { - .layout-single-column .compose-form { + .app-body .compose-form { padding: 0 10px 10px; } - .layout-single-column .navigation-bar { + .app-body .navigation-bar { border-radius: 8px 8px 0 0; margin: 10px 10px 0; } } /* Publish button */ -.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper { +.app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper { padding-top: 10px; width: 100%; } -.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { +.app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { padding: 10px 18px; } -.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button .icon-lock { +.app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button .icon-lock { background-image: var(--icon-lock-inv); } /* Emoji picker */ -.layout-single-column .compose-form .emoji-button { +.app-body .compose-form .emoji-button { margin: 15px 10px 0 0; background-image: var(--icon-emoji); background-size: 26px; background-position: bottom left; background-repeat: no-repeat; } -.layout-single-column .compose-form .emoji-button .emojione { +.app-body .compose-form .emoji-button .emojione { opacity: 0; } -.layout-single-column .compose-form .emoji-button:hover { +.app-body .compose-form .emoji-button:hover { background-image: var(--icon-emoji-accent); } -.layout-single-column .emoji-picker-dropdown__menu { +.app-body .emoji-picker-dropdown__menu { overflow: hidden; border-radius: 8px; background-color: var(--color-content-bg); @@ -945,68 +958,68 @@ body.layout-single-column { 0 0 0 1px var(--color-lines), 0 0 5px rgba(0, 0, 0, .15); } -.layout-single-column .emoji-mart { +.app-body .emoji-mart { width: 100% !important; display: block; } -.layout-single-column .emoji-mart-bar:first-child { +.app-body .emoji-mart-bar:first-child { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); } -.layout-single-column .emoji-mart-anchor-bar { +.app-body .emoji-mart-anchor-bar { background-color: var(--color-accent); } -.layout-single-column .emoji-mart-anchor-selected { +.app-body .emoji-mart-anchor-selected { color: var(--color-accent); } -.layout-single-column .emoji-mart-anchor-icon svg path, -.layout-single-column .emoji-mart-anchor-icon svg rect { +.app-body .emoji-mart-anchor-icon svg path, +.app-body .emoji-mart-anchor-icon svg rect { fill: var(--color-content-fg); } -.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, -.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, -.layout-single-column .emoji-mart-search-icon svg path { +.app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, +.app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, +.app-body .emoji-mart-search-icon svg path { fill: var(--color-accent); } -.layout-single-column .emoji-mart-search-icon, -.layout-single-column .emoji-mart-search-icon:disabled, -.layout-single-column .emoji-mart-search-icon svg { +.app-body .emoji-mart-search-icon, +.app-body .emoji-mart-search-icon:disabled, +.app-body .emoji-mart-search-icon svg { opacity: 1; } -.layout-single-column .emoji-mart-scroll::-webkit-scrollbar-track { +.app-body .emoji-mart-scroll::-webkit-scrollbar-track { background-color: var(--color-content-bg); } -.layout-single-column .emoji-mart-search, -.layout-single-column .emoji-mart-scroll, -.layout-single-column .emoji-mart-category-label span { +.app-body .emoji-mart-search, +.app-body .emoji-mart-scroll, +.app-body .emoji-mart-category-label span { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .emoji-mart-search input { +.app-body .emoji-mart-search input { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } -.layout-single-column .emoji-mart-search input:focus { +.app-body .emoji-mart-search input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 1px inset var(--color-accent); outline: 0; } -.layout-single-column .emoji-mart-search input::placeholder { +.app-body .emoji-mart-search input::placeholder { color: var(--color-accent); } /* Zoom on emojis on hover (in post content only */ -.layout-single-column .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ +.app-body .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ overflow: visible; } -.layout-single-column .status__content .emojione { +.app-body .status__content .emojione { transition: transform .8s .8s; } -.layout-single-column .status__content .emojione:hover { +.app-body .status__content .emojione:hover { transform: scale(2.5); } @@ -1015,25 +1028,25 @@ body.layout-single-column { /* πŸ’¬ Posts -------- */ -.layout-single-column .reply-indicator__content, -.layout-single-column .status__content { +.app-body .reply-indicator__content, +.app-body .status__content { color: var(--color-content-fg); } -.layout-single-column .account__display-name strong, -.layout-single-column .status__display-name strong, -.layout-single-column .status__info .status__display-name .display-name__account { +.app-body .account__display-name strong, +.app-body .status__display-name strong, +.app-body .status__info .status__display-name .display-name__account { color: var(--color-content-fg); } -.layout-single-column .translate-button { +.app-body .translate-button { color: var(--color-content-fg-muted); } -.layout-single-column .translate-button__meta, -.layout-single-column .translate-button button, -.layout-single-column .status__content__translate-button { +.app-body .translate-button__meta, +.app-body .translate-button button, +.app-body .status__content__translate-button { font-size: 85%; } -.layout-single-column .status__content__translate-button, -.layout-single-column .translate-button .link-button { +.app-body .status__content__translate-button, +.app-body .translate-button .link-button { width: 32px; height: 32px; bottom: 13px; @@ -1048,51 +1061,51 @@ body.layout-single-column { transition: all .3s; background-color: transparent; } -.layout-single-column .detailed-status .status__content__translate-button, -.layout-single-column .detailed-status .translate-button .link-button { +.app-body .detailed-status .status__content__translate-button, +.app-body .detailed-status .translate-button .link-button { background-image: var(--icon-translate-accent); background-size: 25px; width: 40px; height: 40px; right: 60px; } -.layout-single-column .translate-button .link-button, -.layout-single-column .detailed-status .translate-button .link-button { +.app-body .translate-button .link-button, +.app-body .detailed-status .translate-button .link-button { background-image: var(--icon-translate-active); } -.layout-single-column .status__content__translate-button:hover, -.layout-single-column .translate-button .link-button:hover { +.app-body .status__content__translate-button:hover, +.app-body .translate-button .link-button:hover { background-color: var(--color-accent-bg); } @media screen and (max-width:889px) { - .layout-single-column .status__content__translate-button, - .layout-single-column .translate-button .link-button { + .app-body .status__content__translate-button, + .app-body .translate-button .link-button { bottom: 10px; } - .layout-single-column .detailed-status .status__content__translate-button, - .layout-single-column .detailed-status .translate-button .link-button { + .app-body .detailed-status .status__content__translate-button, + .app-body .detailed-status .translate-button .link-button { bottom: 13px; } } -.layout-single-column .status__content__translate-button > span, -.layout-single-column .translate-button .link-button > span, -.layout-single-column .notification .status__content__translate-button { +.app-body .status__content__translate-button > span, +.app-body .translate-button .link-button > span, +.app-body .notification .status__content__translate-button { display: none; } -.layout-single-column .account__display-name strong, -.layout-single-column .status__display-name strong { +.app-body .account__display-name strong, +.app-body .status__display-name strong { font-weight: bold; } -.layout-single-column .status { +.app-body .status { margin-left: 56px; padding: 0 10px; border-bottom: 0; } -.layout-single-column .status__wrapper { +.app-body .status__wrapper { transition: background .3s; } -.layout-single-column .status__wrapper, -.layout-single-column .detailed-status__wrapper { +.app-body .status__wrapper, +.app-body .detailed-status__wrapper { background-color: var(--color-content-bg); padding: 13px 12px; border-left: 1px solid var(--color-lines); @@ -1100,48 +1113,48 @@ body.layout-single-column { position: relative; } @media screen and (max-width:889px) { - .layout-single-column .status__wrapper, - .layout-single-column .detailed-status__wrapper { + .app-body .status__wrapper, + .app-body .detailed-status__wrapper { border-left: 0; border-right: 0; } - .layout-single-column .status__wrapper { + .app-body .status__wrapper { padding: 10px 8px; } } -.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, -.layout-single-column .scrollable > div:first-child > .status__wrapper, -.layout-single-column .explore__search-results > div:first-child > .status__wrapper { +.app-body .scrollable > div:first-child > div:first-child > .status__wrapper, +.app-body .scrollable > div:first-child > .status__wrapper, +.app-body .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } -.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, -.layout-single-column .search-results__section > div:last-child >.status__wrapper { +.app-body .scrollable > div:last-child > div:last-child > .status__wrapper, +.app-body .scrollable > div:last-child > .status__wrapper, +.app-body .scrollable > div > article:last-child > div > .status__wrapper, +.app-body .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { +.app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top: 0; } @media screen and (min-width:890px) { - .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, - .layout-single-column .explore__search-results > div:first-child > .status__wrapper { + .app-body .scrollable > div:first-child > div:first-child > .status__wrapper, + .app-body .explore__search-results > div:first-child > .status__wrapper { border-top-left-radius: 8px; border-top-right-radius: 8px; } - .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, - .layout-single-column .scrollable > div:last-child > .status__wrapper, - .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, - .layout-single-column .search-results__section > div:last-child >.status__wrapper { + .app-body .scrollable > div:last-child > div:last-child > .status__wrapper, + .app-body .scrollable > div:last-child > .status__wrapper, + .app-body .scrollable > div > article:last-child > div > .status__wrapper, + .app-body .search-results__section > div:last-child >.status__wrapper { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } - .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + .app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top-left-radius: 0; border-top-right-radius: 0; } } -.layout-single-column .status__info { +.app-body .status__info { height: 22px; margin-left: -56px; padding: 0; @@ -1149,47 +1162,47 @@ body.layout-single-column { line-height: 10px; align-items: start; } -.layout-single-column .status__info .status__display-name { +.app-body .status__info .status__display-name { overflow: visible; align-items: start; max-width: calc(100% - 4em); } -.layout-single-column .status__info .status__display-name .display-name bdi, -.layout-single-column .status__info .status__display-name .display-name__account { +.app-body .status__info .status__display-name .display-name bdi, +.app-body .status__info .status__display-name .display-name__account { vertical-align: top; } -.layout-single-column .status__info .status__display-name .display-name__account { +.app-body .status__info .status__display-name .display-name__account { display: inline; opacity: .7; } -.layout-single-column .status__relative-time { +.app-body .status__relative-time { height: 22px; position: absolute; right: 22px; color: var(--color-content-fg); opacity: .6; } -.layout-single-column .status__avatar { +.app-body .status__avatar { margin-bottom: -10px; z-index: 2; } -.layout-single-column .reply-indicator__content, -.layout-single-column .status__content { +.app-body .reply-indicator__content, +.app-body .status__content { line-height: 19px; position: static; } -.layout-single-column .e-content blockquote, -.layout-single-column .reply-indicator__content blockquote, -.layout-single-column .status__content__text blockquote { +.app-body .e-content blockquote, +.app-body .reply-indicator__content blockquote, +.app-body .status__content__text blockquote { color: var(--color-content-fg-muted); border-color: var(--color-lines); } /* πŸ“ Post dividers */ /* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */ -.layout-single-column .status::before, -.layout-single-column .notification__message::before { +.app-body .status::before, +.app-body .notification__message::before { position: absolute; background-color: var(--color-lines); height: 1px; @@ -1200,43 +1213,43 @@ body.layout-single-column { opacity: .7; } @media screen and (max-width:889px) { - .layout-single-column .status::before, - .layout-single-column .notification__message::before { + .app-body .status::before, + .app-body .notification__message::before { width: calc(100% - 73px); } } @media (prefers-color-scheme: dark) { - .layout-single-column .status::before, - .layout-single-column .notification__message::before { + .app-body .status::before, + .app-body .notification__message::before { opacity: 1; } } /* Remove border between posts when applicable */ -.layout-single-column .notification .status::before, /* no dividers on posts _inside_ notifications */ -.layout-single-column .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ -.layout-single-column .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ -.layout-single-column .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ -.layout-single-column .hashtag-header + article .status::before, -.layout-single-column .search-results__section .search-results__section__header + div .status::before { +.app-body .notification .status::before, /* no dividers on posts _inside_ notifications */ +.app-body .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ +.app-body .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ +.app-body .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ +.app-body .hashtag-header + article .status::before, +.app-body .search-results__section .search-results__section__header + div .status::before { display: none; } @media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ - .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, - .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper .status::before{ + .app-body .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, + .app-body .scrollable > div > article:first-child > div > .status__wrapper .status::before{ display: none; } } /* πŸ‘₯ Threaded replies */ -.layout-single-column .status--first-in-thread { +.app-body .status--first-in-thread { border-top: 0; } -.layout-single-column .status--first-in-thread::before { +.app-body .status--first-in-thread::before { width: 100%; right: 0; } -.layout-single-column .status--in-thread +.app-body .status--in-thread :is( .attachment-list, .audio-player, @@ -1251,92 +1264,92 @@ body.layout-single-column { margin-left: 0; width: auto; } -.layout-single-column .status__line--first { +.app-body .status__line--first { height: 100%; } -.layout-single-column .status__line--full { +.app-body .status__line--full { height: calc(100% + 32px); } /* Default lines when replying in real time */ -.layout-single-column div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { +.app-body div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { height: 0; } /* Hide line before first in thread */ -.layout-single-column div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), -.layout-single-column div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { +.app-body div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), +.app-body div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { height: 0; } -.layout-single-column div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line { +.app-body div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line { height: calc(100% - 32px) !important; } -.layout-single-column div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, -.layout-single-column .status__line--full.status__line--first { +.app-body div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, +.app-body .status__line--full.status__line--first { top: 32px; height: 100%; z-index: 1; } -.layout-single-column .detailed-status { +.app-body .detailed-status { background-color: transparent; border-top: 0; } /* Threaded line, actually */ -.layout-single-column .status__line { +.app-body .status__line { margin-inline-start: 5px; border-inline-start: 2px solid var(--color-accent); -webkit-border-start: 2px solid var(--color-accent); opacity: .6; } -.layout-single-column .status__line--full::before { +.app-body .status__line--full::before { background-color: var(--color-accent); } /* Hide the "stub" from the first status line */ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, -.layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line, -.layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { +.app-body .status-reply.status--in-thread.status--first-in-thread > .status__line, +.app-body .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { top: 32px; } @media screen and (max-width:889px) { - .layout-single-column .status__line { + .app-body .status__line { inset-inline-start: 35px; } } /* ⏺️ Posts when in focus */ -.layout-single-column +.app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus, -.layout-single-column +.app-body :is(.focusable, .status__wrapper.focusable):focus :is(.detailed-status, .detailed-status__action-bar) { outline: 0; background: var(--color-content-bg-focus); } @media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ - .layout-single-column .status__wrapper:has(.status__content:hover), - .layout-single-column .notification__message:has(+ div > .status__wrapper .status__content:hover) { + .app-body .status__wrapper:has(.status__content:hover), + .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) { background: var(--color-content-bg-focus); } } /* πŸ‘οΈ Post detailed view */ -.layout-single-column .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ +.app-body .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } -.layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ +.app-body .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ border-top: 0; } -.layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ +.app-body .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ border-bottom: 1px solid var(--color-lines); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } -.layout-single-column .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ +.app-body .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ box-shadow: none; } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { + .app-body .scrollable > div:first-child > .detailed-status__wrapper { margin-top: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -1344,153 +1357,153 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } @media screen and (max-width:889px) { - .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { + .app-body .scrollable > div:last-child .detailed-status__wrapper:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } - .layout-single-column .detailed-status { + .app-body .detailed-status { padding: 8px 8px 14px; } } -.layout-single-column .detailed-status__display-avatar .account__avatar { +.app-body .detailed-status__display-avatar .account__avatar { width: 60px !important; height: 60px !important; } -.layout-single-column .detailed-status .status__content { +.app-body .detailed-status .status__content { line-height: 24px; } -.layout-single-column .detailed-status, -.layout-single-column .detailed-status__action-bar { +.app-body .detailed-status, +.app-body .detailed-status__action-bar { background-color: var(--color-content-bg); border: 0; } -.layout-single-column .detailed-status__display-name strong, -.layout-single-column .detailed-status__display-name .display-name__account { +.app-body .detailed-status__display-name strong, +.app-body .detailed-status__display-name .display-name__account { color: var(--color-content-fg); } -.layout-single-column .detailed-status__display-name strong { +.app-body .detailed-status__display-name strong { font-size: 18px; font-weight: bold; } .detailed-status__display-name .display-name__account{ opacity: .7; } -.layout-single-column .detailed-status__meta { +.app-body .detailed-status__meta { color: var(--color-fg); opacity: .8; } -.layout-single-column .detailed-status__action-bar { +.app-body .detailed-status__action-bar { padding: 0 16px; justify-content: left; gap: 8px; width: 32px; } -.layout-single-column .detailed-status__action-bar-dropdown { +.app-body .detailed-status__action-bar-dropdown { position: absolute; right: 18px; } -.layout-single-column .status__action-bar .animated-number { +.app-body .status__action-bar .animated-number { color: var(--color-accent); font-weight: 600; } -.layout-single-column .status__action-bar__button:has(.icon-button__counter > .animated-number) { +.app-body .status__action-bar__button:has(.icon-button__counter > .animated-number) { padding-left: 4px; padding-right: 4px; margin-right: 2px; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) .active .icon-retweet + .icon-button__counter > .animated-number { color: #D3487F; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) .active .icon-star + .icon-button__counter > .animated-number { color: #EBBB59; } -.layout-single-column .detailed-status__meta .animated-number { +.app-body .detailed-status__meta .animated-number { transform: translate(0, -1px); } -.layout-single-column article > .account { +.app-body article > .account { padding: 16px; } -.layout-single-column article:last-child > .account { +.app-body article:last-child > .account { border-bottom: 1px solid var(--color-lines); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .detailed-status__link { +.app-body .detailed-status__link { display: inline-block; position: static; } /* Hashtag bar */ -.layout-single-column .hashtag-bar a, -.layout-single-column .hashtag-bar .link-button { +.app-body .hashtag-bar a, +.app-body .hashtag-bar .link-button { color: var(--color-fg-muted); font-size: 90%; transition: all .1s; } -.layout-single-column .hashtag-bar .link-button { +.app-body .hashtag-bar .link-button { font-size: 80%; margin-left: 3px; } -.layout-single-column .hashtag-bar a { +.app-body .hashtag-bar a { background-color: var(--color-content-secondary-bg); transition: all .3s; padding: 3px 8px; border-radius: 8px; } -.layout-single-column .hashtag-bar a:hover, -.layout-single-column .hashtag-bar .link-button:hover { +.app-body .hashtag-bar a:hover, +.app-body .hashtag-bar .link-button:hover { color: var(--color-accent); } -.layout-single-column .hashtag-bar a:hover { +.app-body .hashtag-bar a:hover { background-color: var(--color-accent-bg); } -.layout-single-column .hashtag-bar a:active, -.layout-single-column .hashtag-bar a:focus { +.app-body .hashtag-bar a:active, +.app-body .hashtag-bar a:focus { color: var(--color-accent-fg); background-color: var(--color-accent); } -.layout-single-column .hashtag-bar a:hover span { +.app-body .hashtag-bar a:hover span { text-decoration: none; } @media (prefers-color-scheme: dark) { - .layout-single-column .hashtag-bar a, - .layout-single-column .hashtag-bar .link-button { + .app-body .hashtag-bar a, + .app-body .hashtag-bar .link-button { color: var(--color-accent); } - .layout-single-column .hashtag-bar a:hover, - .layout-single-column .hashtag-bar .link-button:hover { + .app-body .hashtag-bar a:hover, + .app-body .hashtag-bar .link-button:hover { color: var(--color-content-fg); } } /* ⭐ Action bar */ -.layout-single-column .status__action-bar { +.app-body .status__action-bar { justify-content: left; margin-top: 8px; gap: 8px; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) :is(button, .status__action-bar__dropdown) { transition: all .3s; } -.layout-single-column .status__action-bar button:last-child { +.app-body .status__action-bar button:last-child { position: absolute; right: 18px; } -.layout-single-column .status__action-bar .icon-button.disabled { +.app-body .status__action-bar .icon-button.disabled { pointer-events: none; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) .icon-button:is( :active, @@ -1500,12 +1513,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu ) { background-color: transparent; } -.layout-single-column .icon-button.star-icon.deactivate>.icon-star, -.layout-single-column .icon-button.star-icon.activate>.icon-star { /* Disable default star spinning animation */ +.app-body .icon-button.star-icon.deactivate>.icon-star, +.app-body .icon-button.star-icon.activate>.icon-star { /* Disable default star spinning animation */ animation: none; } -.layout-single-column .status__action-bar .icon-button.star-icon.active>.icon-star, -.layout-single-column .detailed-status__action-bar .icon-button.star-icon.active>.icon-star { +.app-body .status__action-bar .icon-button.star-icon.active>.icon-star, +.app-body .detailed-status__action-bar .icon-button.star-icon.active>.icon-star { animation: bounce .4s ease-out !important; } @keyframes bounce { @@ -1522,13 +1535,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: scale(1); } } -.layout-single-column .status__action-bar .icon-button.reblogPrivate>.icon-retweet { +.app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet { opacity: 1; } -.layout-single-column .status__action-bar .icon-button.active>.icon-retweet { +.app-body .status__action-bar .icon-button.active>.icon-retweet { animation: launch 1.2s ease-in !important; } -.layout-single-column .detailed-status__action-bar .icon-button.active>.icon-retweet { +.app-body .detailed-status__action-bar .icon-button.active>.icon-retweet { animation: launch-detailed 1.2s ease-out !important; } @keyframes launch { @@ -1583,8 +1596,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu opacity: 1; } } -.layout-single-column .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark, -.layout-single-column .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark { +.app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark, +.app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark { animation: bounce-vertical .4s ease-out !important; } @keyframes bounce-vertical { @@ -1601,27 +1614,27 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: translate(0); } } -.layout-single-column .status__action-bar .icon-button, -.layout-single-column .detailed-status__action-bar .icon-button { +.app-body .status__action-bar .icon-button, +.app-body .detailed-status__action-bar .icon-button { min-width: 32px; height: 32px; border-radius: 8px; position: relative; } -.layout-single-column .detailed-status__action-bar .icon-button { +.app-body .detailed-status__action-bar .icon-button { min-width: 40px; height: 40px; } -.layout-single-column .detailed-status__action-bar .icon-button > .icon { +.app-body .detailed-status__action-bar .icon-button > .icon { width: 25px; height: 25px; } -.layout-single-column .detailed-status__action-bar .icon-button -.layout-single-column .icon-button.star-icon.active, -.layout-single-column .notification__favourite-icon-wrapper .star-icon { +.app-body .detailed-status__action-bar .icon-button +.app-body .icon-button.star-icon.active, +.app-body .notification__favourite-icon-wrapper .star-icon { color: #ffb609; } -.layout-single-column .status__prepend { +.app-body .status__prepend { padding-top: 2px; padding-right: 0; padding-bottom: 1px; @@ -1630,98 +1643,98 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 25px; color: var(--color-content-fg); } -.layout-single-column .status__prepend-icon-wrapper { +.app-body .status__prepend-icon-wrapper { width: 56px; text-align: right; } -.layout-single-column .status__prepend-icon-wrapper .icon { +.app-body .status__prepend-icon-wrapper .icon { transform: translateY(1px) scale(1.1); } -.layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper { +.app-body .detailed-status__wrapper .status__prepend-icon-wrapper { width: 46px; } -.layout-single-column .status__prepend .muted .emojione { +.app-body .status__prepend .muted .emojione { opacity: 1; } -.layout-single-column .status-card, -.layout-single-column .status-card.compact { +.app-body .status-card, +.app-body .status-card.compact { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); box-shadow: none; transition: all .3s; border-radius: 8px; } -.layout-single-column a.status-card:hover, -.layout-single-column a.status-card.compact:hover { +.app-body a.status-card:hover, +.app-body a.status-card.compact:hover { background-color: var(--color-content-bg-focus); border-color: var(--color-lines); } -.layout-single-column .status-card__image { +.app-body .status-card__image { background: var(--color-content-secondary-bg); } -.layout-single-column .status-card__image .icon { +.app-body .status-card__image .icon { width: 32px; height: 32px; } -.layout-single-column .status-card__title, -.layout-single-column .status-card__description, -.layout-single-column .status-card__author, -.layout-single-column .status-card__host { +.app-body .status-card__title, +.app-body .status-card__description, +.app-body .status-card__author, +.app-body .status-card__host { color: var(--color-content-fg); transition: all .2s; } -.layout-single-column .status-card__host { +.app-body .status-card__host { color: var(--color-content-fg-muted); } -.layout-single-column .status-card:active .status-card__host, -.layout-single-column .status-card:focus .status-card__host, -.layout-single-column .status-card:hover .status-card__host { +.app-body .status-card:active .status-card__host, +.app-body .status-card:focus .status-card__host, +.app-body .status-card:hover .status-card__host { color: var(--color-accent); } -.layout-single-column .status-card:active .status-card__author, -.layout-single-column .status-card:active .status-card__description, -.layout-single-column .status-card:active .status-card__title, -.layout-single-column .status-card:focus .status-card__author, -.layout-single-column .status-card:focus .status-card__description, -.layout-single-column .status-card:focus .status-card__title, -.layout-single-column .status-card:hover .status-card__author, -.layout-single-column .status-card:hover .status-card__description, -.layout-single-column .status-card:hover .status-card__title { +.app-body .status-card:active .status-card__author, +.app-body .status-card:active .status-card__description, +.app-body .status-card:active .status-card__title, +.app-body .status-card:focus .status-card__author, +.app-body .status-card:focus .status-card__description, +.app-body .status-card:focus .status-card__title, +.app-body .status-card:hover .status-card__author, +.app-body .status-card:hover .status-card__description, +.app-body .status-card:hover .status-card__title { color: var(--color-content-fg); } -.layout-single-column .status-card__author strong { +.app-body .status-card__author strong { font-weight: 800; } -.layout-single-column .status__content p { +.app-body .status__content p { margin-bottom: 12px; } -.layout-single-column .status__content p:last-child { +.app-body .status__content p:last-child { margin-bottom: 0; } -.layout-single-column .status__content > p:first-child:has(.status__content__spoiler-link) { +.app-body .status__content > p:first-child:has(.status__content__spoiler-link) { margin-bottom: 1px; } -.layout-single-column .status__content > p:first-child:has(.status__content__spoiler-link) span { +.app-body .status__content > p:first-child:has(.status__content__spoiler-link) span { font-weight: bold; } -.layout-single-column .media-gallery { +.app-body .media-gallery { border-radius: 8px; } -.layout-single-column .icon-button.overlayed { +.app-body .icon-button.overlayed { background-color: #ffffff; color: #444b5d; opacity: .6; transition: opacity .3s; } -.layout-single-column .icon-button.overlayed:hover { +.app-body .icon-button.overlayed:hover { background-color: #ffffff; color: #444b5d; opacity: 1; } -.layout-single-column .status__wrapper--filtered__button { +.app-body .status__wrapper--filtered__button { color: var(--color-accent); } -.layout-single-column .status__wrapper--filtered { +.app-body .status__wrapper--filtered { color: var(--color-content-fg); border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); @@ -1729,69 +1742,69 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu margin-top: -1px; } -.layout-single-column .audio-player, -.layout-single-column .media-gallery, -.layout-single-column .video-player { +.app-body .audio-player, +.app-body .media-gallery, +.app-body .video-player { border: 1px solid var(--color-lines); } /* πŸ“Š Polls */ -.layout-single-column .poll__chart, -.layout-single-column .muted .poll__chart.leading { +.app-body .poll__chart, +.app-body .muted .poll__chart.leading { background: var(--color-accent); opacity: .4; height: 12px; border-radius: 10px; } -.layout-single-column .poll__chart.leading, -.layout-single-column .muted .poll__chart.leading { +.app-body .poll__chart.leading, +.app-body .muted .poll__chart.leading { opacity: 1; } -.layout-single-column .muted .poll { +.app-body .muted .poll { color: var(--color-content-fg-muted); } -.layout-single-column .poll__footer { +.app-body .poll__footer { color: var(--color-content-fg); } -.layout-single-column .poll__link { +.app-body .poll__link { color: var(--color-accent); text-decoration: none; } -.layout-single-column .poll__input { +.app-body .poll__input { border: 2px solid var(--color-content-fg); } -.layout-single-column .poll__input:hover { +.app-body .poll__input:hover { border-color: var(--color-accent); background-color: var(--color-accent-bg); } -.layout-single-column .poll__input:is(.active, :active, :focus) { +.app-body .poll__input:is(.active, :active, :focus) { background-color: var(--color-accent); } -.layout-single-column .poll__input.active { +.app-body .poll__input.active { border-color: var(--color-accent); } -.layout-single-column .poll__footer .button.button-secondary { +.app-body .poll__footer .button.button-secondary { padding: 0 16px; } -.layout-single-column .poll__footer .button.button-secondary:hover { +.app-body .poll__footer .button.button-secondary:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } /* Poll composer */ -.layout-single-column .compose-form__poll-wrapper, -.layout-single-column .compose-form__poll-wrapper .poll__footer { +.app-body .compose-form__poll-wrapper, +.app-body .compose-form__poll-wrapper .poll__footer { border-top: 0; } -.layout-single-column .compose-form__poll-wrapper ul { +.app-body .compose-form__poll-wrapper ul { background-color: var(--color-accent-bg); } -.layout-single-column .compose-form__poll-wrapper .autosuggest-input input:focus { +.app-body .compose-form__poll-wrapper .autosuggest-input input:focus { box-shadow: 0 0 0 2px var(--color-accent); } -.layout-single-column .compose-form__poll-wrapper .poll__footer .button.button-secondary { +.app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } -.layout-single-column .compose-form__poll-wrapper .icon-button.disabled { +.app-body .compose-form__poll-wrapper .icon-button.disabled { color: transparent; pointer-events: none; } @@ -1799,29 +1812,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* Empty columns */ -.layout-single-column .empty-column-indicator { +.app-body .empty-column-indicator { background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); border: 1px solid var(--color-lines); border-radius: 0 0 8px 8px; contain: content; } -.layout-single-column .empty-column-indicator a { +.app-body .empty-column-indicator a { color: var(--color-accent); } -.layout-single-column .explore__links > .empty-column-indicator { +.app-body .explore__links > .empty-column-indicator { border: 0; } /* Timeline hint */ -.layout-single-column .timeline-hint { +.app-body .timeline-hint { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .timeline-hint a { +.app-body .timeline-hint a { color: var(--color-accent); } -.layout-single-column article + .timeline-hint:last-child { +.app-body article + .timeline-hint:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-bottom: 1px solid var(--color-lines); @@ -1831,49 +1844,49 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ“€ DMs */ -.layout-single-column .follow_requests-unlocked_explanation { +.app-body .follow_requests-unlocked_explanation { background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .follow_requests-unlocked_explanation a { +.app-body .follow_requests-unlocked_explanation a { color: var(--color-accent); } -.layout-single-column .conversation__unread { +.app-body .conversation__unread { background-color: var(--color-accent); } -.layout-single-column .conversation.conversation--unread { +.app-body .conversation.conversation--unread { background-color: var(--color-content-bg-focus); } -.layout-single-column .conversation__unread { +.app-body .conversation__unread { color: var(--color-accent-fg); } -.layout-single-column .conversation__content__names a strong { +.app-body .conversation__content__names a strong { font-weight: bold; } -.layout-single-column .conversation__content__names, -.layout-single-column .conversation__content__names a, -.layout-single-column .conversation__content__relative-time, -.layout-single-column .conversation .attachment-list__list a, -.layout-single-column .conversation .status__content p { +.app-body .conversation__content__names, +.app-body .conversation__content__names a, +.app-body .conversation__content__relative-time, +.app-body .conversation .attachment-list__list a, +.app-body .conversation .status__content p { color: var(--color-content-fg); } -.layout-single-column .conversation { +.app-body .conversation { background-color: var(--color-content-bg); border-bottom: 1px solid var(--color-lines); } -.layout-single-column .conversation__content__relative-time { +.app-body .conversation__content__relative-time { opacity: .7; } @media screen and (min-width:890px) { - .layout-single-column .conversation { + .app-body .conversation { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } } /* Speech bubble look DMs */ -.layout-single-column :is(.status-direct, .detailed-status-direct, .detailed-status__wrapper-direct) .status__content { +.app-body :is(.status-direct, .detailed-status-direct, .detailed-status__wrapper-direct) .status__content { padding: .7em 1.2em .7em 1em; margin-top: 4px; background: var(--color-content-secondary-bg); @@ -1881,11 +1894,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 4px 12px 12px 12px; display: inline-block; } -.layout-single-column .status-direct.muted .status__content { +.app-body .status-direct.muted .status__content { background: rgba(155, 174, 200, 0.1); border-color: var(--color-lines); } -.layout-single-column :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend { +.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend { display: none; } @@ -1893,25 +1906,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ⏺️ Column headers ----------------- */ -.layout-single-column .tabs-bar__wrapper { +.app-body .tabs-bar__wrapper { background-color: transparent; border-radius: 8px 8px 0 0; box-shadow: inset 0 10px var(--color-bg), 0 -30px var(--color-bg); } -.layout-single-column .column-header__wrapper.active:before { +.app-body .column-header__wrapper.active:before { background: none; opacity: 40%; } -.layout-single-column .column-header__wrapper.active { +.app-body .column-header__wrapper.active { box-shadow: 0 0; } -.layout-single-column .column-header { +.app-body .column-header { border-radius: 8px; } -.layout-single-column .column-header, -.layout-single-column .column-back-button { +.app-body .column-header, +.app-body .column-back-button { background-color: rgba(255, 255, 255, .75); color: var(--color-content-fg); border-top: 1px solid var(--color-lines); @@ -1927,114 +1940,116 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu backdrop-filter: blur(20px); } @media (prefers-color-scheme: dark) { - .layout-single-column .column-header, - .layout-single-column .column-back-button { + .app-body .column-header, + .app-body .column-back-button { background-color: rgba(3, 3, 3, .65); } } -.layout-single-column .column-header__button, -.layout-single-column .column-header__back-button { +.app-body .column-header__button, +.app-body .column-header__back-button { background-color: transparent; border: 0; } -.layout-single-column .column-header__button { +.app-body .column-header__button { color: var(--color-content-fg); transition: all .2s; - height: 50px; + border-radius: 6px; + height: 42px; + margin: 4px 4px 4px 0; } -.layout-single-column .column-header__icon { +.app-body .column-header__icon { transform: scale(1.1); margin-right: 4px; } -.layout-single-column .column-header.active .column-header__icon { +.app-body .column-header.active .column-header__icon { color: var(--color-accent); text-shadow: none; } -.layout-single-column .column-header__button:is(.active, .active:hover, :hover) { +.app-body .column-header__button:is(.active, .active:hover, :hover) { color: var(--color-accent); background-color: var(--color-accent-bg); } @media screen and (max-width:1174px) { - .layout-single-column .column-header__wrapper::after, - .layout-single-column .column-back-button::after { + .app-body .column-header__wrapper::after, + .app-body .column-back-button::after { display: none; } - .layout-single-column .column-header__button:is(.active, .active:hover, :hover), - .layout-single-column .column-header, - .layout-single-column .column-back-button { + .app-body .column-header__button:is(.active, .active:hover, :hover), + .app-body .column-header, + .app-body .column-back-button { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } } -.layout-single-column .column-back-button--slim-button::after { +.app-body .column-back-button--slim-button::after { display: none; } -.layout-single-column .column-back-button--slim-button { +.app-body .column-back-button--slim-button { top: -50px } @media screen and (max-width:1174px) { - .layout-single-column .column-back-button--slim-button { + .app-body .column-back-button--slim-button { height: 50px; } } @media screen and (min-width:1175px) { - .layout-single-column .column-back-button--slim-button { + .app-body .column-back-button--slim-button { display: none; } } -.layout-single-column .load-gap, -.layout-single-column .load-more { +.app-body .load-gap, +.app-body .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); border-bottom: 0; } -.layout-single-column .load-gap:hover, -.layout-single-column .load-more:hover { +.app-body .load-gap:hover, +.app-body .load-more:hover { background-color: var(--color-accent-lines); } -.layout-single-column .column-header__collapsible { +.app-body .column-header__collapsible { border-bottom: 0; box-shadow: 0 -20px 0 var(--color-bg); background-color: var(--color-secondary-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .column-header__collapsible::-webkit-scrollbar-track { +.app-body .column-header__collapsible::-webkit-scrollbar-track { background-color: transparent; } @media screen and (max-width:1174px) { - .layout-single-column .column-header__collapsible { + .app-body .column-header__collapsible { box-shadow: none; border-radius: 0; } } -.layout-single-column .column-header__collapsible-inner { +.app-body .column-header__collapsible-inner { background: var(--color-secondary-bg); border: 0; } -.layout-single-column .column-settings__section { +.app-body .column-settings__section { color: var(--color-content-fg-bold); } -.layout-single-column .setting-toggle__label { +.app-body .setting-toggle__label { color: var(--color-content-fg); } -.layout-single-column .column-header > button { +.app-body .column-header > button { padding: 0 0 0 15px; font-weight: bold; } @media screen and (max-width:1174px) { - .layout-single-column .ui__header { + .app-body .ui__header { background-color: transparent; border-bottom: 0; } - .layout-single-column .ui__header__logo { + .app-body .ui__header__logo { margin-left: 3px; } - .layout-single-column .tabs-bar__wrapper { + .app-body .tabs-bar__wrapper { box-shadow: none; display: block; margin-bottom: -2px; @@ -2042,22 +2057,22 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 45px; border-bottom: 1px solid rgba(0, 0, 0, .1); } - .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal) { + .app-body .tabs-bar__wrapper:has(> #tabs-bar__portal) { display: none; } - .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), - .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ + .app-body .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), + .app-body .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ display: block; } - .layout-single-column .column-header, - .layout-single-column .column-back-button, - .layout-single-column .column-header__button, - .layout-single-column .column-header__back-button { + .app-body .column-header, + .app-body .column-back-button, + .app-body .column-header__button, + .app-body .column-header__back-button { background-color: transparent; height: 50px; border: 0; } - .layout-single-column .ui::after { /* Set a backdrop blur background to both top bars */ + .app-body .ui::after { /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.75); @@ -2069,23 +2084,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu width: 100%; z-index: 1; } - .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after { + .app-body .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after { height: 55px; } - .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after, - .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ + .app-body .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after, + .app-body .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ height: 100px; } - .layout-single-column .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */ + .app-body .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */ margin-top: 0; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { - .layout-single-column .ui::after { + .app-body .ui::after { background-color: rgba(3, 3, 3, .65); } - .layout-single-column .tabs-bar__wrapper { + .app-body .tabs-bar__wrapper { border-color: var(--color-lines); } } @@ -2095,37 +2110,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ⏺️ Horizontal selectors (used to navigate subsections on the Explore, Live Feeds and Account pages) */ -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) { background: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .account__header + .account__section-headline { +.app-body .account__header + .account__section-headline { border-radius: 8px 8px 0 0; } -.layout-single-column .account__section-headline:has(+ .explore__suggestions) { +.app-body .account__section-headline:has(+ .explore__suggestions) { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; margin-bottom: 10px; } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .explore__search-header + .account__section-headline { + .app-body .explore__search-header + .account__section-headline { border-top-left-radius: 8px; border-top-right-radius: 8px; } - .layout-single-column .notification__filter-bar { + .app-body .notification__filter-bar { border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 10px; } } @media screen and (max-width:889px) { - .layout-single-column :is(.account__section-headline, .notification__filter-bar) { + .app-body :is(.account__section-headline, .notification__filter-bar) { border-left: 0; border-right: 0; } } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button) { background-color: var(--color-accent-bg); @@ -2136,36 +2151,36 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu max-height: 45px; padding: 14px 10px; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) .icon { margin-top: -1.5px; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):hover { background-color: var(--color-accent-lines); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { background-color: var(--color-content-bg); color: var(--color-content-fg); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active::before { display: none; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) button { background-color: transparent; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button, a.active, button.active)::after { display: block; @@ -2183,52 +2198,52 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: unset; border: 0; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):last-child::after { display: none; } @media (prefers-color-scheme: dark) { - .layout-single-column + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { background-color: var(--color-bg); } } -.layout-single-column .notification__filter-bar .icon-reply-all { +.app-body .notification__filter-bar .icon-reply-all { background-image: var(--icon-reply-accent); } -.layout-single-column .notification__filter-bar .active .icon-reply-all { +.app-body .notification__filter-bar .active .icon-reply-all { background-image: var(--icon-reply); } -.layout-single-column .notification__filter-bar .icon-star { +.app-body .notification__filter-bar .icon-star { background-image: var(--icon-star-accent); } -.layout-single-column .notification__filter-bar .active .icon-star { +.app-body .notification__filter-bar .active .icon-star { background-image: var(--icon-star); } -.layout-single-column .notification__filter-bar .icon-retweet { +.app-body .notification__filter-bar .icon-retweet { background-image: var(--icon-boost-accent); } -.layout-single-column .notification__filter-bar .active .icon-retweet { +.app-body .notification__filter-bar .active .icon-retweet { background-image: var(--icon-boost); } -.layout-single-column .notification__filter-bar .icon-tasks { +.app-body .notification__filter-bar .icon-tasks { background-image: var(--icon-poll-accent); } -.layout-single-column .notification__filter-bar .active .icon-tasks { +.app-body .notification__filter-bar .active .icon-tasks { background-image: var(--icon-poll); } -.layout-single-column .notification__filter-bar .icon-home { +.app-body .notification__filter-bar .icon-home { background-image: var(--icon-post-notification-accent); } -.layout-single-column .notification__filter-bar .active .icon-home { +.app-body .notification__filter-bar .active .icon-home { background-image: var(--icon-post-notification); } @media screen and (max-width:889px) { - .layout-single-column .account__header + .account__section-headline { + .app-body .account__header + .account__section-headline { border-radius: 0; } } @@ -2238,79 +2253,79 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu ------------------- */ @media screen and (min-width:1175px) { /* Order of the side nav items */ - .layout-single-column .navigation-panel__logo { + .app-body .navigation-panel__logo { order: 1; } - .layout-single-column .column-link[href="/home"] { + .app-body .column-link[href="/home"] { order: 2; } - .layout-single-column .column-link[href="/notifications"] { + .app-body .column-link[href="/notifications"] { order: 3; } - .layout-single-column .column-link[href="/explore"] { + .app-body .column-link[href="/explore"] { order: 4; } - .layout-single-column .column-link[href="/public/local"] { + .app-body .column-link[href="/public/local"] { order: 5; } - .layout-single-column .column-link[href="/public"] { + .app-body .column-link[href="/public"] { order: 6; } - .layout-single-column .column-link[href="/conversations"] { + .app-body .column-link[href="/conversations"] { order: 7; } - .layout-single-column .column-link[href="/follow_requests"] { + .app-body .column-link[href="/follow_requests"] { order: 8; } - .layout-single-column .column-link[href="/bookmarks"] { + .app-body .column-link[href="/bookmarks"] { order: 9; } - .layout-single-column .column-link[href="/favourites"] { + .app-body .column-link[href="/favourites"] { order: 10; } - .layout-single-column .column-link[href="/lists"] { + .app-body .column-link[href="/lists"] { order: 12; } - .layout-single-column .list-panel { + .app-body .list-panel { order: 13; } - .layout-single-column .column-link[href="/settings/preferences"] { + .app-body .column-link[href="/settings/preferences"] { order: 11; } - .layout-single-column .navigation-panel__sign-in-banner, - .layout-single-column .navigation-panel__legal { + .app-body .navigation-panel__sign-in-banner, + .app-body .navigation-panel__legal { order: 14; } - .layout-single-column .flex-spacer { + .app-body .flex-spacer { order: 15; } - .layout-single-column .getting-started__trends { + .app-body .getting-started__trends { order: 16; } } -.layout-single-column .column-link--transparent { +.app-body .column-link--transparent { color: var(--color-fg); } -.layout-single-column .ui__header__logo .logo--icon { +.app-body .ui__header__logo .logo--icon { display: none; } -.layout-single-column .ui__header__links .button.button-secondary { +.app-body .ui__header__links .button.button-secondary { padding: 8px 15px; } -.layout-single-column .ui__header__links .button.button-secondary[href="/publish"] { +.app-body .ui__header__links .button.button-secondary[href="/publish"] { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { +.app-body .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { background-color: var(--color-accent-focus); color: var(--color-accent-fg); } -.layout-single-column .column-link--logo { +.app-body .column-link--logo { margin-left: 4px; } -.layout-single-column .column-link.column-link--logo, -.layout-single-column .ui__header__logo { +.app-body .column-link.column-link--logo, +.app-body .ui__header__logo { display: inline-flex; padding: 0; width: 50px; @@ -2320,40 +2335,40 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-position: center; background-size: 32px auto; } -.layout-single-column .column-link.column-link--logo svg, -.layout-single-column .ui__header__logo svg { +.app-body .column-link.column-link--logo svg, +.app-body .ui__header__logo svg { display: none; } -.layout-single-column .navigation-panel__logo { +.app-body .navigation-panel__logo { margin-bottom: 10px; } -.layout-single-column .column-link:not(.column-link--logo) { +.app-body .column-link:not(.column-link--logo) { padding: 13px 20px 14px 13px; margin-left: 3px; font-weight: 500; font-size: 18px; overflow: visible; } -.layout-single-column .column-link--transparent:is(.active, .active:hover) { +.app-body .column-link--transparent:is(.active, .active:hover) { color: var(--color-content-fg); font-weight: bold; } -.layout-single-column .column-link--transparent:hover { +.app-body .column-link--transparent:hover { border-radius: 8px; padding-right: 20px; } -.layout-single-column .column-link--transparent span { +.app-body .column-link--transparent span { position: relative; } @media screen and (min-width:1175px) { - .layout-single-column .column-link:not(.column-link--logo) { + .app-body .column-link:not(.column-link--logo) { transition: all .2s; } - .layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { + .app-body .column-link:not(.column-link--logo)[href="/settings/preferences"] { padding-bottom: 13px; } - .layout-single-column .column-link--transparent span::before { + .app-body .column-link--transparent span::before { content: " "; left: -44px; background-color: transparent; @@ -2365,21 +2380,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu z-index: -1; bottom: -12px; } - .layout-single-column .column-link--transparent:hover span::before { + .app-body .column-link--transparent:hover span::before { background-color: var(--color-accent-bg); } - .layout-single-column .column-link--transparent:is(.active, .active:hover) span::before { + .app-body .column-link--transparent:is(.active, .active:hover) span::before { background-color: var(--color-content-secondary-bg); } } @media (prefers-color-scheme: dark) { @media screen and (min-width:1175px) { - .layout-single-column .column-link--transparent:is(.active, .active:hover) span::before { + .app-body .column-link--transparent:is(.active, .active:hover) span::before { background-color: var(--color-content-secondary-bg); } } } -.layout-single-column .icon-with-badge__badge { +.app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); border-radius: 20px; @@ -2388,39 +2403,39 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border: 0; z-index: 1; } -.layout-single-column .compose-panel hr, .navigation-panel hr { +.app-body .compose-panel hr, .navigation-panel hr { display: none; } -.layout-single-column .column-link span { +.app-body .column-link span { vertical-align: middle; } -.layout-single-column .column-link .fa::before { +.app-body .column-link .fa::before { position: relative; top: 1px; } -.layout-single-column .column-link .fa.fa-cog { +.app-body .column-link .fa.fa-cog { transform: scale(1) translate(1px, -1px); } -.layout-single-column .list-panel { +.app-body .list-panel { padding: 5px 9px 50px 27px; margin: 0 0 5px; display: none; } -.layout-single-column .list-panel .icon { +.app-body .list-panel .icon { display: none; } -.layout-single-column .list-panel .column-link span::before { +.app-body .list-panel .column-link span::before { left: -15px; top: -10px; right: -15px; bottom: -10px; } -.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { +.app-body .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { background-color: var(--color-accent-bg); } @media screen and (min-width:1175px) { - .layout-single-column .column-link[href="/lists"]:is(.active, :hover) + .list-panel, - .layout-single-column .list-panel:hover { + .app-body .column-link[href="/lists"]:is(.active, :hover) + .list-panel, + .app-body .list-panel:hover { display: block; animation: fadein .5s 1; } @@ -2436,14 +2451,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } @media screen and (max-width:1174px) { - .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { + .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; height: calc(4.2em + env(safe-area-inset-bottom)); bottom: 0; left: 0; z-index: 3; } - .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { + .app-body .columns-area__panels__pane--navigational .navigation-panel { width: 100vw; height: 4.2em; padding-bottom: env(safe-area-inset-bottom); @@ -2453,8 +2468,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-top: 1px solid var(--color-lines); border-left: 0; } - .layout-single-column .navigation-panel :is(.column-link, .navigation-panel__legal), - .layout-single-column .column-link--transparent:is(.active, .active:hover, :active) { + .app-body .navigation-panel :is(.column-link, .navigation-panel__legal), + .app-body .column-link--transparent:is(.active, .active:hover, :active) { flex: 0 0 20vw; margin: 6px 0 8px; padding: 4px 0 3px; @@ -2466,63 +2481,63 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-sizing: border-box; background-color: transparent; } - .layout-single-column + .app-body .navigation-panel:has(> *:nth-child(4):last-child) :is(.column-link, .navigation-panel__legal) { flex: 50vw; } - .layout-single-column + .app-body .navigation-panel:has(> *:nth-child(5):last-child) :is(.column-link, .navigation-panel__legal) { flex: calc(100vw / 3); } - .layout-single-column + .app-body .navigation-panel:has(> *:nth-child(6):last-child) :is(.column-link, .navigation-panel__legal) { flex: 25vw; } - .layout-single-column .column-link--transparent:is(.active, .active:hover, :active) { + .app-body .column-link--transparent:is(.active, .active:hover, :active) { margin: 6px 0 8px; padding: 4px 0 3px; border-radius: 8px; border: 0; background-color: #ffffff; } - .layout-single-column .column-link__icon { + .app-body .column-link__icon { margin: 0; } - .layout-single-column .column-link span { + .app-body .column-link span { padding-left: .5em; } - .layout-single-column .columns-area__panels__main { + .app-body .columns-area__panels__main { width: calc(100% - 285px); margin-left: -285px; } - .layout-single-column .columns-area__panels { + .app-body .columns-area__panels { padding-bottom: 6em; } - .layout-single-column .columns-area__panels .navigation-panel__legal { + .app-body .columns-area__panels .navigation-panel__legal { margin: 0; padding: 0; } - .layout-single-column .columns-area__panels .navigation-panel__legal .column-link--transparent { + .app-body .columns-area__panels .navigation-panel__legal .column-link--transparent { height: calc(100% - 13px); box-sizing: border-box; border: 0; } - .layout-single-column .navigation-panel .flex-spacer { + .app-body .navigation-panel .flex-spacer { display: none; } } @media screen and (max-width:889px) { - .layout-single-column .columns-area__panels__main { + .app-body .columns-area__panels__main { width: 100%; margin-left: -55px; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { - .layout-single-column .column-link--transparent:is(.active, .active:hover, :active) { + .app-body .column-link--transparent:is(.active, .active:hover, :active) { background-color: var(--color-bg); } } @@ -2532,34 +2547,34 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ‘€ Account view --------------- */ -.layout-single-column .account__header { +.app-body .account__header { border-radius: 0 0 8px 8px; margin-bottom: 10px; background-color: var(--color-content-bg); border: 1px solid var(--color-lines); } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .account__header { + .app-body .account__header { margin-top: 15px; border-radius: 8px; } } @media screen and (max-width:889px) { - .layout-single-column .account__header { + .app-body .account__header { border-left: 0; border-right: 0; border-radius: 0; } } -.layout-single-column .account__header__image { +.app-body .account__header__image { height: 159px; background-color: var(--color-secondary-bg); border-bottom: 0; } -.layout-single-column .account__header__bar { +.app-body .account__header__bar { border: 0; } -.layout-single-column .account__header__bar .avatar .account__avatar { +.app-body .account__header__bar .avatar .account__avatar { border-radius: 50%; border-width: 5px; width: 100px !important; @@ -2567,77 +2582,77 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-content-bg); border-color: var(--color-content-bg); } -.layout-single-column .account__header__tabs__name h1, -.layout-single-column .account__header__tabs__name h1 small { +.app-body .account__header__tabs__name h1, +.app-body .account__header__tabs__name h1 small { color: var(--color-content-fg); } -.layout-single-column .account__header__tabs__name h1 > span { +.app-body .account__header__tabs__name h1 > span { font-size: 18px; } -.layout-single-column .account__header__tabs__name h1 small { +.app-body .account__header__tabs__name h1 small { opacity: .7; } -.layout-single-column .account__header__tabs__name .icon-lock { +.app-body .account__header__tabs__name .icon-lock { vertical-align: bottom; } -.layout-single-column .account__header__content a { +.app-body .account__header__content a { color: var(--color-accent); text-decoration: none; } -.layout-single-column .account__header__content a:hover { +.app-body .account__header__content a:hover { text-decoration: underline; } -.layout-single-column .account__header__extra__links a strong { +.app-body .account__header__extra__links a strong { color: var(--color-content-fg-bold); } -.layout-single-column .account__header__account-note label { +.app-body .account__header__account-note label { margin-bottom: 0; } -.layout-single-column .account__header__account-note label, -.layout-single-column .account__header__account-note textarea::placeholder { +.app-body .account__header__account-note label, +.app-body .account__header__account-note textarea::placeholder { color: var(--color-content-fg-bold); opacity: .5; } -.layout-single-column .account__header__account-note textarea { +.app-body .account__header__account-note textarea { color: var(--color-content-fg); } -.layout-single-column .account__header__account-note textarea:focus { +.app-body .account__header__account-note textarea:focus { background-color: var(--color-accent-bg); } -.layout-single-column .account__header__badges .account-role { +.app-body .account__header__badges .account-role { border-radius: 8px; border-color: var(--color-accent); color: var(--color-accent); } -.layout-single-column .account-role svg { +.app-body .account-role svg { opacity: 1; } -.layout-single-column .account__header__extra__links a, -.layout-single-column .account__header__bio .account__header__content, -.layout-single-column .account__header__bio .account__header__fields dd { +.app-body .account__header__extra__links a, +.app-body .account__header__bio .account__header__content, +.app-body .account__header__bio .account__header__fields dd { color: var(--color-content-fg); } -.layout-single-column .account__header__bio .account__header__fields { +.app-body .account__header__bio .account__header__fields { background-color: var(--color-content-secondary-bg); border-radius: 8px; } @media (prefers-color-scheme: dark) { - .layout-single-column .account__header__bio .account__header__fields { + .app-body .account__header__bio .account__header__fields { background-color: var(--color-secondary-bg); } } -.layout-single-column .account__header__bio .account__header__fields:has(dl:only-child) { +.app-body .account__header__bio .account__header__fields:has(dl:only-child) { display: none; } -.layout-single-column .account__header__bio .account__header__fields dt { +.app-body .account__header__bio .account__header__fields dt { font-weight: bold; font-size: 12px; } -.layout-single-column .account__header__bio .account__header__fields :is(dl, .verified) { +.app-body .account__header__bio .account__header__fields :is(dl, .verified) { border-bottom: 0; position: relative; } -.layout-single-column .account__header__bio .account__header__fields dl:not(:last-child):after { +.app-body .account__header__bio .account__header__fields dl:not(:last-child):after { display: block; content: " "; height: 1px; @@ -2648,58 +2663,58 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu position: absolute; border-radius: 50px; } -.layout-single-column .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ +.app-body .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 0; } -.layout-single-column .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ +.app-body .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ margin-top: 0; border-top-width: 0; } -.layout-single-column .account__header__bio .account__header__fields .verified :is(a, dd) { +.app-body .account__header__bio .account__header__fields .verified :is(a, dd) { color: var(--color-accent); } -.layout-single-column .account__header__bio .account__header__fields :is(.verified dt, dt) { +.app-body .account__header__bio .account__header__fields :is(.verified dt, dt) { color: var(--color-content-fg); } -.layout-single-column .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ +.app-body .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ border-top: 0; border-right: 0; border-left: 0; background: none; } -.layout-single-column .account__header__extra .account__header__fields .verified dd > span:first-child { +.app-body .account__header__extra .account__header__fields .verified dd > span:first-child { vertical-align: bottom; } -.layout-single-column .account__header__extra .account__header__fields .verified__mark { +.app-body .account__header__extra .account__header__fields .verified__mark { float: left; margin-right: 2px; } -.layout-single-column .account__header__bio .account__header__fields .verified:last-child { +.app-body .account__header__bio .account__header__fields .verified:last-child { border-bottom: 0; } @media screen and (max-width:889px) { - .layout-single-column .account-timeline__header + article :is(.status__wrapper, .account) { + .app-body .account-timeline__header + article :is(.status__wrapper, .account) { border-left: 0; border-right: 0; border-radius: 0; } } -.layout-single-column .follow-request-banner, -.layout-single-column .moved-account-banner { +.app-body .follow-request-banner, +.app-body .moved-account-banner { background-color: var(--color-accent-bg); } -.layout-single-column .moved-account-banner { +.app-body .moved-account-banner { margin-bottom: 10px; border-radius: 8px; } -.layout-single-column .follow-request-banner__message, -.layout-single-column .moved-account-banner__message { +.app-body .follow-request-banner__message, +.app-body .moved-account-banner__message { color: var(--color-content-fg); } -.layout-single-column .moved-account-banner__message { +.app-body .moved-account-banner__message { font-weight: bold; } @@ -2707,50 +2722,50 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ✨ Explore tab -------------- */ @media screen and (min-width:890px) { - .layout-single-column .account__section-headline + .scrollable article:last-child .status__wrapper { + .app-body .account__section-headline + .scrollable article:last-child .status__wrapper { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } } /* #️⃣ Trending hashtags */ -.layout-single-column .trends__item__sparkline path:last-child { +.app-body .trends__item__sparkline path:last-child { stroke: var(--color-accent) !important; } -.layout-single-column .trends__item__sparkline path:first-child { +.app-body .trends__item__sparkline path:first-child { fill: var(--color-accent) !important; fill-opacity: 0.2 !important; } -.layout-single-column .explore__links { +.app-body .explore__links { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); overflow: hidden; margin-top: -1px; } @media screen and (max-width:889px) { - .layout-single-column .explore__links { + .app-body .explore__links { border-left: 0; border-right: 0; } } -.layout-single-column .columns-area__panels__main .trends__item { +.app-body .columns-area__panels__main .trends__item { background-color: var(--color-content-bg); border-bottom: 2px solid var(--color-content-secondary-bg); } -.layout-single-column .explore__links .trends__item:last-child { +.app-body .explore__links .trends__item:last-child { border-bottom: 0; } -.layout-single-column .trends__item__name, -.layout-single-column .trends__item__current { +.app-body .trends__item__name, +.app-body .trends__item__current { color: var(--color-fg-muted); } -.layout-single-column .trends__item__name a { +.app-body .trends__item__name a { color: var(--color-fg); } /* Hashtag header */ -.layout-single-column .hashtag-header { +.app-body .hashtag-header { font-size: 15px; padding: 22px 20px 24px; color: var(--color-content-fg); @@ -2758,13 +2773,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-top: 1px solid var(--color-lines); border-bottom: 0; } -.layout-single-column .hashtag-header__header { +.app-body .hashtag-header__header { margin-bottom: 0; } -.layout-single-column .hashtag-header__header h1 { +.app-body .hashtag-header__header h1 { color: var(--color-content-fg); } -.layout-single-column .hashtag-header .hashtag-header__header + div { +.app-body .hashtag-header .hashtag-header__header + div { color: var(--color-content-fg); font-size: 85%; opacity: .8; @@ -2773,34 +2788,34 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .hashtag-header { + .app-body .hashtag-header { margin-top: 15px; } } @media screen and (min-width:890px) { - .layout-single-column .hashtag-header { + .app-body .hashtag-header { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } - .layout-single-column .hashtag-header .hashtag-header__header button { + .app-body .hashtag-header .hashtag-header__header button { transform: translate(0, 8px); } } /* Account recommendations (For You Tab + User directory */ -.layout-single-column .scrollable .account-card { +.app-body .scrollable .account-card { margin: 0 0 10px; background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); } @media screen and (max-width:889px) { - .layout-single-column .scrollable .account-card { + .app-body .scrollable .account-card { margin: 0 10px 10px; } } -.layout-single-column .account-card__header { +.app-body .account-card__header { padding: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -2809,163 +2824,163 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 128px; overflow: hidden; } -.layout-single-column .scrollable .account-card__bio:after { +.app-body .scrollable .account-card__bio:after { background: linear-gradient(270deg, var(--color-content-bg), transparent); } -.layout-single-column .account-card__title__avatar .account__avatar { +.app-body .account-card__title__avatar .account__avatar { border: 0; border-radius: 50%; overflow: visible; } -.layout-single-column .account-card__title__avatar img { +.app-body .account-card__title__avatar img { border: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--color-content-bg); } -.layout-single-column .account-card__title .display-name bdi, -.layout-single-column .account-card__counters__item, -.layout-single-column .account-card__counters__item small { +.app-body .account-card__title .display-name bdi, +.app-body .account-card__counters__item, +.app-body .account-card__counters__item small { color: var(--color-content-fg-bold); } -.layout-single-column .account-card__counters__item small { +.app-body .account-card__counters__item small { opacity: .7; } -.layout-single-column .account-card__bio a { +.app-body .account-card__bio a { color: var(--color-accent); } -.layout-single-column .filter-form { +.app-body .filter-form { background-color: var(--color-accent-bg); border-radius: 8px; margin-bottom: 10px; } -.layout-single-column .filter-form__column { +.app-body .filter-form__column { padding: 10px 15px; } /* πŸ“° Trending stories */ -.layout-single-column .story { +.app-body .story { background-color: var(--color-content-bg); transition: background-color .2s; } -.layout-single-column .story:not(:last-child) { +.app-body .story:not(:last-child) { border-bottom: 2px solid var(--color-content-secondary-separator); } -.layout-single-column .story, -.layout-single-column .story__details__title { +.app-body .story, +.app-body .story__details__title { color: var(--color-content-fg); } -.layout-single-column .story:hover { +.app-body .story:hover { background-color: var(--color-content-bg-focus); } -.layout-single-column .story__details__publisher, -.layout-single-column .story__details__shared { +.app-body .story__details__publisher, +.app-body .story__details__shared { color: var(--color-fg); } -.layout-single-column .story .story__details__publisher, -.layout-single-column .story .story__details__shared { +.app-body .story .story__details__publisher, +.app-body .story .story__details__shared { transition: all .3s; } -.layout-single-column .story:is(:active, :focus, :hover) :is(.story__details__publisher, .story__details__shared) { +.app-body .story:is(:active, :focus, :hover) :is(.story__details__publisher, .story__details__shared) { color: var(--color-accent); } -.layout-single-column .story.expanded .story__thumbnail { +.app-body .story.expanded .story__thumbnail { margin: 0 0 -25px; } -.layout-single-column .story.expanded .story__thumbnail img { +.app-body .story.expanded .story__thumbnail img { width: calc(100% + 30px); margin: -15px -15px 0 -15px; border-radius: 0 0 0 0; } /* πŸ” Search field and search results */ -.layout-single-column .search { +.app-body .search { margin-bottom: 10px; } -.layout-single-column .search__input { +.app-body .search__input { border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .search__input::placeholder, -.layout-single-column .compose-form .spoiler-input__input::placeholder { +.app-body .search__input::placeholder, +.app-body .compose-form .spoiler-input__input::placeholder { font-weight: 500; color: var(--color-accent); } -.layout-single-column .search__input:focus { +.app-body .search__input:focus { border: 1px solid var(--color-accent); } -.layout-single-column .search__icon .icon { +.app-body .search__icon .icon { margin-right: 4px; transform: scale(.9); } -.layout-single-column .compose-panel .icon-search, -.layout-single-column .compose-panel .icon-search.active, -.layout-single-column .explore__search-header .icon-search { +.app-body .compose-panel .icon-search, +.app-body .compose-panel .icon-search.active, +.app-body .explore__search-header .icon-search { background-image: var(--icon-search-active); } -.layout-single-column .compose-panel .icon-search.active, -.layout-single-column .search__icon .icon-search.active { +.app-body .compose-panel .icon-search.active, +.app-body .search__icon .icon-search.active { opacity: 1; z-index: 1; } -.layout-single-column .explore__search-results { +.app-body .explore__search-results { background-color: transparent; overflow: hidden; } -.layout-single-column .explore__search-header { +.app-body .explore__search-header { background-color: transparent; } -.layout-single-column .explore__search-results .account { +.app-body .explore__search-results .account { padding-top: 16px; } -.layout-single-column .explore__search-results article:last-child > .account { +.app-body .explore__search-results article:last-child > .account { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .explore__search-results .trends__item { +.app-body .explore__search-results .trends__item { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .explore__search-results article:first-child > .trends__item, -.layout-single-column .search-results__section > .trends__item:first-child, -.layout-single-column .search-results__section > .account:first-child { +.app-body .explore__search-results article:first-child > .trends__item, +.app-body .search-results__section > .trends__item:first-child, +.app-body .search-results__section > .account:first-child { border-top: 1px solid var(--color-lines); } -.layout-single-column .explore__search-results article:last-child > .trends__item, -.layout-single-column .search-results__section > .trends__item:last-child, -.layout-single-column .search-results__section > .account:last-child { +.app-body .explore__search-results article:last-child > .trends__item, +.app-body .search-results__section > .trends__item:last-child, +.app-body .search-results__section > .account:last-child { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .search-results__section { +.app-body .search-results__section { background-color: var(--color-bg); border-bottom: 0; } -.layout-single-column .search-results__section__header { +.app-body .search-results__section__header { background-color: var(--color-content-secondary-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); border-bottom: 0; color: var(--color-content-fg); } -.layout-single-column .search-results__section__header button { +.app-body .search-results__section__header button { color: var(--color-accent); } @media screen and (min-width:890px) { - .layout-single-column .explore__search-results + .app-body .explore__search-results :is(article:last-child > .account, article:last-child > .trends__item, .load-more:last-child), - .layout-single-column .search-results__section:last-child > :is(.trends__item, .account):last-child { + .app-body .search-results__section:last-child > :is(.trends__item, .account):last-child { border-radius: 0 0 8px 8px; } } -.layout-single-column .account .account__details > span { +.app-body .account .account__details > span { color: var(--color-content-fg); } -.layout-single-column .account .account__details .verified-badge { +.app-body .account .account__details .verified-badge { color: var(--color-accent); } -.layout-single-column .account .account__details .verified-badge span { +.app-body .account .account__details .verified-badge span { font-weight: 500; } @keyframes fadein-short { @@ -2978,7 +2993,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu opacity: 1; } } -.layout-single-column .search__popout { +.app-body .search__popout { background-color: var(--color-content-bg); border-radius: 8px; box-shadow: none; @@ -2986,49 +3001,49 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border: 1px solid var(--color-lines); animation: .3s fadein-short 1; } -.layout-single-column .search__popout h4 { +.app-body .search__popout h4 { font-weight: bold; } -.layout-single-column .search__popout h4, -.layout-single-column .search__popout__menu__message, -.layout-single-column .search__popout__menu__item { +.app-body .search__popout h4, +.app-body .search__popout__menu__message, +.app-body .search__popout__menu__item { color: var(--color-content-fg); } -.layout-single-column .search__popout__menu__item { +.app-body .search__popout__menu__item { align-items: initial; } -.layout-single-column .search__popout__menu__item mark { +.app-body .search__popout__menu__item mark { color: var(--color-content-fg-bold); } -.layout-single-column .search__popout__menu__item .icon-button:is(:active, :focus, :hover) { +.app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover) { background-color: transparent; color: var(--color-accent-fg); } -.layout-single-column .search__popout__menu__item:is(.selected, :active, :focus, :hover), -.layout-single-column .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark { +.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover), +.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark { background-color: var(--color-accent); color: var(--color-accent-fg); } @media screen and (max-width:1174px) { - .layout-single-column .search { + .app-body .search { margin-bottom: 0; } - .layout-single-column .explore__search-header { + .app-body .explore__search-header { padding-top: 2px; } - .layout-single-column .search__input { + .app-body .search__input { padding: 13px; } - .layout-single-column .explore__search-header { + .app-body .explore__search-header { padding: 10px 0; } - .layout-single-column .search__icon .icon { + .app-body .search__icon .icon { top: 11px; } } @media screen and (max-width:889px) { - .layout-single-column .explore__search-header { + .app-body .explore__search-header { padding: 10px; } } @@ -3036,57 +3051,57 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* Dismissable banners */ -.layout-single-column .dismissable-banner { +.app-body .dismissable-banner { background-color: var(--color-accent); box-shadow: 0 5px var(--color-content-bg); border-radius: 0; border: 1px solid var(--color-lines); margin: 0; } -.layout-single-column .explore__links .dismissable-banner { +.app-body .explore__links .dismissable-banner { border: 0; } @media screen and (max-width:889px) { - .layout-single-column .dismissable-banner, - .layout-single-column .explore__links .dismissable-banner { + .app-body .dismissable-banner, + .app-body .explore__links .dismissable-banner { border-left: 0; border-right: 0; } } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .dismissable-banner { + .app-body .dismissable-banner { margin-top: 10px; } - .layout-single-column .explore__links .dismissable-banner { + .app-body .explore__links .dismissable-banner { margin-top: 0; } } -.layout-single-column .dismissable-banner__message, -.layout-single-column .dismissable-banner__action .icon-button { +.app-body .dismissable-banner__message, +.app-body .dismissable-banner__action .icon-button { color: var(--color-accent-fg); } -.layout-single-column .dismissable-banner__message h1 { +.app-body .dismissable-banner__message h1 { color: var(--color-accent-fg); margin-top: 10px; } -.layout-single-column .dismissable-banner__message__actions__wrapper { +.app-body .dismissable-banner__message__actions__wrapper { flex-flow: row-reverse; } -.layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { +.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: linear-gradient(to bottom, rgba(247, 105, 2, 0.8), rgba(247, 105, 2, 0.5)); padding-left: 10px; padding-right: 10px; } -.layout-single-column .dismissable-banner__background-image { +.app-body .dismissable-banner__background-image { display: none; } -.layout-single-column .dismissable-banner__message__actions .button, -.layout-single-column .dismissable-banner__message__actions .button.button-tertiary { +.app-body .dismissable-banner__message__actions .button, +.app-body .dismissable-banner__message__actions .button.button-tertiary { line-height: 28px; padding: 6px 17px; } @media (prefers-color-scheme: dark) { - .layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: linear-gradient(to top, rgba(230, 137, 51, .5), rgba(230, 137, 51, .3)); } } @@ -3095,16 +3110,16 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ”” Notifications ---------------- */ -.layout-single-column .status.muted +.app-body .status.muted :is(.status__content, .status__content a, .status__content p, .status__display-name strong), -.layout-single-column .attachment-list__list a { +.app-body .attachment-list__list a { color: var(--color-content-fg-muted); } -.layout-single-column .notification.unread::before, -.layout-single-column .status__wrapper.unread::before { +.app-body .notification.unread::before, +.app-body .status__wrapper.unread::before { background-color: var(--color-accent); width: 8px; border: 0; @@ -3115,35 +3130,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu left: 5px; z-index: 1; } -.layout-single-column .notification__message { +.app-body .notification__message { padding: 12px 12px 5px; background-color: var(--color-content-bg); color: var(--color-content-fg-bold); transition: all .3s; } -.layout-single-column .notification__display-name { +.app-body .notification__display-name { font-weight: bold; } -.layout-single-column .notification__report { +.app-body .notification__report { background-color: var(--color-content-bg); border-bottom: 0; padding-top: 10px; gap: 15px; } -.layout-single-column .notification__report__details { +.app-body .notification__report__details { color: var(--color-content-fg); } @media screen and (min-width:889px) { - .layout-single-column .notification__message { + .app-body .notification__message { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } - .layout-single-column .notification__report { + .app-body .notification__report { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } } -.layout-single-column .notification__message .icon { +.app-body .notification__message .icon { color: var(--color-accent); width: 18px; margin-left: 38px; @@ -3151,14 +3166,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-position: center right; } @media screen and (max-width:889px) { - .layout-single-column .notification__message .icon { + .app-body .notification__message .icon { margin-left: 34px; } } -.layout-single-column .notification .status__wrapper { +.app-body .notification .status__wrapper { padding-top: 0; } -.layout-single-column +.app-body :is(.notification-favourite, .notification-reblog, .notification-poll, @@ -3166,22 +3181,22 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .status__action-bar { display: none; } -.layout-single-column .account { +.app-body .account { background-color: var(--color-content-bg); border-bottom: 0; padding-left: 22px; padding-top: 4px; } -.layout-single-column .explore__search-results .account { +.app-body .explore__search-results .account { padding-top: 16px; } -.layout-single-column +.app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) .display-name__account { display: block; } -.layout-single-column +.app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) .display-name { @@ -3189,94 +3204,94 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } @media screen and (min-width:890px) { - .layout-single-column .account { + .app-body .account { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } - .layout-single-column .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 32px; padding-right: 22px; } } @media screen and (max-width:889px) { - .layout-single-column .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 27px; } } @media screen and (max-width:1174px) { - .layout-single-column .account { + .app-body .account { padding-left: 18px; } } -.layout-single-column .notification .account__relationship .icon-button { +.app-body .notification .account__relationship .icon-button { padding: 5px; border-radius: 8px; } -.layout-single-column .notification .account__relationship .icon-button:first-child { +.app-body .notification .account__relationship .icon-button:first-child { background-color: rgba(121, 189, 154, 0.3); } -.layout-single-column .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) { +.app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) { background-color: #79bd9a; } -.layout-single-column .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) .icon-check { +.app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } -.layout-single-column .notification .account__relationship .icon-button:last-child { +.app-body .notification .account__relationship .icon-button:last-child { background-color: rgba(223, 64, 90, 0.3); } -.layout-single-column .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) { +.app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) { background-color: #df405a; } -.layout-single-column .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) .icon-times { +.app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } /* πŸ“‹ Lists tab */ -.layout-single-column .column-inline-form { +.app-body .column-inline-form { background-color: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); border-radius: 0 0 8px 8px; margin-bottom: 10px; } @media screen and (max-width:1174px) { - .layout-single-column .column-inline-form { + .app-body .column-inline-form { margin-top: 10px; } } @media screen and (max-width:889px) { - .layout-single-column .column-inline-form { + .app-body .column-inline-form { margin-left: 10px; margin-right: 10px; } } -.layout-single-column .column-inline-form label :is(input, input:focus) { +.app-body .column-inline-form label :is(input, input:focus) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 8px; } -.layout-single-column .column-inline-form label input:focus { +.app-body .column-inline-form label input:focus { box-shadow: 0 0 0 1px var(--color-accent); } -.layout-single-column :is(.column-subheading, .columns-area__panels__main .column-link) { +.app-body :is(.column-subheading, .columns-area__panels__main .column-link) { background-color: var(--color-content-bg); color: var(--color-fg); } -.layout-single-column .item-list .column-subheading { +.app-body .item-list .column-subheading { color: var(--color-fg-muted); border: 1px solid var(--color-lines); border-bottom: 0; border-radius: 8px 8px 0 0; } @media screen and (max-width:889px) { - .layout-single-column .item-list .column-subheading { + .app-body .item-list .column-subheading { border-left: 0; border-right: 0; border-radius: 0; } } -.layout-single-column .columns-area__panels__main .column-link { +.app-body .columns-area__panels__main .column-link { margin-left: 0; width: 100%; border-left: 1px solid var(--color-lines); @@ -3284,33 +3299,33 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-bottom: 2px solid var(--color-content-secondary-separator); box-sizing: border-box; } -.layout-single-column .columns-area__panels__main .column-link:hover { +.app-body .columns-area__panels__main .column-link:hover { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } -.layout-single-column .columns-area__panels__main article:last-child .column-link { +.app-body .columns-area__panels__main article:last-child .column-link { border-bottom: 1px solid var(--color-lines); border-radius: 0 0 8px 8px; } @media screen and (max-width:889px) { - .layout-single-column .columns-area__panels__main .column-link { + .app-body .columns-area__panels__main .column-link { border-left: 0; border-right: 0; } - .layout-single-column .columns-area__panels__main article:last-child .column-link { + .app-body .columns-area__panels__main article:last-child .column-link { border-radius: 0; } } /* List adder dialog */ -.layout-single-column :is(.list-adder, .list-adder__account, .list-adder__lists) { +.app-body :is(.list-adder, .list-adder__account, .list-adder__lists) { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .list-adder__account { +.app-body .list-adder__account { margin-top: 12px; } -.layout-single-column .list-adder .column-inline-form { +.app-body .list-adder .column-inline-form { border-radius: 0; } .list-adder .list { @@ -3319,69 +3334,69 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* βž• Follow requests */ -.layout-single-column #Follow-requests { +.app-body #Follow-requests { margin-bottom: 0; z-index: 0; } -.layout-single-column .account-authorize__wrapper { +.app-body .account-authorize__wrapper { margin: 0; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } -.layout-single-column article:last-child > .account-authorize__wrapper, -.layout-single-column article:last-child > .account-authorize__wrapper .account--panel { +.app-body article:last-child > .account-authorize__wrapper, +.app-body article:last-child > .account-authorize__wrapper .account--panel { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .account-authorize { +.app-body .account-authorize { background-color: var(--color-content-bg); padding: 20px } -.layout-single-column .account--panel { +.app-body .account--panel { background-color: var(--color-content-bg); border: 0; padding: 0 5px; } -.layout-single-column .account__header__content { +.app-body .account__header__content { color: var(--color-content-fg); } -.layout-single-column .account--panel__button { +.app-body .account--panel__button { padding: 0 5px 12px 5px; } -.layout-single-column .account--panel__button .icon-button { +.app-body .account--panel__button .icon-button { padding: 10px; box-sizing: border-box; width: 100%; border-radius: 8px; transition: all .3s; } -.layout-single-column .account--panel button .icon-check { +.app-body .account--panel button .icon-check { background-image: var(--icon-check); } -.layout-single-column .account--panel button:is(:active, :focus, :hover) .icon-check { +.app-body .account--panel button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } -.layout-single-column .account--panel__button:first-child .icon-button { +.app-body .account--panel__button:first-child .icon-button { background-color: rgba(121, 189, 154, 0.3); } -.layout-single-column .account--panel__button:first-child .icon-button:is(:hover, :active) { +.app-body .account--panel__button:first-child .icon-button:is(:hover, :active) { background-color: #79bd9a; } -.layout-single-column .account--panel button .icon-times { +.app-body .account--panel button .icon-times { background-image: var(--icon-reject); } -.layout-single-column .account--panel button:is(:active, :focus, :hover) .icon-times { +.app-body .account--panel button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } -.layout-single-column .account--panel__button:nth-child(2) .icon-button { +.app-body .account--panel__button:nth-child(2) .icon-button { background-color: rgba(223, 64, 90, 0.3); } -.layout-single-column .account--panel__button:nth-child(2) .icon-button:is(:hover, :active) { +.app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active) { background-color: #df405a; } @media screen and (max-width:1174px) { - .layout-single-column #Follow-requests + .column-back-button--slim .column-back-button { + .app-body #Follow-requests + .column-back-button--slim .column-back-button { position: absolute; right: 0; margin: 0; @@ -3389,7 +3404,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } @media screen and (max-width:889px) { - .layout-single-column .account-authorize__wrapper { + .app-body .account-authorize__wrapper { border-left: 0; border-right: 0; } @@ -3398,126 +3413,126 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ⏺️ Other UI components : buttons, toggles, ... ----------------------------------------- */ -.layout-single-column .button, -.layout-single-column .account__header__tabs__buttons .icon-button { +.app-body .button, +.app-body .account__header__tabs__buttons .icon-button { border-radius: 8px; } -.layout-single-column .button, -.layout-single-column .button.logo-button, -.layout-single-column .rules-list li:before, -.layout-single-column .icon-with-badge__badge { +.app-body .button, +.app-body .button.logo-button, +.app-body .rules-list li:before, +.app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); transition: all .2s; } -.layout-single-column .button:disabled, -.layout-single-column .button.disabled { +.app-body .button:disabled, +.app-body .button.disabled { opacity: .7; } -.layout-single-column .text-icon-button.active, -.layout-single-column .button.button-tertiary, -.layout-single-column .account__header__fields a, -.layout-single-column .account__header__bio .account__header__fields a, -.layout-single-column .reply-indicator__content a.unhandled-link, -.layout-single-column .status__content a, -.layout-single-column .status__content a.hashtag, -.layout-single-column .status__content a.unhandled-link, -.layout-single-column .column-back-button, -.layout-single-column .about__section__title, -.layout-single-column .prose a, -.layout-single-column .column-link--transparent.active, -.layout-single-column .column-header > .column-header__back-button, -.layout-single-column .column-header__back-button, -.layout-single-column .interaction-modal__icon, -.layout-single-column .status__content a.mention, -.layout-single-column .status__content__read-more-button, -.layout-single-column .link-button, -.layout-single-column .translate-button button, -.layout-single-column .status__content__translate-button, -.layout-single-column .status__action-bar__dropdown .icon-button.active, -.layout-single-column .account__relationship .icon-button.active, -.layout-single-column .account__header__tabs__buttons .icon-button.active, -.layout-single-column .text-btn, -.layout-single-column .detailed-status__action-bar-dropdown .icon-button, -.layout-single-column .notification-bar-action { +.app-body .text-icon-button.active, +.app-body .button.button-tertiary, +.app-body .account__header__fields a, +.app-body .account__header__bio .account__header__fields a, +.app-body .reply-indicator__content a.unhandled-link, +.app-body .status__content a, +.app-body .status__content a.hashtag, +.app-body .status__content a.unhandled-link, +.app-body .column-back-button, +.app-body .about__section__title, +.app-body .prose a, +.app-body .column-link--transparent.active, +.app-body .column-header > .column-header__back-button, +.app-body .column-header__back-button, +.app-body .interaction-modal__icon, +.app-body .status__content a.mention, +.app-body .status__content__read-more-button, +.app-body .link-button, +.app-body .translate-button button, +.app-body .status__content__translate-button, +.app-body .status__action-bar__dropdown .icon-button.active, +.app-body .account__relationship .icon-button.active, +.app-body .account__header__tabs__buttons .icon-button.active, +.app-body .text-btn, +.app-body .detailed-status__action-bar-dropdown .icon-button, +.app-body .notification-bar-action { color: var(--color-accent); } -.layout-single-column .icon-button, -.layout-single-column .icon-button.inverted, -.layout-single-column .reply-indicator__content .status__content__spoiler-link, -.layout-single-column .status__content .status__content__spoiler-link { +.app-body .icon-button, +.app-body .icon-button.inverted, +.app-body .reply-indicator__content .status__content__spoiler-link, +.app-body .status__content .status__content__spoiler-link { color: var(--color-content-fg); } -.layout-single-column .reply-indicator__content .status__content__spoiler-link, -.layout-single-column .status__content .status__content__spoiler-link { +.app-body .reply-indicator__content .status__content__spoiler-link, +.app-body .status__content .status__content__spoiler-link { background-color: var(--color-accent-bg); border-radius: 8px; } -.layout-single-column .account__header__tabs__buttons .icon-button { +.app-body .account__header__tabs__buttons .icon-button { padding: 6px; border: 0; color: var(--color-content-fg); background-color: var(--color-content-secondary-bg); } -.layout-single-column .account__header__tabs__buttons .icon-button:hover { +.app-body .account__header__tabs__buttons .icon-button:hover { background-color: var(--color-accent-bg); color: var(--color-accent); } -.layout-single-column .icon-button:is(:active, :focus, :hover) { +.app-body .icon-button:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-accent); } -.layout-single-column .language-dropdown__dropdown { +.app-body .language-dropdown__dropdown { background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); box-shadow: 0 0 5px rgba(0, 0, 0, .15); } -.layout-single-column .language-dropdown__dropdown__results__item { +.app-body .language-dropdown__dropdown__results__item { border-radius: 8px; } -.layout-single-column .language-dropdown__dropdown__results__item.active, -.layout-single-column .language-dropdown__dropdown__results__item.active:hover { +.app-body .language-dropdown__dropdown__results__item.active, +.app-body .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { +.app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } -.layout-single-column .language-dropdown__dropdown__results__item__native-name { +.app-body .language-dropdown__dropdown__results__item__native-name { font-weight: bold; } -.layout-single-column .language-dropdown__dropdown__results__item__common-name { +.app-body .language-dropdown__dropdown__results__item__common-name { opacity: .7; } -.layout-single-column +.app-body :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-content-fg); } -.layout-single-column +.app-body .language-dropdown__dropdown__results__item:is(.active, .active:hover) :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-accent-fg); } -.layout-single-column +.app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) :is(.language-dropdown__dropdown__results__item__native-name, .language-dropdown__dropdown__results__item__common-name) { color: var(--color-accent); } -.layout-single-column .button:not(.button-secondary):is(:active, :focus, :hover), -.layout-single-column .button.button-tertiary:is(:active, :focus, :hover), -.layout-single-column .button.logo-button:is(:active, :focus, :hover) { +.app-body .button:not(.button-secondary):is(:active, :focus, :hover), +.app-body .button.button-tertiary:is(:active, :focus, :hover), +.app-body .button.logo-button:is(:active, :focus, :hover) { background-color: var(--color-accent-focus); } /* ⏺️ Toggles */ -.layout-single-column .setting-toggle__label { +.app-body .setting-toggle__label { vertical-align: top; } -.layout-single-column .react-toggle-track { +.app-body .react-toggle-track { background-color: var(--color-accent-lines); box-shadow: 0 0 0 20px var(--color-accent-lines) inset, @@ -3525,126 +3540,126 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 0 0 0 1px var(--color-accent-lines) inset, 0 0 0 1px var(--color-accent-lines) inset } -.layout-single-column .react-toggle-thumb { +.app-body .react-toggle-thumb { border: 0; } -.layout-single-column .react-toggle.react-toggle--checked .react-toggle-track, -.layout-single-column .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, -.layout-single-column .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { +.app-body .react-toggle.react-toggle--checked .react-toggle-track, +.app-body .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, +.app-body .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-accent); } -.layout-single-column .react-toggle--checked .react-toggle-thumb { +.app-body .react-toggle--checked .react-toggle-thumb { border-color: var(--color-accent); } -.layout-single-column .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { +.app-body .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-accent-focus); } /* ⏺️ Radio buttons */ -.layout-single-column .radio-button { +.app-body .radio-button { color: var(--color-content-fg); } -.layout-single-column .radio-button__input { +.app-body .radio-button__input { border-width: 2px; border-color: var(--color-content-fg-muted); background-color: var(--color-content-bg); } -.layout-single-column .radio-button__input.checked { +.app-body .radio-button__input.checked { border-color: var(--color-accent); background-color: var(--color-accent); } -.layout-single-column .dropdown-menu { +.app-body .dropdown-menu { border: 1px solid var(--color-lines); border-radius: 8px; } -.layout-single-column .dropdown-menu, -.layout-single-column .dropdown-menu__container__header, -.layout-single-column .dropdown-menu__item.edited-timestamp__history__item, -.layout-single-column .dropdown-menu__item :is(a, button) { +.app-body .dropdown-menu, +.app-body .dropdown-menu__container__header, +.app-body .dropdown-menu__item.edited-timestamp__history__item, +.app-body .dropdown-menu__item :is(a, button) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-color: var(--color-lines); } -.layout-single-column .dropdown-menu__item a, -.layout-single-column .dropdown-menu__arrow:before { +.app-body .dropdown-menu__item a, +.app-body .dropdown-menu__arrow:before { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; } -.layout-single-column .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) { +.app-body .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) { background: var(--color-accent); color: var(--color-accent-fg); outline: 0; } -.layout-single-column .dropdown-menu__separator { +.app-body .dropdown-menu__separator { border-color: var(--color-content-secondary-separator); } -.layout-single-column .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active), -.layout-single-column .privacy-dropdown__option:is(.active, .active:hover, :hover) { +.app-body .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active), +.app-body .privacy-dropdown__option:is(.active, .active:hover, :hover) { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content, -.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content strong, -.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content, -.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, -.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active .icon-button, -.layout-single-column .privacy-dropdown .icon-button.inverted.active { +.app-body .privacy-dropdown__option.active .privacy-dropdown__option__content, +.app-body .privacy-dropdown__option.active .privacy-dropdown__option__content strong, +.app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content, +.app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, +.app-body .privacy-dropdown.active .privacy-dropdown__value.active .icon-button, +.app-body .privacy-dropdown .icon-button.inverted.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe { background-image: var(--icon-globe-visibility-inv); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock { background-image: var(--icon-unlock-inv); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock { background-image: var(--icon-lock-inv); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { background-image: var(--icon-at-inv); } -.layout-single-column .button.button-tertiary:is(.button--confirmation, .button--destructive) { +.app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) { background-color: transparent; } -.layout-single-column .button.button-tertiary.button--confirmation { +.app-body .button.button-tertiary.button--confirmation { color: #4e8a6b; background-color: rgba(121, 189, 154, 0.3); } -.layout-single-column .button.button-tertiary.button--destructive { +.app-body .button.button-tertiary.button--destructive { color: #df405a; background-color: rgba(223, 64, 90, 0.3); } -.layout-single-column .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { +.app-body .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { background-color: #79bd9a; color: #ffffff; } -.layout-single-column .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { +.app-body .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { background-color: #df405a; color: #ffffff; } @media (prefers-color-scheme: dark) { - .layout-single-column .button.button-tertiary.button--confirmation { + .app-body .button.button-tertiary.button--confirmation { color: #72cb9d; } - .layout-single-column .button.button-tertiary.button--destructive { + .app-body .button.button-tertiary.button--destructive { color: #f3637b; } } -.layout-single-column .app-body +.app-body .app-body :is(.block-modal__cancel-button, .confirmation-modal__cancel-button, .confirmation-modal__secondary-button, .mute-modal__cancel-button) { background-color: transparent; } -.layout-single-column .status__content a.hashtag { +.app-body .status__content a.hashtag { color: var(--color-accent); } @@ -3652,102 +3667,102 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ–±οΈ Interaction modals --------------------- */ -.layout-single-column .modal-root__modal { +.app-body .modal-root__modal { border: 1px solid var(--color-lines); } -.layout-single-column .interaction-modal { +.app-body .interaction-modal { background-color: var(--color-content-bg); } -.layout-single-column .interaction-modal, -.layout-single-column .interaction-modal__lead h3 { +.app-body .interaction-modal, +.app-body .interaction-modal__lead h3 { color: var(--color-content-fg); } -.layout-single-column .interaction-modal__lead p, -.layout-single-column .interaction-modal__choices__choice p { +.app-body .interaction-modal__lead p, +.app-body .interaction-modal__choices__choice p { color: var(--color-fg); } -.layout-single-column .interaction-modal__icon { +.app-body .interaction-modal__icon { vertical-align: middle; } -.layout-single-column .interaction-modal p { +.app-body .interaction-modal p { color: var(--color-content-fg); } -.layout-single-column .interaction-modal p.hint { +.app-body .interaction-modal p.hint { color: var(--color-content-fg-muted); } -.layout-single-column .interaction-modal :is(.button, .button.button-tertiary) { +.app-body .interaction-modal :is(.button, .button.button-tertiary) { padding: 10px 18px; } -.layout-single-column .interaction-modal .button.button-tertiary:hover { +.app-body .interaction-modal .button.button-tertiary:hover { background-color: var(--color-content-secondary-separator); } -.layout-single-column .copypaste input, -.layout-single-column .interaction-modal__login__input { +.app-body .copypaste input, +.app-body .interaction-modal__login__input { border-color: var(--color-accent); background-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } -.layout-single-column .interaction-modal__login.expanded .interaction-modal__login__input { +.app-body .interaction-modal__login.expanded .interaction-modal__login__input { border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .interaction-modal__login__input input::placeholder { +.app-body .interaction-modal__login__input input::placeholder { color: var(--color-accent); } -.layout-single-column .interaction-modal__login.focused .interaction-modal__login__input { +.app-body .interaction-modal__login.focused .interaction-modal__login__input { background-color: var(--color-content-bg); border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); } -.layout-single-column .interaction-modal__login .search__popout { +.app-body .interaction-modal__login .search__popout { border-color: var(--color-lines); } -.layout-single-column .interaction-modal .copypaste button { +.app-body .interaction-modal .copypaste button { padding: 8px 18px; } -.layout-single-column .modal-root__overlay { +.app-body .modal-root__overlay { background-color: hsla(0, 0%, 1%, 0.7); } -.layout-single-column .modal-root__modal, -.layout-single-column .boost-modal__container, -.layout-single-column .mute-modal__container, -.layout-single-column .block-modal__container { +.app-body .modal-root__modal, +.app-body .boost-modal__container, +.app-body .mute-modal__container, +.app-body .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .boost-modal__container { +.app-body .boost-modal__container { margin-bottom: -11px; } -.layout-single-column .confirmation-modal__container, -.layout-single-column .mute-modal__container, -.layout-single-column .block-modal__container { +.app-body .confirmation-modal__container, +.app-body .mute-modal__container, +.app-body .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .block-modal__action-bar, -.layout-single-column .boost-modal__action-bar, -.layout-single-column .confirmation-modal__action-bar, -.layout-single-column .mute-modal__action-bar { +.app-body .block-modal__action-bar, +.app-body .boost-modal__action-bar, +.app-body .confirmation-modal__action-bar, +.app-body .mute-modal__action-bar { background-color: var(--color-accent-bg); } -.layout-single-column .block-modal__action-bar > div, -.layout-single-column .boost-modal__action-bar > div, -.layout-single-column .confirmation-modal__action-bar > div, -.layout-single-column .mute-modal__action-bar > div, -.layout-single-column .boost-modal__container .status__content__text, -.layout-single-column .boost-modal__container .display-name strong.display-name__html, -.layout-single-column .boost-modal__container .status__info, -.layout-single-column .boost-modal__container .status__relative-time time, -.layout-single-column .boost-modal__container .status.light .status__visibility-icon { +.app-body .block-modal__action-bar > div, +.app-body .boost-modal__action-bar > div, +.app-body .confirmation-modal__action-bar > div, +.app-body .mute-modal__action-bar > div, +.app-body .boost-modal__container .status__content__text, +.app-body .boost-modal__container .display-name strong.display-name__html, +.app-body .boost-modal__container .status__info, +.app-body .boost-modal__container .status__relative-time time, +.app-body .boost-modal__container .status.light .status__visibility-icon { color: var(--color-content-fg); } -.layout-single-column .actions-modal ul li:not(:empty) a { +.app-body .actions-modal ul li:not(:empty) a { color: var(--color-content-fg); } -.layout-single-column .actions-modal ul li:not(:empty) +.app-body .actions-modal ul li:not(:empty) a:is(.active, .active button, :active, @@ -3762,110 +3777,110 @@ a:is(.active, /* Media modals */ -.layout-single-column .modal-root__modal.media-modal { +.app-body .modal-root__modal.media-modal { background-color: rgba(255, 255, 255, .8); } -.layout-single-column .media-modal__overlay .picture-in-picture__footer { +.app-body .media-modal__overlay .picture-in-picture__footer { background-color: transparent; } -.layout-single-column .media-modal__nav, -.layout-single-column .media-modal__overlay .picture-in-picture__footer .icon-button { +.app-body .media-modal__nav, +.app-body .media-modal__overlay .picture-in-picture__footer .icon-button { color: var(--color-content-fg); } -.layout-single-column .media-modal__page-dot { +.app-body .media-modal__page-dot { background-color: var(--color-content-fg); } @media (prefers-color-scheme: dark) { - .layout-single-column .modal-root__modal.media-modal { + .app-body .modal-root__modal.media-modal { background-color: rgba(0, 0, 0, .6); } } /* Report modals */ -.layout-single-column .report-dialog-modal__container { +.app-body .report-dialog-modal__container { border-top: 0; } -.layout-single-column .report-dialog-modal__lead { +.app-body .report-dialog-modal__lead { color: var(--color-content-fg-muted); } -.layout-single-column .report-dialog-modal .poll__option.dialog-option { +.app-body .report-dialog-modal .poll__option.dialog-option { border-color: var(--color-lines); } -.layout-single-column .report-dialog-modal .dialog-option .poll__input { +.app-body .report-dialog-modal .dialog-option .poll__input { border-color: var(--color-accent); } -.layout-single-column .report-dialog-modal .dialog-option .poll__input.active { +.app-body .report-dialog-modal .dialog-option .poll__input.active { border-color: var(--color-accent); background-color: var(--color-accent); } -.layout-single-column .report-dialog-modal .poll__option.dialog-option>.poll__option__text { +.app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text { color: var(--color-content-fg); } -.layout-single-column .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { +.app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { color: var(--color-content-fg-bold) } -.layout-single-column .report-modal__comment, -.layout-single-column .report-modal__container { +.app-body .report-modal__comment, +.app-body .report-modal__container { border-color: var(--color-lines); } -.layout-single-column .report-modal__comment .setting-text-label { +.app-body .report-modal__comment .setting-text-label { color: var(--color-content-fg); } -.layout-single-column .report-dialog-modal .status__content__text p { +.app-body .report-dialog-modal .status__content__text p { color: var(--color-content-fg); } /* πŸ–ΌοΈ Picture in Picture */ -.layout-single-column .picture-in-picture { +.app-body .picture-in-picture { box-shadow: 0 0 5px rgba(0, 0, 0, .2); border-radius: 8px; } -.layout-single-column .picture-in-picture__footer, -.layout-single-column .picture-in-picture__header { +.app-body .picture-in-picture__footer, +.app-body .picture-in-picture__header { background-color: var(--color-content-bg); } -.layout-single-column .picture-in-picture__header .display-name span { +.app-body .picture-in-picture__header .display-name span { color: var(--color-content-fg-muted); } /* ⏯️ Video controls */ -.layout-single-column .video-player__seek__progress, -.layout-single-column .video-player__volume__handle, -.layout-single-column .video-player__volume__current, -.layout-single-column .video-player__seek__handle { +.app-body .video-player__seek__progress, +.app-body .video-player__volume__handle, +.app-body .video-player__volume__current, +.app-body .video-player__seek__handle { background-color: var(--color-accent); } /* πŸ“„ Meta ------- */ -.layout-single-column .link-footer p, -.layout-single-column .link-footer a { +.app-body .link-footer p, +.app-body .link-footer a { color: var(--color-fg-muted); } /* Server banner */ -.layout-single-column .server-banner__introduction { +.app-body .server-banner__introduction { display: none; } -.layout-single-column .server-banner { +.app-body .server-banner { padding: 0 0 20px; } -.layout-single-column .server-banner__hero { +.app-body .server-banner__hero { border-radius: 8px 8px 0 0; margin-bottom: 0; } -.layout-single-column .server-banner__description { +.app-body .server-banner__description { padding: 20px 15px 20px; margin-bottom: 0; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .server-banner__meta { +.app-body .server-banner__meta { padding: 0 15px 20px; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); @@ -3876,53 +3891,53 @@ a:is(.active, border-radius: 0 0 8px 8px; align-items: end; } -.layout-single-column .server-banner h4 { +.app-body .server-banner h4 { color: var(--color-fg); font-size: 80%; } -.layout-single-column .server-banner__number { +.app-body .server-banner__number { color: var(--color-content-fg-bold); } -.layout-single-column .server-banner__number-label { +.app-body .server-banner__number-label { color: var(--color-content-fg); } -.layout-single-column .server-banner .account { +.app-body .server-banner .account { background-color: transparent; box-shadow: none; padding: 0; border-left: 0; border-right: 0; } -.layout-single-column .server-banner__meta__column:first-child { +.app-body .server-banner__meta__column:first-child { width: calc(60% - 5px); } -.layout-single-column .server-banner__meta__column:nth-child(2) { +.app-body .server-banner__meta__column:nth-child(2) { width: calc(40% - 5px); } -.layout-single-column .server-banner .button.button-secondary { +.app-body .server-banner .button.button-secondary { padding: 10px; margin: 10px 0; } -.layout-single-column .button.button-secondary, -.layout-single-column .button.button-tertiary { +.app-body .button.button-secondary, +.app-body .button.button-tertiary { border: 0; background-color: var(--color-accent-bg); color: var(--color-accent); } -.layout-single-column .button:is(.button-secondary, .button-tertiary):hover { +.app-body .button:is(.button-secondary, .button-tertiary):hover { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .sign-in-banner .button, -.layout-single-column .button:is(.button-secondary, .button-tertiary) { +.app-body .sign-in-banner .button, +.app-body .button:is(.button-secondary, .button-tertiary) { padding: 10px 18px; } @media screen and (max-width:1174px) { - .layout-single-column .button.button-tertiary { + .app-body .button.button-tertiary { padding: 7px 18px; } } -.layout-single-column .sign-in-banner p { +.app-body .sign-in-banner p { color: var(--color-fg); opacity: .5; } @@ -3930,131 +3945,131 @@ a:is(.active, /* πŸ€— Onboarding */ -.layout-single-column .scrollable.follow-recommendations-container, -.layout-single-column .column-list { +.app-body .scrollable.follow-recommendations-container, +.app-body .column-list { background-color: var(--color-content-bg); } -.layout-single-column .column-title .logo { +.app-body .column-title .logo { display: none; } -.layout-single-column .column-title h3, -.layout-single-column .column-title p { +.app-body .column-title h3, +.app-body .column-title p { color: var(--color-content-fg); } -.layout-single-column .column-list { +.app-body .column-list { border: 0; } -.layout-single-column .account__note { +.app-body .account__note { color: var(--color-content-fg-muted); } -.layout-single-column .onboarding__steps__item, -.layout-single-column .onboarding__link { +.app-body .onboarding__steps__item, +.app-body .onboarding__link { background-color: var(--color-content-secondary-bg); transition: all .2s; } -.layout-single-column .onboarding__steps__item:is(:active, :focus, :hover), -.layout-single-column .onboarding__link:is(:active, :focus, :hover) { +.app-body .onboarding__steps__item:is(:active, :focus, :hover), +.app-body .onboarding__link:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } -.layout-single-column .onboarding__steps__item__icon, -.layout-single-column .onboarding__steps__item__description h6, -.layout-single-column .onboarding__link { +.app-body .onboarding__steps__item__icon, +.app-body .onboarding__steps__item__description h6, +.app-body .onboarding__link { color: var(--color-accent); } -.layout-single-column .onboarding__steps__item__description p, -.layout-single-column .onboarding__lead, -.layout-single-column .onboarding__lead strong { +.app-body .onboarding__steps__item__description p, +.app-body .onboarding__lead, +.app-body .onboarding__lead strong { color: var(--color-content-fg); } -.layout-single-column .onboarding__steps__item__go svg path, -.layout-single-column .onboarding__link svg path { +.app-body .onboarding__steps__item__go svg path, +.app-body .onboarding__link svg path { fill: var(--color-accent); } -.layout-single-column .follow-recommendations { +.app-body .follow-recommendations { background-color: var(--color-content-bg); } -.layout-single-column .follow-recommendations .account { +.app-body .follow-recommendations .account { border-left: 0; border-right: 0; margin-bottom: 15px; } -.layout-single-column .follow-recommendations .account__note { +.app-body .follow-recommendations .account__note { color: var(--color-content-fg); opacity: .7; } -.layout-single-column .follow-recommendations .account__note p { +.app-body .follow-recommendations .account__note p { overflow: hidden; } -.layout-single-column .copy-paste-text { +.app-body .copy-paste-text { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); } -.layout-single-column .copy-paste-text:is(:focus, :active), -.layout-single-column .tip-carousel:focus { +.app-body .copy-paste-text:is(:focus, :active), +.app-body .tip-carousel:focus { border-color: var(--color-accent); } -.layout-single-column .copy-paste-text:has(textarea:focus) { +.app-body .copy-paste-text:has(textarea:focus) { border-color: var(--color-accent); } /* πŸ“’ Announcements */ -.layout-single-column .announcements, -.layout-single-column .announcements::after { +.app-body .announcements, +.app-body .announcements::after { background-color: var(--color-accent-bg); color: var(--color-content-fg); } -.layout-single-column .announcements { +.app-body .announcements { overflow: visible; z-index: 0; box-shadow: 0 -20px var(--color-bg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .announcements__item strong { +.app-body .announcements__item strong { font-weight: 800; color: var(--color-content-fg-bold); } -.layout-single-column .announcements__item__unread { +.app-body .announcements__item__unread { color: var(--color-accent); } -.layout-single-column .announcements__pagination, -.layout-single-column .announcements__pagination .icon-button { +.app-body .announcements__pagination, +.app-body .announcements__pagination .icon-button { color: var(--color-content-fg); } -.layout-single-column .announcements__mastodon { +.app-body .announcements__mastodon { border-radius: 0 0 0 8px; } -.layout-single-column .reactions-bar__item { +.app-body .reactions-bar__item { background-color: var(--color-content-bg); } -.layout-single-column .reactions-bar__item.active { +.app-body .reactions-bar__item.active { background-color: var(--color-accent); } -.layout-single-column .reactions-bar__item__count, -.layout-single-column .reactions-bar__item__count .animated-number { +.app-body .reactions-bar__item__count, +.app-body .reactions-bar__item__count .animated-number { color: var(--color-content-fg); } -.layout-single-column .reactions-bar__item.active .reactions-bar__item__count .animated-number { +.app-body .reactions-bar__item.active .reactions-bar__item__count .animated-number { color: var(--color-accent-fg); } -.layout-single-column .reactions-bar .emoji-button, -.layout-single-column .announcements__item__content a.unhandled-link, -.layout-single-column .announcements__item__content a { +.app-body .reactions-bar .emoji-button, +.app-body .announcements__item__content a.unhandled-link, +.app-body .announcements__item__content a { color: var(--color-accent); } -.layout-single-column .announcements .emoji-button { +.app-body .announcements .emoji-button { margin: 0; } @media screen and (max-width:1174px) { - .layout-single-column .announcements { + .app-body .announcements { box-shadow: none; margin-top: -10px; border-radius: 0; } - .layout-single-column .announcements__mastodon { + .app-body .announcements__mastodon { border-radius: 0; } } @@ -4062,25 +4077,25 @@ a:is(.active, /* 404 */ -.layout-single-column .empty-column-indicator, -.layout-single-column .error-column { +.app-body .empty-column-indicator, +.app-body .error-column { background-color: var(--color-content-bg); color: var(--color-content-fg); margin-top: -1px; } -.layout-single-column .error-column { +.app-body .error-column { border: 1px solid var(--color-lines); border-radius: 8px !important; } -.layout-single-column .error-column__message h1, -.layout-single-column .error-column__message { +.app-body .error-column__message h1, +.app-body .error-column__message { color: var(--color-content-fg); } -.layout-single-column .error-column__image { +.app-body .error-column__image { margin-top: 0; } @media screen and (max-width:889px) { - .layout-single-column .error-column { + .app-body .error-column { border-radius: 0 !important; border-left: 0; border-right: 0; @@ -4091,147 +4106,147 @@ a:is(.active, /* πŸ“œ About page ------------- */ -.layout-single-column .scrollable.about { +.app-body .scrollable.about { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); display: flex; flex-flow: column; } @media screen and (max-width:889px) { - .layout-single-column .scrollable.about { + .app-body .scrollable.about { border-left: 0; border-right: 0; } } -.layout-single-column .about__header { +.app-body .about__header { order: 1; margin-bottom: 10px; } -.layout-single-column .about__section:nth-child(3) { +.app-body .about__section:nth-child(3) { order: 3; } -.layout-single-column .about__meta { +.app-body .about__meta { order: 2; } -.layout-single-column .about__section:nth-child(4) { +.app-body .about__section:nth-child(4) { order: 4; } -.layout-single-column .about__section:nth-child(5) { +.app-body .about__section:nth-child(5) { order: 5; } -.layout-single-column .about .link-footer { +.app-body .about .link-footer { order: 6; } -.layout-single-column .about__footer { +.app-body .about__footer { order: 7; } -.layout-single-column .about__header h1, -.layout-single-column .about__header p, -.layout-single-column #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { +.app-body .about__header h1, +.app-body .about__header p, +.app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { display: none; } -.layout-single-column .about__header p, -.layout-single-column .about__meta h4 { +.app-body .about__header p, +.app-body .about__meta h4 { color: var(--color-fg); } -.layout-single-column .about__header__hero { +.app-body .about__header__hero { margin: -20px -20px 20px; width: calc(100% + 40px); border-radius: 0; background-color: var(--color-content-bg); } -.layout-single-column .about__header__hero, -.layout-single-column .about__meta { +.app-body .about__header__hero, +.app-body .about__meta { margin-bottom: 10px; } -.layout-single-column .about__header h1 { +.app-body .about__header h1 { margin-bottom: 0; } @media screen and (min-width:890px) { - .layout-single-column .scrollable.about { + .app-body .scrollable.about { border-radius: 8px !important; } - .layout-single-column .about__header__hero { + .app-body .about__header__hero { border-radius: 8px 8px 0 0; } } -.layout-single-column .about__mail { +.app-body .about__mail { color: var(--color-content-fg); } -.layout-single-column .about__meta h4 { +.app-body .about__meta h4 { font-size: 12px; font-weight: bold; margin-bottom: 8px; } -.layout-single-column .about__meta .account { +.app-body .about__meta .account { background: none; box-shadow: none; padding: 0; border-left: 0; border-right: 0; } -.layout-single-column .about__meta__divider { +.app-body .about__meta__divider { border-left: 3px solid var(--color-content-secondary-separator); } @media screen and (max-width:600px) { - .layout-single-column .about__meta__divider { + .app-body .about__meta__divider { border-top: 3px solid var(--color-content-secondary-separator); width: 90%; } } -.layout-single-column .about__section:nth-child(3) .about__section__body { +.app-body .about__section:nth-child(3) .about__section__body { padding-bottom: 3em; } -.layout-single-column .about__meta, -.layout-single-column .about__section__title { +.app-body .about__meta, +.app-body .about__section__title { color: var(--color-accent); background-color: var(--color-content-secondary-bg); border: 0; border-radius: 8px; } -.layout-single-column .about__section.active .about__section__title { +.app-body .about__section.active .about__section__title { border-radius: 8px 8px 0 0; } -.layout-single-column .about__section.active:not(:nth-of-type(3)) .about__section__body { +.app-body .about__section.active:not(:nth-of-type(3)) .about__section__body { border: 0 !important; background-color: var(--color-content-secondary-bg); border-radius: 0 0 8px 8px; } -.layout-single-column .prose, -.layout-single-column .prose p, -.layout-single-column .prose b, -.layout-single-column .prose h1, -.layout-single-column .prose h2, -.layout-single-column .prose h3, -.layout-single-column .prose h4, -.layout-single-column .prose h5, -.layout-single-column .prose h6, -.layout-single-column .prose strong, -.layout-single-column .rules-list, -.layout-single-column .about__domain-blocks__domain h6, -.layout-single-column .about__domain-blocks__domain__type { +.app-body .prose, +.app-body .prose p, +.app-body .prose b, +.app-body .prose h1, +.app-body .prose h2, +.app-body .prose h3, +.app-body .prose h4, +.app-body .prose h5, +.app-body .prose h6, +.app-body .prose strong, +.app-body .rules-list, +.app-body .about__domain-blocks__domain h6, +.app-body .about__domain-blocks__domain__type { color: var(--color-content-fg); } -.layout-single-column .prose ul>li:before { +.app-body .prose ul>li:before { background-color: var(--color-fg); } -.layout-single-column .about__section__body .prose hr { +.app-body .about__section__body .prose hr { border-color: var(--color-content-secondary-separator); margin-top: 2em; margin-bottom: 2em; border-width: 3px; } -.layout-single-column .about__section__body .prose a, -.layout-single-column .about__section__body .prose a:hover, -.layout-single-column .prose a strong { +.app-body .about__section__body .prose a, +.app-body .about__section__body .prose a:hover, +.app-body .prose a strong { color: var(--color-accent); text-decoration: none; } -.layout-single-column .about__section__body .prose a:hover { +.app-body .about__section__body .prose a:hover { text-decoration: underline; } -.layout-single-column .about__section__body .prose small.lang_label { +.app-body .about__section__body .prose small.lang_label { margin-left: -2em; margin-top: 1px; display: block; @@ -4243,11 +4258,11 @@ a:is(.active, .about__section.active .about__section__title { background-color: var(--color-accent-bg); } -.layout-single-column .rules-list li { +.app-body .rules-list li { border-bottom: 2px solid var(--color-accent-lines); padding: 1em 1.75em 1em 3.4em; } -.layout-single-column .rules-list li:last-child { +.app-body .rules-list li:last-child { border-bottom: 0; } .about__domain-blocks { @@ -4265,7 +4280,7 @@ a:is(.active, /* Privacy Policy page */ -.layout-single-column .column > .scrollable.privacy-policy { +.app-body .column > .scrollable.privacy-policy { border: 1px solid var(--color-lines); background-color: var(--color-content-bg); } @@ -4273,12 +4288,122 @@ a:is(.active, /* πŸ‘‹ Hide superfluous UI */ -.layout-single-column div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr, -.layout-single-column .navigation-panel__legal > hr, -.layout-single-column .about__footer, /* Hide meta footer */ -.layout-single-column .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */ -.layout-single-column .search-banner ~ .search, /* Hide search field for logged out users */ -.layout-single-column .getting-started__trends h4, /* Hide Trending header in sidebar */ -.layout-single-column .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ { +.app-body div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr, +.app-body .navigation-panel__legal > hr, +.app-body .about__footer, /* Hide meta footer */ +.app-body .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */ +.app-body .search-banner ~ .search, /* Hide search field for logged out users */ +.app-body .getting-started__trends h4, /* Hide Trending header in sidebar */ +.app-body .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ { display: none; } + +/* Multi-column layout */ +.layout-multiple-columns { + --color-bg: #f5f2ef; +} +:root:has(.layout-multiple-columns) *::-webkit-scrollbar { + width: 4px; +} +:root:has(.layout-multiple-columns) *::-webkit-scrollbar-track { + background-color: var(--color-accent-bg); + border-right: 1px solid var(--color-lines); +} +:root:has(.layout-multiple-columns) *::-webkit-scrollbar-thumb { + opacity: .8; +} +.layout-multiple-columns .scrollable, +.layout-multiple-columns .column > .scrollable { + max-height: 100%; +} +.layout-multiple-columns .column { + width: 400px; + padding-bottom: 0; +} +.layout-multiple-columns .drawer__inner__mastodon { + display: none; +} +.layout-multiple-columns :is(.drawer__inner, .drawer__inner.darker) { + background: transparent; +} +.layout-multiple-columns .drawer__header { + background-color: var(--color-content-bg); + border-top: 1px solid var(--color-lines); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + border-radius: 8px 8px 0 0; + margin-bottom: 0; +} +.layout-multiple-columns .search__input { + border-radius: 0 0 8px 8px; +} +.layout-multiple-columns .drawer__tab { + transition: all .3s; + border-radius: 6px; + height: 40px; + padding: 5px; + margin: 5px; + box-sizing: border-box; + border: 0; +} +.layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) { + background-color: var(--color-accent-bg); +} +.layout-multiple-columns .drawer__tab .icon-cog { + background-image: var(--icon-gear); +} +.layout-multiple-columns .drawer__tab .icon-globe { + background-image: var(--icon-globe-active); +} +.layout-multiple-columns .drawer__tab .icon-users { + background-image: var(--icon-users); +} +.layout-multiple-columns .drawer__tab .icon-bars { + background-image: var(--icon-ellipsis); +} +.layout-multiple-columns .drawer__tab .icon-sign-out { + background-image: var(--icon-logout); +} +.layout-multiple-columns .column-header__icon.icon-bars { + background-image: var(--icon-globe-active); +} + +.layout-multiple-columns .flex-spacer, +.layout-multiple-columns .getting-started, +.layout-multiple-columns .getting-started__wrapper { + background-color: var(--color-content-bg); +} +.layout-multiple-columns .getting-started__wrapper { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines); + padding-bottom: 10px; + border-radius: 0 0 8px 8px; +} +.layout-multiple-columns .getting-started .column-link { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + margin: 0 5px 2px; + border-radius: 8px; +} +.layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) { + background-color: var(--color-accent-bg); + color: var(--color-accent); +} + +.layout-multiple-columns .column-link__badge { + background-color: var(--color-accent); + color: var(--color-accent-fg); + border-radius: 8px; + line-height: 15px; + font-weight: bold; +} + +.layout-multiple-columns .column-header, +.layout-multiple-columns .column-back-button { + background-color: var(--color-content-bg); +} + +.layout-multiple-columns .column-header__setting-btn { + font-weight: 600; +} diff --git a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss index db3163e..d57109c 100644 --- a/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui-purple/layout-single-column.scss @@ -88,6 +88,7 @@ --icon-post-notification: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjAsMTI4YTE2LDE2LDAsMSwxLTE2LTE2QTE2LDE2LDAsMCwxLDEyMCwxMjhabTMyLTE2YTE2LDE2LDAsMSwwLDE2LDE2QTE2LDE2LDAsMCwwLDE1MiwxMTJabTg0LDE2QTEwOCwxMDgsMCwwLDEsNzguNzcsMjI0LjE1TDQ2LjM0LDIzNUEyMCwyMCwwLDAsMSwyMSwyMDkuNjZsMTAuODEtMzIuNDNBMTA4LDEwOCwwLDEsMSwyMzYsMTI4Wm0tMjQsMEE4NCw4NCwwLDEsMCw1NS4yNywxNzAuMDZhMTIsMTIsMCwwLDEsMSw5LjgxbC05LjkzLDI5Ljc5LDI5Ljc5LTkuOTNhMTIuMSwxMi4xLDAsMCwxLDMuOC0uNjIsMTIsMTIsMCwwLDEsNiwxLjYyQTg0LDg0LDAsMCwwLDIxMiwxMjhaIj48L3BhdGg+PC9zdmc+"); --icon-post-notification-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTI4QTk2LDk2LDAsMCwxLDc5LjkzLDIxMS4xMWgwTDQyLjU0LDIyMy41OGE4LDgsMCwwLDEtMTAuMTItMTAuMTJsMTIuNDctMzcuMzloMEE5Niw5NiwwLDEsMSwyMjQsMTI4WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTEyOCwyNEExMDQsMTA0LDAsMCwwLDM2LjE4LDE3Ni44OEwyNC44MywyMTAuOTNhMTYsMTYsMCwwLDAsMjAuMjQsMjAuMjRsMzQuMDUtMTEuMzVBMTA0LDEwNCwwLDEsMCwxMjgsMjRabTAsMTkyYTg3Ljg3LDg3Ljg3LDAsMCwxLTQ0LjA2LTExLjgxLDgsOCwwLDAsMC00LTEuMDgsNy44NSw3Ljg1LDAsMCwwLTIuNTMuNDJMNDAsMjE2LDUyLjQ3LDE3OC42YTgsOCwwLDAsMC0uNjYtNi41NEE4OCw4OCwwLDEsMSwxMjgsMjE2Wm0xMi04OGExMiwxMiwwLDEsMS0xMi0xMkExMiwxMiwwLDAsMSwxNDAsMTI4Wm0tNDQsMGExMiwxMiwwLDEsMS0xMi0xMkExMiwxMiwwLDAsMSw5NiwxMjhabTg4LDBhMTIsMTIsMCwxLDEtMTItMTJBMTIsMTIsMCwwLDEsMTg0LDEyOFoiPjwvcGF0aD48L3N2Zz4="); --icon-users: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMzYsMTA4QTUyLDUyLDAsMSwxLDg0LDU2LDUyLDUyLDAsMCwxLDEzNiwxMDhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTE3LjI1LDE1Ny45MmE2MCw2MCwwLDEsMC02Ni41LDBBOTUuODMsOTUuODMsMCwwLDAsMy41MywxOTUuNjNhOCw4LDAsMSwwLDEzLjQsOC43NCw4MCw4MCwwLDAsMSwxMzQuMTQsMCw4LDgsMCwwLDAsMTMuNC04Ljc0QTk1LjgzLDk1LjgzLDAsMCwwLDExNy4yNSwxNTcuOTJaTTQwLDEwOGE0NCw0NCwwLDEsMSw0NCw0NEE0NC4wNSw0NC4wNSwwLDAsMSw0MCwxMDhabTIxMC4xNCw5OC43YTgsOCwwLDAsMS0xMS4wNy0yLjMzQTc5LjgzLDc5LjgzLDAsMCwwLDE3MiwxNjhhOCw4LDAsMCwxLDAtMTYsNDQsNDQsMCwxLDAtMTYuMzQtODQuODcsOCw4LDAsMSwxLTUuOTQtMTQuODUsNjAsNjAsMCwwLDEsNTUuNTMsMTA1LjY0LDk1LjgzLDk1LjgzLDAsMCwxLDQ3LjIyLDM3LjcxQTgsOCwwLDAsMSwyNTAuMTQsMjA2LjdaIj48L3BhdGg+PC9zdmc+"); + --icon-users-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMzYsMTA4QTUyLDUyLDAsMSwxLDg0LDU2LDUyLDUyLDAsMCwxLDEzNiwxMDhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTE3LjI1LDE1Ny45MmE2MCw2MCwwLDEsMC02Ni41LDBBOTUuODMsOTUuODMsMCwwLDAsMy41MywxOTUuNjNhOCw4LDAsMSwwLDEzLjQsOC43NCw4MCw4MCwwLDAsMSwxMzQuMTQsMCw4LDgsMCwwLDAsMTMuNC04Ljc0QTk1LjgzLDk1LjgzLDAsMCwwLDExNy4yNSwxNTcuOTJaTTQwLDEwOGE0NCw0NCwwLDEsMSw0NCw0NEE0NC4wNSw0NC4wNSwwLDAsMSw0MCwxMDhabTIxMC4xNCw5OC43YTgsOCwwLDAsMS0xMS4wNy0yLjMzQTc5LjgzLDc5LjgzLDAsMCwwLDE3MiwxNjhhOCw4LDAsMCwxLDAtMTYsNDQsNDQsMCwxLDAtMTYuMzQtODQuODcsOCw4LDAsMSwxLTUuOTQtMTQuODUsNjAsNjAsMCwwLDEsNTUuNTMsMTA1LjY0LDk1LjgzLDk1LjgzLDAsMCwxLDQ3LjIyLDM3LjcxQTgsOCwwLDAsMSwyNTAuMTQsMjA2LjdaIj48L3BhdGg+PC9zdmc+"); --icon-user-plus: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNTYsMTM2YTEyLDEyLDAsMCwxLTEyLDEyaC04djhhMTIsMTIsMCwwLDEtMjQsMHYtOGgtOGExMiwxMiwwLDAsMSwwLTI0aDh2LThhMTIsMTIsMCwwLDEsMjQsMHY4aDhBMTIsMTIsMCwwLDEsMjU2LDEzNlptLTU0LjgxLDU2LjI4YTEyLDEyLDAsMSwxLTE4LjM4LDE1LjQ0QzE2OS4xMiwxOTEuNDIsMTQ1LDE3MiwxMDgsMTcyYy0yOC44OSwwLTU1LjQ2LDEyLjY4LTc0LjgxLDM1LjcyYTEyLDEyLDAsMCwxLTE4LjM4LTE1LjQ0QTEyNC4wOCwxMjQuMDgsMCwwLDEsNjMuNSwxNTYuNTNhNzIsNzIsMCwxLDEsODksMEExMjQsMTI0LDAsMCwxLDIwMS4xOSwxOTIuMjhaTTEwOCwxNDhhNDgsNDgsMCwxLDAtNDgtNDhBNDguMDUsNDguMDUsMCwwLDAsMTA4LDE0OFoiPjwvcGF0aD48L3N2Zz4="); --icon-user-plus-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHN0eWxlPSItLW5vaXItaW5saW5lLWZpbGw6ICNjOWM1YmU7IiBkYXRhLW5vaXItaW5saW5lLWZpbGw9IiI+PHBhdGggZD0iTTE2OCwxMDBhNjAsNjAsMCwxLDEtNjAtNjBBNjAsNjAsMCwwLDEsMTY4LDEwMFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0yNTYsMTM2YTgsOCwwLDAsMS04LDhIMjMydjE2YTgsOCwwLDAsMS0xNiwwVjE0NEgyMDBhOCw4LDAsMCwxLDAtMTZoMTZWMTEyYTgsOCwwLDAsMSwxNiwwdjE2aDE2QTgsOCwwLDAsMSwyNTYsMTM2Wm0tNTcuODcsNTguODVhOCw4LDAsMCwxLTEyLjI2LDEwLjNDMTY1Ljc1LDE4MS4xOSwxMzguMDksMTY4LDEwOCwxNjhzLTU3Ljc1LDEzLjE5LTc3Ljg3LDM3LjE1YTgsOCwwLDAsMS0xMi4yNS0xMC4zYzE0Ljk0LTE3Ljc4LDMzLjUyLTMwLjQxLDU0LjE3LTM3LjE3YTY4LDY4LDAsMSwxLDcxLjksMEMxNjQuNiwxNjQuNDQsMTgzLjE4LDE3Ny4wNywxOTguMTMsMTk0Ljg1Wk0xMDgsMTUyYTUyLDUyLDAsMSwwLTUyLTUyQTUyLjA2LDUyLjA2LDAsMCwwLDEwOCwxNTJaIj48L3BhdGg+PC9zdmc+"); --icon-user-plus-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHN0eWxlPSItLW5vaXItaW5saW5lLWZpbGw6ICM1ZjlhZmY7IiBkYXRhLW5vaXItaW5saW5lLWZpbGw9IiI+PHBhdGggZD0iTTE2OCwxMDBhNjAsNjAsMCwxLDEtNjAtNjBBNjAsNjAsMCwwLDEsMTY4LDEwMFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0yNTYsMTM2YTgsOCwwLDAsMS04LDhIMjMydjE2YTgsOCwwLDAsMS0xNiwwVjE0NEgyMDBhOCw4LDAsMCwxLDAtMTZoMTZWMTEyYTgsOCwwLDAsMSwxNiwwdjE2aDE2QTgsOCwwLDAsMSwyNTYsMTM2Wm0tNTcuODcsNTguODVhOCw4LDAsMCwxLTEyLjI2LDEwLjNDMTY1Ljc1LDE4MS4xOSwxMzguMDksMTY4LDEwOCwxNjhzLTU3Ljc1LDEzLjE5LTc3Ljg3LDM3LjE1YTgsOCwwLDAsMS0xMi4yNS0xMC4zYzE0Ljk0LTE3Ljc4LDMzLjUyLTMwLjQxLDU0LjE3LTM3LjE3YTY4LDY4LDAsMSwxLDcxLjksMEMxNjQuNiwxNjQuNDQsMTgzLjE4LDE3Ny4wNywxOTguMTMsMTk0Ljg1Wk0xMDgsMTUyYTUyLDUyLDAsMSwwLTUyLTUyQTUyLjA2LDUyLjA2LDAsMCwwLDEwOCwxNTJaIj48L3BhdGg+PC9zdmc+"); @@ -114,6 +115,7 @@ --icon-list: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-list-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-settings: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzYzNjRmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMSwxMDguNzYsMTk4LjI1LDkwLjYyYy0uNjQtMS4xNi0xLjMxLTIuMjktMi0zLjQxbC0uMTItMzZBMTA0LjYxLDEwNC42MSwwLDAsMCwxNjIsMzJMMTMwLDQ5Ljg5Yy0xLjM0LDAtMi42OSwwLTQsMEw5NCwzMkExMDQuNTgsMTA0LjU4LDAsMCwwLDU5Ljg5LDUxLjI1bC0uMTYsMzZjLS43LDEuMTItMS4zNywyLjI2LTIsMy40MWwtMzEuODQsMTguMWE5OS4xNSw5OS4xNSwwLDAsMCwwLDM4LjQ2bDMxLjg1LDE4LjE0Yy42NCwxLjE2LDEuMzEsMi4yOSwyLDMuNDFsLjEyLDM2QTEwNC42MSwxMDQuNjEsMCwwLDAsOTQsMjI0bDMyLTE3Ljg3YzEuMzQsMCwyLjY5LDAsNCwwTDE2MiwyMjRhMTA0LjU4LDEwNC41OCwwLDAsMCwzNC4wOC0xOS4yNWwuMTYtMzZjLjctMS4xMiwxLjM3LTIuMjYsMi0zLjQxbDMxLjg0LTE4LjFBOTkuMTUsOTkuMTUsMCwwLDAsMjMwLjEsMTA4Ljc2Wk0xMjgsMTY4YTQwLDQwLDAsMSwxLDQwLTQwQTQwLDQwLDAsMCwxLDEyOCwxNjhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDgwYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWm0xMDkuOTQtNTIuNzlhOCw4LDAsMCwwLTMuODktNS40bC0yOS44My0xNy0uMTItMzMuNjJhOCw4LDAsMCwwLTIuODMtNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLTM2LjcyLTIwLjY3LDgsOCwwLDAsMC02LjQ2LjU5TDEyOCw0MS44NSw5Ny44OCwyNWE4LDgsMCwwLDAtNi40Ny0uNkExMTEuOTIsMTExLjkyLDAsMCwwLDU0LjczLDQ1LjE1YTgsOCwwLDAsMC0yLjgzLDYuMDdsLS4xNSwzMy42NS0yOS44MywxN2E4LDgsMCwwLDAtMy44OSw1LjQsMTA2LjQ3LDEwNi40NywwLDAsMCwwLDQxLjU2LDgsOCwwLDAsMCwzLjg5LDUuNGwyOS44MywxNywuMTIsMzMuNjNhOCw4LDAsMCwwLDIuODMsNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLDM2LjcyLDIwLjY3LDgsOCwwLDAsMCw2LjQ2LS41OUwxMjgsMjE0LjE1LDE1OC4xMiwyMzFhNy45MSw3LjkxLDAsMCwwLDMuOSwxLDguMDksOC4wOSwwLDAsMCwyLjU3LS40MiwxMTIuMSwxMTIuMSwwLDAsMCwzNi42OC0yMC43Myw4LDgsMCwwLDAsMi44My02LjA3bC4xNS0zMy42NSwyOS44My0xN2E4LDgsMCwwLDAsMy44OS01LjRBMTA2LjQ3LDEwNi40NywwLDAsMCwyMzcuOTQsMTA3LjIxWm0tMTUsMzQuOTEtMjguNTcsMTYuMjVhOCw4LDAsMCwwLTMsM2MtLjU4LDEtMS4xOSwyLjA2LTEuODEsMy4wNmE3Ljk0LDcuOTQsMCwwLDAtMS4yMiw0LjIxbC0uMTUsMzIuMjVhOTUuODksOTUuODksMCwwLDEtMjUuMzcsMTQuM0wxMzQsMTk5LjEzYTgsOCwwLDAsMC0zLjkxLTFoLS4xOWMtMS4yMSwwLTIuNDMsMC0zLjY0LDBhOC4xLDguMSwwLDAsMC00LjEsMWwtMjguODQsMTYuMUE5Niw5NiwwLDAsMSw2Ny44OCwyMDFsLS4xMS0zMi4yYTgsOCwwLDAsMC0xLjIyLTQuMjJjLS42Mi0xLTEuMjMtMi0xLjgtMy4wNmE4LjA5LDguMDksMCwwLDAtMy0zLjA2bC0yOC42LTE2LjI5YTkwLjQ5LDkwLjQ5LDAsMCwxLDAtMjguMjZMNjEuNjcsOTcuNjNhOCw4LDAsMCwwLDMtM2MuNTgtMSwxLjE5LTIuMDYsMS44MS0zLjA2YTcuOTQsNy45NCwwLDAsMCwxLjIyLTQuMjFsLjE1LTMyLjI1YTk1Ljg5LDk1Ljg5LDAsMCwxLDI1LjM3LTE0LjNMMTIyLDU2Ljg3YTgsOCwwLDAsMCw0LjEsMWMxLjIxLDAsMi40MywwLDMuNjQsMGE4LDgsMCwwLDAsNC4xLTFsMjguODQtMTYuMUE5Niw5NiwwLDAsMSwxODguMTIsNTVsLjExLDMyLjJhOCw4LDAsMCwwLDEuMjIsNC4yMmMuNjIsMSwxLjIzLDIsMS44LDMuMDZhOC4wOSw4LjA5LDAsMCwwLDMsMy4wNmwyOC42LDE2LjI5QTkwLjQ5LDkwLjQ5LDAsMCwxLDIyMi45LDE0Mi4xMloiPjwvcGF0aD48L3N2Zz4="); + --icon-logout: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsMTI4bC00MCw0MFY4OFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0xMTIsMjE2YTgsOCwwLDAsMS04LDhINDhhMTYsMTYsMCwwLDEtMTYtMTZWNDhBMTYsMTYsMCwwLDEsNDgsMzJoNTZhOCw4LDAsMCwxLDAsMTZINDhWMjA4aDU2QTgsOCwwLDAsMSwxMTIsMjE2Wm0xMDkuNjYtODIuMzQtNDAsNDBBOCw4LDAsMCwxLDE2OCwxNjhWMTM2SDEwNGE4LDgsMCwwLDEsMC0xNmg2NFY4OGE4LDgsMCwwLDEsMTMuNjYtNS42Nmw0MCw0MEE4LDgsMCwwLDEsMjIxLjY2LDEzMy42NlptLTE3LTUuNjZMMTg0LDEwNy4zMXY0MS4zOFoiPjwvcGF0aD48L3N2Zz4="); /* Post visibility icons */ --icon-globe-visibility: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNDguNTksNTguNjdjLTYuMzEtMTAuODctMjMtMjEuMDYtNjYuMTYtOS43MUE5NS45NCw5NS45NCwwLDAsMCwzMiwxMjhxMCwzLjYuMjYsNy4xNEMuNTYsMTY2Ljg2LDEuMSwxODYuNCw3LjQ0LDE5Ny4zMywxMy40LDIwNy42MSwyNS4zLDIxMiw0MC42OCwyMTJjOS43OSwwLDIxLTEuNzgsMzIuOTUtNC45MUE5NS45NCw5NS45NCwwLDAsMCwyMjQsMTI4YzAtMi40MS0uMDktNC43OS0uMjctNy4xNiwxNC4zMS0xNC4zOCwyMy44Ni0yOC4yMSwyNy00MEMyNTMuNTUsNzAuNDIsMjUxLjEyLDYzLDI0OC41OSw1OC42N1pNMTI4LDU2YTcyLjExLDcyLjExLDAsMCwxLDcwLjE5LDU2QzE4NCwxMjQuNzMsMTY1LDEzOC41OSwxNDEuOTIsMTUxLjg2Yy0yMS43NCwxMi40OS00My41NSwyMi4zNi02My4wOSwyOC42NUE3Miw3MiwwLDAsMSwxMjgsNTZaTTI4LjE5LDE4NS4yOWMtLjYxLTEuMDctLjE3LTguMjIsMTAuNjctMjEuNzFBOTUuNzcsOTUuNzcsMCwwLDAsNTIuMzUsMTg3QzM1LjEyLDE4OS42MSwyOC44NSwxODYuNDEsMjguMTksMTg1LjI5Wk0xMjgsMjAwYTcxLjY2LDcxLjY2LDAsMCwxLTIyLjU2LTMuNjQsMzk0LjEsMzk0LjEsMCwwLDAsNDguNDItMjMuNjlBMzg4LjExLDM4OC4xMSwwLDAsMCwxOTguNDMsMTQzLDcyLjEyLDcyLjEyLDAsMCwxLDEyOCwyMDBaTTIyNy41Nyw3NC42NWMtMS4yOCw0Ljc4LTQuODEsMTAuODctMTAuMzksMTcuOEE5NS43NCw5NS43NCwwLDAsMCwyMDMuNjgsNjljMTUuODMtMi4zNywyMy4xNywwLDI0LjE1LDEuNzFDMjI4LDcxLDIyOC4yMSw3Mi4yOCwyMjcuNTcsNzQuNjVaIj48L3BhdGg+PC9zdmc+"); @@ -196,6 +198,7 @@ --icon-list: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzdhN2FmOSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-list-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-settings: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzdhN2FmOSIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMSwxMDguNzYsMTk4LjI1LDkwLjYyYy0uNjQtMS4xNi0xLjMxLTIuMjktMi0zLjQxbC0uMTItMzZBMTA0LjYxLDEwNC42MSwwLDAsMCwxNjIsMzJMMTMwLDQ5Ljg5Yy0xLjM0LDAtMi42OSwwLTQsMEw5NCwzMkExMDQuNTgsMTA0LjU4LDAsMCwwLDU5Ljg5LDUxLjI1bC0uMTYsMzZjLS43LDEuMTItMS4zNywyLjI2LTIsMy40MWwtMzEuODQsMTguMWE5OS4xNSw5OS4xNSwwLDAsMCwwLDM4LjQ2bDMxLjg1LDE4LjE0Yy42NCwxLjE2LDEuMzEsMi4yOSwyLDMuNDFsLjEyLDM2QTEwNC42MSwxMDQuNjEsMCwwLDAsOTQsMjI0bDMyLTE3Ljg3YzEuMzQsMCwyLjY5LDAsNCwwTDE2MiwyMjRhMTA0LjU4LDEwNC41OCwwLDAsMCwzNC4wOC0xOS4yNWwuMTYtMzZjLjctMS4xMiwxLjM3LTIuMjYsMi0zLjQxbDMxLjg0LTE4LjFBOTkuMTUsOTkuMTUsMCwwLDAsMjMwLjEsMTA4Ljc2Wk0xMjgsMTY4YTQwLDQwLDAsMSwxLDQwLTQwQTQwLDQwLDAsMCwxLDEyOCwxNjhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDgwYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWm0xMDkuOTQtNTIuNzlhOCw4LDAsMCwwLTMuODktNS40bC0yOS44My0xNy0uMTItMzMuNjJhOCw4LDAsMCwwLTIuODMtNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLTM2LjcyLTIwLjY3LDgsOCwwLDAsMC02LjQ2LjU5TDEyOCw0MS44NSw5Ny44OCwyNWE4LDgsMCwwLDAtNi40Ny0uNkExMTEuOTIsMTExLjkyLDAsMCwwLDU0LjczLDQ1LjE1YTgsOCwwLDAsMC0yLjgzLDYuMDdsLS4xNSwzMy42NS0yOS44MywxN2E4LDgsMCwwLDAtMy44OSw1LjQsMTA2LjQ3LDEwNi40NywwLDAsMCwwLDQxLjU2LDgsOCwwLDAsMCwzLjg5LDUuNGwyOS44MywxNywuMTIsMzMuNjNhOCw4LDAsMCwwLDIuODMsNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLDM2LjcyLDIwLjY3LDgsOCwwLDAsMCw2LjQ2LS41OUwxMjgsMjE0LjE1LDE1OC4xMiwyMzFhNy45MSw3LjkxLDAsMCwwLDMuOSwxLDguMDksOC4wOSwwLDAsMCwyLjU3LS40MiwxMTIuMSwxMTIuMSwwLDAsMCwzNi42OC0yMC43Myw4LDgsMCwwLDAsMi44My02LjA3bC4xNS0zMy42NSwyOS44My0xN2E4LDgsMCwwLDAsMy44OS01LjRBMTA2LjQ3LDEwNi40NywwLDAsMCwyMzcuOTQsMTA3LjIxWm0tMTUsMzQuOTEtMjguNTcsMTYuMjVhOCw4LDAsMCwwLTMsM2MtLjU4LDEtMS4xOSwyLjA2LTEuODEsMy4wNmE3Ljk0LDcuOTQsMCwwLDAtMS4yMiw0LjIxbC0uMTUsMzIuMjVhOTUuODksOTUuODksMCwwLDEtMjUuMzcsMTQuM0wxMzQsMTk5LjEzYTgsOCwwLDAsMC0zLjkxLTFoLS4xOWMtMS4yMSwwLTIuNDMsMC0zLjY0LDBhOC4xLDguMSwwLDAsMC00LjEsMWwtMjguODQsMTYuMUE5Niw5NiwwLDAsMSw2Ny44OCwyMDFsLS4xMS0zMi4yYTgsOCwwLDAsMC0xLjIyLTQuMjJjLS42Mi0xLTEuMjMtMi0xLjgtMy4wNmE4LjA5LDguMDksMCwwLDAtMy0zLjA2bC0yOC42LTE2LjI5YTkwLjQ5LDkwLjQ5LDAsMCwxLDAtMjguMjZMNjEuNjcsOTcuNjNhOCw4LDAsMCwwLDMtM2MuNTgtMSwxLjE5LTIuMDYsMS44MS0zLjA2YTcuOTQsNy45NCwwLDAsMCwxLjIyLTQuMjFsLjE1LTMyLjI1YTk1Ljg5LDk1Ljg5LDAsMCwxLDI1LjM3LTE0LjNMMTIyLDU2Ljg3YTgsOCwwLDAsMCw0LjEsMWMxLjIxLDAsMi40MywwLDMuNjQsMGE4LDgsMCwwLDAsNC4xLTFsMjguODQtMTYuMUE5Niw5NiwwLDAsMSwxODguMTIsNTVsLjExLDMyLjJhOCw4LDAsMCwwLDEuMjIsNC4yMmMuNjIsMSwxLjIzLDIsMS44LDMuMDZhOC4wOSw4LjA5LDAsMCwwLDMsMy4wNmwyOC42LDE2LjI5QTkwLjQ5LDkwLjQ5LDAsMCwxLDIyMi45LDE0Mi4xMloiPjwvcGF0aD48L3N2Zz4="); + --icon-logout: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsMTI4bC00MCw0MFY4OFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0xMTIsMjE2YTgsOCwwLDAsMS04LDhINDhhMTYsMTYsMCwwLDEtMTYtMTZWNDhBMTYsMTYsMCwwLDEsNDgsMzJoNTZhOCw4LDAsMCwxLDAsMTZINDhWMjA4aDU2QTgsOCwwLDAsMSwxMTIsMjE2Wm0xMDkuNjYtODIuMzQtNDAsNDBBOCw4LDAsMCwxLDE2OCwxNjhWMTM2SDEwNGE4LDgsMCwwLDEsMC0xNmg2NFY4OGE4LDgsMCwwLDEsMTMuNjYtNS42Nmw0MCw0MEE4LDgsMCwwLDEsMjIxLjY2LDEzMy42NlptLTE3LTUuNjZMMTg0LDEwNy4zMXY0MS4zOFoiPjwvcGF0aD48L3N2Zz4="); /* Post visibility icons */ --icon-globe-visibility: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNDguNTksNTguNjdjLTYuMzEtMTAuODctMjMtMjEuMDYtNjYuMTYtOS43MUE5NS45NCw5NS45NCwwLDAsMCwzMiwxMjhxMCwzLjYuMjYsNy4xNEMuNTYsMTY2Ljg2LDEuMSwxODYuNCw3LjQ0LDE5Ny4zMywxMy40LDIwNy42MSwyNS4zLDIxMiw0MC42OCwyMTJjOS43OSwwLDIxLTEuNzgsMzIuOTUtNC45MUE5NS45NCw5NS45NCwwLDAsMCwyMjQsMTI4YzAtMi40MS0uMDktNC43OS0uMjctNy4xNiwxNC4zMS0xNC4zOCwyMy44Ni0yOC4yMSwyNy00MEMyNTMuNTUsNzAuNDIsMjUxLjEyLDYzLDI0OC41OSw1OC42N1pNMTI4LDU2YTcyLjExLDcyLjExLDAsMCwxLDcwLjE5LDU2QzE4NCwxMjQuNzMsMTY1LDEzOC41OSwxNDEuOTIsMTUxLjg2Yy0yMS43NCwxMi40OS00My41NSwyMi4zNi02My4wOSwyOC42NUE3Miw3MiwwLDAsMSwxMjgsNTZaTTI4LjE5LDE4NS4yOWMtLjYxLTEuMDctLjE3LTguMjIsMTAuNjctMjEuNzFBOTUuNzcsOTUuNzcsMCwwLDAsNTIuMzUsMTg3QzM1LjEyLDE4OS42MSwyOC44NSwxODYuNDEsMjguMTksMTg1LjI5Wk0xMjgsMjAwYTcxLjY2LDcxLjY2LDAsMCwxLTIyLjU2LTMuNjQsMzk0LjEsMzk0LjEsMCwwLDAsNDguNDItMjMuNjlBMzg4LjExLDM4OC4xMSwwLDAsMCwxOTguNDMsMTQzLDcyLjEyLDcyLjEyLDAsMCwxLDEyOCwyMDBaTTIyNy41Nyw3NC42NWMtMS4yOCw0Ljc4LTQuODEsMTAuODctMTAuMzksMTcuOEE5NS43NCw5NS43NCwwLDAsMCwyMDMuNjgsNjljMTUuODMtMi4zNywyMy4xNywwLDI0LjE1LDEuNzFDMjI4LDcxLDIyOC4yMSw3Mi4yOCwyMjcuNTcsNzQuNjVaIj48L3BhdGg+PC9zdmc+"); @@ -225,88 +228,88 @@ } } -body.layout-single-column { +body.app-body { background-color: var(--color-bg); color: var(--color-fg); font-family: ui-rounded, "mastodon-font-sans-serif", sans-serif; } /* πŸ–±οΈ Scrollbars */ -:root:has(.layout-single-column) *::-webkit-scrollbar-track { +:root:has(.app-body) *::-webkit-scrollbar-track { background-color: var(--color-bg); padding: 2px; } -:root:has(.layout-single-column) *::-webkit-scrollbar-thumb { +:root:has(.app-body) *::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 50px; opacity: .4; } -:root:has(.layout-single-column) *::-webkit-scrollbar-track:hover { +:root:has(.app-body) *::-webkit-scrollbar-track:hover { background-color: var(--color-bg); } -:root:has(.layout-single-column) *::-webkit-scrollbar-thumb:hover { +:root:has(.app-body) *::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent); opacity: .7; } @media screen and (max-width:1174px) { - :root:has(.layout-single-column) *::-webkit-scrollbar { + :root:has(.app-body) *::-webkit-scrollbar { display: none; } } -.layout-single-column .loading-bar { +.app-body .loading-bar { background-color: var(--color-accent); } -.layout-single-column .getting-started, -.layout-single-column .regeneration-indicator, -.layout-single-column .audio-player, -.layout-single-column .compose-form .spoiler-input__input, -.layout-single-column .compose-form__autosuggest-wrapper, -.layout-single-column .compose-form__poll-wrapper select, -.layout-single-column .poll__option input[type=text], -.layout-single-column .report-dialog-modal__textarea, -.layout-single-column .search__input, -.layout-single-column .setting-text, -.layout-single-column .compose-form .compose-form__buttons-wrapper, -.layout-single-column .about__section__body { +.app-body .getting-started, +.app-body .regeneration-indicator, +.app-body .audio-player, +.app-body .compose-form .spoiler-input__input, +.app-body .compose-form__autosuggest-wrapper, +.app-body .compose-form__poll-wrapper select, +.app-body .poll__option input[type=text], +.app-body .report-dialog-modal__textarea, +.app-body .search__input, +.app-body .setting-text, +.app-body .compose-form .compose-form__buttons-wrapper, +.app-body .about__section__body { border: 0; } -.layout-single-column .column-inline-form, -.layout-single-column .column>.scrollable, -.layout-single-column .getting-started, -.layout-single-column .regeneration-indicator { +.app-body .column-inline-form, +.app-body .column>.scrollable, +.app-body .getting-started, +.app-body .regeneration-indicator { background: transparent; } -.layout-single-column .account__avatar img { +.app-body .account__avatar img { border-radius: 50%; } /* Rordered layout */ -.layout-single-column .columns-area__panels__pane--navigational { +.app-body .columns-area__panels__pane--navigational { order: 1; } -.layout-single-column .columns-area__panels__main { +.app-body .columns-area__panels__main { order: 2; } -.layout-single-column .columns-area__panels__pane--compositional { +.app-body .columns-area__panels__pane--compositional { order: 3; } -.layout-single-column .columns-area--mobile .column { +.app-body .columns-area--mobile .column { flex: unset; height: auto; } -.layout-single-column .columns-area--mobile .column:focus-within { +.app-body .columns-area--mobile .column:focus-within { overflow: visible; } -.layout-single-column .scrollable, -.layout-single-column .column > .scrollable { +.app-body .scrollable, +.app-body .column > .scrollable { max-height: max-content; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .dismissable-banner + .scrollable { +.app-body .dismissable-banner + .scrollable { border-top-left-radius: 0; border-top-right-radius: 0; } @@ -314,7 +317,7 @@ body.layout-single-column { /* *️⃣ Icons -------- */ -.layout-single-column +.app-body :is( .icon-bookmark, .icon-star, @@ -332,7 +335,8 @@ body.layout-single-column { .icon-bookmarks, .icon-list-ul, .column-link .icon-cog, - .compose__action-bar-dropdown .icon-bars, + .drawer__tab .icon-cog, + .icon-bars, .compose__action-bar-dropdown .icon-close, .icon-user-plus, .icon-user, @@ -354,13 +358,14 @@ body.layout-single-column { .icon-check, .status__action-bar .icon-close, .detailed-status__action-bar .icon-close, - .account__header__tabs__buttons .icon-close + .account__header__tabs__buttons .icon-close, + .icon-sign-out ) path { display: none; } -.layout-single-column +.app-body :is( .icon-bookmark, .icon-star, @@ -378,7 +383,8 @@ body.layout-single-column { .icon-bookmarks, .icon-list-ul, .column-link .icon-cog, - .compose__action-bar-dropdown .icon-bars, + .drawer__tab .icon-cog, + .icon-bars, .compose__action-bar-dropdown .icon-close, .icon-user-plus, .icon-user, @@ -400,7 +406,8 @@ body.layout-single-column { .icon-check, .status__action-bar .icon-close, .detailed-status__action-bar .icon-close, - .account__header__tabs__buttons .icon-close + .account__header__tabs__buttons .icon-close, + .icon-sign-out ) { background-repeat: no-repeat; background-size: 100%; @@ -408,44 +415,44 @@ body.layout-single-column { } /* Bookmark */ -.layout-single-column .icon-bookmark { +.app-body .icon-bookmark { background-image: var(--icon-bookmark-accent); } -.layout-single-column .detailed-status__button .icon-bookmark { +.app-body .detailed-status__button .icon-bookmark { background-image: var(--icon-bookmark-accent); } -.layout-single-column .icon-button.active .icon-bookmark { +.app-body .icon-button.active .icon-bookmark { background-image: var(--icon-bookmark-active); } /* Favorite */ -.layout-single-column .icon-star { +.app-body .icon-star { background-image: var(--icon-star-accent); } -.layout-single-column button.icon-button.active .icon-star, -.layout-single-column .notification .icon-star { +.app-body button.icon-button.active .icon-star, +.app-body .notification .icon-star { background-image: var(--icon-star-active); } -.layout-single-column .detailed-status__link .icon-star { +.app-body .detailed-status__link .icon-star { background-image: var(--icon-star); margin: 0 4px -2px 0; } /* Boost */ -.layout-single-column .icon-retweet { +.app-body .icon-retweet { background-image: var(--icon-boost-accent); } -.layout-single-column button.icon-button.active .icon-retweet, -.layout-single-column .detailed-status__button button.icon-button.active:hover .icon-retweet { +.app-body button.icon-button.active .icon-retweet, +.app-body .detailed-status__button button.icon-button.active:hover .icon-retweet { background-image: var(--icon-boost-active); } -.layout-single-column .status__prepend-icon.icon-retweet, -.layout-single-column .notification .icon-retweet { +.app-body .status__prepend-icon.icon-retweet, +.app-body .notification .icon-retweet { background-image: var(--icon-boost-active); } -.layout-single-column .detailed-status__link .icon-retweet { +.app-body .detailed-status__link .icon-retweet { background-image: var(--icon-boost); margin: 0 4px -2px 0; } -.layout-single-column +.app-body button.icon-button:is( .reblogPrivate, .reblogPrivate:hover, @@ -457,208 +464,214 @@ body.layout-single-column { opacity: .2; pointer-events: none; } -.layout-single-column .boost-modal__action-bar .icon-retweet { +.app-body .boost-modal__action-bar .icon-retweet { background-image: var(--icon-boost-accent); vertical-align: middle; } /* Reply */ -.layout-single-column .icon-reply, -.layout-single-column .icon-reply-all { +.app-body .icon-reply, +.app-body .icon-reply-all { background-image: var(--icon-reply-accent); } -.layout-single-column .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) { +.app-body .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) { background-image: var(--icon-reply-accent); } /* Ellipsis */ -.layout-single-column :is(.icon-ellipsis-h, .icon-ellipsis-v) { +.app-body :is(.icon-ellipsis-h, .icon-ellipsis-v) { background-image: var(--icon-ellipsis-accent); } -.layout-single-column .detailed-status__action-bar .icon-ellipsis-h { +.app-body .detailed-status__action-bar .icon-ellipsis-h { background-image: var(--icon-ellipsis-accent); } -.layout-single-column :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close { +.app-body :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close { background-image: var(--icon-ellipsis-active); } /* Poll icon */ -.layout-single-column .icon-tasks { +.app-body .icon-tasks { background-image: var(--icon-poll); } -.layout-single-column .notification__message .icon-tasks { +.app-body .notification__message .icon-tasks { background-image: var(--icon-poll-accent); } /* Post icon */ -.layout-single-column .icon-quote-right { +.app-body .icon-quote-right { background-image: var(--icon-post); } /* Navigation panel icons */ -.layout-single-column .column-link__icon { +.app-body .column-link__icon { transform: scale(1.3); margin-right: 7px; margin-left: 2px; } /* Home icon */ -.layout-single-column .icon-home { +.app-body .icon-home { background-image: var(--icon-home); } -.layout-single-column :is(.column-link.active .icon-home, .column-header__icon.icon-home) { +.app-body :is(.column-link.active .icon-home, .column-header__icon.icon-home) { background-image: var(--icon-home-active); } -.layout-single-column .notification__message .icon-home { +.app-body .notification__message .icon-home { background-image: var(--icon-post-notification-accent); } /* Globe icon */ -.layout-single-column .column-link .icon-globe, -.layout-single-column .column-header__icon.icon-globe { +.app-body .column-link .icon-globe, +.app-body .column-header__icon.icon-globe { background-image: var(--icon-globe); } -.layout-single-column .column-link.active .icon-globe, -.layout-single-column .column-header__icon.icon-globe { +.app-body .column-link.active .icon-globe, +.app-body .column-header__icon.icon-globe { background-image: var(--icon-globe-active); } /* Explore + Hashtag icon */ -.layout-single-column .icon-hashtag { +.app-body .icon-hashtag { background-image: var(--icon-hashtag-active); } -.layout-single-column .column-link .icon-hashtag { +.app-body .column-link .icon-hashtag { background-image: var(--icon-hashtag); } -.layout-single-column .column-link.active .icon-hashtag { +.app-body .column-link.active .icon-hashtag { background-image: var(--icon-hashtag-active); } /* Search icon */ -.layout-single-column .icon-search { +.app-body .icon-search { background-image: var(--icon-search); } -.layout-single-column .ui__header__links .icon-search { +.app-body .ui__header__links .icon-search, +.app-body .search__icon .icon-search { background-image: var(--icon-search-active); } -.layout-single-column .column-link .icon-search { +.app-body .column-link .icon-search { background-image: var(--icon-search-column-link); } -.layout-single-column .column-link.active .icon-search { +.app-body .column-link.active .icon-search { background-image: var(--icon-search-column-link-active); } -.layout-single-column .column-header__icon.icon-search { +.app-body .column-header__icon.icon-search { background-image: var(--icon-search-column-link-active); } -.layout-single-column .icon-times-circle { +.app-body .icon-times-circle { background-image: var(--icon-close); } /* Notifications icon */ -.layout-single-column .column-link .icon-bell { +.app-body .column-link .icon-bell { background-image: var(--icon-bell); } -.layout-single-column .column-link.active .icon-bell, -.layout-single-column .column-header__icon.icon-bell { +.app-body .column-link.active .icon-bell, +.app-body .column-header__icon.icon-bell { background-image: var(--icon-bell-active); } /* Direct messages icon */ -.layout-single-column .column-link .icon-at { +.app-body .column-link .icon-at { background-image: var(--icon-direct-messages); } -.layout-single-column .column-link.active .icon-at { +.app-body .column-link.active .icon-at, +.app-body .column-header__icon.icon-at { background-image: var(--icon-direct-messages-active); } /* Bookmarks icon */ -.layout-single-column .icon-bookmarks { +.app-body .icon-bookmarks { background-image: var(--icon-bookmark-column-link); } -.layout-single-column .column-link.active .icon-bookmarks, -.layout-single-column .column-header__icon.icon-bookmarks { +.app-body .column-link.active .icon-bookmarks, +.app-body .column-header__icon.icon-bookmarks { background-image: var(--icon-bookmark-column-link-active); } /* Favorites icon */ -.layout-single-column .column-link .icon-star { +.app-body .column-link .icon-star { background-image: var(--icon-star-column-link); } -.layout-single-column .column-link.active .icon-star, -.layout-single-column .column-header__icon.icon-star { +.app-body .column-link.active .icon-star, +.app-body .column-header__icon.icon-star { background-image: var(--icon-star-column-link-active); } /* Lists icon */ -.layout-single-column .icon-list-ul { +.app-body .icon-list-ul { background-image: var(--icon-list); } -.layout-single-column .column-link.active .icon-list-ul { +.app-body .column-link.active .icon-list-ul, +.app-body .column-header__icon.icon-list-ul { background-image: var(--icon-list-active); } /* Settings icon */ -.layout-single-column .column-link .icon-cog { +.app-body .column-link .icon-cog { background-image: var(--icon-settings); } /* Profile settings */ -.layout-single-column .compose__action-bar-dropdown .icon-bars { +.app-body .compose__action-bar-dropdown .icon-bars { background-image: var(--icon-gear); } -.layout-single-column .compose__action-bar-dropdown .active .icon-close { +.app-body .compose__action-bar-dropdown .active .icon-close { background-image: var(--icon-gear-active); } /* Follow user icon */ -.layout-single-column .icon-user-plus, -.layout-single-column .icon-user { +.app-body .icon-user-plus, +.app-body .icon-user { background-image: var(--icon-user-plus-accent); } -.layout-single-column .active .icon-user-plus { +.app-body .active .icon-user-plus { background-image: var(--icon-user-plus); } -.layout-single-column .column-link.active .icon-user-plus, -.layout-single-column .column-header__icon.icon-user-plus { +.app-body .column-link.active .icon-user-plus, +.app-body .column-header__icon.icon-user-plus { background-image: var(--icon-user-plus-active); } /* Users icon */ -.layout-single-column .icon-users { +.app-body .icon-users { background-image: var(--icon-users); } +.app-body .column-link .icon-users { + background-image: var(--icon-users-accent); +} /* Announcement icon */ -.layout-single-column .icon-bullhorn { +.app-body .icon-bullhorn { background-image: var(--icon-megaphone); } /* Column settings icon */ -.layout-single-column .icon-sliders { +.app-body .icon-sliders { background-image: var(--icon-sliders); } /* Post visibility icons */ -.layout-single-column .icon-globe { +.app-body .icon-globe { background-image: var(--icon-globe-visibility); } -.layout-single-column .icon-unlock { +.app-body .icon-unlock { background-image: var(--icon-unlock); } -.layout-single-column .icon-lock { +.app-body .icon-lock { background-image: var(--icon-lock); } -.layout-single-column .icon-at { +.app-body .icon-at { background-image: var(--icon-at); } /* Other icons */ -.layout-single-column .icon-paperclip { +.app-body .icon-paperclip { background-image: var(--icon-paperclip); } -.layout-single-column .icon-check { +.app-body .icon-check { background-image: var(--icon-verified); } -.layout-single-column .follow-request-banner .button:is(:active, :focus, :hover) .icon-check { +.app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } -.layout-single-column .account__relationship .icon-check, -.layout-single-column .follow-request-banner .button .icon-check { +.app-body .account__relationship .icon-check, +.app-body .follow-request-banner .button .icon-check { background-image: var(--icon-check); } -.layout-single-column .icon-bell { +.app-body .icon-bell { background-image: var(--icon-bell-ringing); } -.layout-single-column .icon-bell-o { +.app-body .icon-bell-o { background-image: var(--icon-bell-still); } -.layout-single-column .icon-thumb-tack { +.app-body .icon-thumb-tack { background-image: var(--icon-pin); } -.layout-single-column .icon-file-text { +.app-body .icon-file-text { background-image: var(--icon-link); } -.layout-single-column +.app-body :is( .account--panel, .follow-request-banner, @@ -667,83 +680,83 @@ body.layout-single-column { .icon-times { background-image: var(--icon-reject); } -.layout-single-column .account--panel .icon-times, -.layout-single-column .follow-request-banner .button:is(:active, :focus, :hover) .icon-times { +.app-body .account--panel .icon-times, +.app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } -.layout-single-column .account__relationship .icon-times, -.layout-single-column .follow-request-banner .button .icon-times { +.app-body .account__relationship .icon-times, +.app-body .follow-request-banner .button .icon-times { background-image: var(--icon-reject); } @media screen and (max-width:1174px) { - .layout-single-column .column-link .icon-home { + .app-body .column-link .icon-home { background-image: var(--icon-home-active); } - .layout-single-column .column-link.active .icon-home { + .app-body .column-link.active .icon-home { background-image: var(--icon-home); } - .layout-single-column .column-link .icon-bell { + .app-body .column-link .icon-bell { background-image: var(--icon-bell-active); } - .layout-single-column .column-link.active .icon-bell { + .app-body .column-link.active .icon-bell { background-image: var(--icon-bell); } - .layout-single-column .column-link .icon-hashtag { + .app-body .column-link .icon-hashtag { background-image: var(--icon-hashtag-active); } - .layout-single-column .column-link.active .icon-hashtag { + .app-body .column-link.active .icon-hashtag { background-image: var(--icon-hashtag); } - .layout-single-column .column-link .icon-search { + .app-body .column-link .icon-search { background-image: var(--icon-search-column-link-active); } - .layout-single-column .column-link.active .icon-search { + .app-body .column-link.active .icon-search { background-image: var(--icon-search-column-link); } - .layout-single-column .column-link .icon-globe { + .app-body .column-link .icon-globe { background-image: var(--icon-globe-active); } - .layout-single-column .column-link.active .icon-globe { + .app-body .column-link.active .icon-globe { background-image: var(--icon-globe); } - .layout-single-column .column-link .icon-at { + .app-body .column-link .icon-at { background-image: var(--icon-direct-messages-active); } - .layout-single-column .column-link.active .icon-at { + .app-body .column-link.active .icon-at { background-image: var(--icon-direct-messages); } - .layout-single-column .column-link .icon-bookmarks { + .app-body .column-link .icon-bookmarks { background-image: var(--icon-bookmark-column-link-active); } - .layout-single-column .column-link.active .icon-bookmarks { + .app-body .column-link.active .icon-bookmarks { background-image: var(--icon-bookmark-column-link); } - .layout-single-column .column-link .icon-star { + .app-body .column-link .icon-star { background-image: var(--icon-star-column-link-active); } - .layout-single-column .column-link.active .icon-star { + .app-body .column-link.active .icon-star { background-image: var(--icon-star-column-link); } - .layout-single-column .column-link .icon-list-ul { + .app-body .column-link .icon-list-ul { background-image: var(--icon-list-active); } - .layout-single-column .column-link.active .icon-list-ul { + .app-body .column-link.active .icon-list-ul { background-image: var(--icon-list); } - .layout-single-column .column-link .icon-cog { + .app-body .column-link .icon-cog { background-image: var(--icon-gear); } - .layout-single-column .column-link .icon-ellipsis-h { + .app-body .column-link .icon-ellipsis-h { background-image: var(--icon-ellipsis); } - .layout-single-column .column-link.active .icon-ellipsis-h { + .app-body .column-link.active .icon-ellipsis-h { background-image: var(--icon-ellipsis-active); } - .layout-single-column .column-link .icon-user-plus { + .app-body .column-link .icon-user-plus { background-image: var(--icon-user-plus-active); } - .layout-single-column .column-link.active .icon-user-plus { + .app-body .column-link.active .icon-user-plus { background-image: var(--icon-user-plus-accent); } } @@ -751,10 +764,10 @@ body.layout-single-column { /* πŸ“ Compose panel ---------------- */ -.layout-single-column .compose-form { +.app-body .compose-form { padding: 0 0 71px; } -.layout-single-column .navigation-bar { +.app-body .navigation-bar { border-radius: 8px 8px 0 0; padding: 21px 11px 22px 15px; background-color: var(--color-content-secondary-bg); @@ -762,22 +775,22 @@ body.layout-single-column { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .navigation-bar strong { +.app-body .navigation-bar strong { color: var(--color-content-fg); } -.layout-single-column .compose-form__highlightable.active { +.app-body .compose-form__highlightable.active { box-shadow: none; } -.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__highlightable.active), -.layout-single-column .compose-form__highlightable.active .compose-form__autosuggest-wrapper, -.layout-single-column .compose-form__highlightable.active .compose-form__buttons-wrapper, -.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within, -.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__autosuggest-wrapper:focus-within), -.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, -.layout-single-column .compose-form:has(.compose-form__autosuggest-wrapper:focus-within) :is(.reply-indicator, .autosuggest-input, .compose-form__warning) { +.app-body .navigation-bar:has(+ .compose-form .compose-form__highlightable.active), +.app-body .compose-form__highlightable.active .compose-form__autosuggest-wrapper, +.app-body .compose-form__highlightable.active .compose-form__buttons-wrapper, +.app-body .compose-form .compose-form__autosuggest-wrapper:focus-within, +.app-body .navigation-bar:has(+ .compose-form .compose-form__autosuggest-wrapper:focus-within), +.app-body .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, +.app-body .compose-form:has(.compose-form__autosuggest-wrapper:focus-within) :is(.reply-indicator, .autosuggest-input, .compose-form__warning) { border-color: var(--color-accent); } -.layout-single-column .compose-form +.app-body .compose-form :is( .autosuggest-textarea__suggestions, .autosuggest-textarea__textarea, @@ -785,63 +798,63 @@ body.layout-single-column { .compose-form__buttons-wrapper, .compose-form__modifiers ), -.layout-single-column .compose-form__autosuggest-wrapper { +.app-body .compose-form__autosuggest-wrapper { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; border-top: 0; border-radius: 0; } -.layout-single-column .compose-form__autosuggest-wrapper, -.layout-single-column .compose-form .compose-form__buttons-wrapper { +.app-body .compose-form__autosuggest-wrapper, +.app-body .compose-form .compose-form__buttons-wrapper { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .compose-form .compose-form__buttons-wrapper { +.app-body .compose-form .compose-form__buttons-wrapper { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .compose-form .compose-form__buttons-wrapper :is(.icon-button, .text-icon-button), -.layout-single-column .compose-form .character-counter { +.app-body .compose-form .compose-form__buttons-wrapper :is(.icon-button, .text-icon-button), +.app-body .compose-form .character-counter { color: var(--color-content-fg); height: 27px; } -.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active { +.app-body .compose-form .compose-form__buttons-wrapper .icon-button.active { color: var(--color-accent); } -.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { +.app-body .compose-form .compose-form__buttons-wrapper .text-icon-button.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .compose-panel .autosuggest-textarea__textarea { +.app-body .compose-form .autosuggest-textarea__textarea { padding-left: 20px; padding-right: 45px; padding-top: 20px; } -.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder { +.app-body .compose-form .autosuggest-textarea__textarea::placeholder { font-size: 130%; opacity: .5; } -.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder, -.layout-single-column .compose-form .autosuggest-account .display-name__html { +.app-body .compose-panel .autosuggest-textarea__textarea::placeholder, +.app-body .compose-form .autosuggest-account .display-name__html { color: var(--color-content-fg); } -.layout-single-column .compose-form .autosuggest-account .display-name__account { +.app-body .compose-form .autosuggest-account .display-name__account { color: var(--color-content-fg-muted); } -.layout-single-column .compose-form .autosuggest-textarea__suggestions--visible, -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item { +.app-body .compose-form .autosuggest-textarea__suggestions--visible, +.app-body .compose-form .autosuggest-textarea__suggestions__item { border-radius: 8px; } -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover), -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) { +.app-body .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover), +.app-body .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .compose-form .compose-form__buttons-wrapper { +.app-body .compose-form .compose-form__buttons-wrapper { border-radius: 0 0 8px 8px; } -.layout-single-column .reply-indicator, -.layout-single-column .compose-form .compose-form__warning { +.app-body .reply-indicator, +.app-body .compose-form .compose-form__warning { background-color: var(--color-accent-bg); border-left: 1px solid var(--color-accent-lines); border-right: 1px solid var(--color-accent-lines); @@ -851,33 +864,33 @@ body.layout-single-column { margin: 0; border-radius: 0; } -.layout-single-column .compose-form .compose-form__warning, -.layout-single-column .simple_form .recommended, -.layout-single-column .compose-form .compose-form__warning, -.layout-single-column .compose-form .compose-form__warning a, -.layout-single-column .reply-indicator__content a, -.layout-single-column .navigation-bar__profile-edit { +.app-body .compose-form .compose-form__warning, +.app-body .simple_form .recommended, +.app-body .compose-form .compose-form__warning, +.app-body .compose-form .compose-form__warning a, +.app-body .reply-indicator__content a, +.app-body .navigation-bar__profile-edit { color: var(--color-accent); } -.layout-single-column .compose-form__sensitive-button .icon-button:hover { +.app-body .compose-form__sensitive-button .icon-button:hover { background-color: transparent; } -.layout-single-column .compose-form__sensitive-button input[type=checkbox]:checked { +.app-body .compose-form__sensitive-button input[type=checkbox]:checked { background-color: var(--color-accent); border-color: var(--color-accent); } -.layout-single-column .compose-form .autosuggest-input { +.app-body .compose-form .autosuggest-input { box-sizing: border-box; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .compose-form .spoiler-input.spoiler-input--visible { +.app-body .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; background-color: var(--color-content-bg); } -.layout-single-column .compose-form .spoiler-input__input { +.app-body .compose-form .spoiler-input__input { background-color: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 0; @@ -886,58 +899,58 @@ body.layout-single-column { box-shadow: 0 0 0 4px inset var(--color-content-bg); } -.layout-single-column .compose-form .spoiler-input__input:focus { +.app-body .compose-form .spoiler-input__input:focus { box-shadow: 0 0 0 4px inset var(--color-content-bg), 0 0 0 6px inset var(--color-accent), 0 0 0 1px inset var(--color-content-bg); } -.layout-single-column .display-name { +.app-body .display-name { color: var(--color-content-fg); } -.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button { +.app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button { color: #ffffff; } -.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) { +.app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) { background-color: rgba(0, 0, 0, .4); } @media screen and (max-width:1174px) { - .layout-single-column .compose-form { + .app-body .compose-form { padding: 0 10px 10px; } - .layout-single-column .navigation-bar { + .app-body .navigation-bar { border-radius: 8px 8px 0 0; margin: 10px 10px 0; } } /* Publish button */ -.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper { +.app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper { padding-top: 10px; width: 100%; } -.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { +.app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { padding: 10px 18px; } -.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button .icon-lock { +.app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button .icon-lock { background-image: var(--icon-lock-inv); } /* Emoji picker */ -.layout-single-column .compose-form .emoji-button { +.app-body .compose-form .emoji-button { margin: 15px 10px 0 0; background-image: var(--icon-emoji); background-size: 26px; background-position: bottom left; background-repeat: no-repeat; } -.layout-single-column .compose-form .emoji-button .emojione { +.app-body .compose-form .emoji-button .emojione { opacity: 0; } -.layout-single-column .compose-form .emoji-button:hover { +.app-body .compose-form .emoji-button:hover { background-image: var(--icon-emoji-accent); } -.layout-single-column .emoji-picker-dropdown__menu { +.app-body .emoji-picker-dropdown__menu { overflow: hidden; border-radius: 8px; background-color: var(--color-content-bg); @@ -945,68 +958,68 @@ body.layout-single-column { 0 0 0 1px var(--color-lines), 0 0 5px rgba(0, 0, 0, .15); } -.layout-single-column .emoji-mart { +.app-body .emoji-mart { width: 100% !important; display: block; } -.layout-single-column .emoji-mart-bar:first-child { +.app-body .emoji-mart-bar:first-child { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); } -.layout-single-column .emoji-mart-anchor-bar { +.app-body .emoji-mart-anchor-bar { background-color: var(--color-accent); } -.layout-single-column .emoji-mart-anchor-selected { +.app-body .emoji-mart-anchor-selected { color: var(--color-accent); } -.layout-single-column .emoji-mart-anchor-icon svg path, -.layout-single-column .emoji-mart-anchor-icon svg rect { +.app-body .emoji-mart-anchor-icon svg path, +.app-body .emoji-mart-anchor-icon svg rect { fill: var(--color-content-fg); } -.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, -.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, -.layout-single-column .emoji-mart-search-icon svg path { +.app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, +.app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, +.app-body .emoji-mart-search-icon svg path { fill: var(--color-accent); } -.layout-single-column .emoji-mart-search-icon, -.layout-single-column .emoji-mart-search-icon:disabled, -.layout-single-column .emoji-mart-search-icon svg { +.app-body .emoji-mart-search-icon, +.app-body .emoji-mart-search-icon:disabled, +.app-body .emoji-mart-search-icon svg { opacity: 1; } -.layout-single-column .emoji-mart-scroll::-webkit-scrollbar-track { +.app-body .emoji-mart-scroll::-webkit-scrollbar-track { background-color: var(--color-content-bg); } -.layout-single-column .emoji-mart-search, -.layout-single-column .emoji-mart-scroll, -.layout-single-column .emoji-mart-category-label span { +.app-body .emoji-mart-search, +.app-body .emoji-mart-scroll, +.app-body .emoji-mart-category-label span { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .emoji-mart-search input { +.app-body .emoji-mart-search input { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } -.layout-single-column .emoji-mart-search input:focus { +.app-body .emoji-mart-search input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 1px inset var(--color-accent); outline: 0; } -.layout-single-column .emoji-mart-search input::placeholder { +.app-body .emoji-mart-search input::placeholder { color: var(--color-accent); } /* Zoom on emojis on hover (in post content only */ -.layout-single-column .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ +.app-body .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ overflow: visible; } -.layout-single-column .status__content .emojione { +.app-body .status__content .emojione { transition: transform .8s .8s; } -.layout-single-column .status__content .emojione:hover { +.app-body .status__content .emojione:hover { transform: scale(2.5); } @@ -1015,25 +1028,25 @@ body.layout-single-column { /* πŸ’¬ Posts -------- */ -.layout-single-column .reply-indicator__content, -.layout-single-column .status__content { +.app-body .reply-indicator__content, +.app-body .status__content { color: var(--color-content-fg); } -.layout-single-column .account__display-name strong, -.layout-single-column .status__display-name strong, -.layout-single-column .status__info .status__display-name .display-name__account { +.app-body .account__display-name strong, +.app-body .status__display-name strong, +.app-body .status__info .status__display-name .display-name__account { color: var(--color-content-fg); } -.layout-single-column .translate-button { +.app-body .translate-button { color: var(--color-content-fg-muted); } -.layout-single-column .translate-button__meta, -.layout-single-column .translate-button button, -.layout-single-column .status__content__translate-button { +.app-body .translate-button__meta, +.app-body .translate-button button, +.app-body .status__content__translate-button { font-size: 85%; } -.layout-single-column .status__content__translate-button, -.layout-single-column .translate-button .link-button { +.app-body .status__content__translate-button, +.app-body .translate-button .link-button { width: 32px; height: 32px; bottom: 13px; @@ -1048,51 +1061,51 @@ body.layout-single-column { transition: all .3s; background-color: transparent; } -.layout-single-column .detailed-status .status__content__translate-button, -.layout-single-column .detailed-status .translate-button .link-button { +.app-body .detailed-status .status__content__translate-button, +.app-body .detailed-status .translate-button .link-button { background-image: var(--icon-translate-accent); background-size: 25px; width: 40px; height: 40px; right: 60px; } -.layout-single-column .translate-button .link-button, -.layout-single-column .detailed-status .translate-button .link-button { +.app-body .translate-button .link-button, +.app-body .detailed-status .translate-button .link-button { background-image: var(--icon-translate-active); } -.layout-single-column .status__content__translate-button:hover, -.layout-single-column .translate-button .link-button:hover { +.app-body .status__content__translate-button:hover, +.app-body .translate-button .link-button:hover { background-color: var(--color-accent-bg); } @media screen and (max-width:889px) { - .layout-single-column .status__content__translate-button, - .layout-single-column .translate-button .link-button { + .app-body .status__content__translate-button, + .app-body .translate-button .link-button { bottom: 10px; } - .layout-single-column .detailed-status .status__content__translate-button, - .layout-single-column .detailed-status .translate-button .link-button { + .app-body .detailed-status .status__content__translate-button, + .app-body .detailed-status .translate-button .link-button { bottom: 13px; } } -.layout-single-column .status__content__translate-button > span, -.layout-single-column .translate-button .link-button > span, -.layout-single-column .notification .status__content__translate-button { +.app-body .status__content__translate-button > span, +.app-body .translate-button .link-button > span, +.app-body .notification .status__content__translate-button { display: none; } -.layout-single-column .account__display-name strong, -.layout-single-column .status__display-name strong { +.app-body .account__display-name strong, +.app-body .status__display-name strong { font-weight: bold; } -.layout-single-column .status { +.app-body .status { margin-left: 56px; padding: 0 10px; border-bottom: 0; } -.layout-single-column .status__wrapper { +.app-body .status__wrapper { transition: background .3s; } -.layout-single-column .status__wrapper, -.layout-single-column .detailed-status__wrapper { +.app-body .status__wrapper, +.app-body .detailed-status__wrapper { background-color: var(--color-content-bg); padding: 13px 12px; border-left: 1px solid var(--color-lines); @@ -1100,48 +1113,48 @@ body.layout-single-column { position: relative; } @media screen and (max-width:889px) { - .layout-single-column .status__wrapper, - .layout-single-column .detailed-status__wrapper { + .app-body .status__wrapper, + .app-body .detailed-status__wrapper { border-left: 0; border-right: 0; } - .layout-single-column .status__wrapper { + .app-body .status__wrapper { padding: 10px 8px; } } -.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, -.layout-single-column .scrollable > div:first-child > .status__wrapper, -.layout-single-column .explore__search-results > div:first-child > .status__wrapper { +.app-body .scrollable > div:first-child > div:first-child > .status__wrapper, +.app-body .scrollable > div:first-child > .status__wrapper, +.app-body .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } -.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, -.layout-single-column .search-results__section > div:last-child >.status__wrapper { +.app-body .scrollable > div:last-child > div:last-child > .status__wrapper, +.app-body .scrollable > div:last-child > .status__wrapper, +.app-body .scrollable > div > article:last-child > div > .status__wrapper, +.app-body .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { +.app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top: 0; } @media screen and (min-width:890px) { - .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, - .layout-single-column .explore__search-results > div:first-child > .status__wrapper { + .app-body .scrollable > div:first-child > div:first-child > .status__wrapper, + .app-body .explore__search-results > div:first-child > .status__wrapper { border-top-left-radius: 8px; border-top-right-radius: 8px; } - .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, - .layout-single-column .scrollable > div:last-child > .status__wrapper, - .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, - .layout-single-column .search-results__section > div:last-child >.status__wrapper { + .app-body .scrollable > div:last-child > div:last-child > .status__wrapper, + .app-body .scrollable > div:last-child > .status__wrapper, + .app-body .scrollable > div > article:last-child > div > .status__wrapper, + .app-body .search-results__section > div:last-child >.status__wrapper { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } - .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + .app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top-left-radius: 0; border-top-right-radius: 0; } } -.layout-single-column .status__info { +.app-body .status__info { height: 22px; margin-left: -56px; padding: 0; @@ -1149,47 +1162,47 @@ body.layout-single-column { line-height: 10px; align-items: start; } -.layout-single-column .status__info .status__display-name { +.app-body .status__info .status__display-name { overflow: visible; align-items: start; max-width: calc(100% - 4em); } -.layout-single-column .status__info .status__display-name .display-name bdi, -.layout-single-column .status__info .status__display-name .display-name__account { +.app-body .status__info .status__display-name .display-name bdi, +.app-body .status__info .status__display-name .display-name__account { vertical-align: top; } -.layout-single-column .status__info .status__display-name .display-name__account { +.app-body .status__info .status__display-name .display-name__account { display: inline; opacity: .7; } -.layout-single-column .status__relative-time { +.app-body .status__relative-time { height: 22px; position: absolute; right: 22px; color: var(--color-content-fg); opacity: .6; } -.layout-single-column .status__avatar { +.app-body .status__avatar { margin-bottom: -10px; z-index: 2; } -.layout-single-column .reply-indicator__content, -.layout-single-column .status__content { +.app-body .reply-indicator__content, +.app-body .status__content { line-height: 19px; position: static; } -.layout-single-column .e-content blockquote, -.layout-single-column .reply-indicator__content blockquote, -.layout-single-column .status__content__text blockquote { +.app-body .e-content blockquote, +.app-body .reply-indicator__content blockquote, +.app-body .status__content__text blockquote { color: var(--color-content-fg-muted); border-color: var(--color-lines); } /* πŸ“ Post dividers */ /* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */ -.layout-single-column .status::before, -.layout-single-column .notification__message::before { +.app-body .status::before, +.app-body .notification__message::before { position: absolute; background-color: var(--color-lines); height: 1px; @@ -1200,43 +1213,43 @@ body.layout-single-column { opacity: .7; } @media screen and (max-width:889px) { - .layout-single-column .status::before, - .layout-single-column .notification__message::before { + .app-body .status::before, + .app-body .notification__message::before { width: calc(100% - 73px); } } @media (prefers-color-scheme: dark) { - .layout-single-column .status::before, - .layout-single-column .notification__message::before { + .app-body .status::before, + .app-body .notification__message::before { opacity: 1; } } /* Remove border between posts when applicable */ -.layout-single-column .notification .status::before, /* no dividers on posts _inside_ notifications */ -.layout-single-column .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ -.layout-single-column .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ -.layout-single-column .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ -.layout-single-column .hashtag-header + article .status::before, -.layout-single-column .search-results__section .search-results__section__header + div .status::before { +.app-body .notification .status::before, /* no dividers on posts _inside_ notifications */ +.app-body .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ +.app-body .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ +.app-body .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ +.app-body .hashtag-header + article .status::before, +.app-body .search-results__section .search-results__section__header + div .status::before { display: none; } @media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ - .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, - .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper .status::before{ + .app-body .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, + .app-body .scrollable > div > article:first-child > div > .status__wrapper .status::before{ display: none; } } /* πŸ‘₯ Threaded replies */ -.layout-single-column .status--first-in-thread { +.app-body .status--first-in-thread { border-top: 0; } -.layout-single-column .status--first-in-thread::before { +.app-body .status--first-in-thread::before { width: 100%; right: 0; } -.layout-single-column .status--in-thread +.app-body .status--in-thread :is( .attachment-list, .audio-player, @@ -1251,92 +1264,92 @@ body.layout-single-column { margin-left: 0; width: auto; } -.layout-single-column .status__line--first { +.app-body .status__line--first { height: 100%; } -.layout-single-column .status__line--full { +.app-body .status__line--full { height: calc(100% + 32px); } /* Default lines when replying in real time */ -.layout-single-column div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { +.app-body div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { height: 0; } /* Hide line before first in thread */ -.layout-single-column div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), -.layout-single-column div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { +.app-body div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), +.app-body div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { height: 0; } -.layout-single-column div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line { +.app-body div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line { height: calc(100% - 32px) !important; } -.layout-single-column div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, -.layout-single-column .status__line--full.status__line--first { +.app-body div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, +.app-body .status__line--full.status__line--first { top: 32px; height: 100%; z-index: 1; } -.layout-single-column .detailed-status { +.app-body .detailed-status { background-color: transparent; border-top: 0; } /* Threaded line, actually */ -.layout-single-column .status__line { +.app-body .status__line { margin-inline-start: 5px; border-inline-start: 2px solid var(--color-accent); -webkit-border-start: 2px solid var(--color-accent); opacity: .6; } -.layout-single-column .status__line--full::before { +.app-body .status__line--full::before { background-color: var(--color-accent); } /* Hide the "stub" from the first status line */ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, -.layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line, -.layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { +.app-body .status-reply.status--in-thread.status--first-in-thread > .status__line, +.app-body .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { top: 32px; } @media screen and (max-width:889px) { - .layout-single-column .status__line { + .app-body .status__line { inset-inline-start: 35px; } } /* ⏺️ Posts when in focus */ -.layout-single-column +.app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus, -.layout-single-column +.app-body :is(.focusable, .status__wrapper.focusable):focus :is(.detailed-status, .detailed-status__action-bar) { outline: 0; background: var(--color-content-bg-focus); } @media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ - .layout-single-column .status__wrapper:has(.status__content:hover), - .layout-single-column .notification__message:has(+ div > .status__wrapper .status__content:hover) { + .app-body .status__wrapper:has(.status__content:hover), + .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) { background: var(--color-content-bg-focus); } } /* πŸ‘οΈ Post detailed view */ -.layout-single-column .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ +.app-body .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } -.layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ +.app-body .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ border-top: 0; } -.layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ +.app-body .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ border-bottom: 1px solid var(--color-lines); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } -.layout-single-column .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ +.app-body .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ box-shadow: none; } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { + .app-body .scrollable > div:first-child > .detailed-status__wrapper { margin-top: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -1344,153 +1357,153 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } @media screen and (max-width:889px) { - .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { + .app-body .scrollable > div:last-child .detailed-status__wrapper:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } - .layout-single-column .detailed-status { + .app-body .detailed-status { padding: 8px 8px 14px; } } -.layout-single-column .detailed-status__display-avatar .account__avatar { +.app-body .detailed-status__display-avatar .account__avatar { width: 60px !important; height: 60px !important; } -.layout-single-column .detailed-status .status__content { +.app-body .detailed-status .status__content { line-height: 24px; } -.layout-single-column .detailed-status, -.layout-single-column .detailed-status__action-bar { +.app-body .detailed-status, +.app-body .detailed-status__action-bar { background-color: var(--color-content-bg); border: 0; } -.layout-single-column .detailed-status__display-name strong, -.layout-single-column .detailed-status__display-name .display-name__account { +.app-body .detailed-status__display-name strong, +.app-body .detailed-status__display-name .display-name__account { color: var(--color-content-fg); } -.layout-single-column .detailed-status__display-name strong { +.app-body .detailed-status__display-name strong { font-size: 18px; font-weight: bold; } .detailed-status__display-name .display-name__account{ opacity: .7; } -.layout-single-column .detailed-status__meta { +.app-body .detailed-status__meta { color: var(--color-fg); opacity: .8; } -.layout-single-column .detailed-status__action-bar { +.app-body .detailed-status__action-bar { padding: 0 16px; justify-content: left; gap: 8px; width: 32px; } -.layout-single-column .detailed-status__action-bar-dropdown { +.app-body .detailed-status__action-bar-dropdown { position: absolute; right: 18px; } -.layout-single-column .status__action-bar .animated-number { +.app-body .status__action-bar .animated-number { color: var(--color-accent); font-weight: 600; } -.layout-single-column .status__action-bar__button:has(.icon-button__counter > .animated-number) { +.app-body .status__action-bar__button:has(.icon-button__counter > .animated-number) { padding-left: 4px; padding-right: 4px; margin-right: 2px; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) .active .icon-retweet + .icon-button__counter > .animated-number { color: #D3487F; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) .active .icon-star + .icon-button__counter > .animated-number { color: #EBBB59; } -.layout-single-column .detailed-status__meta .animated-number { +.app-body .detailed-status__meta .animated-number { transform: translate(0, -1px); } -.layout-single-column article > .account { +.app-body article > .account { padding: 16px; } -.layout-single-column article:last-child > .account { +.app-body article:last-child > .account { border-bottom: 1px solid var(--color-lines); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .detailed-status__link { +.app-body .detailed-status__link { display: inline-block; position: static; } /* Hashtag bar */ -.layout-single-column .hashtag-bar a, -.layout-single-column .hashtag-bar .link-button { +.app-body .hashtag-bar a, +.app-body .hashtag-bar .link-button { color: var(--color-fg-muted); font-size: 90%; transition: all .1s; } -.layout-single-column .hashtag-bar .link-button { +.app-body .hashtag-bar .link-button { font-size: 80%; margin-left: 3px; } -.layout-single-column .hashtag-bar a { +.app-body .hashtag-bar a { background-color: var(--color-content-secondary-bg); transition: all .3s; padding: 3px 8px; border-radius: 8px; } -.layout-single-column .hashtag-bar a:hover, -.layout-single-column .hashtag-bar .link-button:hover { +.app-body .hashtag-bar a:hover, +.app-body .hashtag-bar .link-button:hover { color: var(--color-accent); } -.layout-single-column .hashtag-bar a:hover { +.app-body .hashtag-bar a:hover { background-color: var(--color-accent-bg); } -.layout-single-column .hashtag-bar a:active, -.layout-single-column .hashtag-bar a:focus { +.app-body .hashtag-bar a:active, +.app-body .hashtag-bar a:focus { color: var(--color-accent-fg); background-color: var(--color-accent); } -.layout-single-column .hashtag-bar a:hover span { +.app-body .hashtag-bar a:hover span { text-decoration: none; } @media (prefers-color-scheme: dark) { - .layout-single-column .hashtag-bar a, - .layout-single-column .hashtag-bar .link-button { + .app-body .hashtag-bar a, + .app-body .hashtag-bar .link-button { color: var(--color-accent); } - .layout-single-column .hashtag-bar a:hover, - .layout-single-column .hashtag-bar .link-button:hover { + .app-body .hashtag-bar a:hover, + .app-body .hashtag-bar .link-button:hover { color: var(--color-content-fg); } } /* ⭐ Action bar */ -.layout-single-column .status__action-bar { +.app-body .status__action-bar { justify-content: left; margin-top: 8px; gap: 8px; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) :is(button, .status__action-bar__dropdown) { transition: all .3s; } -.layout-single-column .status__action-bar button:last-child { +.app-body .status__action-bar button:last-child { position: absolute; right: 18px; } -.layout-single-column .status__action-bar .icon-button.disabled { +.app-body .status__action-bar .icon-button.disabled { pointer-events: none; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) .icon-button:is( :active, @@ -1500,12 +1513,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu ) { background-color: transparent; } -.layout-single-column .icon-button.star-icon.deactivate>.icon-star, -.layout-single-column .icon-button.star-icon.activate>.icon-star { /* Disable default star spinning animation */ +.app-body .icon-button.star-icon.deactivate>.icon-star, +.app-body .icon-button.star-icon.activate>.icon-star { /* Disable default star spinning animation */ animation: none; } -.layout-single-column .status__action-bar .icon-button.star-icon.active>.icon-star, -.layout-single-column .detailed-status__action-bar .icon-button.star-icon.active>.icon-star { +.app-body .status__action-bar .icon-button.star-icon.active>.icon-star, +.app-body .detailed-status__action-bar .icon-button.star-icon.active>.icon-star { animation: bounce .4s ease-out !important; } @keyframes bounce { @@ -1522,13 +1535,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: scale(1); } } -.layout-single-column .status__action-bar .icon-button.reblogPrivate>.icon-retweet { +.app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet { opacity: 1; } -.layout-single-column .status__action-bar .icon-button.active>.icon-retweet { +.app-body .status__action-bar .icon-button.active>.icon-retweet { animation: launch 1.2s ease-in !important; } -.layout-single-column .detailed-status__action-bar .icon-button.active>.icon-retweet { +.app-body .detailed-status__action-bar .icon-button.active>.icon-retweet { animation: launch-detailed 1.2s ease-out !important; } @keyframes launch { @@ -1583,8 +1596,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu opacity: 1; } } -.layout-single-column .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark, -.layout-single-column .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark { +.app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark, +.app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark { animation: bounce-vertical .4s ease-out !important; } @keyframes bounce-vertical { @@ -1601,27 +1614,27 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: translate(0); } } -.layout-single-column .status__action-bar .icon-button, -.layout-single-column .detailed-status__action-bar .icon-button { +.app-body .status__action-bar .icon-button, +.app-body .detailed-status__action-bar .icon-button { min-width: 32px; height: 32px; border-radius: 8px; position: relative; } -.layout-single-column .detailed-status__action-bar .icon-button { +.app-body .detailed-status__action-bar .icon-button { min-width: 40px; height: 40px; } -.layout-single-column .detailed-status__action-bar .icon-button > .icon { +.app-body .detailed-status__action-bar .icon-button > .icon { width: 25px; height: 25px; } -.layout-single-column .detailed-status__action-bar .icon-button -.layout-single-column .icon-button.star-icon.active, -.layout-single-column .notification__favourite-icon-wrapper .star-icon { +.app-body .detailed-status__action-bar .icon-button +.app-body .icon-button.star-icon.active, +.app-body .notification__favourite-icon-wrapper .star-icon { color: #ffb609; } -.layout-single-column .status__prepend { +.app-body .status__prepend { padding-top: 2px; padding-right: 0; padding-bottom: 1px; @@ -1630,98 +1643,98 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 25px; color: var(--color-content-fg); } -.layout-single-column .status__prepend-icon-wrapper { +.app-body .status__prepend-icon-wrapper { width: 56px; text-align: right; } -.layout-single-column .status__prepend-icon-wrapper .icon { +.app-body .status__prepend-icon-wrapper .icon { transform: translateY(1px) scale(1.1); } -.layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper { +.app-body .detailed-status__wrapper .status__prepend-icon-wrapper { width: 46px; } -.layout-single-column .status__prepend .muted .emojione { +.app-body .status__prepend .muted .emojione { opacity: 1; } -.layout-single-column .status-card, -.layout-single-column .status-card.compact { +.app-body .status-card, +.app-body .status-card.compact { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); box-shadow: none; transition: all .3s; border-radius: 8px; } -.layout-single-column a.status-card:hover, -.layout-single-column a.status-card.compact:hover { +.app-body a.status-card:hover, +.app-body a.status-card.compact:hover { background-color: var(--color-content-bg-focus); border-color: var(--color-lines); } -.layout-single-column .status-card__image { +.app-body .status-card__image { background: var(--color-content-secondary-bg); } -.layout-single-column .status-card__image .icon { +.app-body .status-card__image .icon { width: 32px; height: 32px; } -.layout-single-column .status-card__title, -.layout-single-column .status-card__description, -.layout-single-column .status-card__author, -.layout-single-column .status-card__host { +.app-body .status-card__title, +.app-body .status-card__description, +.app-body .status-card__author, +.app-body .status-card__host { color: var(--color-content-fg); transition: all .2s; } -.layout-single-column .status-card__host { +.app-body .status-card__host { color: var(--color-content-fg-muted); } -.layout-single-column .status-card:active .status-card__host, -.layout-single-column .status-card:focus .status-card__host, -.layout-single-column .status-card:hover .status-card__host { +.app-body .status-card:active .status-card__host, +.app-body .status-card:focus .status-card__host, +.app-body .status-card:hover .status-card__host { color: var(--color-accent); } -.layout-single-column .status-card:active .status-card__author, -.layout-single-column .status-card:active .status-card__description, -.layout-single-column .status-card:active .status-card__title, -.layout-single-column .status-card:focus .status-card__author, -.layout-single-column .status-card:focus .status-card__description, -.layout-single-column .status-card:focus .status-card__title, -.layout-single-column .status-card:hover .status-card__author, -.layout-single-column .status-card:hover .status-card__description, -.layout-single-column .status-card:hover .status-card__title { +.app-body .status-card:active .status-card__author, +.app-body .status-card:active .status-card__description, +.app-body .status-card:active .status-card__title, +.app-body .status-card:focus .status-card__author, +.app-body .status-card:focus .status-card__description, +.app-body .status-card:focus .status-card__title, +.app-body .status-card:hover .status-card__author, +.app-body .status-card:hover .status-card__description, +.app-body .status-card:hover .status-card__title { color: var(--color-content-fg); } -.layout-single-column .status-card__author strong { +.app-body .status-card__author strong { font-weight: 800; } -.layout-single-column .status__content p { +.app-body .status__content p { margin-bottom: 12px; } -.layout-single-column .status__content p:last-child { +.app-body .status__content p:last-child { margin-bottom: 0; } -.layout-single-column .status__content > p:first-child:has(.status__content__spoiler-link) { +.app-body .status__content > p:first-child:has(.status__content__spoiler-link) { margin-bottom: 1px; } -.layout-single-column .status__content > p:first-child:has(.status__content__spoiler-link) span { +.app-body .status__content > p:first-child:has(.status__content__spoiler-link) span { font-weight: bold; } -.layout-single-column .media-gallery { +.app-body .media-gallery { border-radius: 8px; } -.layout-single-column .icon-button.overlayed { +.app-body .icon-button.overlayed { background-color: #ffffff; color: #444b5d; opacity: .6; transition: opacity .3s; } -.layout-single-column .icon-button.overlayed:hover { +.app-body .icon-button.overlayed:hover { background-color: #ffffff; color: #444b5d; opacity: 1; } -.layout-single-column .status__wrapper--filtered__button { +.app-body .status__wrapper--filtered__button { color: var(--color-accent); } -.layout-single-column .status__wrapper--filtered { +.app-body .status__wrapper--filtered { color: var(--color-content-fg); border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); @@ -1729,69 +1742,69 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu margin-top: -1px; } -.layout-single-column .audio-player, -.layout-single-column .media-gallery, -.layout-single-column .video-player { +.app-body .audio-player, +.app-body .media-gallery, +.app-body .video-player { border: 1px solid var(--color-lines); } /* πŸ“Š Polls */ -.layout-single-column .poll__chart, -.layout-single-column .muted .poll__chart.leading { +.app-body .poll__chart, +.app-body .muted .poll__chart.leading { background: var(--color-accent); opacity: .4; height: 12px; border-radius: 10px; } -.layout-single-column .poll__chart.leading, -.layout-single-column .muted .poll__chart.leading { +.app-body .poll__chart.leading, +.app-body .muted .poll__chart.leading { opacity: 1; } -.layout-single-column .muted .poll { +.app-body .muted .poll { color: var(--color-content-fg-muted); } -.layout-single-column .poll__footer { +.app-body .poll__footer { color: var(--color-content-fg); } -.layout-single-column .poll__link { +.app-body .poll__link { color: var(--color-accent); text-decoration: none; } -.layout-single-column .poll__input { +.app-body .poll__input { border: 2px solid var(--color-content-fg); } -.layout-single-column .poll__input:hover { +.app-body .poll__input:hover { border-color: var(--color-accent); background-color: var(--color-accent-bg); } -.layout-single-column .poll__input:is(.active, :active, :focus) { +.app-body .poll__input:is(.active, :active, :focus) { background-color: var(--color-accent); } -.layout-single-column .poll__input.active { +.app-body .poll__input.active { border-color: var(--color-accent); } -.layout-single-column .poll__footer .button.button-secondary { +.app-body .poll__footer .button.button-secondary { padding: 0 16px; } -.layout-single-column .poll__footer .button.button-secondary:hover { +.app-body .poll__footer .button.button-secondary:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } /* Poll composer */ -.layout-single-column .compose-form__poll-wrapper, -.layout-single-column .compose-form__poll-wrapper .poll__footer { +.app-body .compose-form__poll-wrapper, +.app-body .compose-form__poll-wrapper .poll__footer { border-top: 0; } -.layout-single-column .compose-form__poll-wrapper ul { +.app-body .compose-form__poll-wrapper ul { background-color: var(--color-accent-bg); } -.layout-single-column .compose-form__poll-wrapper .autosuggest-input input:focus { +.app-body .compose-form__poll-wrapper .autosuggest-input input:focus { box-shadow: 0 0 0 2px var(--color-accent); } -.layout-single-column .compose-form__poll-wrapper .poll__footer .button.button-secondary { +.app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } -.layout-single-column .compose-form__poll-wrapper .icon-button.disabled { +.app-body .compose-form__poll-wrapper .icon-button.disabled { color: transparent; pointer-events: none; } @@ -1799,29 +1812,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* Empty columns */ -.layout-single-column .empty-column-indicator { +.app-body .empty-column-indicator { background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); border: 1px solid var(--color-lines); border-radius: 0 0 8px 8px; contain: content; } -.layout-single-column .empty-column-indicator a { +.app-body .empty-column-indicator a { color: var(--color-accent); } -.layout-single-column .explore__links > .empty-column-indicator { +.app-body .explore__links > .empty-column-indicator { border: 0; } /* Timeline hint */ -.layout-single-column .timeline-hint { +.app-body .timeline-hint { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .timeline-hint a { +.app-body .timeline-hint a { color: var(--color-accent); } -.layout-single-column article + .timeline-hint:last-child { +.app-body article + .timeline-hint:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-bottom: 1px solid var(--color-lines); @@ -1831,49 +1844,49 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ“€ DMs */ -.layout-single-column .follow_requests-unlocked_explanation { +.app-body .follow_requests-unlocked_explanation { background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .follow_requests-unlocked_explanation a { +.app-body .follow_requests-unlocked_explanation a { color: var(--color-accent); } -.layout-single-column .conversation__unread { +.app-body .conversation__unread { background-color: var(--color-accent); } -.layout-single-column .conversation.conversation--unread { +.app-body .conversation.conversation--unread { background-color: var(--color-content-bg-focus); } -.layout-single-column .conversation__unread { +.app-body .conversation__unread { color: var(--color-accent-fg); } -.layout-single-column .conversation__content__names a strong { +.app-body .conversation__content__names a strong { font-weight: bold; } -.layout-single-column .conversation__content__names, -.layout-single-column .conversation__content__names a, -.layout-single-column .conversation__content__relative-time, -.layout-single-column .conversation .attachment-list__list a, -.layout-single-column .conversation .status__content p { +.app-body .conversation__content__names, +.app-body .conversation__content__names a, +.app-body .conversation__content__relative-time, +.app-body .conversation .attachment-list__list a, +.app-body .conversation .status__content p { color: var(--color-content-fg); } -.layout-single-column .conversation { +.app-body .conversation { background-color: var(--color-content-bg); border-bottom: 1px solid var(--color-lines); } -.layout-single-column .conversation__content__relative-time { +.app-body .conversation__content__relative-time { opacity: .7; } @media screen and (min-width:890px) { - .layout-single-column .conversation { + .app-body .conversation { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } } /* Speech bubble look DMs */ -.layout-single-column :is(.status-direct, .detailed-status-direct, .detailed-status__wrapper-direct) .status__content { +.app-body :is(.status-direct, .detailed-status-direct, .detailed-status__wrapper-direct) .status__content { padding: .7em 1.2em .7em 1em; margin-top: 4px; background: var(--color-content-secondary-bg); @@ -1881,11 +1894,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 4px 12px 12px 12px; display: inline-block; } -.layout-single-column .status-direct.muted .status__content { +.app-body .status-direct.muted .status__content { background: rgba(155, 174, 200, 0.1); border-color: var(--color-lines); } -.layout-single-column :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend { +.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend { display: none; } @@ -1893,25 +1906,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ⏺️ Column headers ----------------- */ -.layout-single-column .tabs-bar__wrapper { +.app-body .tabs-bar__wrapper { background-color: transparent; border-radius: 8px 8px 0 0; box-shadow: inset 0 10px var(--color-bg), 0 -30px var(--color-bg); } -.layout-single-column .column-header__wrapper.active:before { +.app-body .column-header__wrapper.active:before { background: none; opacity: 40%; } -.layout-single-column .column-header__wrapper.active { +.app-body .column-header__wrapper.active { box-shadow: 0 0; } -.layout-single-column .column-header { +.app-body .column-header { border-radius: 8px; } -.layout-single-column .column-header, -.layout-single-column .column-back-button { +.app-body .column-header, +.app-body .column-back-button { background-color: rgba(255, 255, 255, .75); color: var(--color-content-fg); border-top: 1px solid var(--color-lines); @@ -1927,114 +1940,116 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu backdrop-filter: blur(20px); } @media (prefers-color-scheme: dark) { - .layout-single-column .column-header, - .layout-single-column .column-back-button { + .app-body .column-header, + .app-body .column-back-button { background-color: rgba(3, 3, 3, .65); } } -.layout-single-column .column-header__button, -.layout-single-column .column-header__back-button { +.app-body .column-header__button, +.app-body .column-header__back-button { background-color: transparent; border: 0; } -.layout-single-column .column-header__button { +.app-body .column-header__button { color: var(--color-content-fg); transition: all .2s; - height: 50px; + border-radius: 6px; + height: 42px; + margin: 4px 4px 4px 0; } -.layout-single-column .column-header__icon { +.app-body .column-header__icon { transform: scale(1.1); margin-right: 4px; } -.layout-single-column .column-header.active .column-header__icon { +.app-body .column-header.active .column-header__icon { color: var(--color-accent); text-shadow: none; } -.layout-single-column .column-header__button:is(.active, .active:hover, :hover) { +.app-body .column-header__button:is(.active, .active:hover, :hover) { color: var(--color-accent); background-color: var(--color-accent-bg); } @media screen and (max-width:1174px) { - .layout-single-column .column-header__wrapper::after, - .layout-single-column .column-back-button::after { + .app-body .column-header__wrapper::after, + .app-body .column-back-button::after { display: none; } - .layout-single-column .column-header__button:is(.active, .active:hover, :hover), - .layout-single-column .column-header, - .layout-single-column .column-back-button { + .app-body .column-header__button:is(.active, .active:hover, :hover), + .app-body .column-header, + .app-body .column-back-button { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } } -.layout-single-column .column-back-button--slim-button::after { +.app-body .column-back-button--slim-button::after { display: none; } -.layout-single-column .column-back-button--slim-button { +.app-body .column-back-button--slim-button { top: -50px } @media screen and (max-width:1174px) { - .layout-single-column .column-back-button--slim-button { + .app-body .column-back-button--slim-button { height: 50px; } } @media screen and (min-width:1175px) { - .layout-single-column .column-back-button--slim-button { + .app-body .column-back-button--slim-button { display: none; } } -.layout-single-column .load-gap, -.layout-single-column .load-more { +.app-body .load-gap, +.app-body .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); border-bottom: 0; } -.layout-single-column .load-gap:hover, -.layout-single-column .load-more:hover { +.app-body .load-gap:hover, +.app-body .load-more:hover { background-color: var(--color-accent-lines); } -.layout-single-column .column-header__collapsible { +.app-body .column-header__collapsible { border-bottom: 0; box-shadow: 0 -20px 0 var(--color-bg); background-color: var(--color-secondary-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .column-header__collapsible::-webkit-scrollbar-track { +.app-body .column-header__collapsible::-webkit-scrollbar-track { background-color: transparent; } @media screen and (max-width:1174px) { - .layout-single-column .column-header__collapsible { + .app-body .column-header__collapsible { box-shadow: none; border-radius: 0; } } -.layout-single-column .column-header__collapsible-inner { +.app-body .column-header__collapsible-inner { background: var(--color-secondary-bg); border: 0; } -.layout-single-column .column-settings__section { +.app-body .column-settings__section { color: var(--color-content-fg-bold); } -.layout-single-column .setting-toggle__label { +.app-body .setting-toggle__label { color: var(--color-content-fg); } -.layout-single-column .column-header > button { +.app-body .column-header > button { padding: 0 0 0 15px; font-weight: bold; } @media screen and (max-width:1174px) { - .layout-single-column .ui__header { + .app-body .ui__header { background-color: transparent; border-bottom: 0; } - .layout-single-column .ui__header__logo { + .app-body .ui__header__logo { margin-left: 3px; } - .layout-single-column .tabs-bar__wrapper { + .app-body .tabs-bar__wrapper { box-shadow: none; display: block; margin-bottom: -2px; @@ -2042,22 +2057,22 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 45px; border-bottom: 1px solid rgba(0, 0, 0, .1); } - .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal) { + .app-body .tabs-bar__wrapper:has(> #tabs-bar__portal) { display: none; } - .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), - .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ + .app-body .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), + .app-body .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ display: block; } - .layout-single-column .column-header, - .layout-single-column .column-back-button, - .layout-single-column .column-header__button, - .layout-single-column .column-header__back-button { + .app-body .column-header, + .app-body .column-back-button, + .app-body .column-header__button, + .app-body .column-header__back-button { background-color: transparent; height: 50px; border: 0; } - .layout-single-column .ui::after { /* Set a backdrop blur background to both top bars */ + .app-body .ui::after { /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.75); @@ -2069,23 +2084,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu width: 100%; z-index: 1; } - .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after { + .app-body .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after { height: 55px; } - .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after, - .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ + .app-body .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after, + .app-body .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ height: 100px; } - .layout-single-column .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */ + .app-body .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */ margin-top: 0; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { - .layout-single-column .ui::after { + .app-body .ui::after { background-color: rgba(3, 3, 3, .65); } - .layout-single-column .tabs-bar__wrapper { + .app-body .tabs-bar__wrapper { border-color: var(--color-lines); } } @@ -2095,37 +2110,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ⏺️ Horizontal selectors (used to navigate subsections on the Explore, Live Feeds and Account pages) */ -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) { background: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .account__header + .account__section-headline { +.app-body .account__header + .account__section-headline { border-radius: 8px 8px 0 0; } -.layout-single-column .account__section-headline:has(+ .explore__suggestions) { +.app-body .account__section-headline:has(+ .explore__suggestions) { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; margin-bottom: 10px; } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .explore__search-header + .account__section-headline { + .app-body .explore__search-header + .account__section-headline { border-top-left-radius: 8px; border-top-right-radius: 8px; } - .layout-single-column .notification__filter-bar { + .app-body .notification__filter-bar { border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 10px; } } @media screen and (max-width:889px) { - .layout-single-column :is(.account__section-headline, .notification__filter-bar) { + .app-body :is(.account__section-headline, .notification__filter-bar) { border-left: 0; border-right: 0; } } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button) { background-color: var(--color-accent-bg); @@ -2136,36 +2151,36 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu max-height: 45px; padding: 14px 10px; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) .icon { margin-top: -1.5px; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):hover { background-color: var(--color-accent-lines); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { background-color: var(--color-content-bg); color: var(--color-content-fg); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active::before { display: none; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) button { background-color: transparent; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button, a.active, button.active)::after { display: block; @@ -2183,52 +2198,52 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: unset; border: 0; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):last-child::after { display: none; } @media (prefers-color-scheme: dark) { - .layout-single-column + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { background-color: var(--color-bg); } } -.layout-single-column .notification__filter-bar .icon-reply-all { +.app-body .notification__filter-bar .icon-reply-all { background-image: var(--icon-reply-accent); } -.layout-single-column .notification__filter-bar .active .icon-reply-all { +.app-body .notification__filter-bar .active .icon-reply-all { background-image: var(--icon-reply); } -.layout-single-column .notification__filter-bar .icon-star { +.app-body .notification__filter-bar .icon-star { background-image: var(--icon-star-accent); } -.layout-single-column .notification__filter-bar .active .icon-star { +.app-body .notification__filter-bar .active .icon-star { background-image: var(--icon-star); } -.layout-single-column .notification__filter-bar .icon-retweet { +.app-body .notification__filter-bar .icon-retweet { background-image: var(--icon-boost-accent); } -.layout-single-column .notification__filter-bar .active .icon-retweet { +.app-body .notification__filter-bar .active .icon-retweet { background-image: var(--icon-boost); } -.layout-single-column .notification__filter-bar .icon-tasks { +.app-body .notification__filter-bar .icon-tasks { background-image: var(--icon-poll-accent); } -.layout-single-column .notification__filter-bar .active .icon-tasks { +.app-body .notification__filter-bar .active .icon-tasks { background-image: var(--icon-poll); } -.layout-single-column .notification__filter-bar .icon-home { +.app-body .notification__filter-bar .icon-home { background-image: var(--icon-post-notification-accent); } -.layout-single-column .notification__filter-bar .active .icon-home { +.app-body .notification__filter-bar .active .icon-home { background-image: var(--icon-post-notification); } @media screen and (max-width:889px) { - .layout-single-column .account__header + .account__section-headline { + .app-body .account__header + .account__section-headline { border-radius: 0; } } @@ -2238,79 +2253,79 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu ------------------- */ @media screen and (min-width:1175px) { /* Order of the side nav items */ - .layout-single-column .navigation-panel__logo { + .app-body .navigation-panel__logo { order: 1; } - .layout-single-column .column-link[href="/home"] { + .app-body .column-link[href="/home"] { order: 2; } - .layout-single-column .column-link[href="/notifications"] { + .app-body .column-link[href="/notifications"] { order: 3; } - .layout-single-column .column-link[href="/explore"] { + .app-body .column-link[href="/explore"] { order: 4; } - .layout-single-column .column-link[href="/public/local"] { + .app-body .column-link[href="/public/local"] { order: 5; } - .layout-single-column .column-link[href="/public"] { + .app-body .column-link[href="/public"] { order: 6; } - .layout-single-column .column-link[href="/conversations"] { + .app-body .column-link[href="/conversations"] { order: 7; } - .layout-single-column .column-link[href="/follow_requests"] { + .app-body .column-link[href="/follow_requests"] { order: 8; } - .layout-single-column .column-link[href="/bookmarks"] { + .app-body .column-link[href="/bookmarks"] { order: 9; } - .layout-single-column .column-link[href="/favourites"] { + .app-body .column-link[href="/favourites"] { order: 10; } - .layout-single-column .column-link[href="/lists"] { + .app-body .column-link[href="/lists"] { order: 12; } - .layout-single-column .list-panel { + .app-body .list-panel { order: 13; } - .layout-single-column .column-link[href="/settings/preferences"] { + .app-body .column-link[href="/settings/preferences"] { order: 11; } - .layout-single-column .navigation-panel__sign-in-banner, - .layout-single-column .navigation-panel__legal { + .app-body .navigation-panel__sign-in-banner, + .app-body .navigation-panel__legal { order: 14; } - .layout-single-column .flex-spacer { + .app-body .flex-spacer { order: 15; } - .layout-single-column .getting-started__trends { + .app-body .getting-started__trends { order: 16; } } -.layout-single-column .column-link--transparent { +.app-body .column-link--transparent { color: var(--color-fg); } -.layout-single-column .ui__header__logo .logo--icon { +.app-body .ui__header__logo .logo--icon { display: none; } -.layout-single-column .ui__header__links .button.button-secondary { +.app-body .ui__header__links .button.button-secondary { padding: 8px 15px; } -.layout-single-column .ui__header__links .button.button-secondary[href="/publish"] { +.app-body .ui__header__links .button.button-secondary[href="/publish"] { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { +.app-body .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { background-color: var(--color-accent-focus); color: var(--color-accent-fg); } -.layout-single-column .column-link--logo { +.app-body .column-link--logo { margin-left: 4px; } -.layout-single-column .column-link.column-link--logo, -.layout-single-column .ui__header__logo { +.app-body .column-link.column-link--logo, +.app-body .ui__header__logo { display: inline-flex; padding: 0; width: 50px; @@ -2320,40 +2335,40 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-position: center; background-size: 32px auto; } -.layout-single-column .column-link.column-link--logo svg, -.layout-single-column .ui__header__logo svg { +.app-body .column-link.column-link--logo svg, +.app-body .ui__header__logo svg { display: none; } -.layout-single-column .navigation-panel__logo { +.app-body .navigation-panel__logo { margin-bottom: 10px; } -.layout-single-column .column-link:not(.column-link--logo) { +.app-body .column-link:not(.column-link--logo) { padding: 13px 20px 14px 13px; margin-left: 3px; font-weight: 500; font-size: 18px; overflow: visible; } -.layout-single-column .column-link--transparent:is(.active, .active:hover) { +.app-body .column-link--transparent:is(.active, .active:hover) { color: var(--color-content-fg); font-weight: bold; } -.layout-single-column .column-link--transparent:hover { +.app-body .column-link--transparent:hover { border-radius: 8px; padding-right: 20px; } -.layout-single-column .column-link--transparent span { +.app-body .column-link--transparent span { position: relative; } @media screen and (min-width:1175px) { - .layout-single-column .column-link:not(.column-link--logo) { + .app-body .column-link:not(.column-link--logo) { transition: all .2s; } - .layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { + .app-body .column-link:not(.column-link--logo)[href="/settings/preferences"] { padding-bottom: 13px; } - .layout-single-column .column-link--transparent span::before { + .app-body .column-link--transparent span::before { content: " "; left: -44px; background-color: transparent; @@ -2365,21 +2380,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu z-index: -1; bottom: -12px; } - .layout-single-column .column-link--transparent:hover span::before { + .app-body .column-link--transparent:hover span::before { background-color: var(--color-accent-bg); } - .layout-single-column .column-link--transparent:is(.active, .active:hover) span::before { + .app-body .column-link--transparent:is(.active, .active:hover) span::before { background-color: var(--color-content-secondary-bg); } } @media (prefers-color-scheme: dark) { @media screen and (min-width:1175px) { - .layout-single-column .column-link--transparent:is(.active, .active:hover) span::before { + .app-body .column-link--transparent:is(.active, .active:hover) span::before { background-color: var(--color-content-secondary-bg); } } } -.layout-single-column .icon-with-badge__badge { +.app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); border-radius: 20px; @@ -2388,39 +2403,39 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border: 0; z-index: 1; } -.layout-single-column .compose-panel hr, .navigation-panel hr { +.app-body .compose-panel hr, .navigation-panel hr { display: none; } -.layout-single-column .column-link span { +.app-body .column-link span { vertical-align: middle; } -.layout-single-column .column-link .fa::before { +.app-body .column-link .fa::before { position: relative; top: 1px; } -.layout-single-column .column-link .fa.fa-cog { +.app-body .column-link .fa.fa-cog { transform: scale(1) translate(1px, -1px); } -.layout-single-column .list-panel { +.app-body .list-panel { padding: 5px 9px 50px 27px; margin: 0 0 5px; display: none; } -.layout-single-column .list-panel .icon { +.app-body .list-panel .icon { display: none; } -.layout-single-column .list-panel .column-link span::before { +.app-body .list-panel .column-link span::before { left: -15px; top: -10px; right: -15px; bottom: -10px; } -.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { +.app-body .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { background-color: var(--color-accent-bg); } @media screen and (min-width:1175px) { - .layout-single-column .column-link[href="/lists"]:is(.active, :hover) + .list-panel, - .layout-single-column .list-panel:hover { + .app-body .column-link[href="/lists"]:is(.active, :hover) + .list-panel, + .app-body .list-panel:hover { display: block; animation: fadein .5s 1; } @@ -2436,14 +2451,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } @media screen and (max-width:1174px) { - .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { + .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; height: calc(4.2em + env(safe-area-inset-bottom)); bottom: 0; left: 0; z-index: 3; } - .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { + .app-body .columns-area__panels__pane--navigational .navigation-panel { width: 100vw; height: 4.2em; padding-bottom: env(safe-area-inset-bottom); @@ -2453,8 +2468,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-top: 1px solid var(--color-lines); border-left: 0; } - .layout-single-column .navigation-panel :is(.column-link, .navigation-panel__legal), - .layout-single-column .column-link--transparent:is(.active, .active:hover, :active) { + .app-body .navigation-panel :is(.column-link, .navigation-panel__legal), + .app-body .column-link--transparent:is(.active, .active:hover, :active) { flex: 0 0 20vw; margin: 6px 0 8px; padding: 4px 0 3px; @@ -2466,63 +2481,63 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-sizing: border-box; background-color: transparent; } - .layout-single-column + .app-body .navigation-panel:has(> *:nth-child(4):last-child) :is(.column-link, .navigation-panel__legal) { flex: 50vw; } - .layout-single-column + .app-body .navigation-panel:has(> *:nth-child(5):last-child) :is(.column-link, .navigation-panel__legal) { flex: calc(100vw / 3); } - .layout-single-column + .app-body .navigation-panel:has(> *:nth-child(6):last-child) :is(.column-link, .navigation-panel__legal) { flex: 25vw; } - .layout-single-column .column-link--transparent:is(.active, .active:hover, :active) { + .app-body .column-link--transparent:is(.active, .active:hover, :active) { margin: 6px 0 8px; padding: 4px 0 3px; border-radius: 8px; border: 0; background-color: #ffffff; } - .layout-single-column .column-link__icon { + .app-body .column-link__icon { margin: 0; } - .layout-single-column .column-link span { + .app-body .column-link span { padding-left: .5em; } - .layout-single-column .columns-area__panels__main { + .app-body .columns-area__panels__main { width: calc(100% - 285px); margin-left: -285px; } - .layout-single-column .columns-area__panels { + .app-body .columns-area__panels { padding-bottom: 6em; } - .layout-single-column .columns-area__panels .navigation-panel__legal { + .app-body .columns-area__panels .navigation-panel__legal { margin: 0; padding: 0; } - .layout-single-column .columns-area__panels .navigation-panel__legal .column-link--transparent { + .app-body .columns-area__panels .navigation-panel__legal .column-link--transparent { height: calc(100% - 13px); box-sizing: border-box; border: 0; } - .layout-single-column .navigation-panel .flex-spacer { + .app-body .navigation-panel .flex-spacer { display: none; } } @media screen and (max-width:889px) { - .layout-single-column .columns-area__panels__main { + .app-body .columns-area__panels__main { width: 100%; margin-left: -55px; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { - .layout-single-column .column-link--transparent:is(.active, .active:hover, :active) { + .app-body .column-link--transparent:is(.active, .active:hover, :active) { background-color: var(--color-bg); } } @@ -2532,34 +2547,34 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ‘€ Account view --------------- */ -.layout-single-column .account__header { +.app-body .account__header { border-radius: 0 0 8px 8px; margin-bottom: 10px; background-color: var(--color-content-bg); border: 1px solid var(--color-lines); } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .account__header { + .app-body .account__header { margin-top: 15px; border-radius: 8px; } } @media screen and (max-width:889px) { - .layout-single-column .account__header { + .app-body .account__header { border-left: 0; border-right: 0; border-radius: 0; } } -.layout-single-column .account__header__image { +.app-body .account__header__image { height: 159px; background-color: var(--color-secondary-bg); border-bottom: 0; } -.layout-single-column .account__header__bar { +.app-body .account__header__bar { border: 0; } -.layout-single-column .account__header__bar .avatar .account__avatar { +.app-body .account__header__bar .avatar .account__avatar { border-radius: 50%; border-width: 5px; width: 100px !important; @@ -2567,77 +2582,77 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-content-bg); border-color: var(--color-content-bg); } -.layout-single-column .account__header__tabs__name h1, -.layout-single-column .account__header__tabs__name h1 small { +.app-body .account__header__tabs__name h1, +.app-body .account__header__tabs__name h1 small { color: var(--color-content-fg); } -.layout-single-column .account__header__tabs__name h1 > span { +.app-body .account__header__tabs__name h1 > span { font-size: 18px; } -.layout-single-column .account__header__tabs__name h1 small { +.app-body .account__header__tabs__name h1 small { opacity: .7; } -.layout-single-column .account__header__tabs__name .icon-lock { +.app-body .account__header__tabs__name .icon-lock { vertical-align: bottom; } -.layout-single-column .account__header__content a { +.app-body .account__header__content a { color: var(--color-accent); text-decoration: none; } -.layout-single-column .account__header__content a:hover { +.app-body .account__header__content a:hover { text-decoration: underline; } -.layout-single-column .account__header__extra__links a strong { +.app-body .account__header__extra__links a strong { color: var(--color-content-fg-bold); } -.layout-single-column .account__header__account-note label { +.app-body .account__header__account-note label { margin-bottom: 0; } -.layout-single-column .account__header__account-note label, -.layout-single-column .account__header__account-note textarea::placeholder { +.app-body .account__header__account-note label, +.app-body .account__header__account-note textarea::placeholder { color: var(--color-content-fg-bold); opacity: .5; } -.layout-single-column .account__header__account-note textarea { +.app-body .account__header__account-note textarea { color: var(--color-content-fg); } -.layout-single-column .account__header__account-note textarea:focus { +.app-body .account__header__account-note textarea:focus { background-color: var(--color-accent-bg); } -.layout-single-column .account__header__badges .account-role { +.app-body .account__header__badges .account-role { border-radius: 8px; border-color: var(--color-accent); color: var(--color-accent); } -.layout-single-column .account-role svg { +.app-body .account-role svg { opacity: 1; } -.layout-single-column .account__header__extra__links a, -.layout-single-column .account__header__bio .account__header__content, -.layout-single-column .account__header__bio .account__header__fields dd { +.app-body .account__header__extra__links a, +.app-body .account__header__bio .account__header__content, +.app-body .account__header__bio .account__header__fields dd { color: var(--color-content-fg); } -.layout-single-column .account__header__bio .account__header__fields { +.app-body .account__header__bio .account__header__fields { background-color: var(--color-content-secondary-bg); border-radius: 8px; } @media (prefers-color-scheme: dark) { - .layout-single-column .account__header__bio .account__header__fields { + .app-body .account__header__bio .account__header__fields { background-color: var(--color-secondary-bg); } } -.layout-single-column .account__header__bio .account__header__fields:has(dl:only-child) { +.app-body .account__header__bio .account__header__fields:has(dl:only-child) { display: none; } -.layout-single-column .account__header__bio .account__header__fields dt { +.app-body .account__header__bio .account__header__fields dt { font-weight: bold; font-size: 12px; } -.layout-single-column .account__header__bio .account__header__fields :is(dl, .verified) { +.app-body .account__header__bio .account__header__fields :is(dl, .verified) { border-bottom: 0; position: relative; } -.layout-single-column .account__header__bio .account__header__fields dl:not(:last-child):after { +.app-body .account__header__bio .account__header__fields dl:not(:last-child):after { display: block; content: " "; height: 1px; @@ -2648,58 +2663,58 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu position: absolute; border-radius: 50px; } -.layout-single-column .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ +.app-body .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 0; } -.layout-single-column .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ +.app-body .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ margin-top: 0; border-top-width: 0; } -.layout-single-column .account__header__bio .account__header__fields .verified :is(a, dd) { +.app-body .account__header__bio .account__header__fields .verified :is(a, dd) { color: var(--color-accent); } -.layout-single-column .account__header__bio .account__header__fields :is(.verified dt, dt) { +.app-body .account__header__bio .account__header__fields :is(.verified dt, dt) { color: var(--color-content-fg); } -.layout-single-column .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ +.app-body .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ border-top: 0; border-right: 0; border-left: 0; background: none; } -.layout-single-column .account__header__extra .account__header__fields .verified dd > span:first-child { +.app-body .account__header__extra .account__header__fields .verified dd > span:first-child { vertical-align: bottom; } -.layout-single-column .account__header__extra .account__header__fields .verified__mark { +.app-body .account__header__extra .account__header__fields .verified__mark { float: left; margin-right: 2px; } -.layout-single-column .account__header__bio .account__header__fields .verified:last-child { +.app-body .account__header__bio .account__header__fields .verified:last-child { border-bottom: 0; } @media screen and (max-width:889px) { - .layout-single-column .account-timeline__header + article :is(.status__wrapper, .account) { + .app-body .account-timeline__header + article :is(.status__wrapper, .account) { border-left: 0; border-right: 0; border-radius: 0; } } -.layout-single-column .follow-request-banner, -.layout-single-column .moved-account-banner { +.app-body .follow-request-banner, +.app-body .moved-account-banner { background-color: var(--color-accent-bg); } -.layout-single-column .moved-account-banner { +.app-body .moved-account-banner { margin-bottom: 10px; border-radius: 8px; } -.layout-single-column .follow-request-banner__message, -.layout-single-column .moved-account-banner__message { +.app-body .follow-request-banner__message, +.app-body .moved-account-banner__message { color: var(--color-content-fg); } -.layout-single-column .moved-account-banner__message { +.app-body .moved-account-banner__message { font-weight: bold; } @@ -2707,50 +2722,50 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ✨ Explore tab -------------- */ @media screen and (min-width:890px) { - .layout-single-column .account__section-headline + .scrollable article:last-child .status__wrapper { + .app-body .account__section-headline + .scrollable article:last-child .status__wrapper { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } } /* #️⃣ Trending hashtags */ -.layout-single-column .trends__item__sparkline path:last-child { +.app-body .trends__item__sparkline path:last-child { stroke: var(--color-accent) !important; } -.layout-single-column .trends__item__sparkline path:first-child { +.app-body .trends__item__sparkline path:first-child { fill: var(--color-accent) !important; fill-opacity: 0.2 !important; } -.layout-single-column .explore__links { +.app-body .explore__links { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); overflow: hidden; margin-top: -1px; } @media screen and (max-width:889px) { - .layout-single-column .explore__links { + .app-body .explore__links { border-left: 0; border-right: 0; } } -.layout-single-column .columns-area__panels__main .trends__item { +.app-body .columns-area__panels__main .trends__item { background-color: var(--color-content-bg); border-bottom: 2px solid var(--color-content-secondary-bg); } -.layout-single-column .explore__links .trends__item:last-child { +.app-body .explore__links .trends__item:last-child { border-bottom: 0; } -.layout-single-column .trends__item__name, -.layout-single-column .trends__item__current { +.app-body .trends__item__name, +.app-body .trends__item__current { color: var(--color-fg-muted); } -.layout-single-column .trends__item__name a { +.app-body .trends__item__name a { color: var(--color-fg); } /* Hashtag header */ -.layout-single-column .hashtag-header { +.app-body .hashtag-header { font-size: 15px; padding: 22px 20px 24px; color: var(--color-content-fg); @@ -2758,13 +2773,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-top: 1px solid var(--color-lines); border-bottom: 0; } -.layout-single-column .hashtag-header__header { +.app-body .hashtag-header__header { margin-bottom: 0; } -.layout-single-column .hashtag-header__header h1 { +.app-body .hashtag-header__header h1 { color: var(--color-content-fg); } -.layout-single-column .hashtag-header .hashtag-header__header + div { +.app-body .hashtag-header .hashtag-header__header + div { color: var(--color-content-fg); font-size: 85%; opacity: .8; @@ -2773,34 +2788,34 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .hashtag-header { + .app-body .hashtag-header { margin-top: 15px; } } @media screen and (min-width:890px) { - .layout-single-column .hashtag-header { + .app-body .hashtag-header { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } - .layout-single-column .hashtag-header .hashtag-header__header button { + .app-body .hashtag-header .hashtag-header__header button { transform: translate(0, 8px); } } /* Account recommendations (For You Tab + User directory */ -.layout-single-column .scrollable .account-card { +.app-body .scrollable .account-card { margin: 0 0 10px; background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); } @media screen and (max-width:889px) { - .layout-single-column .scrollable .account-card { + .app-body .scrollable .account-card { margin: 0 10px 10px; } } -.layout-single-column .account-card__header { +.app-body .account-card__header { padding: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -2809,163 +2824,163 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 128px; overflow: hidden; } -.layout-single-column .scrollable .account-card__bio:after { +.app-body .scrollable .account-card__bio:after { background: linear-gradient(270deg, var(--color-content-bg), transparent); } -.layout-single-column .account-card__title__avatar .account__avatar { +.app-body .account-card__title__avatar .account__avatar { border: 0; border-radius: 50%; overflow: visible; } -.layout-single-column .account-card__title__avatar img { +.app-body .account-card__title__avatar img { border: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--color-content-bg); } -.layout-single-column .account-card__title .display-name bdi, -.layout-single-column .account-card__counters__item, -.layout-single-column .account-card__counters__item small { +.app-body .account-card__title .display-name bdi, +.app-body .account-card__counters__item, +.app-body .account-card__counters__item small { color: var(--color-content-fg-bold); } -.layout-single-column .account-card__counters__item small { +.app-body .account-card__counters__item small { opacity: .7; } -.layout-single-column .account-card__bio a { +.app-body .account-card__bio a { color: var(--color-accent); } -.layout-single-column .filter-form { +.app-body .filter-form { background-color: var(--color-accent-bg); border-radius: 8px; margin-bottom: 10px; } -.layout-single-column .filter-form__column { +.app-body .filter-form__column { padding: 10px 15px; } /* πŸ“° Trending stories */ -.layout-single-column .story { +.app-body .story { background-color: var(--color-content-bg); transition: background-color .2s; } -.layout-single-column .story:not(:last-child) { +.app-body .story:not(:last-child) { border-bottom: 2px solid var(--color-content-secondary-separator); } -.layout-single-column .story, -.layout-single-column .story__details__title { +.app-body .story, +.app-body .story__details__title { color: var(--color-content-fg); } -.layout-single-column .story:hover { +.app-body .story:hover { background-color: var(--color-content-bg-focus); } -.layout-single-column .story__details__publisher, -.layout-single-column .story__details__shared { +.app-body .story__details__publisher, +.app-body .story__details__shared { color: var(--color-fg); } -.layout-single-column .story .story__details__publisher, -.layout-single-column .story .story__details__shared { +.app-body .story .story__details__publisher, +.app-body .story .story__details__shared { transition: all .3s; } -.layout-single-column .story:is(:active, :focus, :hover) :is(.story__details__publisher, .story__details__shared) { +.app-body .story:is(:active, :focus, :hover) :is(.story__details__publisher, .story__details__shared) { color: var(--color-accent); } -.layout-single-column .story.expanded .story__thumbnail { +.app-body .story.expanded .story__thumbnail { margin: 0 0 -25px; } -.layout-single-column .story.expanded .story__thumbnail img { +.app-body .story.expanded .story__thumbnail img { width: calc(100% + 30px); margin: -15px -15px 0 -15px; border-radius: 0 0 0 0; } /* πŸ” Search field and search results */ -.layout-single-column .search { +.app-body .search { margin-bottom: 10px; } -.layout-single-column .search__input { +.app-body .search__input { border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .search__input::placeholder, -.layout-single-column .compose-form .spoiler-input__input::placeholder { +.app-body .search__input::placeholder, +.app-body .compose-form .spoiler-input__input::placeholder { font-weight: 500; color: var(--color-accent); } -.layout-single-column .search__input:focus { +.app-body .search__input:focus { border: 1px solid var(--color-accent); } -.layout-single-column .search__icon .icon { +.app-body .search__icon .icon { margin-right: 4px; transform: scale(.9); } -.layout-single-column .compose-panel .icon-search, -.layout-single-column .compose-panel .icon-search.active, -.layout-single-column .explore__search-header .icon-search { +.app-body .compose-panel .icon-search, +.app-body .compose-panel .icon-search.active, +.app-body .explore__search-header .icon-search { background-image: var(--icon-search-active); } -.layout-single-column .compose-panel .icon-search.active, -.layout-single-column .search__icon .icon-search.active { +.app-body .compose-panel .icon-search.active, +.app-body .search__icon .icon-search.active { opacity: 1; z-index: 1; } -.layout-single-column .explore__search-results { +.app-body .explore__search-results { background-color: transparent; overflow: hidden; } -.layout-single-column .explore__search-header { +.app-body .explore__search-header { background-color: transparent; } -.layout-single-column .explore__search-results .account { +.app-body .explore__search-results .account { padding-top: 16px; } -.layout-single-column .explore__search-results article:last-child > .account { +.app-body .explore__search-results article:last-child > .account { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .explore__search-results .trends__item { +.app-body .explore__search-results .trends__item { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .explore__search-results article:first-child > .trends__item, -.layout-single-column .search-results__section > .trends__item:first-child, -.layout-single-column .search-results__section > .account:first-child { +.app-body .explore__search-results article:first-child > .trends__item, +.app-body .search-results__section > .trends__item:first-child, +.app-body .search-results__section > .account:first-child { border-top: 1px solid var(--color-lines); } -.layout-single-column .explore__search-results article:last-child > .trends__item, -.layout-single-column .search-results__section > .trends__item:last-child, -.layout-single-column .search-results__section > .account:last-child { +.app-body .explore__search-results article:last-child > .trends__item, +.app-body .search-results__section > .trends__item:last-child, +.app-body .search-results__section > .account:last-child { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .search-results__section { +.app-body .search-results__section { background-color: var(--color-bg); border-bottom: 0; } -.layout-single-column .search-results__section__header { +.app-body .search-results__section__header { background-color: var(--color-content-secondary-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); border-bottom: 0; color: var(--color-content-fg); } -.layout-single-column .search-results__section__header button { +.app-body .search-results__section__header button { color: var(--color-accent); } @media screen and (min-width:890px) { - .layout-single-column .explore__search-results + .app-body .explore__search-results :is(article:last-child > .account, article:last-child > .trends__item, .load-more:last-child), - .layout-single-column .search-results__section:last-child > :is(.trends__item, .account):last-child { + .app-body .search-results__section:last-child > :is(.trends__item, .account):last-child { border-radius: 0 0 8px 8px; } } -.layout-single-column .account .account__details > span { +.app-body .account .account__details > span { color: var(--color-content-fg); } -.layout-single-column .account .account__details .verified-badge { +.app-body .account .account__details .verified-badge { color: var(--color-accent); } -.layout-single-column .account .account__details .verified-badge span { +.app-body .account .account__details .verified-badge span { font-weight: 500; } @keyframes fadein-short { @@ -2978,7 +2993,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu opacity: 1; } } -.layout-single-column .search__popout { +.app-body .search__popout { background-color: var(--color-content-bg); border-radius: 8px; box-shadow: none; @@ -2986,49 +3001,49 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border: 1px solid var(--color-lines); animation: .3s fadein-short 1; } -.layout-single-column .search__popout h4 { +.app-body .search__popout h4 { font-weight: bold; } -.layout-single-column .search__popout h4, -.layout-single-column .search__popout__menu__message, -.layout-single-column .search__popout__menu__item { +.app-body .search__popout h4, +.app-body .search__popout__menu__message, +.app-body .search__popout__menu__item { color: var(--color-content-fg); } -.layout-single-column .search__popout__menu__item { +.app-body .search__popout__menu__item { align-items: initial; } -.layout-single-column .search__popout__menu__item mark { +.app-body .search__popout__menu__item mark { color: var(--color-content-fg-bold); } -.layout-single-column .search__popout__menu__item .icon-button:is(:active, :focus, :hover) { +.app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover) { background-color: transparent; color: var(--color-accent-fg); } -.layout-single-column .search__popout__menu__item:is(.selected, :active, :focus, :hover), -.layout-single-column .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark { +.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover), +.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark { background-color: var(--color-accent); color: var(--color-accent-fg); } @media screen and (max-width:1174px) { - .layout-single-column .search { + .app-body .search { margin-bottom: 0; } - .layout-single-column .explore__search-header { + .app-body .explore__search-header { padding-top: 2px; } - .layout-single-column .search__input { + .app-body .search__input { padding: 13px; } - .layout-single-column .explore__search-header { + .app-body .explore__search-header { padding: 10px 0; } - .layout-single-column .search__icon .icon { + .app-body .search__icon .icon { top: 11px; } } @media screen and (max-width:889px) { - .layout-single-column .explore__search-header { + .app-body .explore__search-header { padding: 10px; } } @@ -3036,57 +3051,57 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* Dismissable banners */ -.layout-single-column .dismissable-banner { +.app-body .dismissable-banner { background-color: var(--color-accent); box-shadow: 0 5px var(--color-content-bg); border-radius: 0; border: 1px solid var(--color-lines); margin: 0; } -.layout-single-column .explore__links .dismissable-banner { +.app-body .explore__links .dismissable-banner { border: 0; } @media screen and (max-width:889px) { - .layout-single-column .dismissable-banner, - .layout-single-column .explore__links .dismissable-banner { + .app-body .dismissable-banner, + .app-body .explore__links .dismissable-banner { border-left: 0; border-right: 0; } } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .dismissable-banner { + .app-body .dismissable-banner { margin-top: 10px; } - .layout-single-column .explore__links .dismissable-banner { + .app-body .explore__links .dismissable-banner { margin-top: 0; } } -.layout-single-column .dismissable-banner__message, -.layout-single-column .dismissable-banner__action .icon-button { +.app-body .dismissable-banner__message, +.app-body .dismissable-banner__action .icon-button { color: var(--color-accent-fg); } -.layout-single-column .dismissable-banner__message h1 { +.app-body .dismissable-banner__message h1 { color: var(--color-accent-fg); margin-top: 10px; } -.layout-single-column .dismissable-banner__message__actions__wrapper { +.app-body .dismissable-banner__message__actions__wrapper { flex-flow: row-reverse; } -.layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { +.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: linear-gradient(to bottom, rgba(247, 105, 2, 0.8), rgba(247, 105, 2, 0.5)); padding-left: 10px; padding-right: 10px; } -.layout-single-column .dismissable-banner__background-image { +.app-body .dismissable-banner__background-image { display: none; } -.layout-single-column .dismissable-banner__message__actions .button, -.layout-single-column .dismissable-banner__message__actions .button.button-tertiary { +.app-body .dismissable-banner__message__actions .button, +.app-body .dismissable-banner__message__actions .button.button-tertiary { line-height: 28px; padding: 6px 17px; } @media (prefers-color-scheme: dark) { - .layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: linear-gradient(to top, rgba(230, 137, 51, .5), rgba(230, 137, 51, .3)); } } @@ -3095,16 +3110,16 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ”” Notifications ---------------- */ -.layout-single-column .status.muted +.app-body .status.muted :is(.status__content, .status__content a, .status__content p, .status__display-name strong), -.layout-single-column .attachment-list__list a { +.app-body .attachment-list__list a { color: var(--color-content-fg-muted); } -.layout-single-column .notification.unread::before, -.layout-single-column .status__wrapper.unread::before { +.app-body .notification.unread::before, +.app-body .status__wrapper.unread::before { background-color: var(--color-accent); width: 8px; border: 0; @@ -3115,35 +3130,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu left: 5px; z-index: 1; } -.layout-single-column .notification__message { +.app-body .notification__message { padding: 12px 12px 5px; background-color: var(--color-content-bg); color: var(--color-content-fg-bold); transition: all .3s; } -.layout-single-column .notification__display-name { +.app-body .notification__display-name { font-weight: bold; } -.layout-single-column .notification__report { +.app-body .notification__report { background-color: var(--color-content-bg); border-bottom: 0; padding-top: 10px; gap: 15px; } -.layout-single-column .notification__report__details { +.app-body .notification__report__details { color: var(--color-content-fg); } @media screen and (min-width:889px) { - .layout-single-column .notification__message { + .app-body .notification__message { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } - .layout-single-column .notification__report { + .app-body .notification__report { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } } -.layout-single-column .notification__message .icon { +.app-body .notification__message .icon { color: var(--color-accent); width: 18px; margin-left: 38px; @@ -3151,14 +3166,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-position: center right; } @media screen and (max-width:889px) { - .layout-single-column .notification__message .icon { + .app-body .notification__message .icon { margin-left: 34px; } } -.layout-single-column .notification .status__wrapper { +.app-body .notification .status__wrapper { padding-top: 0; } -.layout-single-column +.app-body :is(.notification-favourite, .notification-reblog, .notification-poll, @@ -3166,22 +3181,22 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .status__action-bar { display: none; } -.layout-single-column .account { +.app-body .account { background-color: var(--color-content-bg); border-bottom: 0; padding-left: 22px; padding-top: 4px; } -.layout-single-column .explore__search-results .account { +.app-body .explore__search-results .account { padding-top: 16px; } -.layout-single-column +.app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) .display-name__account { display: block; } -.layout-single-column +.app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) .display-name { @@ -3189,94 +3204,94 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } @media screen and (min-width:890px) { - .layout-single-column .account { + .app-body .account { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } - .layout-single-column .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 32px; padding-right: 22px; } } @media screen and (max-width:889px) { - .layout-single-column .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 27px; } } @media screen and (max-width:1174px) { - .layout-single-column .account { + .app-body .account { padding-left: 18px; } } -.layout-single-column .notification .account__relationship .icon-button { +.app-body .notification .account__relationship .icon-button { padding: 5px; border-radius: 8px; } -.layout-single-column .notification .account__relationship .icon-button:first-child { +.app-body .notification .account__relationship .icon-button:first-child { background-color: rgba(121, 189, 154, 0.3); } -.layout-single-column .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) { +.app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) { background-color: #79bd9a; } -.layout-single-column .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) .icon-check { +.app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } -.layout-single-column .notification .account__relationship .icon-button:last-child { +.app-body .notification .account__relationship .icon-button:last-child { background-color: rgba(223, 64, 90, 0.3); } -.layout-single-column .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) { +.app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) { background-color: #df405a; } -.layout-single-column .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) .icon-times { +.app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } /* πŸ“‹ Lists tab */ -.layout-single-column .column-inline-form { +.app-body .column-inline-form { background-color: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); border-radius: 0 0 8px 8px; margin-bottom: 10px; } @media screen and (max-width:1174px) { - .layout-single-column .column-inline-form { + .app-body .column-inline-form { margin-top: 10px; } } @media screen and (max-width:889px) { - .layout-single-column .column-inline-form { + .app-body .column-inline-form { margin-left: 10px; margin-right: 10px; } } -.layout-single-column .column-inline-form label :is(input, input:focus) { +.app-body .column-inline-form label :is(input, input:focus) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 8px; } -.layout-single-column .column-inline-form label input:focus { +.app-body .column-inline-form label input:focus { box-shadow: 0 0 0 1px var(--color-accent); } -.layout-single-column :is(.column-subheading, .columns-area__panels__main .column-link) { +.app-body :is(.column-subheading, .columns-area__panels__main .column-link) { background-color: var(--color-content-bg); color: var(--color-fg); } -.layout-single-column .item-list .column-subheading { +.app-body .item-list .column-subheading { color: var(--color-fg-muted); border: 1px solid var(--color-lines); border-bottom: 0; border-radius: 8px 8px 0 0; } @media screen and (max-width:889px) { - .layout-single-column .item-list .column-subheading { + .app-body .item-list .column-subheading { border-left: 0; border-right: 0; border-radius: 0; } } -.layout-single-column .columns-area__panels__main .column-link { +.app-body .columns-area__panels__main .column-link { margin-left: 0; width: 100%; border-left: 1px solid var(--color-lines); @@ -3284,33 +3299,33 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-bottom: 2px solid var(--color-content-secondary-separator); box-sizing: border-box; } -.layout-single-column .columns-area__panels__main .column-link:hover { +.app-body .columns-area__panels__main .column-link:hover { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } -.layout-single-column .columns-area__panels__main article:last-child .column-link { +.app-body .columns-area__panels__main article:last-child .column-link { border-bottom: 1px solid var(--color-lines); border-radius: 0 0 8px 8px; } @media screen and (max-width:889px) { - .layout-single-column .columns-area__panels__main .column-link { + .app-body .columns-area__panels__main .column-link { border-left: 0; border-right: 0; } - .layout-single-column .columns-area__panels__main article:last-child .column-link { + .app-body .columns-area__panels__main article:last-child .column-link { border-radius: 0; } } /* List adder dialog */ -.layout-single-column :is(.list-adder, .list-adder__account, .list-adder__lists) { +.app-body :is(.list-adder, .list-adder__account, .list-adder__lists) { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .list-adder__account { +.app-body .list-adder__account { margin-top: 12px; } -.layout-single-column .list-adder .column-inline-form { +.app-body .list-adder .column-inline-form { border-radius: 0; } .list-adder .list { @@ -3319,69 +3334,69 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* βž• Follow requests */ -.layout-single-column #Follow-requests { +.app-body #Follow-requests { margin-bottom: 0; z-index: 0; } -.layout-single-column .account-authorize__wrapper { +.app-body .account-authorize__wrapper { margin: 0; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } -.layout-single-column article:last-child > .account-authorize__wrapper, -.layout-single-column article:last-child > .account-authorize__wrapper .account--panel { +.app-body article:last-child > .account-authorize__wrapper, +.app-body article:last-child > .account-authorize__wrapper .account--panel { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .account-authorize { +.app-body .account-authorize { background-color: var(--color-content-bg); padding: 20px } -.layout-single-column .account--panel { +.app-body .account--panel { background-color: var(--color-content-bg); border: 0; padding: 0 5px; } -.layout-single-column .account__header__content { +.app-body .account__header__content { color: var(--color-content-fg); } -.layout-single-column .account--panel__button { +.app-body .account--panel__button { padding: 0 5px 12px 5px; } -.layout-single-column .account--panel__button .icon-button { +.app-body .account--panel__button .icon-button { padding: 10px; box-sizing: border-box; width: 100%; border-radius: 8px; transition: all .3s; } -.layout-single-column .account--panel button .icon-check { +.app-body .account--panel button .icon-check { background-image: var(--icon-check); } -.layout-single-column .account--panel button:is(:active, :focus, :hover) .icon-check { +.app-body .account--panel button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } -.layout-single-column .account--panel__button:first-child .icon-button { +.app-body .account--panel__button:first-child .icon-button { background-color: rgba(121, 189, 154, 0.3); } -.layout-single-column .account--panel__button:first-child .icon-button:is(:hover, :active) { +.app-body .account--panel__button:first-child .icon-button:is(:hover, :active) { background-color: #79bd9a; } -.layout-single-column .account--panel button .icon-times { +.app-body .account--panel button .icon-times { background-image: var(--icon-reject); } -.layout-single-column .account--panel button:is(:active, :focus, :hover) .icon-times { +.app-body .account--panel button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } -.layout-single-column .account--panel__button:nth-child(2) .icon-button { +.app-body .account--panel__button:nth-child(2) .icon-button { background-color: rgba(223, 64, 90, 0.3); } -.layout-single-column .account--panel__button:nth-child(2) .icon-button:is(:hover, :active) { +.app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active) { background-color: #df405a; } @media screen and (max-width:1174px) { - .layout-single-column #Follow-requests + .column-back-button--slim .column-back-button { + .app-body #Follow-requests + .column-back-button--slim .column-back-button { position: absolute; right: 0; margin: 0; @@ -3389,7 +3404,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } @media screen and (max-width:889px) { - .layout-single-column .account-authorize__wrapper { + .app-body .account-authorize__wrapper { border-left: 0; border-right: 0; } @@ -3398,126 +3413,126 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ⏺️ Other UI components : buttons, toggles, ... ----------------------------------------- */ -.layout-single-column .button, -.layout-single-column .account__header__tabs__buttons .icon-button { +.app-body .button, +.app-body .account__header__tabs__buttons .icon-button { border-radius: 8px; } -.layout-single-column .button, -.layout-single-column .button.logo-button, -.layout-single-column .rules-list li:before, -.layout-single-column .icon-with-badge__badge { +.app-body .button, +.app-body .button.logo-button, +.app-body .rules-list li:before, +.app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); transition: all .2s; } -.layout-single-column .button:disabled, -.layout-single-column .button.disabled { +.app-body .button:disabled, +.app-body .button.disabled { opacity: .7; } -.layout-single-column .text-icon-button.active, -.layout-single-column .button.button-tertiary, -.layout-single-column .account__header__fields a, -.layout-single-column .account__header__bio .account__header__fields a, -.layout-single-column .reply-indicator__content a.unhandled-link, -.layout-single-column .status__content a, -.layout-single-column .status__content a.hashtag, -.layout-single-column .status__content a.unhandled-link, -.layout-single-column .column-back-button, -.layout-single-column .about__section__title, -.layout-single-column .prose a, -.layout-single-column .column-link--transparent.active, -.layout-single-column .column-header > .column-header__back-button, -.layout-single-column .column-header__back-button, -.layout-single-column .interaction-modal__icon, -.layout-single-column .status__content a.mention, -.layout-single-column .status__content__read-more-button, -.layout-single-column .link-button, -.layout-single-column .translate-button button, -.layout-single-column .status__content__translate-button, -.layout-single-column .status__action-bar__dropdown .icon-button.active, -.layout-single-column .account__relationship .icon-button.active, -.layout-single-column .account__header__tabs__buttons .icon-button.active, -.layout-single-column .text-btn, -.layout-single-column .detailed-status__action-bar-dropdown .icon-button, -.layout-single-column .notification-bar-action { +.app-body .text-icon-button.active, +.app-body .button.button-tertiary, +.app-body .account__header__fields a, +.app-body .account__header__bio .account__header__fields a, +.app-body .reply-indicator__content a.unhandled-link, +.app-body .status__content a, +.app-body .status__content a.hashtag, +.app-body .status__content a.unhandled-link, +.app-body .column-back-button, +.app-body .about__section__title, +.app-body .prose a, +.app-body .column-link--transparent.active, +.app-body .column-header > .column-header__back-button, +.app-body .column-header__back-button, +.app-body .interaction-modal__icon, +.app-body .status__content a.mention, +.app-body .status__content__read-more-button, +.app-body .link-button, +.app-body .translate-button button, +.app-body .status__content__translate-button, +.app-body .status__action-bar__dropdown .icon-button.active, +.app-body .account__relationship .icon-button.active, +.app-body .account__header__tabs__buttons .icon-button.active, +.app-body .text-btn, +.app-body .detailed-status__action-bar-dropdown .icon-button, +.app-body .notification-bar-action { color: var(--color-accent); } -.layout-single-column .icon-button, -.layout-single-column .icon-button.inverted, -.layout-single-column .reply-indicator__content .status__content__spoiler-link, -.layout-single-column .status__content .status__content__spoiler-link { +.app-body .icon-button, +.app-body .icon-button.inverted, +.app-body .reply-indicator__content .status__content__spoiler-link, +.app-body .status__content .status__content__spoiler-link { color: var(--color-content-fg); } -.layout-single-column .reply-indicator__content .status__content__spoiler-link, -.layout-single-column .status__content .status__content__spoiler-link { +.app-body .reply-indicator__content .status__content__spoiler-link, +.app-body .status__content .status__content__spoiler-link { background-color: var(--color-accent-bg); border-radius: 8px; } -.layout-single-column .account__header__tabs__buttons .icon-button { +.app-body .account__header__tabs__buttons .icon-button { padding: 6px; border: 0; color: var(--color-content-fg); background-color: var(--color-content-secondary-bg); } -.layout-single-column .account__header__tabs__buttons .icon-button:hover { +.app-body .account__header__tabs__buttons .icon-button:hover { background-color: var(--color-accent-bg); color: var(--color-accent); } -.layout-single-column .icon-button:is(:active, :focus, :hover) { +.app-body .icon-button:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-accent); } -.layout-single-column .language-dropdown__dropdown { +.app-body .language-dropdown__dropdown { background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); box-shadow: 0 0 5px rgba(0, 0, 0, .15); } -.layout-single-column .language-dropdown__dropdown__results__item { +.app-body .language-dropdown__dropdown__results__item { border-radius: 8px; } -.layout-single-column .language-dropdown__dropdown__results__item.active, -.layout-single-column .language-dropdown__dropdown__results__item.active:hover { +.app-body .language-dropdown__dropdown__results__item.active, +.app-body .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { +.app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } -.layout-single-column .language-dropdown__dropdown__results__item__native-name { +.app-body .language-dropdown__dropdown__results__item__native-name { font-weight: bold; } -.layout-single-column .language-dropdown__dropdown__results__item__common-name { +.app-body .language-dropdown__dropdown__results__item__common-name { opacity: .7; } -.layout-single-column +.app-body :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-content-fg); } -.layout-single-column +.app-body .language-dropdown__dropdown__results__item:is(.active, .active:hover) :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-accent-fg); } -.layout-single-column +.app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) :is(.language-dropdown__dropdown__results__item__native-name, .language-dropdown__dropdown__results__item__common-name) { color: var(--color-accent); } -.layout-single-column .button:not(.button-secondary):is(:active, :focus, :hover), -.layout-single-column .button.button-tertiary:is(:active, :focus, :hover), -.layout-single-column .button.logo-button:is(:active, :focus, :hover) { +.app-body .button:not(.button-secondary):is(:active, :focus, :hover), +.app-body .button.button-tertiary:is(:active, :focus, :hover), +.app-body .button.logo-button:is(:active, :focus, :hover) { background-color: var(--color-accent-focus); } /* ⏺️ Toggles */ -.layout-single-column .setting-toggle__label { +.app-body .setting-toggle__label { vertical-align: top; } -.layout-single-column .react-toggle-track { +.app-body .react-toggle-track { background-color: var(--color-accent-lines); box-shadow: 0 0 0 20px var(--color-accent-lines) inset, @@ -3525,126 +3540,126 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 0 0 0 1px var(--color-accent-lines) inset, 0 0 0 1px var(--color-accent-lines) inset } -.layout-single-column .react-toggle-thumb { +.app-body .react-toggle-thumb { border: 0; } -.layout-single-column .react-toggle.react-toggle--checked .react-toggle-track, -.layout-single-column .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, -.layout-single-column .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { +.app-body .react-toggle.react-toggle--checked .react-toggle-track, +.app-body .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, +.app-body .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-accent); } -.layout-single-column .react-toggle--checked .react-toggle-thumb { +.app-body .react-toggle--checked .react-toggle-thumb { border-color: var(--color-accent); } -.layout-single-column .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { +.app-body .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-accent-focus); } /* ⏺️ Radio buttons */ -.layout-single-column .radio-button { +.app-body .radio-button { color: var(--color-content-fg); } -.layout-single-column .radio-button__input { +.app-body .radio-button__input { border-width: 2px; border-color: var(--color-content-fg-muted); background-color: var(--color-content-bg); } -.layout-single-column .radio-button__input.checked { +.app-body .radio-button__input.checked { border-color: var(--color-accent); background-color: var(--color-accent); } -.layout-single-column .dropdown-menu { +.app-body .dropdown-menu { border: 1px solid var(--color-lines); border-radius: 8px; } -.layout-single-column .dropdown-menu, -.layout-single-column .dropdown-menu__container__header, -.layout-single-column .dropdown-menu__item.edited-timestamp__history__item, -.layout-single-column .dropdown-menu__item :is(a, button) { +.app-body .dropdown-menu, +.app-body .dropdown-menu__container__header, +.app-body .dropdown-menu__item.edited-timestamp__history__item, +.app-body .dropdown-menu__item :is(a, button) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-color: var(--color-lines); } -.layout-single-column .dropdown-menu__item a, -.layout-single-column .dropdown-menu__arrow:before { +.app-body .dropdown-menu__item a, +.app-body .dropdown-menu__arrow:before { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; } -.layout-single-column .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) { +.app-body .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) { background: var(--color-accent); color: var(--color-accent-fg); outline: 0; } -.layout-single-column .dropdown-menu__separator { +.app-body .dropdown-menu__separator { border-color: var(--color-content-secondary-separator); } -.layout-single-column .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active), -.layout-single-column .privacy-dropdown__option:is(.active, .active:hover, :hover) { +.app-body .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active), +.app-body .privacy-dropdown__option:is(.active, .active:hover, :hover) { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content, -.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content strong, -.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content, -.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, -.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active .icon-button, -.layout-single-column .privacy-dropdown .icon-button.inverted.active { +.app-body .privacy-dropdown__option.active .privacy-dropdown__option__content, +.app-body .privacy-dropdown__option.active .privacy-dropdown__option__content strong, +.app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content, +.app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, +.app-body .privacy-dropdown.active .privacy-dropdown__value.active .icon-button, +.app-body .privacy-dropdown .icon-button.inverted.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe { background-image: var(--icon-globe-visibility-inv); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock { background-image: var(--icon-unlock-inv); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock { background-image: var(--icon-lock-inv); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { background-image: var(--icon-at-inv); } -.layout-single-column .button.button-tertiary:is(.button--confirmation, .button--destructive) { +.app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) { background-color: transparent; } -.layout-single-column .button.button-tertiary.button--confirmation { +.app-body .button.button-tertiary.button--confirmation { color: #4e8a6b; background-color: rgba(121, 189, 154, 0.3); } -.layout-single-column .button.button-tertiary.button--destructive { +.app-body .button.button-tertiary.button--destructive { color: #df405a; background-color: rgba(223, 64, 90, 0.3); } -.layout-single-column .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { +.app-body .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { background-color: #79bd9a; color: #ffffff; } -.layout-single-column .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { +.app-body .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { background-color: #df405a; color: #ffffff; } @media (prefers-color-scheme: dark) { - .layout-single-column .button.button-tertiary.button--confirmation { + .app-body .button.button-tertiary.button--confirmation { color: #72cb9d; } - .layout-single-column .button.button-tertiary.button--destructive { + .app-body .button.button-tertiary.button--destructive { color: #f3637b; } } -.layout-single-column .app-body +.app-body .app-body :is(.block-modal__cancel-button, .confirmation-modal__cancel-button, .confirmation-modal__secondary-button, .mute-modal__cancel-button) { background-color: transparent; } -.layout-single-column .status__content a.hashtag { +.app-body .status__content a.hashtag { color: var(--color-accent); } @@ -3652,102 +3667,102 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ–±οΈ Interaction modals --------------------- */ -.layout-single-column .modal-root__modal { +.app-body .modal-root__modal { border: 1px solid var(--color-lines); } -.layout-single-column .interaction-modal { +.app-body .interaction-modal { background-color: var(--color-content-bg); } -.layout-single-column .interaction-modal, -.layout-single-column .interaction-modal__lead h3 { +.app-body .interaction-modal, +.app-body .interaction-modal__lead h3 { color: var(--color-content-fg); } -.layout-single-column .interaction-modal__lead p, -.layout-single-column .interaction-modal__choices__choice p { +.app-body .interaction-modal__lead p, +.app-body .interaction-modal__choices__choice p { color: var(--color-fg); } -.layout-single-column .interaction-modal__icon { +.app-body .interaction-modal__icon { vertical-align: middle; } -.layout-single-column .interaction-modal p { +.app-body .interaction-modal p { color: var(--color-content-fg); } -.layout-single-column .interaction-modal p.hint { +.app-body .interaction-modal p.hint { color: var(--color-content-fg-muted); } -.layout-single-column .interaction-modal :is(.button, .button.button-tertiary) { +.app-body .interaction-modal :is(.button, .button.button-tertiary) { padding: 10px 18px; } -.layout-single-column .interaction-modal .button.button-tertiary:hover { +.app-body .interaction-modal .button.button-tertiary:hover { background-color: var(--color-content-secondary-separator); } -.layout-single-column .copypaste input, -.layout-single-column .interaction-modal__login__input { +.app-body .copypaste input, +.app-body .interaction-modal__login__input { border-color: var(--color-accent); background-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } -.layout-single-column .interaction-modal__login.expanded .interaction-modal__login__input { +.app-body .interaction-modal__login.expanded .interaction-modal__login__input { border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .interaction-modal__login__input input::placeholder { +.app-body .interaction-modal__login__input input::placeholder { color: var(--color-accent); } -.layout-single-column .interaction-modal__login.focused .interaction-modal__login__input { +.app-body .interaction-modal__login.focused .interaction-modal__login__input { background-color: var(--color-content-bg); border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); } -.layout-single-column .interaction-modal__login .search__popout { +.app-body .interaction-modal__login .search__popout { border-color: var(--color-lines); } -.layout-single-column .interaction-modal .copypaste button { +.app-body .interaction-modal .copypaste button { padding: 8px 18px; } -.layout-single-column .modal-root__overlay { +.app-body .modal-root__overlay { background-color: hsla(0, 0%, 1%, 0.7); } -.layout-single-column .modal-root__modal, -.layout-single-column .boost-modal__container, -.layout-single-column .mute-modal__container, -.layout-single-column .block-modal__container { +.app-body .modal-root__modal, +.app-body .boost-modal__container, +.app-body .mute-modal__container, +.app-body .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .boost-modal__container { +.app-body .boost-modal__container { margin-bottom: -11px; } -.layout-single-column .confirmation-modal__container, -.layout-single-column .mute-modal__container, -.layout-single-column .block-modal__container { +.app-body .confirmation-modal__container, +.app-body .mute-modal__container, +.app-body .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .block-modal__action-bar, -.layout-single-column .boost-modal__action-bar, -.layout-single-column .confirmation-modal__action-bar, -.layout-single-column .mute-modal__action-bar { +.app-body .block-modal__action-bar, +.app-body .boost-modal__action-bar, +.app-body .confirmation-modal__action-bar, +.app-body .mute-modal__action-bar { background-color: var(--color-accent-bg); } -.layout-single-column .block-modal__action-bar > div, -.layout-single-column .boost-modal__action-bar > div, -.layout-single-column .confirmation-modal__action-bar > div, -.layout-single-column .mute-modal__action-bar > div, -.layout-single-column .boost-modal__container .status__content__text, -.layout-single-column .boost-modal__container .display-name strong.display-name__html, -.layout-single-column .boost-modal__container .status__info, -.layout-single-column .boost-modal__container .status__relative-time time, -.layout-single-column .boost-modal__container .status.light .status__visibility-icon { +.app-body .block-modal__action-bar > div, +.app-body .boost-modal__action-bar > div, +.app-body .confirmation-modal__action-bar > div, +.app-body .mute-modal__action-bar > div, +.app-body .boost-modal__container .status__content__text, +.app-body .boost-modal__container .display-name strong.display-name__html, +.app-body .boost-modal__container .status__info, +.app-body .boost-modal__container .status__relative-time time, +.app-body .boost-modal__container .status.light .status__visibility-icon { color: var(--color-content-fg); } -.layout-single-column .actions-modal ul li:not(:empty) a { +.app-body .actions-modal ul li:not(:empty) a { color: var(--color-content-fg); } -.layout-single-column .actions-modal ul li:not(:empty) +.app-body .actions-modal ul li:not(:empty) a:is(.active, .active button, :active, @@ -3762,110 +3777,110 @@ a:is(.active, /* Media modals */ -.layout-single-column .modal-root__modal.media-modal { +.app-body .modal-root__modal.media-modal { background-color: rgba(255, 255, 255, .8); } -.layout-single-column .media-modal__overlay .picture-in-picture__footer { +.app-body .media-modal__overlay .picture-in-picture__footer { background-color: transparent; } -.layout-single-column .media-modal__nav, -.layout-single-column .media-modal__overlay .picture-in-picture__footer .icon-button { +.app-body .media-modal__nav, +.app-body .media-modal__overlay .picture-in-picture__footer .icon-button { color: var(--color-content-fg); } -.layout-single-column .media-modal__page-dot { +.app-body .media-modal__page-dot { background-color: var(--color-content-fg); } @media (prefers-color-scheme: dark) { - .layout-single-column .modal-root__modal.media-modal { + .app-body .modal-root__modal.media-modal { background-color: rgba(0, 0, 0, .6); } } /* Report modals */ -.layout-single-column .report-dialog-modal__container { +.app-body .report-dialog-modal__container { border-top: 0; } -.layout-single-column .report-dialog-modal__lead { +.app-body .report-dialog-modal__lead { color: var(--color-content-fg-muted); } -.layout-single-column .report-dialog-modal .poll__option.dialog-option { +.app-body .report-dialog-modal .poll__option.dialog-option { border-color: var(--color-lines); } -.layout-single-column .report-dialog-modal .dialog-option .poll__input { +.app-body .report-dialog-modal .dialog-option .poll__input { border-color: var(--color-accent); } -.layout-single-column .report-dialog-modal .dialog-option .poll__input.active { +.app-body .report-dialog-modal .dialog-option .poll__input.active { border-color: var(--color-accent); background-color: var(--color-accent); } -.layout-single-column .report-dialog-modal .poll__option.dialog-option>.poll__option__text { +.app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text { color: var(--color-content-fg); } -.layout-single-column .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { +.app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { color: var(--color-content-fg-bold) } -.layout-single-column .report-modal__comment, -.layout-single-column .report-modal__container { +.app-body .report-modal__comment, +.app-body .report-modal__container { border-color: var(--color-lines); } -.layout-single-column .report-modal__comment .setting-text-label { +.app-body .report-modal__comment .setting-text-label { color: var(--color-content-fg); } -.layout-single-column .report-dialog-modal .status__content__text p { +.app-body .report-dialog-modal .status__content__text p { color: var(--color-content-fg); } /* πŸ–ΌοΈ Picture in Picture */ -.layout-single-column .picture-in-picture { +.app-body .picture-in-picture { box-shadow: 0 0 5px rgba(0, 0, 0, .2); border-radius: 8px; } -.layout-single-column .picture-in-picture__footer, -.layout-single-column .picture-in-picture__header { +.app-body .picture-in-picture__footer, +.app-body .picture-in-picture__header { background-color: var(--color-content-bg); } -.layout-single-column .picture-in-picture__header .display-name span { +.app-body .picture-in-picture__header .display-name span { color: var(--color-content-fg-muted); } /* ⏯️ Video controls */ -.layout-single-column .video-player__seek__progress, -.layout-single-column .video-player__volume__handle, -.layout-single-column .video-player__volume__current, -.layout-single-column .video-player__seek__handle { +.app-body .video-player__seek__progress, +.app-body .video-player__volume__handle, +.app-body .video-player__volume__current, +.app-body .video-player__seek__handle { background-color: var(--color-accent); } /* πŸ“„ Meta ------- */ -.layout-single-column .link-footer p, -.layout-single-column .link-footer a { +.app-body .link-footer p, +.app-body .link-footer a { color: var(--color-fg-muted); } /* Server banner */ -.layout-single-column .server-banner__introduction { +.app-body .server-banner__introduction { display: none; } -.layout-single-column .server-banner { +.app-body .server-banner { padding: 0 0 20px; } -.layout-single-column .server-banner__hero { +.app-body .server-banner__hero { border-radius: 8px 8px 0 0; margin-bottom: 0; } -.layout-single-column .server-banner__description { +.app-body .server-banner__description { padding: 20px 15px 20px; margin-bottom: 0; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .server-banner__meta { +.app-body .server-banner__meta { padding: 0 15px 20px; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); @@ -3876,53 +3891,53 @@ a:is(.active, border-radius: 0 0 8px 8px; align-items: end; } -.layout-single-column .server-banner h4 { +.app-body .server-banner h4 { color: var(--color-fg); font-size: 80%; } -.layout-single-column .server-banner__number { +.app-body .server-banner__number { color: var(--color-content-fg-bold); } -.layout-single-column .server-banner__number-label { +.app-body .server-banner__number-label { color: var(--color-content-fg); } -.layout-single-column .server-banner .account { +.app-body .server-banner .account { background-color: transparent; box-shadow: none; padding: 0; border-left: 0; border-right: 0; } -.layout-single-column .server-banner__meta__column:first-child { +.app-body .server-banner__meta__column:first-child { width: calc(60% - 5px); } -.layout-single-column .server-banner__meta__column:nth-child(2) { +.app-body .server-banner__meta__column:nth-child(2) { width: calc(40% - 5px); } -.layout-single-column .server-banner .button.button-secondary { +.app-body .server-banner .button.button-secondary { padding: 10px; margin: 10px 0; } -.layout-single-column .button.button-secondary, -.layout-single-column .button.button-tertiary { +.app-body .button.button-secondary, +.app-body .button.button-tertiary { border: 0; background-color: var(--color-accent-bg); color: var(--color-accent); } -.layout-single-column .button:is(.button-secondary, .button-tertiary):hover { +.app-body .button:is(.button-secondary, .button-tertiary):hover { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .sign-in-banner .button, -.layout-single-column .button:is(.button-secondary, .button-tertiary) { +.app-body .sign-in-banner .button, +.app-body .button:is(.button-secondary, .button-tertiary) { padding: 10px 18px; } @media screen and (max-width:1174px) { - .layout-single-column .button.button-tertiary { + .app-body .button.button-tertiary { padding: 7px 18px; } } -.layout-single-column .sign-in-banner p { +.app-body .sign-in-banner p { color: var(--color-fg); opacity: .5; } @@ -3930,131 +3945,131 @@ a:is(.active, /* πŸ€— Onboarding */ -.layout-single-column .scrollable.follow-recommendations-container, -.layout-single-column .column-list { +.app-body .scrollable.follow-recommendations-container, +.app-body .column-list { background-color: var(--color-content-bg); } -.layout-single-column .column-title .logo { +.app-body .column-title .logo { display: none; } -.layout-single-column .column-title h3, -.layout-single-column .column-title p { +.app-body .column-title h3, +.app-body .column-title p { color: var(--color-content-fg); } -.layout-single-column .column-list { +.app-body .column-list { border: 0; } -.layout-single-column .account__note { +.app-body .account__note { color: var(--color-content-fg-muted); } -.layout-single-column .onboarding__steps__item, -.layout-single-column .onboarding__link { +.app-body .onboarding__steps__item, +.app-body .onboarding__link { background-color: var(--color-content-secondary-bg); transition: all .2s; } -.layout-single-column .onboarding__steps__item:is(:active, :focus, :hover), -.layout-single-column .onboarding__link:is(:active, :focus, :hover) { +.app-body .onboarding__steps__item:is(:active, :focus, :hover), +.app-body .onboarding__link:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } -.layout-single-column .onboarding__steps__item__icon, -.layout-single-column .onboarding__steps__item__description h6, -.layout-single-column .onboarding__link { +.app-body .onboarding__steps__item__icon, +.app-body .onboarding__steps__item__description h6, +.app-body .onboarding__link { color: var(--color-accent); } -.layout-single-column .onboarding__steps__item__description p, -.layout-single-column .onboarding__lead, -.layout-single-column .onboarding__lead strong { +.app-body .onboarding__steps__item__description p, +.app-body .onboarding__lead, +.app-body .onboarding__lead strong { color: var(--color-content-fg); } -.layout-single-column .onboarding__steps__item__go svg path, -.layout-single-column .onboarding__link svg path { +.app-body .onboarding__steps__item__go svg path, +.app-body .onboarding__link svg path { fill: var(--color-accent); } -.layout-single-column .follow-recommendations { +.app-body .follow-recommendations { background-color: var(--color-content-bg); } -.layout-single-column .follow-recommendations .account { +.app-body .follow-recommendations .account { border-left: 0; border-right: 0; margin-bottom: 15px; } -.layout-single-column .follow-recommendations .account__note { +.app-body .follow-recommendations .account__note { color: var(--color-content-fg); opacity: .7; } -.layout-single-column .follow-recommendations .account__note p { +.app-body .follow-recommendations .account__note p { overflow: hidden; } -.layout-single-column .copy-paste-text { +.app-body .copy-paste-text { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); } -.layout-single-column .copy-paste-text:is(:focus, :active), -.layout-single-column .tip-carousel:focus { +.app-body .copy-paste-text:is(:focus, :active), +.app-body .tip-carousel:focus { border-color: var(--color-accent); } -.layout-single-column .copy-paste-text:has(textarea:focus) { +.app-body .copy-paste-text:has(textarea:focus) { border-color: var(--color-accent); } /* πŸ“’ Announcements */ -.layout-single-column .announcements, -.layout-single-column .announcements::after { +.app-body .announcements, +.app-body .announcements::after { background-color: var(--color-accent-bg); color: var(--color-content-fg); } -.layout-single-column .announcements { +.app-body .announcements { overflow: visible; z-index: 0; box-shadow: 0 -20px var(--color-bg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .announcements__item strong { +.app-body .announcements__item strong { font-weight: 800; color: var(--color-content-fg-bold); } -.layout-single-column .announcements__item__unread { +.app-body .announcements__item__unread { color: var(--color-accent); } -.layout-single-column .announcements__pagination, -.layout-single-column .announcements__pagination .icon-button { +.app-body .announcements__pagination, +.app-body .announcements__pagination .icon-button { color: var(--color-content-fg); } -.layout-single-column .announcements__mastodon { +.app-body .announcements__mastodon { border-radius: 0 0 0 8px; } -.layout-single-column .reactions-bar__item { +.app-body .reactions-bar__item { background-color: var(--color-content-bg); } -.layout-single-column .reactions-bar__item.active { +.app-body .reactions-bar__item.active { background-color: var(--color-accent); } -.layout-single-column .reactions-bar__item__count, -.layout-single-column .reactions-bar__item__count .animated-number { +.app-body .reactions-bar__item__count, +.app-body .reactions-bar__item__count .animated-number { color: var(--color-content-fg); } -.layout-single-column .reactions-bar__item.active .reactions-bar__item__count .animated-number { +.app-body .reactions-bar__item.active .reactions-bar__item__count .animated-number { color: var(--color-accent-fg); } -.layout-single-column .reactions-bar .emoji-button, -.layout-single-column .announcements__item__content a.unhandled-link, -.layout-single-column .announcements__item__content a { +.app-body .reactions-bar .emoji-button, +.app-body .announcements__item__content a.unhandled-link, +.app-body .announcements__item__content a { color: var(--color-accent); } -.layout-single-column .announcements .emoji-button { +.app-body .announcements .emoji-button { margin: 0; } @media screen and (max-width:1174px) { - .layout-single-column .announcements { + .app-body .announcements { box-shadow: none; margin-top: -10px; border-radius: 0; } - .layout-single-column .announcements__mastodon { + .app-body .announcements__mastodon { border-radius: 0; } } @@ -4062,25 +4077,25 @@ a:is(.active, /* 404 */ -.layout-single-column .empty-column-indicator, -.layout-single-column .error-column { +.app-body .empty-column-indicator, +.app-body .error-column { background-color: var(--color-content-bg); color: var(--color-content-fg); margin-top: -1px; } -.layout-single-column .error-column { +.app-body .error-column { border: 1px solid var(--color-lines); border-radius: 8px !important; } -.layout-single-column .error-column__message h1, -.layout-single-column .error-column__message { +.app-body .error-column__message h1, +.app-body .error-column__message { color: var(--color-content-fg); } -.layout-single-column .error-column__image { +.app-body .error-column__image { margin-top: 0; } @media screen and (max-width:889px) { - .layout-single-column .error-column { + .app-body .error-column { border-radius: 0 !important; border-left: 0; border-right: 0; @@ -4091,147 +4106,147 @@ a:is(.active, /* πŸ“œ About page ------------- */ -.layout-single-column .scrollable.about { +.app-body .scrollable.about { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); display: flex; flex-flow: column; } @media screen and (max-width:889px) { - .layout-single-column .scrollable.about { + .app-body .scrollable.about { border-left: 0; border-right: 0; } } -.layout-single-column .about__header { +.app-body .about__header { order: 1; margin-bottom: 10px; } -.layout-single-column .about__section:nth-child(3) { +.app-body .about__section:nth-child(3) { order: 3; } -.layout-single-column .about__meta { +.app-body .about__meta { order: 2; } -.layout-single-column .about__section:nth-child(4) { +.app-body .about__section:nth-child(4) { order: 4; } -.layout-single-column .about__section:nth-child(5) { +.app-body .about__section:nth-child(5) { order: 5; } -.layout-single-column .about .link-footer { +.app-body .about .link-footer { order: 6; } -.layout-single-column .about__footer { +.app-body .about__footer { order: 7; } -.layout-single-column .about__header h1, -.layout-single-column .about__header p, -.layout-single-column #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { +.app-body .about__header h1, +.app-body .about__header p, +.app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { display: none; } -.layout-single-column .about__header p, -.layout-single-column .about__meta h4 { +.app-body .about__header p, +.app-body .about__meta h4 { color: var(--color-fg); } -.layout-single-column .about__header__hero { +.app-body .about__header__hero { margin: -20px -20px 20px; width: calc(100% + 40px); border-radius: 0; background-color: var(--color-content-bg); } -.layout-single-column .about__header__hero, -.layout-single-column .about__meta { +.app-body .about__header__hero, +.app-body .about__meta { margin-bottom: 10px; } -.layout-single-column .about__header h1 { +.app-body .about__header h1 { margin-bottom: 0; } @media screen and (min-width:890px) { - .layout-single-column .scrollable.about { + .app-body .scrollable.about { border-radius: 8px !important; } - .layout-single-column .about__header__hero { + .app-body .about__header__hero { border-radius: 8px 8px 0 0; } } -.layout-single-column .about__mail { +.app-body .about__mail { color: var(--color-content-fg); } -.layout-single-column .about__meta h4 { +.app-body .about__meta h4 { font-size: 12px; font-weight: bold; margin-bottom: 8px; } -.layout-single-column .about__meta .account { +.app-body .about__meta .account { background: none; box-shadow: none; padding: 0; border-left: 0; border-right: 0; } -.layout-single-column .about__meta__divider { +.app-body .about__meta__divider { border-left: 3px solid var(--color-content-secondary-separator); } @media screen and (max-width:600px) { - .layout-single-column .about__meta__divider { + .app-body .about__meta__divider { border-top: 3px solid var(--color-content-secondary-separator); width: 90%; } } -.layout-single-column .about__section:nth-child(3) .about__section__body { +.app-body .about__section:nth-child(3) .about__section__body { padding-bottom: 3em; } -.layout-single-column .about__meta, -.layout-single-column .about__section__title { +.app-body .about__meta, +.app-body .about__section__title { color: var(--color-accent); background-color: var(--color-content-secondary-bg); border: 0; border-radius: 8px; } -.layout-single-column .about__section.active .about__section__title { +.app-body .about__section.active .about__section__title { border-radius: 8px 8px 0 0; } -.layout-single-column .about__section.active:not(:nth-of-type(3)) .about__section__body { +.app-body .about__section.active:not(:nth-of-type(3)) .about__section__body { border: 0 !important; background-color: var(--color-content-secondary-bg); border-radius: 0 0 8px 8px; } -.layout-single-column .prose, -.layout-single-column .prose p, -.layout-single-column .prose b, -.layout-single-column .prose h1, -.layout-single-column .prose h2, -.layout-single-column .prose h3, -.layout-single-column .prose h4, -.layout-single-column .prose h5, -.layout-single-column .prose h6, -.layout-single-column .prose strong, -.layout-single-column .rules-list, -.layout-single-column .about__domain-blocks__domain h6, -.layout-single-column .about__domain-blocks__domain__type { +.app-body .prose, +.app-body .prose p, +.app-body .prose b, +.app-body .prose h1, +.app-body .prose h2, +.app-body .prose h3, +.app-body .prose h4, +.app-body .prose h5, +.app-body .prose h6, +.app-body .prose strong, +.app-body .rules-list, +.app-body .about__domain-blocks__domain h6, +.app-body .about__domain-blocks__domain__type { color: var(--color-content-fg); } -.layout-single-column .prose ul>li:before { +.app-body .prose ul>li:before { background-color: var(--color-fg); } -.layout-single-column .about__section__body .prose hr { +.app-body .about__section__body .prose hr { border-color: var(--color-content-secondary-separator); margin-top: 2em; margin-bottom: 2em; border-width: 3px; } -.layout-single-column .about__section__body .prose a, -.layout-single-column .about__section__body .prose a:hover, -.layout-single-column .prose a strong { +.app-body .about__section__body .prose a, +.app-body .about__section__body .prose a:hover, +.app-body .prose a strong { color: var(--color-accent); text-decoration: none; } -.layout-single-column .about__section__body .prose a:hover { +.app-body .about__section__body .prose a:hover { text-decoration: underline; } -.layout-single-column .about__section__body .prose small.lang_label { +.app-body .about__section__body .prose small.lang_label { margin-left: -2em; margin-top: 1px; display: block; @@ -4243,11 +4258,11 @@ a:is(.active, .about__section.active .about__section__title { background-color: var(--color-accent-bg); } -.layout-single-column .rules-list li { +.app-body .rules-list li { border-bottom: 2px solid var(--color-accent-lines); padding: 1em 1.75em 1em 3.4em; } -.layout-single-column .rules-list li:last-child { +.app-body .rules-list li:last-child { border-bottom: 0; } .about__domain-blocks { @@ -4265,7 +4280,7 @@ a:is(.active, /* Privacy Policy page */ -.layout-single-column .column > .scrollable.privacy-policy { +.app-body .column > .scrollable.privacy-policy { border: 1px solid var(--color-lines); background-color: var(--color-content-bg); } @@ -4273,12 +4288,122 @@ a:is(.active, /* πŸ‘‹ Hide superfluous UI */ -.layout-single-column div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr, -.layout-single-column .navigation-panel__legal > hr, -.layout-single-column .about__footer, /* Hide meta footer */ -.layout-single-column .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */ -.layout-single-column .search-banner ~ .search, /* Hide search field for logged out users */ -.layout-single-column .getting-started__trends h4, /* Hide Trending header in sidebar */ -.layout-single-column .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ { +.app-body div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr, +.app-body .navigation-panel__legal > hr, +.app-body .about__footer, /* Hide meta footer */ +.app-body .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */ +.app-body .search-banner ~ .search, /* Hide search field for logged out users */ +.app-body .getting-started__trends h4, /* Hide Trending header in sidebar */ +.app-body .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ { display: none; } + +/* Multi-column layout */ +.layout-multiple-columns { + --color-bg: #f5f2ef; +} +:root:has(.layout-multiple-columns) *::-webkit-scrollbar { + width: 4px; +} +:root:has(.layout-multiple-columns) *::-webkit-scrollbar-track { + background-color: var(--color-accent-bg); + border-right: 1px solid var(--color-lines); +} +:root:has(.layout-multiple-columns) *::-webkit-scrollbar-thumb { + opacity: .8; +} +.layout-multiple-columns .scrollable, +.layout-multiple-columns .column > .scrollable { + max-height: 100%; +} +.layout-multiple-columns .column { + width: 400px; + padding-bottom: 0; +} +.layout-multiple-columns .drawer__inner__mastodon { + display: none; +} +.layout-multiple-columns :is(.drawer__inner, .drawer__inner.darker) { + background: transparent; +} +.layout-multiple-columns .drawer__header { + background-color: var(--color-content-bg); + border-top: 1px solid var(--color-lines); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + border-radius: 8px 8px 0 0; + margin-bottom: 0; +} +.layout-multiple-columns .search__input { + border-radius: 0 0 8px 8px; +} +.layout-multiple-columns .drawer__tab { + transition: all .3s; + border-radius: 6px; + height: 40px; + padding: 5px; + margin: 5px; + box-sizing: border-box; + border: 0; +} +.layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) { + background-color: var(--color-accent-bg); +} +.layout-multiple-columns .drawer__tab .icon-cog { + background-image: var(--icon-gear); +} +.layout-multiple-columns .drawer__tab .icon-globe { + background-image: var(--icon-globe-active); +} +.layout-multiple-columns .drawer__tab .icon-users { + background-image: var(--icon-users); +} +.layout-multiple-columns .drawer__tab .icon-bars { + background-image: var(--icon-ellipsis); +} +.layout-multiple-columns .drawer__tab .icon-sign-out { + background-image: var(--icon-logout); +} +.layout-multiple-columns .column-header__icon.icon-bars { + background-image: var(--icon-globe-active); +} + +.layout-multiple-columns .flex-spacer, +.layout-multiple-columns .getting-started, +.layout-multiple-columns .getting-started__wrapper { + background-color: var(--color-content-bg); +} +.layout-multiple-columns .getting-started__wrapper { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines); + padding-bottom: 10px; + border-radius: 0 0 8px 8px; +} +.layout-multiple-columns .getting-started .column-link { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + margin: 0 5px 2px; + border-radius: 8px; +} +.layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) { + background-color: var(--color-accent-bg); + color: var(--color-accent); +} + +.layout-multiple-columns .column-link__badge { + background-color: var(--color-accent); + color: var(--color-accent-fg); + border-radius: 8px; + line-height: 15px; + font-weight: bold; +} + +.layout-multiple-columns .column-header, +.layout-multiple-columns .column-back-button { + background-color: var(--color-content-bg); +} + +.layout-multiple-columns .column-header__setting-btn { + font-weight: 600; +} diff --git a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss index 74a39a6..faeab5f 100644 --- a/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss +++ b/mastodon/app/javascript/styles/tangerineui/layout-single-column.scss @@ -88,6 +88,7 @@ --icon-post-notification: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMjAsMTI4YTE2LDE2LDAsMSwxLTE2LTE2QTE2LDE2LDAsMCwxLDEyMCwxMjhabTMyLTE2YTE2LDE2LDAsMSwwLDE2LDE2QTE2LDE2LDAsMCwwLDE1MiwxMTJabTg0LDE2QTEwOCwxMDgsMCwwLDEsNzguNzcsMjI0LjE1TDQ2LjM0LDIzNUEyMCwyMCwwLDAsMSwyMSwyMDkuNjZsMTAuODEtMzIuNDNBMTA4LDEwOCwwLDEsMSwyMzYsMTI4Wm0tMjQsMEE4NCw4NCwwLDEsMCw1NS4yNywxNzAuMDZhMTIsMTIsMCwwLDEsMSw5LjgxbC05LjkzLDI5Ljc5LDI5Ljc5LTkuOTNhMTIuMSwxMi4xLDAsMCwxLDMuOC0uNjIsMTIsMTIsMCwwLDEsNiwxLjYyQTg0LDg0LDAsMCwwLDIxMiwxMjhaIj48L3BhdGg+PC9zdmc+"); --icon-post-notification-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMjQsMTI4QTk2LDk2LDAsMCwxLDc5LjkzLDIxMS4xMWgwTDQyLjU0LDIyMy41OGE4LDgsMCwwLDEtMTAuMTItMTAuMTJsMTIuNDctMzcuMzloMEE5Niw5NiwwLDEsMSwyMjQsMTI4WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTEyOCwyNEExMDQsMTA0LDAsMCwwLDM2LjE4LDE3Ni44OEwyNC44MywyMTAuOTNhMTYsMTYsMCwwLDAsMjAuMjQsMjAuMjRsMzQuMDUtMTEuMzVBMTA0LDEwNCwwLDEsMCwxMjgsMjRabTAsMTkyYTg3Ljg3LDg3Ljg3LDAsMCwxLTQ0LjA2LTExLjgxLDgsOCwwLDAsMC00LTEuMDgsNy44NSw3Ljg1LDAsMCwwLTIuNTMuNDJMNDAsMjE2LDUyLjQ3LDE3OC42YTgsOCwwLDAsMC0uNjYtNi41NEE4OCw4OCwwLDEsMSwxMjgsMjE2Wm0xMi04OGExMiwxMiwwLDEsMS0xMi0xMkExMiwxMiwwLDAsMSwxNDAsMTI4Wm0tNDQsMGExMiwxMiwwLDEsMS0xMi0xMkExMiwxMiwwLDAsMSw5NiwxMjhabTg4LDBhMTIsMTIsMCwxLDEtMTItMTJBMTIsMTIsMCwwLDEsMTg0LDEyOFoiPjwvcGF0aD48L3N2Zz4="); --icon-users: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMzYsMTA4QTUyLDUyLDAsMSwxLDg0LDU2LDUyLDUyLDAsMCwxLDEzNiwxMDhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTE3LjI1LDE1Ny45MmE2MCw2MCwwLDEsMC02Ni41LDBBOTUuODMsOTUuODMsMCwwLDAsMy41MywxOTUuNjNhOCw4LDAsMSwwLDEzLjQsOC43NCw4MCw4MCwwLDAsMSwxMzQuMTQsMCw4LDgsMCwwLDAsMTMuNC04Ljc0QTk1LjgzLDk1LjgzLDAsMCwwLDExNy4yNSwxNTcuOTJaTTQwLDEwOGE0NCw0NCwwLDEsMSw0NCw0NEE0NC4wNSw0NC4wNSwwLDAsMSw0MCwxMDhabTIxMC4xNCw5OC43YTgsOCwwLDAsMS0xMS4wNy0yLjMzQTc5LjgzLDc5LjgzLDAsMCwwLDE3MiwxNjhhOCw4LDAsMCwxLDAtMTYsNDQsNDQsMCwxLDAtMTYuMzQtODQuODcsOCw4LDAsMSwxLTUuOTQtMTQuODUsNjAsNjAsMCwwLDEsNTUuNTMsMTA1LjY0LDk1LjgzLDk1LjgzLDAsMCwxLDQ3LjIyLDM3LjcxQTgsOCwwLDAsMSwyNTAuMTQsMjA2LjdaIj48L3BhdGg+PC9zdmc+"); + --icon-users-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xMzYsMTA4QTUyLDUyLDAsMSwxLDg0LDU2LDUyLDUyLDAsMCwxLDEzNiwxMDhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTE3LjI1LDE1Ny45MmE2MCw2MCwwLDEsMC02Ni41LDBBOTUuODMsOTUuODMsMCwwLDAsMy41MywxOTUuNjNhOCw4LDAsMSwwLDEzLjQsOC43NCw4MCw4MCwwLDAsMSwxMzQuMTQsMCw4LDgsMCwwLDAsMTMuNC04Ljc0QTk1LjgzLDk1LjgzLDAsMCwwLDExNy4yNSwxNTcuOTJaTTQwLDEwOGE0NCw0NCwwLDEsMSw0NCw0NEE0NC4wNSw0NC4wNSwwLDAsMSw0MCwxMDhabTIxMC4xNCw5OC43YTgsOCwwLDAsMS0xMS4wNy0yLjMzQTc5LjgzLDc5LjgzLDAsMCwwLDE3MiwxNjhhOCw4LDAsMCwxLDAtMTYsNDQsNDQsMCwxLDAtMTYuMzQtODQuODcsOCw4LDAsMSwxLTUuOTQtMTQuODUsNjAsNjAsMCwwLDEsNTUuNTMsMTA1LjY0LDk1LjgzLDk1LjgzLDAsMCwxLDQ3LjIyLDM3LjcxQTgsOCwwLDAsMSwyNTAuMTQsMjA2LjdaIj48L3BhdGg+PC9zdmc+"); --icon-user-plus: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNTYsMTM2YTEyLDEyLDAsMCwxLTEyLDEyaC04djhhMTIsMTIsMCwwLDEtMjQsMHYtOGgtOGExMiwxMiwwLDAsMSwwLTI0aDh2LThhMTIsMTIsMCwwLDEsMjQsMHY4aDhBMTIsMTIsMCwwLDEsMjU2LDEzNlptLTU0LjgxLDU2LjI4YTEyLDEyLDAsMSwxLTE4LjM4LDE1LjQ0QzE2OS4xMiwxOTEuNDIsMTQ1LDE3MiwxMDgsMTcyYy0yOC44OSwwLTU1LjQ2LDEyLjY4LTc0LjgxLDM1LjcyYTEyLDEyLDAsMCwxLTE4LjM4LTE1LjQ0QTEyNC4wOCwxMjQuMDgsMCwwLDEsNjMuNSwxNTYuNTNhNzIsNzIsMCwxLDEsODksMEExMjQsMTI0LDAsMCwxLDIwMS4xOSwxOTIuMjhaTTEwOCwxNDhhNDgsNDgsMCwxLDAtNDgtNDhBNDguMDUsNDguMDUsMCwwLDAsMTA4LDE0OFoiPjwvcGF0aD48L3N2Zz4="); --icon-user-plus-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHN0eWxlPSItLW5vaXItaW5saW5lLWZpbGw6ICNjOWM1YmU7IiBkYXRhLW5vaXItaW5saW5lLWZpbGw9IiI+PHBhdGggZD0iTTE2OCwxMDBhNjAsNjAsMCwxLDEtNjAtNjBBNjAsNjAsMCwwLDEsMTY4LDEwMFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0yNTYsMTM2YTgsOCwwLDAsMS04LDhIMjMydjE2YTgsOCwwLDAsMS0xNiwwVjE0NEgyMDBhOCw4LDAsMCwxLDAtMTZoMTZWMTEyYTgsOCwwLDAsMSwxNiwwdjE2aDE2QTgsOCwwLDAsMSwyNTYsMTM2Wm0tNTcuODcsNTguODVhOCw4LDAsMCwxLTEyLjI2LDEwLjNDMTY1Ljc1LDE4MS4xOSwxMzguMDksMTY4LDEwOCwxNjhzLTU3Ljc1LDEzLjE5LTc3Ljg3LDM3LjE1YTgsOCwwLDAsMS0xMi4yNS0xMC4zYzE0Ljk0LTE3Ljc4LDMzLjUyLTMwLjQxLDU0LjE3LTM3LjE3YTY4LDY4LDAsMSwxLDcxLjksMEMxNjQuNiwxNjQuNDQsMTgzLjE4LDE3Ny4wNywxOTguMTMsMTk0Ljg1Wk0xMDgsMTUyYTUyLDUyLDAsMSwwLTUyLTUyQTUyLjA2LDUyLjA2LDAsMCwwLDEwOCwxNTJaIj48L3BhdGg+PC9zdmc+"); --icon-user-plus-accent: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0xNjgsMTAwYTYwLDYwLDAsMSwxLTYwLTYwQTYwLDYwLDAsMCwxLDE2OCwxMDBaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMjU2LDEzNmE4LDgsMCwwLDEtOCw4SDIzMnYxNmE4LDgsMCwwLDEtMTYsMFYxNDRIMjAwYTgsOCwwLDAsMSwwLTE2aDE2VjExMmE4LDgsMCwwLDEsMTYsMHYxNmgxNkE4LDgsMCwwLDEsMjU2LDEzNlptLTU3Ljg3LDU4Ljg1YTgsOCwwLDAsMS0xMi4yNiwxMC4zQzE2NS43NSwxODEuMTksMTM4LjA5LDE2OCwxMDgsMTY4cy01Ny43NSwxMy4xOS03Ny44NywzNy4xNWE4LDgsMCwwLDEtMTIuMjUtMTAuM2MxNC45NC0xNy43OCwzMy41Mi0zMC40MSw1NC4xNy0zNy4xN2E2OCw2OCwwLDEsMSw3MS45LDBDMTY0LjYsMTY0LjQ0LDE4My4xOCwxNzcuMDcsMTk4LjEzLDE5NC44NVpNMTA4LDE1MmE1Miw1MiwwLDEsMC01Mi01MkE1Mi4wNiw1Mi4wNiwwLDAsMCwxMDgsMTUyWiI+PC9wYXRoPjwvc3ZnPg=="); @@ -114,6 +115,7 @@ --icon-list: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-list-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-settings: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iI2Y3NjkwMiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMSwxMDguNzYsMTk4LjI1LDkwLjYyYy0uNjQtMS4xNi0xLjMxLTIuMjktMi0zLjQxbC0uMTItMzZBMTA0LjYxLDEwNC42MSwwLDAsMCwxNjIsMzJMMTMwLDQ5Ljg5Yy0xLjM0LDAtMi42OSwwLTQsMEw5NCwzMkExMDQuNTgsMTA0LjU4LDAsMCwwLDU5Ljg5LDUxLjI1bC0uMTYsMzZjLS43LDEuMTItMS4zNywyLjI2LTIsMy40MWwtMzEuODQsMTguMWE5OS4xNSw5OS4xNSwwLDAsMCwwLDM4LjQ2bDMxLjg1LDE4LjE0Yy42NCwxLjE2LDEuMzEsMi4yOSwyLDMuNDFsLjEyLDM2QTEwNC42MSwxMDQuNjEsMCwwLDAsOTQsMjI0bDMyLTE3Ljg3YzEuMzQsMCwyLjY5LDAsNCwwTDE2MiwyMjRhMTA0LjU4LDEwNC41OCwwLDAsMCwzNC4wOC0xOS4yNWwuMTYtMzZjLjctMS4xMiwxLjM3LTIuMjYsMi0zLjQxbDMxLjg0LTE4LjFBOTkuMTUsOTkuMTUsMCwwLDAsMjMwLjEsMTA4Ljc2Wk0xMjgsMTY4YTQwLDQwLDAsMSwxLDQwLTQwQTQwLDQwLDAsMCwxLDEyOCwxNjhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDgwYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWm0xMDkuOTQtNTIuNzlhOCw4LDAsMCwwLTMuODktNS40bC0yOS44My0xNy0uMTItMzMuNjJhOCw4LDAsMCwwLTIuODMtNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLTM2LjcyLTIwLjY3LDgsOCwwLDAsMC02LjQ2LjU5TDEyOCw0MS44NSw5Ny44OCwyNWE4LDgsMCwwLDAtNi40Ny0uNkExMTEuOTIsMTExLjkyLDAsMCwwLDU0LjczLDQ1LjE1YTgsOCwwLDAsMC0yLjgzLDYuMDdsLS4xNSwzMy42NS0yOS44MywxN2E4LDgsMCwwLDAtMy44OSw1LjQsMTA2LjQ3LDEwNi40NywwLDAsMCwwLDQxLjU2LDgsOCwwLDAsMCwzLjg5LDUuNGwyOS44MywxNywuMTIsMzMuNjNhOCw4LDAsMCwwLDIuODMsNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLDM2LjcyLDIwLjY3LDgsOCwwLDAsMCw2LjQ2LS41OUwxMjgsMjE0LjE1LDE1OC4xMiwyMzFhNy45MSw3LjkxLDAsMCwwLDMuOSwxLDguMDksOC4wOSwwLDAsMCwyLjU3LS40MiwxMTIuMSwxMTIuMSwwLDAsMCwzNi42OC0yMC43Myw4LDgsMCwwLDAsMi44My02LjA3bC4xNS0zMy42NSwyOS44My0xN2E4LDgsMCwwLDAsMy44OS01LjRBMTA2LjQ3LDEwNi40NywwLDAsMCwyMzcuOTQsMTA3LjIxWm0tMTUsMzQuOTEtMjguNTcsMTYuMjVhOCw4LDAsMCwwLTMsM2MtLjU4LDEtMS4xOSwyLjA2LTEuODEsMy4wNmE3Ljk0LDcuOTQsMCwwLDAtMS4yMiw0LjIxbC0uMTUsMzIuMjVhOTUuODksOTUuODksMCwwLDEtMjUuMzcsMTQuM0wxMzQsMTk5LjEzYTgsOCwwLDAsMC0zLjkxLTFoLS4xOWMtMS4yMSwwLTIuNDMsMC0zLjY0LDBhOC4xLDguMSwwLDAsMC00LjEsMWwtMjguODQsMTYuMUE5Niw5NiwwLDAsMSw2Ny44OCwyMDFsLS4xMS0zMi4yYTgsOCwwLDAsMC0xLjIyLTQuMjJjLS42Mi0xLTEuMjMtMi0xLjgtMy4wNmE4LjA5LDguMDksMCwwLDAtMy0zLjA2bC0yOC42LTE2LjI5YTkwLjQ5LDkwLjQ5LDAsMCwxLDAtMjguMjZMNjEuNjcsOTcuNjNhOCw4LDAsMCwwLDMtM2MuNTgtMSwxLjE5LTIuMDYsMS44MS0zLjA2YTcuOTQsNy45NCwwLDAsMCwxLjIyLTQuMjFsLjE1LTMyLjI1YTk1Ljg5LDk1Ljg5LDAsMCwxLDI1LjM3LTE0LjNMMTIyLDU2Ljg3YTgsOCwwLDAsMCw0LjEsMWMxLjIxLDAsMi40MywwLDMuNjQsMGE4LDgsMCwwLDAsNC4xLTFsMjguODQtMTYuMUE5Niw5NiwwLDAsMSwxODguMTIsNTVsLjExLDMyLjJhOCw4LDAsMCwwLDEuMjIsNC4yMmMuNjIsMSwxLjIzLDIsMS44LDMuMDZhOC4wOSw4LjA5LDAsMCwwLDMsMy4wNmwyOC42LDE2LjI5QTkwLjQ5LDkwLjQ5LDAsMCwxLDIyMi45LDE0Mi4xMloiPjwvcGF0aD48L3N2Zz4="); + --icon-logout: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsMTI4bC00MCw0MFY4OFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0xMTIsMjE2YTgsOCwwLDAsMS04LDhINDhhMTYsMTYsMCwwLDEtMTYtMTZWNDhBMTYsMTYsMCwwLDEsNDgsMzJoNTZhOCw4LDAsMCwxLDAsMTZINDhWMjA4aDU2QTgsOCwwLDAsMSwxMTIsMjE2Wm0xMDkuNjYtODIuMzQtNDAsNDBBOCw4LDAsMCwxLDE2OCwxNjhWMTM2SDEwNGE4LDgsMCwwLDEsMC0xNmg2NFY4OGE4LDgsMCwwLDEsMTMuNjYtNS42Nmw0MCw0MEE4LDgsMCwwLDEsMjIxLjY2LDEzMy42NlptLTE3LTUuNjZMMTg0LDEwNy4zMXY0MS4zOFoiPjwvcGF0aD48L3N2Zz4="); /* Post visibility icons */ --icon-globe-visibility: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzJhMmQzNyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNDguNTksNTguNjdjLTYuMzEtMTAuODctMjMtMjEuMDYtNjYuMTYtOS43MUE5NS45NCw5NS45NCwwLDAsMCwzMiwxMjhxMCwzLjYuMjYsNy4xNEMuNTYsMTY2Ljg2LDEuMSwxODYuNCw3LjQ0LDE5Ny4zMywxMy40LDIwNy42MSwyNS4zLDIxMiw0MC42OCwyMTJjOS43OSwwLDIxLTEuNzgsMzIuOTUtNC45MUE5NS45NCw5NS45NCwwLDAsMCwyMjQsMTI4YzAtMi40MS0uMDktNC43OS0uMjctNy4xNiwxNC4zMS0xNC4zOCwyMy44Ni0yOC4yMSwyNy00MEMyNTMuNTUsNzAuNDIsMjUxLjEyLDYzLDI0OC41OSw1OC42N1pNMTI4LDU2YTcyLjExLDcyLjExLDAsMCwxLDcwLjE5LDU2QzE4NCwxMjQuNzMsMTY1LDEzOC41OSwxNDEuOTIsMTUxLjg2Yy0yMS43NCwxMi40OS00My41NSwyMi4zNi02My4wOSwyOC42NUE3Miw3MiwwLDAsMSwxMjgsNTZaTTI4LjE5LDE4NS4yOWMtLjYxLTEuMDctLjE3LTguMjIsMTAuNjctMjEuNzFBOTUuNzcsOTUuNzcsMCwwLDAsNTIuMzUsMTg3QzM1LjEyLDE4OS42MSwyOC44NSwxODYuNDEsMjguMTksMTg1LjI5Wk0xMjgsMjAwYTcxLjY2LDcxLjY2LDAsMCwxLTIyLjU2LTMuNjQsMzk0LjEsMzk0LjEsMCwwLDAsNDguNDItMjMuNjlBMzg4LjExLDM4OC4xMSwwLDAsMCwxOTguNDMsMTQzLDcyLjEyLDcyLjEyLDAsMCwxLDEyOCwyMDBaTTIyNy41Nyw3NC42NWMtMS4yOCw0Ljc4LTQuODEsMTAuODctMTAuMzksMTcuOEE5NS43NCw5NS43NCwwLDAsMCwyMDMuNjgsNjljMTUuODMtMi4zNywyMy4xNywwLDI0LjE1LDEuNzFDMjI4LDcxLDIyOC4yMSw3Mi4yOCwyMjcuNTcsNzQuNjVaIj48L3BhdGg+PC9zdmc+"); @@ -196,6 +198,7 @@ --icon-list: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2U2ODkzMyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-list-active: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsNjRWMTkySDQwVjY0WiIgb3BhY2l0eT0iMC4yIj48L3BhdGg+PHBhdGggZD0iTTIyNCwxMjhhOCw4LDAsMCwxLTgsOEg0MGE4LDgsMCwwLDEsMC0xNkgyMTZBOCw4LDAsMCwxLDIyNCwxMjhaTTQwLDcySDIxNmE4LDgsMCwwLDAsMC0xNkg0MGE4LDgsMCwwLDAsMCwxNlpNMjE2LDE4NEg0MGE4LDgsMCwwLDAsMCwxNkgyMTZhOCw4LDAsMCwwLDAtMTZaIj48L3BhdGg+PC9zdmc+"); --icon-settings: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2U2ODkzMyIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMzAuMSwxMDguNzYsMTk4LjI1LDkwLjYyYy0uNjQtMS4xNi0xLjMxLTIuMjktMi0zLjQxbC0uMTItMzZBMTA0LjYxLDEwNC42MSwwLDAsMCwxNjIsMzJMMTMwLDQ5Ljg5Yy0xLjM0LDAtMi42OSwwLTQsMEw5NCwzMkExMDQuNTgsMTA0LjU4LDAsMCwwLDU5Ljg5LDUxLjI1bC0uMTYsMzZjLS43LDEuMTItMS4zNywyLjI2LTIsMy40MWwtMzEuODQsMTguMWE5OS4xNSw5OS4xNSwwLDAsMCwwLDM4LjQ2bDMxLjg1LDE4LjE0Yy42NCwxLjE2LDEuMzEsMi4yOSwyLDMuNDFsLjEyLDM2QTEwNC42MSwxMDQuNjEsMCwwLDAsOTQsMjI0bDMyLTE3Ljg3YzEuMzQsMCwyLjY5LDAsNCwwTDE2MiwyMjRhMTA0LjU4LDEwNC41OCwwLDAsMCwzNC4wOC0xOS4yNWwuMTYtMzZjLjctMS4xMiwxLjM3LTIuMjYsMi0zLjQxbDMxLjg0LTE4LjFBOTkuMTUsOTkuMTUsMCwwLDAsMjMwLjEsMTA4Ljc2Wk0xMjgsMTY4YTQwLDQwLDAsMSwxLDQwLTQwQTQwLDQwLDAsMCwxLDEyOCwxNjhaIiBvcGFjaXR5PSIwLjIiPjwvcGF0aD48cGF0aCBkPSJNMTI4LDgwYTQ4LDQ4LDAsMSwwLDQ4LDQ4QTQ4LjA1LDQ4LjA1LDAsMCwwLDEyOCw4MFptMCw4MGEzMiwzMiwwLDEsMSwzMi0zMkEzMiwzMiwwLDAsMSwxMjgsMTYwWm0xMDkuOTQtNTIuNzlhOCw4LDAsMCwwLTMuODktNS40bC0yOS44My0xNy0uMTItMzMuNjJhOCw4LDAsMCwwLTIuODMtNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLTM2LjcyLTIwLjY3LDgsOCwwLDAsMC02LjQ2LjU5TDEyOCw0MS44NSw5Ny44OCwyNWE4LDgsMCwwLDAtNi40Ny0uNkExMTEuOTIsMTExLjkyLDAsMCwwLDU0LjczLDQ1LjE1YTgsOCwwLDAsMC0yLjgzLDYuMDdsLS4xNSwzMy42NS0yOS44MywxN2E4LDgsMCwwLDAtMy44OSw1LjQsMTA2LjQ3LDEwNi40NywwLDAsMCwwLDQxLjU2LDgsOCwwLDAsMCwzLjg5LDUuNGwyOS44MywxNywuMTIsMzMuNjNhOCw4LDAsMCwwLDIuODMsNi4wOCwxMTEuOTEsMTExLjkxLDAsMCwwLDM2LjcyLDIwLjY3LDgsOCwwLDAsMCw2LjQ2LS41OUwxMjgsMjE0LjE1LDE1OC4xMiwyMzFhNy45MSw3LjkxLDAsMCwwLDMuOSwxLDguMDksOC4wOSwwLDAsMCwyLjU3LS40MiwxMTIuMSwxMTIuMSwwLDAsMCwzNi42OC0yMC43Myw4LDgsMCwwLDAsMi44My02LjA3bC4xNS0zMy42NSwyOS44My0xN2E4LDgsMCwwLDAsMy44OS01LjRBMTA2LjQ3LDEwNi40NywwLDAsMCwyMzcuOTQsMTA3LjIxWm0tMTUsMzQuOTEtMjguNTcsMTYuMjVhOCw4LDAsMCwwLTMsM2MtLjU4LDEtMS4xOSwyLjA2LTEuODEsMy4wNmE3Ljk0LDcuOTQsMCwwLDAtMS4yMiw0LjIxbC0uMTUsMzIuMjVhOTUuODksOTUuODksMCwwLDEtMjUuMzcsMTQuM0wxMzQsMTk5LjEzYTgsOCwwLDAsMC0zLjkxLTFoLS4xOWMtMS4yMSwwLTIuNDMsMC0zLjY0LDBhOC4xLDguMSwwLDAsMC00LjEsMWwtMjguODQsMTYuMUE5Niw5NiwwLDAsMSw2Ny44OCwyMDFsLS4xMS0zMi4yYTgsOCwwLDAsMC0xLjIyLTQuMjJjLS42Mi0xLTEuMjMtMi0xLjgtMy4wNmE4LjA5LDguMDksMCwwLDAtMy0zLjA2bC0yOC42LTE2LjI5YTkwLjQ5LDkwLjQ5LDAsMCwxLDAtMjguMjZMNjEuNjcsOTcuNjNhOCw4LDAsMCwwLDMtM2MuNTgtMSwxLjE5LTIuMDYsMS44MS0zLjA2YTcuOTQsNy45NCwwLDAsMCwxLjIyLTQuMjFsLjE1LTMyLjI1YTk1Ljg5LDk1Ljg5LDAsMCwxLDI1LjM3LTE0LjNMMTIyLDU2Ljg3YTgsOCwwLDAsMCw0LjEsMWMxLjIxLDAsMi40MywwLDMuNjQsMGE4LDgsMCwwLDAsNC4xLTFsMjguODQtMTYuMUE5Niw5NiwwLDAsMSwxODguMTIsNTVsLjExLDMyLjJhOCw4LDAsMCwwLDEuMjIsNC4yMmMuNjIsMSwxLjIzLDIsMS44LDMuMDZhOC4wOSw4LjA5LDAsMCwwLDMsMy4wNmwyOC42LDE2LjI5QTkwLjQ5LDkwLjQ5LDAsMCwxLDIyMi45LDE0Mi4xMloiPjwvcGF0aD48L3N2Zz4="); + --icon-logout: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTYsMTI4bC00MCw0MFY4OFoiIG9wYWNpdHk9IjAuMiI+PC9wYXRoPjxwYXRoIGQ9Ik0xMTIsMjE2YTgsOCwwLDAsMS04LDhINDhhMTYsMTYsMCwwLDEtMTYtMTZWNDhBMTYsMTYsMCwwLDEsNDgsMzJoNTZhOCw4LDAsMCwxLDAsMTZINDhWMjA4aDU2QTgsOCwwLDAsMSwxMTIsMjE2Wm0xMDkuNjYtODIuMzQtNDAsNDBBOCw4LDAsMCwxLDE2OCwxNjhWMTM2SDEwNGE4LDgsMCwwLDEsMC0xNmg2NFY4OGE4LDgsMCwwLDEsMTMuNjYtNS42Nmw0MCw0MEE4LDgsMCwwLDEsMjIxLjY2LDEzMy42NlptLTE3LTUuNjZMMTg0LDEwNy4zMXY0MS4zOFoiPjwvcGF0aD48L3N2Zz4="); /* Post visibility icons */ --icon-globe-visibility: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iI2ZmZmZmZiIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yNDguNTksNTguNjdjLTYuMzEtMTAuODctMjMtMjEuMDYtNjYuMTYtOS43MUE5NS45NCw5NS45NCwwLDAsMCwzMiwxMjhxMCwzLjYuMjYsNy4xNEMuNTYsMTY2Ljg2LDEuMSwxODYuNCw3LjQ0LDE5Ny4zMywxMy40LDIwNy42MSwyNS4zLDIxMiw0MC42OCwyMTJjOS43OSwwLDIxLTEuNzgsMzIuOTUtNC45MUE5NS45NCw5NS45NCwwLDAsMCwyMjQsMTI4YzAtMi40MS0uMDktNC43OS0uMjctNy4xNiwxNC4zMS0xNC4zOCwyMy44Ni0yOC4yMSwyNy00MEMyNTMuNTUsNzAuNDIsMjUxLjEyLDYzLDI0OC41OSw1OC42N1pNMTI4LDU2YTcyLjExLDcyLjExLDAsMCwxLDcwLjE5LDU2QzE4NCwxMjQuNzMsMTY1LDEzOC41OSwxNDEuOTIsMTUxLjg2Yy0yMS43NCwxMi40OS00My41NSwyMi4zNi02My4wOSwyOC42NUE3Miw3MiwwLDAsMSwxMjgsNTZaTTI4LjE5LDE4NS4yOWMtLjYxLTEuMDctLjE3LTguMjIsMTAuNjctMjEuNzFBOTUuNzcsOTUuNzcsMCwwLDAsNTIuMzUsMTg3QzM1LjEyLDE4OS42MSwyOC44NSwxODYuNDEsMjguMTksMTg1LjI5Wk0xMjgsMjAwYTcxLjY2LDcxLjY2LDAsMCwxLTIyLjU2LTMuNjQsMzk0LjEsMzk0LjEsMCwwLDAsNDguNDItMjMuNjlBMzg4LjExLDM4OC4xMSwwLDAsMCwxOTguNDMsMTQzLDcyLjEyLDcyLjEyLDAsMCwxLDEyOCwyMDBaTTIyNy41Nyw3NC42NWMtMS4yOCw0Ljc4LTQuODEsMTAuODctMTAuMzksMTcuOEE5NS43NCw5NS43NCwwLDAsMCwyMDMuNjgsNjljMTUuODMtMi4zNywyMy4xNywwLDI0LjE1LDEuNzFDMjI4LDcxLDIyOC4yMSw3Mi4yOCwyMjcuNTcsNzQuNjVaIj48L3BhdGg+PC9zdmc+"); @@ -225,88 +228,88 @@ } } -body.layout-single-column { +body.app-body { background-color: var(--color-bg); color: var(--color-fg); font-family: ui-rounded, "mastodon-font-sans-serif", sans-serif; } /* πŸ–±οΈ Scrollbars */ -:root:has(.layout-single-column) *::-webkit-scrollbar-track { +:root:has(.app-body) *::-webkit-scrollbar-track { background-color: var(--color-bg); padding: 2px; } -:root:has(.layout-single-column) *::-webkit-scrollbar-thumb { +:root:has(.app-body) *::-webkit-scrollbar-thumb { background-color: var(--color-accent); border-radius: 50px; opacity: .4; } -:root:has(.layout-single-column) *::-webkit-scrollbar-track:hover { +:root:has(.app-body) *::-webkit-scrollbar-track:hover { background-color: var(--color-bg); } -:root:has(.layout-single-column) *::-webkit-scrollbar-thumb:hover { +:root:has(.app-body) *::-webkit-scrollbar-thumb:hover { background-color: var(--color-accent); opacity: .7; } @media screen and (max-width:1174px) { - :root:has(.layout-single-column) *::-webkit-scrollbar { + :root:has(.app-body) *::-webkit-scrollbar { display: none; } } -.layout-single-column .loading-bar { +.app-body .loading-bar { background-color: var(--color-accent); } -.layout-single-column .getting-started, -.layout-single-column .regeneration-indicator, -.layout-single-column .audio-player, -.layout-single-column .compose-form .spoiler-input__input, -.layout-single-column .compose-form__autosuggest-wrapper, -.layout-single-column .compose-form__poll-wrapper select, -.layout-single-column .poll__option input[type=text], -.layout-single-column .report-dialog-modal__textarea, -.layout-single-column .search__input, -.layout-single-column .setting-text, -.layout-single-column .compose-form .compose-form__buttons-wrapper, -.layout-single-column .about__section__body { +.app-body .getting-started, +.app-body .regeneration-indicator, +.app-body .audio-player, +.app-body .compose-form .spoiler-input__input, +.app-body .compose-form__autosuggest-wrapper, +.app-body .compose-form__poll-wrapper select, +.app-body .poll__option input[type=text], +.app-body .report-dialog-modal__textarea, +.app-body .search__input, +.app-body .setting-text, +.app-body .compose-form .compose-form__buttons-wrapper, +.app-body .about__section__body { border: 0; } -.layout-single-column .column-inline-form, -.layout-single-column .column>.scrollable, -.layout-single-column .getting-started, -.layout-single-column .regeneration-indicator { +.app-body .column-inline-form, +.app-body .column>.scrollable, +.app-body .getting-started, +.app-body .regeneration-indicator { background: transparent; } -.layout-single-column .account__avatar img { +.app-body .account__avatar img { border-radius: 50%; } /* Rordered layout */ -.layout-single-column .columns-area__panels__pane--navigational { +.app-body .columns-area__panels__pane--navigational { order: 1; } -.layout-single-column .columns-area__panels__main { +.app-body .columns-area__panels__main { order: 2; } -.layout-single-column .columns-area__panels__pane--compositional { +.app-body .columns-area__panels__pane--compositional { order: 3; } -.layout-single-column .columns-area--mobile .column { +.app-body .columns-area--mobile .column { flex: unset; height: auto; } -.layout-single-column .columns-area--mobile .column:focus-within { +.app-body .columns-area--mobile .column:focus-within { overflow: visible; } -.layout-single-column .scrollable, -.layout-single-column .column > .scrollable { +.app-body .scrollable, +.app-body .column > .scrollable { max-height: max-content; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .dismissable-banner + .scrollable { +.app-body .dismissable-banner + .scrollable { border-top-left-radius: 0; border-top-right-radius: 0; } @@ -314,7 +317,7 @@ body.layout-single-column { /* *️⃣ Icons -------- */ -.layout-single-column +.app-body :is( .icon-bookmark, .icon-star, @@ -332,7 +335,8 @@ body.layout-single-column { .icon-bookmarks, .icon-list-ul, .column-link .icon-cog, - .compose__action-bar-dropdown .icon-bars, + .drawer__tab .icon-cog, + .icon-bars, .compose__action-bar-dropdown .icon-close, .icon-user-plus, .icon-user, @@ -354,13 +358,14 @@ body.layout-single-column { .icon-check, .status__action-bar .icon-close, .detailed-status__action-bar .icon-close, - .account__header__tabs__buttons .icon-close + .account__header__tabs__buttons .icon-close, + .icon-sign-out ) path { display: none; } -.layout-single-column +.app-body :is( .icon-bookmark, .icon-star, @@ -378,7 +383,8 @@ body.layout-single-column { .icon-bookmarks, .icon-list-ul, .column-link .icon-cog, - .compose__action-bar-dropdown .icon-bars, + .drawer__tab .icon-cog, + .icon-bars, .compose__action-bar-dropdown .icon-close, .icon-user-plus, .icon-user, @@ -400,7 +406,8 @@ body.layout-single-column { .icon-check, .status__action-bar .icon-close, .detailed-status__action-bar .icon-close, - .account__header__tabs__buttons .icon-close + .account__header__tabs__buttons .icon-close, + .icon-sign-out ) { background-repeat: no-repeat; background-size: 100%; @@ -408,44 +415,44 @@ body.layout-single-column { } /* Bookmark */ -.layout-single-column .icon-bookmark { +.app-body .icon-bookmark { background-image: var(--icon-bookmark-accent); } -.layout-single-column .detailed-status__button .icon-bookmark { +.app-body .detailed-status__button .icon-bookmark { background-image: var(--icon-bookmark-accent); } -.layout-single-column .icon-button.active .icon-bookmark { +.app-body .icon-button.active .icon-bookmark { background-image: var(--icon-bookmark-active); } /* Favorite */ -.layout-single-column .icon-star { +.app-body .icon-star { background-image: var(--icon-star-accent); } -.layout-single-column button.icon-button.active .icon-star, -.layout-single-column .notification .icon-star { +.app-body button.icon-button.active .icon-star, +.app-body .notification .icon-star { background-image: var(--icon-star-active); } -.layout-single-column .detailed-status__link .icon-star { +.app-body .detailed-status__link .icon-star { background-image: var(--icon-star); margin: 0 4px -2px 0; } /* Boost */ -.layout-single-column .icon-retweet { +.app-body .icon-retweet { background-image: var(--icon-boost-accent); } -.layout-single-column button.icon-button.active .icon-retweet, -.layout-single-column .detailed-status__button button.icon-button.active:hover .icon-retweet { +.app-body button.icon-button.active .icon-retweet, +.app-body .detailed-status__button button.icon-button.active:hover .icon-retweet { background-image: var(--icon-boost-active); } -.layout-single-column .status__prepend-icon.icon-retweet, -.layout-single-column .notification .icon-retweet { +.app-body .status__prepend-icon.icon-retweet, +.app-body .notification .icon-retweet { background-image: var(--icon-boost-active); } -.layout-single-column .detailed-status__link .icon-retweet { +.app-body .detailed-status__link .icon-retweet { background-image: var(--icon-boost); margin: 0 4px -2px 0; } -.layout-single-column +.app-body button.icon-button:is( .reblogPrivate, .reblogPrivate:hover, @@ -457,208 +464,214 @@ body.layout-single-column { opacity: .2; pointer-events: none; } -.layout-single-column .boost-modal__action-bar .icon-retweet { +.app-body .boost-modal__action-bar .icon-retweet { background-image: var(--icon-boost-accent); vertical-align: middle; } /* Reply */ -.layout-single-column .icon-reply, -.layout-single-column .icon-reply-all { +.app-body .icon-reply, +.app-body .icon-reply-all { background-image: var(--icon-reply-accent); } -.layout-single-column .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) { +.app-body .detailed-status__action-bar :is(.icon-reply, .icon-reply-all) { background-image: var(--icon-reply-accent); } /* Ellipsis */ -.layout-single-column :is(.icon-ellipsis-h, .icon-ellipsis-v) { +.app-body :is(.icon-ellipsis-h, .icon-ellipsis-v) { background-image: var(--icon-ellipsis-accent); } -.layout-single-column .detailed-status__action-bar .icon-ellipsis-h { +.app-body .detailed-status__action-bar .icon-ellipsis-h { background-image: var(--icon-ellipsis-accent); } -.layout-single-column :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close { +.app-body :is(.status__action-bar, .detailed-status__action-bar, .account__header__tabs__buttons) .icon-close { background-image: var(--icon-ellipsis-active); } /* Poll icon */ -.layout-single-column .icon-tasks { +.app-body .icon-tasks { background-image: var(--icon-poll); } -.layout-single-column .notification__message .icon-tasks { +.app-body .notification__message .icon-tasks { background-image: var(--icon-poll-accent); } /* Post icon */ -.layout-single-column .icon-quote-right { +.app-body .icon-quote-right { background-image: var(--icon-post); } /* Navigation panel icons */ -.layout-single-column .column-link__icon { +.app-body .column-link__icon { transform: scale(1.3); margin-right: 7px; margin-left: 2px; } /* Home icon */ -.layout-single-column .icon-home { +.app-body .icon-home { background-image: var(--icon-home); } -.layout-single-column :is(.column-link.active .icon-home, .column-header__icon.icon-home) { +.app-body :is(.column-link.active .icon-home, .column-header__icon.icon-home) { background-image: var(--icon-home-active); } -.layout-single-column .notification__message .icon-home { +.app-body .notification__message .icon-home { background-image: var(--icon-post-notification-accent); } /* Globe icon */ -.layout-single-column .column-link .icon-globe, -.layout-single-column .column-header__icon.icon-globe { +.app-body .column-link .icon-globe, +.app-body .column-header__icon.icon-globe { background-image: var(--icon-globe); } -.layout-single-column .column-link.active .icon-globe, -.layout-single-column .column-header__icon.icon-globe { +.app-body .column-link.active .icon-globe, +.app-body .column-header__icon.icon-globe { background-image: var(--icon-globe-active); } /* Explore + Hashtag icon */ -.layout-single-column .icon-hashtag { +.app-body .icon-hashtag { background-image: var(--icon-hashtag-active); } -.layout-single-column .column-link .icon-hashtag { +.app-body .column-link .icon-hashtag { background-image: var(--icon-hashtag); } -.layout-single-column .column-link.active .icon-hashtag { +.app-body .column-link.active .icon-hashtag { background-image: var(--icon-hashtag-active); } /* Search icon */ -.layout-single-column .icon-search { +.app-body .icon-search { background-image: var(--icon-search); } -.layout-single-column .ui__header__links .icon-search { +.app-body .ui__header__links .icon-search, +.app-body .search__icon .icon-search { background-image: var(--icon-search-active); } -.layout-single-column .column-link .icon-search { +.app-body .column-link .icon-search { background-image: var(--icon-search-column-link); } -.layout-single-column .column-link.active .icon-search { +.app-body .column-link.active .icon-search { background-image: var(--icon-search-column-link-active); } -.layout-single-column .column-header__icon.icon-search { +.app-body .column-header__icon.icon-search { background-image: var(--icon-search-column-link-active); } -.layout-single-column .icon-times-circle { +.app-body .icon-times-circle { background-image: var(--icon-close); } /* Notifications icon */ -.layout-single-column .column-link .icon-bell { +.app-body .column-link .icon-bell { background-image: var(--icon-bell); } -.layout-single-column .column-link.active .icon-bell, -.layout-single-column .column-header__icon.icon-bell { +.app-body .column-link.active .icon-bell, +.app-body .column-header__icon.icon-bell { background-image: var(--icon-bell-active); } /* Direct messages icon */ -.layout-single-column .column-link .icon-at { +.app-body .column-link .icon-at { background-image: var(--icon-direct-messages); } -.layout-single-column .column-link.active .icon-at { +.app-body .column-link.active .icon-at, +.app-body .column-header__icon.icon-at { background-image: var(--icon-direct-messages-active); } /* Bookmarks icon */ -.layout-single-column .icon-bookmarks { +.app-body .icon-bookmarks { background-image: var(--icon-bookmark-column-link); } -.layout-single-column .column-link.active .icon-bookmarks, -.layout-single-column .column-header__icon.icon-bookmarks { +.app-body .column-link.active .icon-bookmarks, +.app-body .column-header__icon.icon-bookmarks { background-image: var(--icon-bookmark-column-link-active); } /* Favorites icon */ -.layout-single-column .column-link .icon-star { +.app-body .column-link .icon-star { background-image: var(--icon-star-column-link); } -.layout-single-column .column-link.active .icon-star, -.layout-single-column .column-header__icon.icon-star { +.app-body .column-link.active .icon-star, +.app-body .column-header__icon.icon-star { background-image: var(--icon-star-column-link-active); } /* Lists icon */ -.layout-single-column .icon-list-ul { +.app-body .icon-list-ul { background-image: var(--icon-list); } -.layout-single-column .column-link.active .icon-list-ul { +.app-body .column-link.active .icon-list-ul, +.app-body .column-header__icon.icon-list-ul { background-image: var(--icon-list-active); } /* Settings icon */ -.layout-single-column .column-link .icon-cog { +.app-body .column-link .icon-cog { background-image: var(--icon-settings); } /* Profile settings */ -.layout-single-column .compose__action-bar-dropdown .icon-bars { +.app-body .compose__action-bar-dropdown .icon-bars { background-image: var(--icon-gear); } -.layout-single-column .compose__action-bar-dropdown .active .icon-close { +.app-body .compose__action-bar-dropdown .active .icon-close { background-image: var(--icon-gear-active); } /* Follow user icon */ -.layout-single-column .icon-user-plus, -.layout-single-column .icon-user { +.app-body .icon-user-plus, +.app-body .icon-user { background-image: var(--icon-user-plus-accent); } -.layout-single-column .active .icon-user-plus { +.app-body .active .icon-user-plus { background-image: var(--icon-user-plus); } -.layout-single-column .column-link.active .icon-user-plus, -.layout-single-column .column-header__icon.icon-user-plus { +.app-body .column-link.active .icon-user-plus, +.app-body .column-header__icon.icon-user-plus { background-image: var(--icon-user-plus-active); } /* Users icon */ -.layout-single-column .icon-users { +.app-body .icon-users { background-image: var(--icon-users); } +.app-body .column-link .icon-users { + background-image: var(--icon-users-accent); +} /* Announcement icon */ -.layout-single-column .icon-bullhorn { +.app-body .icon-bullhorn { background-image: var(--icon-megaphone); } /* Column settings icon */ -.layout-single-column .icon-sliders { +.app-body .icon-sliders { background-image: var(--icon-sliders); } /* Post visibility icons */ -.layout-single-column .icon-globe { +.app-body .icon-globe { background-image: var(--icon-globe-visibility); } -.layout-single-column .icon-unlock { +.app-body .icon-unlock { background-image: var(--icon-unlock); } -.layout-single-column .icon-lock { +.app-body .icon-lock { background-image: var(--icon-lock); } -.layout-single-column .icon-at { +.app-body .icon-at { background-image: var(--icon-at); } /* Other icons */ -.layout-single-column .icon-paperclip { +.app-body .icon-paperclip { background-image: var(--icon-paperclip); } -.layout-single-column .icon-check { +.app-body .icon-check { background-image: var(--icon-verified); } -.layout-single-column .follow-request-banner .button:is(:active, :focus, :hover) .icon-check { +.app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } -.layout-single-column .account__relationship .icon-check, -.layout-single-column .follow-request-banner .button .icon-check { +.app-body .account__relationship .icon-check, +.app-body .follow-request-banner .button .icon-check { background-image: var(--icon-check); } -.layout-single-column .icon-bell { +.app-body .icon-bell { background-image: var(--icon-bell-ringing); } -.layout-single-column .icon-bell-o { +.app-body .icon-bell-o { background-image: var(--icon-bell-still); } -.layout-single-column .icon-thumb-tack { +.app-body .icon-thumb-tack { background-image: var(--icon-pin); } -.layout-single-column .icon-file-text { +.app-body .icon-file-text { background-image: var(--icon-link); } -.layout-single-column +.app-body :is( .account--panel, .follow-request-banner, @@ -667,83 +680,83 @@ body.layout-single-column { .icon-times { background-image: var(--icon-reject); } -.layout-single-column .account--panel .icon-times, -.layout-single-column .follow-request-banner .button:is(:active, :focus, :hover) .icon-times { +.app-body .account--panel .icon-times, +.app-body .follow-request-banner .button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } -.layout-single-column .account__relationship .icon-times, -.layout-single-column .follow-request-banner .button .icon-times { +.app-body .account__relationship .icon-times, +.app-body .follow-request-banner .button .icon-times { background-image: var(--icon-reject); } @media screen and (max-width:1174px) { - .layout-single-column .column-link .icon-home { + .app-body .column-link .icon-home { background-image: var(--icon-home-active); } - .layout-single-column .column-link.active .icon-home { + .app-body .column-link.active .icon-home { background-image: var(--icon-home); } - .layout-single-column .column-link .icon-bell { + .app-body .column-link .icon-bell { background-image: var(--icon-bell-active); } - .layout-single-column .column-link.active .icon-bell { + .app-body .column-link.active .icon-bell { background-image: var(--icon-bell); } - .layout-single-column .column-link .icon-hashtag { + .app-body .column-link .icon-hashtag { background-image: var(--icon-hashtag-active); } - .layout-single-column .column-link.active .icon-hashtag { + .app-body .column-link.active .icon-hashtag { background-image: var(--icon-hashtag); } - .layout-single-column .column-link .icon-search { + .app-body .column-link .icon-search { background-image: var(--icon-search-column-link-active); } - .layout-single-column .column-link.active .icon-search { + .app-body .column-link.active .icon-search { background-image: var(--icon-search-column-link); } - .layout-single-column .column-link .icon-globe { + .app-body .column-link .icon-globe { background-image: var(--icon-globe-active); } - .layout-single-column .column-link.active .icon-globe { + .app-body .column-link.active .icon-globe { background-image: var(--icon-globe); } - .layout-single-column .column-link .icon-at { + .app-body .column-link .icon-at { background-image: var(--icon-direct-messages-active); } - .layout-single-column .column-link.active .icon-at { + .app-body .column-link.active .icon-at { background-image: var(--icon-direct-messages); } - .layout-single-column .column-link .icon-bookmarks { + .app-body .column-link .icon-bookmarks { background-image: var(--icon-bookmark-column-link-active); } - .layout-single-column .column-link.active .icon-bookmarks { + .app-body .column-link.active .icon-bookmarks { background-image: var(--icon-bookmark-column-link); } - .layout-single-column .column-link .icon-star { + .app-body .column-link .icon-star { background-image: var(--icon-star-column-link-active); } - .layout-single-column .column-link.active .icon-star { + .app-body .column-link.active .icon-star { background-image: var(--icon-star-column-link); } - .layout-single-column .column-link .icon-list-ul { + .app-body .column-link .icon-list-ul { background-image: var(--icon-list-active); } - .layout-single-column .column-link.active .icon-list-ul { + .app-body .column-link.active .icon-list-ul { background-image: var(--icon-list); } - .layout-single-column .column-link .icon-cog { + .app-body .column-link .icon-cog { background-image: var(--icon-gear); } - .layout-single-column .column-link .icon-ellipsis-h { + .app-body .column-link .icon-ellipsis-h { background-image: var(--icon-ellipsis); } - .layout-single-column .column-link.active .icon-ellipsis-h { + .app-body .column-link.active .icon-ellipsis-h { background-image: var(--icon-ellipsis-active); } - .layout-single-column .column-link .icon-user-plus { + .app-body .column-link .icon-user-plus { background-image: var(--icon-user-plus-active); } - .layout-single-column .column-link.active .icon-user-plus { + .app-body .column-link.active .icon-user-plus { background-image: var(--icon-user-plus-accent); } } @@ -751,10 +764,10 @@ body.layout-single-column { /* πŸ“ Compose panel ---------------- */ -.layout-single-column .compose-form { +.app-body .compose-form { padding: 0 0 71px; } -.layout-single-column .navigation-bar { +.app-body .navigation-bar { border-radius: 8px 8px 0 0; padding: 21px 11px 22px 15px; background-color: var(--color-content-secondary-bg); @@ -762,22 +775,22 @@ body.layout-single-column { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .navigation-bar strong { +.app-body .navigation-bar strong { color: var(--color-content-fg); } -.layout-single-column .compose-form__highlightable.active { +.app-body .compose-form__highlightable.active { box-shadow: none; } -.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__highlightable.active), -.layout-single-column .compose-form__highlightable.active .compose-form__autosuggest-wrapper, -.layout-single-column .compose-form__highlightable.active .compose-form__buttons-wrapper, -.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within, -.layout-single-column .navigation-bar:has(+ .compose-form .compose-form__autosuggest-wrapper:focus-within), -.layout-single-column .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, -.layout-single-column .compose-form:has(.compose-form__autosuggest-wrapper:focus-within) :is(.reply-indicator, .autosuggest-input, .compose-form__warning) { +.app-body .navigation-bar:has(+ .compose-form .compose-form__highlightable.active), +.app-body .compose-form__highlightable.active .compose-form__autosuggest-wrapper, +.app-body .compose-form__highlightable.active .compose-form__buttons-wrapper, +.app-body .compose-form .compose-form__autosuggest-wrapper:focus-within, +.app-body .navigation-bar:has(+ .compose-form .compose-form__autosuggest-wrapper:focus-within), +.app-body .compose-form .compose-form__autosuggest-wrapper:focus-within ~ .compose-form__buttons-wrapper, +.app-body .compose-form:has(.compose-form__autosuggest-wrapper:focus-within) :is(.reply-indicator, .autosuggest-input, .compose-form__warning) { border-color: var(--color-accent); } -.layout-single-column .compose-form +.app-body .compose-form :is( .autosuggest-textarea__suggestions, .autosuggest-textarea__textarea, @@ -785,63 +798,63 @@ body.layout-single-column { .compose-form__buttons-wrapper, .compose-form__modifiers ), -.layout-single-column .compose-form__autosuggest-wrapper { +.app-body .compose-form__autosuggest-wrapper { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; border-top: 0; border-radius: 0; } -.layout-single-column .compose-form__autosuggest-wrapper, -.layout-single-column .compose-form .compose-form__buttons-wrapper { +.app-body .compose-form__autosuggest-wrapper, +.app-body .compose-form .compose-form__buttons-wrapper { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .compose-form .compose-form__buttons-wrapper { +.app-body .compose-form .compose-form__buttons-wrapper { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .compose-form .compose-form__buttons-wrapper :is(.icon-button, .text-icon-button), -.layout-single-column .compose-form .character-counter { +.app-body .compose-form .compose-form__buttons-wrapper :is(.icon-button, .text-icon-button), +.app-body .compose-form .character-counter { color: var(--color-content-fg); height: 27px; } -.layout-single-column .compose-form .compose-form__buttons-wrapper .icon-button.active { +.app-body .compose-form .compose-form__buttons-wrapper .icon-button.active { color: var(--color-accent); } -.layout-single-column .compose-form .compose-form__buttons-wrapper .text-icon-button.active { +.app-body .compose-form .compose-form__buttons-wrapper .text-icon-button.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .compose-panel .autosuggest-textarea__textarea { +.app-body .compose-form .autosuggest-textarea__textarea { padding-left: 20px; padding-right: 45px; padding-top: 20px; } -.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder { +.app-body .compose-form .autosuggest-textarea__textarea::placeholder { font-size: 130%; opacity: .5; } -.layout-single-column .compose-panel .autosuggest-textarea__textarea::placeholder, -.layout-single-column .compose-form .autosuggest-account .display-name__html { +.app-body .compose-panel .autosuggest-textarea__textarea::placeholder, +.app-body .compose-form .autosuggest-account .display-name__html { color: var(--color-content-fg); } -.layout-single-column .compose-form .autosuggest-account .display-name__account { +.app-body .compose-form .autosuggest-account .display-name__account { color: var(--color-content-fg-muted); } -.layout-single-column .compose-form .autosuggest-textarea__suggestions--visible, -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item { +.app-body .compose-form .autosuggest-textarea__suggestions--visible, +.app-body .compose-form .autosuggest-textarea__suggestions__item { border-radius: 8px; } -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover), -.layout-single-column .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) { +.app-body .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover), +.app-body .compose-form .autosuggest-textarea__suggestions__item:is(.selected, :active, :focus, :hover) .autosuggest-account :is(.display-name__account, .display-name__html) { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .compose-form .compose-form__buttons-wrapper { +.app-body .compose-form .compose-form__buttons-wrapper { border-radius: 0 0 8px 8px; } -.layout-single-column .reply-indicator, -.layout-single-column .compose-form .compose-form__warning { +.app-body .reply-indicator, +.app-body .compose-form .compose-form__warning { background-color: var(--color-accent-bg); border-left: 1px solid var(--color-accent-lines); border-right: 1px solid var(--color-accent-lines); @@ -851,33 +864,33 @@ body.layout-single-column { margin: 0; border-radius: 0; } -.layout-single-column .compose-form .compose-form__warning, -.layout-single-column .simple_form .recommended, -.layout-single-column .compose-form .compose-form__warning, -.layout-single-column .compose-form .compose-form__warning a, -.layout-single-column .reply-indicator__content a, -.layout-single-column .navigation-bar__profile-edit { +.app-body .compose-form .compose-form__warning, +.app-body .simple_form .recommended, +.app-body .compose-form .compose-form__warning, +.app-body .compose-form .compose-form__warning a, +.app-body .reply-indicator__content a, +.app-body .navigation-bar__profile-edit { color: var(--color-accent); } -.layout-single-column .compose-form__sensitive-button .icon-button:hover { +.app-body .compose-form__sensitive-button .icon-button:hover { background-color: transparent; } -.layout-single-column .compose-form__sensitive-button input[type=checkbox]:checked { +.app-body .compose-form__sensitive-button input[type=checkbox]:checked { background-color: var(--color-accent); border-color: var(--color-accent); } -.layout-single-column .compose-form .autosuggest-input { +.app-body .compose-form .autosuggest-input { box-sizing: border-box; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .compose-form .spoiler-input.spoiler-input--visible { +.app-body .compose-form .spoiler-input.spoiler-input--visible { margin-bottom: 0; height: auto; background-color: var(--color-content-bg); } -.layout-single-column .compose-form .spoiler-input__input { +.app-body .compose-form .spoiler-input__input { background-color: var(--color-accent-bg); color: var(--color-accent); margin-bottom: 0; @@ -886,58 +899,58 @@ body.layout-single-column { box-shadow: 0 0 0 4px inset var(--color-content-bg); } -.layout-single-column .compose-form .spoiler-input__input:focus { +.app-body .compose-form .spoiler-input__input:focus { box-shadow: 0 0 0 4px inset var(--color-content-bg), 0 0 0 6px inset var(--color-accent), 0 0 0 1px inset var(--color-content-bg); } -.layout-single-column .display-name { +.app-body .display-name { color: var(--color-content-fg); } -.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button { +.app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button { color: #ffffff; } -.layout-single-column .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) { +.app-body .compose-form .compose-form__modifiers .compose-form__upload .icon-button:is(:active, :focus, :hover) { background-color: rgba(0, 0, 0, .4); } @media screen and (max-width:1174px) { - .layout-single-column .compose-form { + .app-body .compose-form { padding: 0 10px 10px; } - .layout-single-column .navigation-bar { + .app-body .navigation-bar { border-radius: 8px 8px 0 0; margin: 10px 10px 0; } } /* Publish button */ -.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper { +.app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper { padding-top: 10px; width: 100%; } -.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { +.app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button { padding: 10px 18px; } -.layout-single-column .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button .icon-lock { +.app-body .compose-form .compose-form__publish .compose-form__publish-button-wrapper .button .icon-lock { background-image: var(--icon-lock-inv); } /* Emoji picker */ -.layout-single-column .compose-form .emoji-button { +.app-body .compose-form .emoji-button { margin: 15px 10px 0 0; background-image: var(--icon-emoji); background-size: 26px; background-position: bottom left; background-repeat: no-repeat; } -.layout-single-column .compose-form .emoji-button .emojione { +.app-body .compose-form .emoji-button .emojione { opacity: 0; } -.layout-single-column .compose-form .emoji-button:hover { +.app-body .compose-form .emoji-button:hover { background-image: var(--icon-emoji-accent); } -.layout-single-column .emoji-picker-dropdown__menu { +.app-body .emoji-picker-dropdown__menu { overflow: hidden; border-radius: 8px; background-color: var(--color-content-bg); @@ -945,68 +958,68 @@ body.layout-single-column { 0 0 0 1px var(--color-lines), 0 0 5px rgba(0, 0, 0, .15); } -.layout-single-column .emoji-mart { +.app-body .emoji-mart { width: 100% !important; display: block; } -.layout-single-column .emoji-mart-bar:first-child { +.app-body .emoji-mart-bar:first-child { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); } -.layout-single-column .emoji-mart-anchor-bar { +.app-body .emoji-mart-anchor-bar { background-color: var(--color-accent); } -.layout-single-column .emoji-mart-anchor-selected { +.app-body .emoji-mart-anchor-selected { color: var(--color-accent); } -.layout-single-column .emoji-mart-anchor-icon svg path, -.layout-single-column .emoji-mart-anchor-icon svg rect { +.app-body .emoji-mart-anchor-icon svg path, +.app-body .emoji-mart-anchor-icon svg rect { fill: var(--color-content-fg); } -.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, -.layout-single-column .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, -.layout-single-column .emoji-mart-search-icon svg path { +.app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg path, +.app-body .emoji-mart-anchor-selected .emoji-mart-anchor-icon svg rect, +.app-body .emoji-mart-search-icon svg path { fill: var(--color-accent); } -.layout-single-column .emoji-mart-search-icon, -.layout-single-column .emoji-mart-search-icon:disabled, -.layout-single-column .emoji-mart-search-icon svg { +.app-body .emoji-mart-search-icon, +.app-body .emoji-mart-search-icon:disabled, +.app-body .emoji-mart-search-icon svg { opacity: 1; } -.layout-single-column .emoji-mart-scroll::-webkit-scrollbar-track { +.app-body .emoji-mart-scroll::-webkit-scrollbar-track { background-color: var(--color-content-bg); } -.layout-single-column .emoji-mart-search, -.layout-single-column .emoji-mart-scroll, -.layout-single-column .emoji-mart-category-label span { +.app-body .emoji-mart-search, +.app-body .emoji-mart-scroll, +.app-body .emoji-mart-category-label span { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .emoji-mart-search input { +.app-body .emoji-mart-search input { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } -.layout-single-column .emoji-mart-search input:focus { +.app-body .emoji-mart-search input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 1px inset var(--color-accent); outline: 0; } -.layout-single-column .emoji-mart-search input::placeholder { +.app-body .emoji-mart-search input::placeholder { color: var(--color-accent); } /* Zoom on emojis on hover (in post content only */ -.layout-single-column .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ +.app-body .status__content:not(.status__content--collapsed) { /* So the emoji doesn't clip out when zoomed on. */ overflow: visible; } -.layout-single-column .status__content .emojione { +.app-body .status__content .emojione { transition: transform .8s .8s; } -.layout-single-column .status__content .emojione:hover { +.app-body .status__content .emojione:hover { transform: scale(2.5); } @@ -1015,25 +1028,25 @@ body.layout-single-column { /* πŸ’¬ Posts -------- */ -.layout-single-column .reply-indicator__content, -.layout-single-column .status__content { +.app-body .reply-indicator__content, +.app-body .status__content { color: var(--color-content-fg); } -.layout-single-column .account__display-name strong, -.layout-single-column .status__display-name strong, -.layout-single-column .status__info .status__display-name .display-name__account { +.app-body .account__display-name strong, +.app-body .status__display-name strong, +.app-body .status__info .status__display-name .display-name__account { color: var(--color-content-fg); } -.layout-single-column .translate-button { +.app-body .translate-button { color: var(--color-content-fg-muted); } -.layout-single-column .translate-button__meta, -.layout-single-column .translate-button button, -.layout-single-column .status__content__translate-button { +.app-body .translate-button__meta, +.app-body .translate-button button, +.app-body .status__content__translate-button { font-size: 85%; } -.layout-single-column .status__content__translate-button, -.layout-single-column .translate-button .link-button { +.app-body .status__content__translate-button, +.app-body .translate-button .link-button { width: 32px; height: 32px; bottom: 13px; @@ -1048,51 +1061,51 @@ body.layout-single-column { transition: all .3s; background-color: transparent; } -.layout-single-column .detailed-status .status__content__translate-button, -.layout-single-column .detailed-status .translate-button .link-button { +.app-body .detailed-status .status__content__translate-button, +.app-body .detailed-status .translate-button .link-button { background-image: var(--icon-translate-accent); background-size: 25px; width: 40px; height: 40px; right: 60px; } -.layout-single-column .translate-button .link-button, -.layout-single-column .detailed-status .translate-button .link-button { +.app-body .translate-button .link-button, +.app-body .detailed-status .translate-button .link-button { background-image: var(--icon-translate-active); } -.layout-single-column .status__content__translate-button:hover, -.layout-single-column .translate-button .link-button:hover { +.app-body .status__content__translate-button:hover, +.app-body .translate-button .link-button:hover { background-color: var(--color-accent-bg); } @media screen and (max-width:889px) { - .layout-single-column .status__content__translate-button, - .layout-single-column .translate-button .link-button { + .app-body .status__content__translate-button, + .app-body .translate-button .link-button { bottom: 10px; } - .layout-single-column .detailed-status .status__content__translate-button, - .layout-single-column .detailed-status .translate-button .link-button { + .app-body .detailed-status .status__content__translate-button, + .app-body .detailed-status .translate-button .link-button { bottom: 13px; } } -.layout-single-column .status__content__translate-button > span, -.layout-single-column .translate-button .link-button > span, -.layout-single-column .notification .status__content__translate-button { +.app-body .status__content__translate-button > span, +.app-body .translate-button .link-button > span, +.app-body .notification .status__content__translate-button { display: none; } -.layout-single-column .account__display-name strong, -.layout-single-column .status__display-name strong { +.app-body .account__display-name strong, +.app-body .status__display-name strong { font-weight: bold; } -.layout-single-column .status { +.app-body .status { margin-left: 56px; padding: 0 10px; border-bottom: 0; } -.layout-single-column .status__wrapper { +.app-body .status__wrapper { transition: background .3s; } -.layout-single-column .status__wrapper, -.layout-single-column .detailed-status__wrapper { +.app-body .status__wrapper, +.app-body .detailed-status__wrapper { background-color: var(--color-content-bg); padding: 13px 12px; border-left: 1px solid var(--color-lines); @@ -1100,48 +1113,48 @@ body.layout-single-column { position: relative; } @media screen and (max-width:889px) { - .layout-single-column .status__wrapper, - .layout-single-column .detailed-status__wrapper { + .app-body .status__wrapper, + .app-body .detailed-status__wrapper { border-left: 0; border-right: 0; } - .layout-single-column .status__wrapper { + .app-body .status__wrapper { padding: 10px 8px; } } -.layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, -.layout-single-column .scrollable > div:first-child > .status__wrapper, -.layout-single-column .explore__search-results > div:first-child > .status__wrapper { +.app-body .scrollable > div:first-child > div:first-child > .status__wrapper, +.app-body .scrollable > div:first-child > .status__wrapper, +.app-body .explore__search-results > div:first-child > .status__wrapper { border-top: 1px solid var(--color-lines); } -.layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div:last-child > .status__wrapper, -.layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, -.layout-single-column .search-results__section > div:last-child >.status__wrapper { +.app-body .scrollable > div:last-child > div:last-child > .status__wrapper, +.app-body .scrollable > div:last-child > .status__wrapper, +.app-body .scrollable > div > article:last-child > div > .status__wrapper, +.app-body .search-results__section > div:last-child >.status__wrapper { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { +.app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top: 0; } @media screen and (min-width:890px) { - .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper, - .layout-single-column .explore__search-results > div:first-child > .status__wrapper { + .app-body .scrollable > div:first-child > div:first-child > .status__wrapper, + .app-body .explore__search-results > div:first-child > .status__wrapper { border-top-left-radius: 8px; border-top-right-radius: 8px; } - .layout-single-column .scrollable > div:last-child > div:last-child > .status__wrapper, - .layout-single-column .scrollable > div:last-child > .status__wrapper, - .layout-single-column .scrollable > div > article:last-child > div > .status__wrapper, - .layout-single-column .search-results__section > div:last-child >.status__wrapper { + .app-body .scrollable > div:last-child > div:last-child > .status__wrapper, + .app-body .scrollable > div:last-child > .status__wrapper, + .app-body .scrollable > div > article:last-child > div > .status__wrapper, + .app-body .search-results__section > div:last-child >.status__wrapper { border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } - .layout-single-column .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { + .app-body .dismissable-banner + .scrollable > div > article:first-child > div > .status__wrapper { border-top-left-radius: 0; border-top-right-radius: 0; } } -.layout-single-column .status__info { +.app-body .status__info { height: 22px; margin-left: -56px; padding: 0; @@ -1149,47 +1162,47 @@ body.layout-single-column { line-height: 10px; align-items: start; } -.layout-single-column .status__info .status__display-name { +.app-body .status__info .status__display-name { overflow: visible; align-items: start; max-width: calc(100% - 4em); } -.layout-single-column .status__info .status__display-name .display-name bdi, -.layout-single-column .status__info .status__display-name .display-name__account { +.app-body .status__info .status__display-name .display-name bdi, +.app-body .status__info .status__display-name .display-name__account { vertical-align: top; } -.layout-single-column .status__info .status__display-name .display-name__account { +.app-body .status__info .status__display-name .display-name__account { display: inline; opacity: .7; } -.layout-single-column .status__relative-time { +.app-body .status__relative-time { height: 22px; position: absolute; right: 22px; color: var(--color-content-fg); opacity: .6; } -.layout-single-column .status__avatar { +.app-body .status__avatar { margin-bottom: -10px; z-index: 2; } -.layout-single-column .reply-indicator__content, -.layout-single-column .status__content { +.app-body .reply-indicator__content, +.app-body .status__content { line-height: 19px; position: static; } -.layout-single-column .e-content blockquote, -.layout-single-column .reply-indicator__content blockquote, -.layout-single-column .status__content__text blockquote { +.app-body .e-content blockquote, +.app-body .reply-indicator__content blockquote, +.app-body .status__content__text blockquote { color: var(--color-content-fg-muted); border-color: var(--color-lines); } /* πŸ“ Post dividers */ /* Use ::before to set a non-full-width divider between posts and notifications. The divider sits above the post. */ -.layout-single-column .status::before, -.layout-single-column .notification__message::before { +.app-body .status::before, +.app-body .notification__message::before { position: absolute; background-color: var(--color-lines); height: 1px; @@ -1200,43 +1213,43 @@ body.layout-single-column { opacity: .7; } @media screen and (max-width:889px) { - .layout-single-column .status::before, - .layout-single-column .notification__message::before { + .app-body .status::before, + .app-body .notification__message::before { width: calc(100% - 73px); } } @media (prefers-color-scheme: dark) { - .layout-single-column .status::before, - .layout-single-column .notification__message::before { + .app-body .status::before, + .app-body .notification__message::before { opacity: 1; } } /* Remove border between posts when applicable */ -.layout-single-column .notification .status::before, /* no dividers on posts _inside_ notifications */ -.layout-single-column .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ -.layout-single-column .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ -.layout-single-column .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ -.layout-single-column .hashtag-header + article .status::before, -.layout-single-column .search-results__section .search-results__section__header + div .status::before { +.app-body .notification .status::before, /* no dividers on posts _inside_ notifications */ +.app-body .account-timeline__header + article .status::before, /* no divider above first post on profile pages */ +.app-body .scrollable > div:first-child > .status::before, /* no divider above first post in a column thread */ +.app-body .scrollable > div:first-child > div:first-child .status::before, /* no divider above first post in a column thread (backwards compatibility with 4.1.*) */ +.app-body .hashtag-header + article .status::before, +.app-body .search-results__section .search-results__section__header + div .status::before { display: none; } @media screen and (min-width:890px) and (max-width:1174px) { /* no divider above first post in a column thread on medium-size devices */ - .layout-single-column .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, - .layout-single-column .scrollable > div > article:first-child > div > .status__wrapper .status::before{ + .app-body .scrollable > div:first-child > div:first-child > .status__wrapper .status::before, + .app-body .scrollable > div > article:first-child > div > .status__wrapper .status::before{ display: none; } } /* πŸ‘₯ Threaded replies */ -.layout-single-column .status--first-in-thread { +.app-body .status--first-in-thread { border-top: 0; } -.layout-single-column .status--first-in-thread::before { +.app-body .status--first-in-thread::before { width: 100%; right: 0; } -.layout-single-column .status--in-thread +.app-body .status--in-thread :is( .attachment-list, .audio-player, @@ -1251,92 +1264,92 @@ body.layout-single-column { margin-left: 0; width: auto; } -.layout-single-column .status__line--first { +.app-body .status__line--first { height: 100%; } -.layout-single-column .status__line--full { +.app-body .status__line--full { height: calc(100% + 32px); } /* Default lines when replying in real time */ -.layout-single-column div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { +.app-body div[tabindex="-1"]:has(.status--in-thread) .status--in-thread:not(.status--first-in-thread) > .status__line:not(.status__line--full) { height: 0; } /* Hide line before first in thread */ -.layout-single-column div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), -.layout-single-column div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { +.app-body div[tabindex="-1"]:has(.status--in-thread) + div[tabindex="-1"] > .status--in-thread.status--first-in-thread > .status__line:not(.status__line--full), +.app-body div[tabindex="-1"]:has(.detailed-status__wrapper) + div[tabindex="-1"] > .status__wrapper .status__line:not(.status__line--full) { height: 0; } -.layout-single-column div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line { +.app-body div[tabindex="-1"]:has(+ div[tabindex="-1"] > .detailed-status__wrapper) .status--in-thread .status__line { height: calc(100% - 32px) !important; } -.layout-single-column div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, -.layout-single-column .status__line--full.status__line--first { +.app-body div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, +.app-body .status__line--full.status__line--first { top: 32px; height: 100%; z-index: 1; } -.layout-single-column .detailed-status { +.app-body .detailed-status { background-color: transparent; border-top: 0; } /* Threaded line, actually */ -.layout-single-column .status__line { +.app-body .status__line { margin-inline-start: 5px; border-inline-start: 2px solid var(--color-accent); -webkit-border-start: 2px solid var(--color-accent); opacity: .6; } -.layout-single-column .status__line--full::before { +.app-body .status__line--full::before { background-color: var(--color-accent); } /* Hide the "stub" from the first status line */ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.status--in-thread > .status__line.status__line--full, -.layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line, -.layout-single-column .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { +.app-body .status-reply.status--in-thread.status--first-in-thread > .status__line, +.app-body .status-reply.status--in-thread.status--first-in-thread > .status__line--full::before { top: 32px; } @media screen and (max-width:889px) { - .layout-single-column .status__line { + .app-body .status__line { inset-inline-start: 35px; } } /* ⏺️ Posts when in focus */ -.layout-single-column +.app-body :is(.status__wrapper.focusable, .detailed-status__wrapper.focusable):focus, -.layout-single-column +.app-body :is(.focusable, .status__wrapper.focusable):focus :is(.detailed-status, .detailed-status__action-bar) { outline: 0; background: var(--color-content-bg-focus); } @media screen and (min-width:1175px) { /* Subtle hover effect when you hover over a post content in the timeline. Only on bigger screens. */ - .layout-single-column .status__wrapper:has(.status__content:hover), - .layout-single-column .notification__message:has(+ div > .status__wrapper .status__content:hover) { + .app-body .status__wrapper:has(.status__content:hover), + .app-body .notification__message:has(+ div > .status__wrapper .status__content:hover) { background: var(--color-content-bg-focus); } } /* πŸ‘οΈ Post detailed view */ -.layout-single-column .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ +.app-body .detailed-status__wrapper { /* Set full-width divider above and below a detailed post */ border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } -.layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ +.app-body .scrollable > div:first-child > .detailed-status__wrapper { /* Detailed post is first in column */ border-top: 0; } -.layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ +.app-body .scrollable > div:last-child .detailed-status__wrapper:last-child { /* Detailed post is last in column */ border-bottom: 1px solid var(--color-lines); border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; } -.layout-single-column .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ +.app-body .scrollable > div:only-child .detailed-status__wrapper:last-child { /* Detailed post is the only post in column */ box-shadow: none; } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .scrollable > div:first-child > .detailed-status__wrapper { + .app-body .scrollable > div:first-child > .detailed-status__wrapper { margin-top: 15px; border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -1344,153 +1357,153 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } @media screen and (max-width:889px) { - .layout-single-column .scrollable > div:last-child .detailed-status__wrapper:last-child { + .app-body .scrollable > div:last-child .detailed-status__wrapper:last-child { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } - .layout-single-column .detailed-status { + .app-body .detailed-status { padding: 8px 8px 14px; } } -.layout-single-column .detailed-status__display-avatar .account__avatar { +.app-body .detailed-status__display-avatar .account__avatar { width: 60px !important; height: 60px !important; } -.layout-single-column .detailed-status .status__content { +.app-body .detailed-status .status__content { line-height: 24px; } -.layout-single-column .detailed-status, -.layout-single-column .detailed-status__action-bar { +.app-body .detailed-status, +.app-body .detailed-status__action-bar { background-color: var(--color-content-bg); border: 0; } -.layout-single-column .detailed-status__display-name strong, -.layout-single-column .detailed-status__display-name .display-name__account { +.app-body .detailed-status__display-name strong, +.app-body .detailed-status__display-name .display-name__account { color: var(--color-content-fg); } -.layout-single-column .detailed-status__display-name strong { +.app-body .detailed-status__display-name strong { font-size: 18px; font-weight: bold; } .detailed-status__display-name .display-name__account{ opacity: .7; } -.layout-single-column .detailed-status__meta { +.app-body .detailed-status__meta { color: var(--color-fg); opacity: .8; } -.layout-single-column .detailed-status__action-bar { +.app-body .detailed-status__action-bar { padding: 0 16px; justify-content: left; gap: 8px; width: 32px; } -.layout-single-column .detailed-status__action-bar-dropdown { +.app-body .detailed-status__action-bar-dropdown { position: absolute; right: 18px; } -.layout-single-column .status__action-bar .animated-number { +.app-body .status__action-bar .animated-number { color: var(--color-accent); font-weight: 600; } -.layout-single-column .status__action-bar__button:has(.icon-button__counter > .animated-number) { +.app-body .status__action-bar__button:has(.icon-button__counter > .animated-number) { padding-left: 4px; padding-right: 4px; margin-right: 2px; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) .active .icon-retweet + .icon-button__counter > .animated-number { color: #D3487F; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) .active .icon-star + .icon-button__counter > .animated-number { color: #EBBB59; } -.layout-single-column .detailed-status__meta .animated-number { +.app-body .detailed-status__meta .animated-number { transform: translate(0, -1px); } -.layout-single-column article > .account { +.app-body article > .account { padding: 16px; } -.layout-single-column article:last-child > .account { +.app-body article:last-child > .account { border-bottom: 1px solid var(--color-lines); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .detailed-status__link { +.app-body .detailed-status__link { display: inline-block; position: static; } /* Hashtag bar */ -.layout-single-column .hashtag-bar a, -.layout-single-column .hashtag-bar .link-button { +.app-body .hashtag-bar a, +.app-body .hashtag-bar .link-button { color: var(--color-fg-muted); font-size: 90%; transition: all .1s; } -.layout-single-column .hashtag-bar .link-button { +.app-body .hashtag-bar .link-button { font-size: 80%; margin-left: 3px; } -.layout-single-column .hashtag-bar a { +.app-body .hashtag-bar a { background-color: var(--color-content-secondary-bg); transition: all .3s; padding: 3px 8px; border-radius: 8px; } -.layout-single-column .hashtag-bar a:hover, -.layout-single-column .hashtag-bar .link-button:hover { +.app-body .hashtag-bar a:hover, +.app-body .hashtag-bar .link-button:hover { color: var(--color-accent); } -.layout-single-column .hashtag-bar a:hover { +.app-body .hashtag-bar a:hover { background-color: var(--color-accent-bg); } -.layout-single-column .hashtag-bar a:active, -.layout-single-column .hashtag-bar a:focus { +.app-body .hashtag-bar a:active, +.app-body .hashtag-bar a:focus { color: var(--color-accent-fg); background-color: var(--color-accent); } -.layout-single-column .hashtag-bar a:hover span { +.app-body .hashtag-bar a:hover span { text-decoration: none; } @media (prefers-color-scheme: dark) { - .layout-single-column .hashtag-bar a, - .layout-single-column .hashtag-bar .link-button { + .app-body .hashtag-bar a, + .app-body .hashtag-bar .link-button { color: var(--color-accent); } - .layout-single-column .hashtag-bar a:hover, - .layout-single-column .hashtag-bar .link-button:hover { + .app-body .hashtag-bar a:hover, + .app-body .hashtag-bar .link-button:hover { color: var(--color-content-fg); } } /* ⭐ Action bar */ -.layout-single-column .status__action-bar { +.app-body .status__action-bar { justify-content: left; margin-top: 8px; gap: 8px; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) :is(button, .status__action-bar__dropdown) { transition: all .3s; } -.layout-single-column .status__action-bar button:last-child { +.app-body .status__action-bar button:last-child { position: absolute; right: 18px; } -.layout-single-column .status__action-bar .icon-button.disabled { +.app-body .status__action-bar .icon-button.disabled { pointer-events: none; } -.layout-single-column +.app-body :is(.status__action-bar, .detailed-status__action-bar) .icon-button:is( :active, @@ -1500,12 +1513,12 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu ) { background-color: transparent; } -.layout-single-column .icon-button.star-icon.deactivate>.icon-star, -.layout-single-column .icon-button.star-icon.activate>.icon-star { /* Disable default star spinning animation */ +.app-body .icon-button.star-icon.deactivate>.icon-star, +.app-body .icon-button.star-icon.activate>.icon-star { /* Disable default star spinning animation */ animation: none; } -.layout-single-column .status__action-bar .icon-button.star-icon.active>.icon-star, -.layout-single-column .detailed-status__action-bar .icon-button.star-icon.active>.icon-star { +.app-body .status__action-bar .icon-button.star-icon.active>.icon-star, +.app-body .detailed-status__action-bar .icon-button.star-icon.active>.icon-star { animation: bounce .4s ease-out !important; } @keyframes bounce { @@ -1522,13 +1535,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: scale(1); } } -.layout-single-column .status__action-bar .icon-button.reblogPrivate>.icon-retweet { +.app-body .status__action-bar .icon-button.reblogPrivate>.icon-retweet { opacity: 1; } -.layout-single-column .status__action-bar .icon-button.active>.icon-retweet { +.app-body .status__action-bar .icon-button.active>.icon-retweet { animation: launch 1.2s ease-in !important; } -.layout-single-column .detailed-status__action-bar .icon-button.active>.icon-retweet { +.app-body .detailed-status__action-bar .icon-button.active>.icon-retweet { animation: launch-detailed 1.2s ease-out !important; } @keyframes launch { @@ -1583,8 +1596,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu opacity: 1; } } -.layout-single-column .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark, -.layout-single-column .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark { +.app-body .status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark, +.app-body .detailed-status__action-bar .icon-button.bookmark-icon.active>.icon-bookmark { animation: bounce-vertical .4s ease-out !important; } @keyframes bounce-vertical { @@ -1601,27 +1614,27 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: translate(0); } } -.layout-single-column .status__action-bar .icon-button, -.layout-single-column .detailed-status__action-bar .icon-button { +.app-body .status__action-bar .icon-button, +.app-body .detailed-status__action-bar .icon-button { min-width: 32px; height: 32px; border-radius: 8px; position: relative; } -.layout-single-column .detailed-status__action-bar .icon-button { +.app-body .detailed-status__action-bar .icon-button { min-width: 40px; height: 40px; } -.layout-single-column .detailed-status__action-bar .icon-button > .icon { +.app-body .detailed-status__action-bar .icon-button > .icon { width: 25px; height: 25px; } -.layout-single-column .detailed-status__action-bar .icon-button -.layout-single-column .icon-button.star-icon.active, -.layout-single-column .notification__favourite-icon-wrapper .star-icon { +.app-body .detailed-status__action-bar .icon-button +.app-body .icon-button.star-icon.active, +.app-body .notification__favourite-icon-wrapper .star-icon { color: #ffb609; } -.layout-single-column .status__prepend { +.app-body .status__prepend { padding-top: 2px; padding-right: 0; padding-bottom: 1px; @@ -1630,98 +1643,98 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 25px; color: var(--color-content-fg); } -.layout-single-column .status__prepend-icon-wrapper { +.app-body .status__prepend-icon-wrapper { width: 56px; text-align: right; } -.layout-single-column .status__prepend-icon-wrapper .icon { +.app-body .status__prepend-icon-wrapper .icon { transform: translateY(1px) scale(1.1); } -.layout-single-column .detailed-status__wrapper .status__prepend-icon-wrapper { +.app-body .detailed-status__wrapper .status__prepend-icon-wrapper { width: 46px; } -.layout-single-column .status__prepend .muted .emojione { +.app-body .status__prepend .muted .emojione { opacity: 1; } -.layout-single-column .status-card, -.layout-single-column .status-card.compact { +.app-body .status-card, +.app-body .status-card.compact { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); box-shadow: none; transition: all .3s; border-radius: 8px; } -.layout-single-column a.status-card:hover, -.layout-single-column a.status-card.compact:hover { +.app-body a.status-card:hover, +.app-body a.status-card.compact:hover { background-color: var(--color-content-bg-focus); border-color: var(--color-lines); } -.layout-single-column .status-card__image { +.app-body .status-card__image { background: var(--color-content-secondary-bg); } -.layout-single-column .status-card__image .icon { +.app-body .status-card__image .icon { width: 32px; height: 32px; } -.layout-single-column .status-card__title, -.layout-single-column .status-card__description, -.layout-single-column .status-card__author, -.layout-single-column .status-card__host { +.app-body .status-card__title, +.app-body .status-card__description, +.app-body .status-card__author, +.app-body .status-card__host { color: var(--color-content-fg); transition: all .2s; } -.layout-single-column .status-card__host { +.app-body .status-card__host { color: var(--color-content-fg-muted); } -.layout-single-column .status-card:active .status-card__host, -.layout-single-column .status-card:focus .status-card__host, -.layout-single-column .status-card:hover .status-card__host { +.app-body .status-card:active .status-card__host, +.app-body .status-card:focus .status-card__host, +.app-body .status-card:hover .status-card__host { color: var(--color-accent); } -.layout-single-column .status-card:active .status-card__author, -.layout-single-column .status-card:active .status-card__description, -.layout-single-column .status-card:active .status-card__title, -.layout-single-column .status-card:focus .status-card__author, -.layout-single-column .status-card:focus .status-card__description, -.layout-single-column .status-card:focus .status-card__title, -.layout-single-column .status-card:hover .status-card__author, -.layout-single-column .status-card:hover .status-card__description, -.layout-single-column .status-card:hover .status-card__title { +.app-body .status-card:active .status-card__author, +.app-body .status-card:active .status-card__description, +.app-body .status-card:active .status-card__title, +.app-body .status-card:focus .status-card__author, +.app-body .status-card:focus .status-card__description, +.app-body .status-card:focus .status-card__title, +.app-body .status-card:hover .status-card__author, +.app-body .status-card:hover .status-card__description, +.app-body .status-card:hover .status-card__title { color: var(--color-content-fg); } -.layout-single-column .status-card__author strong { +.app-body .status-card__author strong { font-weight: 800; } -.layout-single-column .status__content p { +.app-body .status__content p { margin-bottom: 12px; } -.layout-single-column .status__content p:last-child { +.app-body .status__content p:last-child { margin-bottom: 0; } -.layout-single-column .status__content > p:first-child:has(.status__content__spoiler-link) { +.app-body .status__content > p:first-child:has(.status__content__spoiler-link) { margin-bottom: 1px; } -.layout-single-column .status__content > p:first-child:has(.status__content__spoiler-link) span { +.app-body .status__content > p:first-child:has(.status__content__spoiler-link) span { font-weight: bold; } -.layout-single-column .media-gallery { +.app-body .media-gallery { border-radius: 8px; } -.layout-single-column .icon-button.overlayed { +.app-body .icon-button.overlayed { background-color: #ffffff; color: #444b5d; opacity: .6; transition: opacity .3s; } -.layout-single-column .icon-button.overlayed:hover { +.app-body .icon-button.overlayed:hover { background-color: #ffffff; color: #444b5d; opacity: 1; } -.layout-single-column .status__wrapper--filtered__button { +.app-body .status__wrapper--filtered__button { color: var(--color-accent); } -.layout-single-column .status__wrapper--filtered { +.app-body .status__wrapper--filtered { color: var(--color-content-fg); border-top: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); @@ -1729,69 +1742,69 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu margin-top: -1px; } -.layout-single-column .audio-player, -.layout-single-column .media-gallery, -.layout-single-column .video-player { +.app-body .audio-player, +.app-body .media-gallery, +.app-body .video-player { border: 1px solid var(--color-lines); } /* πŸ“Š Polls */ -.layout-single-column .poll__chart, -.layout-single-column .muted .poll__chart.leading { +.app-body .poll__chart, +.app-body .muted .poll__chart.leading { background: var(--color-accent); opacity: .4; height: 12px; border-radius: 10px; } -.layout-single-column .poll__chart.leading, -.layout-single-column .muted .poll__chart.leading { +.app-body .poll__chart.leading, +.app-body .muted .poll__chart.leading { opacity: 1; } -.layout-single-column .muted .poll { +.app-body .muted .poll { color: var(--color-content-fg-muted); } -.layout-single-column .poll__footer { +.app-body .poll__footer { color: var(--color-content-fg); } -.layout-single-column .poll__link { +.app-body .poll__link { color: var(--color-accent); text-decoration: none; } -.layout-single-column .poll__input { +.app-body .poll__input { border: 2px solid var(--color-content-fg); } -.layout-single-column .poll__input:hover { +.app-body .poll__input:hover { border-color: var(--color-accent); background-color: var(--color-accent-bg); } -.layout-single-column .poll__input:is(.active, :active, :focus) { +.app-body .poll__input:is(.active, :active, :focus) { background-color: var(--color-accent); } -.layout-single-column .poll__input.active { +.app-body .poll__input.active { border-color: var(--color-accent); } -.layout-single-column .poll__footer .button.button-secondary { +.app-body .poll__footer .button.button-secondary { padding: 0 16px; } -.layout-single-column .poll__footer .button.button-secondary:hover { +.app-body .poll__footer .button.button-secondary:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } /* Poll composer */ -.layout-single-column .compose-form__poll-wrapper, -.layout-single-column .compose-form__poll-wrapper .poll__footer { +.app-body .compose-form__poll-wrapper, +.app-body .compose-form__poll-wrapper .poll__footer { border-top: 0; } -.layout-single-column .compose-form__poll-wrapper ul { +.app-body .compose-form__poll-wrapper ul { background-color: var(--color-accent-bg); } -.layout-single-column .compose-form__poll-wrapper .autosuggest-input input:focus { +.app-body .compose-form__poll-wrapper .autosuggest-input input:focus { box-shadow: 0 0 0 2px var(--color-accent); } -.layout-single-column .compose-form__poll-wrapper .poll__footer .button.button-secondary { +.app-body .compose-form__poll-wrapper .poll__footer .button.button-secondary { padding: 6px 16px; } -.layout-single-column .compose-form__poll-wrapper .icon-button.disabled { +.app-body .compose-form__poll-wrapper .icon-button.disabled { color: transparent; pointer-events: none; } @@ -1799,29 +1812,29 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* Empty columns */ -.layout-single-column .empty-column-indicator { +.app-body .empty-column-indicator { background-color: var(--color-content-secondary-bg); color: var(--color-content-fg); border: 1px solid var(--color-lines); border-radius: 0 0 8px 8px; contain: content; } -.layout-single-column .empty-column-indicator a { +.app-body .empty-column-indicator a { color: var(--color-accent); } -.layout-single-column .explore__links > .empty-column-indicator { +.app-body .explore__links > .empty-column-indicator { border: 0; } /* Timeline hint */ -.layout-single-column .timeline-hint { +.app-body .timeline-hint { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .timeline-hint a { +.app-body .timeline-hint a { color: var(--color-accent); } -.layout-single-column article + .timeline-hint:last-child { +.app-body article + .timeline-hint:last-child { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; border-bottom: 1px solid var(--color-lines); @@ -1831,49 +1844,49 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ“€ DMs */ -.layout-single-column .follow_requests-unlocked_explanation { +.app-body .follow_requests-unlocked_explanation { background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .follow_requests-unlocked_explanation a { +.app-body .follow_requests-unlocked_explanation a { color: var(--color-accent); } -.layout-single-column .conversation__unread { +.app-body .conversation__unread { background-color: var(--color-accent); } -.layout-single-column .conversation.conversation--unread { +.app-body .conversation.conversation--unread { background-color: var(--color-content-bg-focus); } -.layout-single-column .conversation__unread { +.app-body .conversation__unread { color: var(--color-accent-fg); } -.layout-single-column .conversation__content__names a strong { +.app-body .conversation__content__names a strong { font-weight: bold; } -.layout-single-column .conversation__content__names, -.layout-single-column .conversation__content__names a, -.layout-single-column .conversation__content__relative-time, -.layout-single-column .conversation .attachment-list__list a, -.layout-single-column .conversation .status__content p { +.app-body .conversation__content__names, +.app-body .conversation__content__names a, +.app-body .conversation__content__relative-time, +.app-body .conversation .attachment-list__list a, +.app-body .conversation .status__content p { color: var(--color-content-fg); } -.layout-single-column .conversation { +.app-body .conversation { background-color: var(--color-content-bg); border-bottom: 1px solid var(--color-lines); } -.layout-single-column .conversation__content__relative-time { +.app-body .conversation__content__relative-time { opacity: .7; } @media screen and (min-width:890px) { - .layout-single-column .conversation { + .app-body .conversation { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } } /* Speech bubble look DMs */ -.layout-single-column :is(.status-direct, .detailed-status-direct, .detailed-status__wrapper-direct) .status__content { +.app-body :is(.status-direct, .detailed-status-direct, .detailed-status__wrapper-direct) .status__content { padding: .7em 1.2em .7em 1em; margin-top: 4px; background: var(--color-content-secondary-bg); @@ -1881,11 +1894,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-radius: 4px 12px 12px 12px; display: inline-block; } -.layout-single-column .status-direct.muted .status__content { +.app-body .status-direct.muted .status__content { background: rgba(155, 174, 200, 0.1); border-color: var(--color-lines); } -.layout-single-column :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend { +.app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend { display: none; } @@ -1893,25 +1906,25 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ⏺️ Column headers ----------------- */ -.layout-single-column .tabs-bar__wrapper { +.app-body .tabs-bar__wrapper { background-color: transparent; border-radius: 8px 8px 0 0; box-shadow: inset 0 10px var(--color-bg), 0 -30px var(--color-bg); } -.layout-single-column .column-header__wrapper.active:before { +.app-body .column-header__wrapper.active:before { background: none; opacity: 40%; } -.layout-single-column .column-header__wrapper.active { +.app-body .column-header__wrapper.active { box-shadow: 0 0; } -.layout-single-column .column-header { +.app-body .column-header { border-radius: 8px; } -.layout-single-column .column-header, -.layout-single-column .column-back-button { +.app-body .column-header, +.app-body .column-back-button { background-color: rgba(255, 255, 255, .75); color: var(--color-content-fg); border-top: 1px solid var(--color-lines); @@ -1927,114 +1940,116 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu backdrop-filter: blur(20px); } @media (prefers-color-scheme: dark) { - .layout-single-column .column-header, - .layout-single-column .column-back-button { + .app-body .column-header, + .app-body .column-back-button { background-color: rgba(3, 3, 3, .65); } } -.layout-single-column .column-header__button, -.layout-single-column .column-header__back-button { +.app-body .column-header__button, +.app-body .column-header__back-button { background-color: transparent; border: 0; } -.layout-single-column .column-header__button { +.app-body .column-header__button { color: var(--color-content-fg); transition: all .2s; - height: 50px; + border-radius: 6px; + height: 42px; + margin: 4px 4px 4px 0; } -.layout-single-column .column-header__icon { +.app-body .column-header__icon { transform: scale(1.1); margin-right: 4px; } -.layout-single-column .column-header.active .column-header__icon { +.app-body .column-header.active .column-header__icon { color: var(--color-accent); text-shadow: none; } -.layout-single-column .column-header__button:is(.active, .active:hover, :hover) { +.app-body .column-header__button:is(.active, .active:hover, :hover) { color: var(--color-accent); background-color: var(--color-accent-bg); } @media screen and (max-width:1174px) { - .layout-single-column .column-header__wrapper::after, - .layout-single-column .column-back-button::after { + .app-body .column-header__wrapper::after, + .app-body .column-back-button::after { display: none; } - .layout-single-column .column-header__button:is(.active, .active:hover, :hover), - .layout-single-column .column-header, - .layout-single-column .column-back-button { + .app-body .column-header__button:is(.active, .active:hover, :hover), + .app-body .column-header, + .app-body .column-back-button { background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } } -.layout-single-column .column-back-button--slim-button::after { +.app-body .column-back-button--slim-button::after { display: none; } -.layout-single-column .column-back-button--slim-button { +.app-body .column-back-button--slim-button { top: -50px } @media screen and (max-width:1174px) { - .layout-single-column .column-back-button--slim-button { + .app-body .column-back-button--slim-button { height: 50px; } } @media screen and (min-width:1175px) { - .layout-single-column .column-back-button--slim-button { + .app-body .column-back-button--slim-button { display: none; } } -.layout-single-column .load-gap, -.layout-single-column .load-more { +.app-body .load-gap, +.app-body .load-more { background-color: var(--color-accent-bg); color: var(--color-accent); border-bottom: 0; } -.layout-single-column .load-gap:hover, -.layout-single-column .load-more:hover { +.app-body .load-gap:hover, +.app-body .load-more:hover { background-color: var(--color-accent-lines); } -.layout-single-column .column-header__collapsible { +.app-body .column-header__collapsible { border-bottom: 0; box-shadow: 0 -20px 0 var(--color-bg); background-color: var(--color-secondary-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .column-header__collapsible::-webkit-scrollbar-track { +.app-body .column-header__collapsible::-webkit-scrollbar-track { background-color: transparent; } @media screen and (max-width:1174px) { - .layout-single-column .column-header__collapsible { + .app-body .column-header__collapsible { box-shadow: none; border-radius: 0; } } -.layout-single-column .column-header__collapsible-inner { +.app-body .column-header__collapsible-inner { background: var(--color-secondary-bg); border: 0; } -.layout-single-column .column-settings__section { +.app-body .column-settings__section { color: var(--color-content-fg-bold); } -.layout-single-column .setting-toggle__label { +.app-body .setting-toggle__label { color: var(--color-content-fg); } -.layout-single-column .column-header > button { +.app-body .column-header > button { padding: 0 0 0 15px; font-weight: bold; } @media screen and (max-width:1174px) { - .layout-single-column .ui__header { + .app-body .ui__header { background-color: transparent; border-bottom: 0; } - .layout-single-column .ui__header__logo { + .app-body .ui__header__logo { margin-left: 3px; } - .layout-single-column .tabs-bar__wrapper { + .app-body .tabs-bar__wrapper { box-shadow: none; display: block; margin-bottom: -2px; @@ -2042,22 +2057,22 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 45px; border-bottom: 1px solid rgba(0, 0, 0, .1); } - .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal) { + .app-body .tabs-bar__wrapper:has(> #tabs-bar__portal) { display: none; } - .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), - .layout-single-column .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ + .app-body .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-back-button), + .app-body .tabs-bar__wrapper:has(> #tabs-bar__portal > .column-header__wrapper) { /* Column header (2nd top bar) is displayed only if there's something inside */ display: block; } - .layout-single-column .column-header, - .layout-single-column .column-back-button, - .layout-single-column .column-header__button, - .layout-single-column .column-header__back-button { + .app-body .column-header, + .app-body .column-back-button, + .app-body .column-header__button, + .app-body .column-header__back-button { background-color: transparent; height: 50px; border: 0; } - .layout-single-column .ui::after { /* Set a backdrop blur background to both top bars */ + .app-body .ui::after { /* Set a backdrop blur background to both top bars */ -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.75); @@ -2069,23 +2084,23 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu width: 100%; z-index: 1; } - .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after { + .app-body .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal)::after { height: 55px; } - .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after, - .layout-single-column .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ + .app-body .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-back-button)::after, + .app-body .ui:has(.columns-area__panels > .columns-area__panels__main > .tabs-bar__wrapper > #tabs-bar__portal > .column-header__wrapper)::after { /* Backdrop blur has double the height only in cases where there's 2 top bars present */ height: 100px; } - .layout-single-column .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */ + .app-body .column-header__collapsible:not(.collapsed) { /* Remove margin between column settings and column header */ margin-top: 0; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { - .layout-single-column .ui::after { + .app-body .ui::after { background-color: rgba(3, 3, 3, .65); } - .layout-single-column .tabs-bar__wrapper { + .app-body .tabs-bar__wrapper { border-color: var(--color-lines); } } @@ -2095,37 +2110,37 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ⏺️ Horizontal selectors (used to navigate subsections on the Explore, Live Feeds and Account pages) */ -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) { background: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .account__header + .account__section-headline { +.app-body .account__header + .account__section-headline { border-radius: 8px 8px 0 0; } -.layout-single-column .account__section-headline:has(+ .explore__suggestions) { +.app-body .account__section-headline:has(+ .explore__suggestions) { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; margin-bottom: 10px; } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .explore__search-header + .account__section-headline { + .app-body .explore__search-header + .account__section-headline { border-top-left-radius: 8px; border-top-right-radius: 8px; } - .layout-single-column .notification__filter-bar { + .app-body .notification__filter-bar { border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 10px; } } @media screen and (max-width:889px) { - .layout-single-column :is(.account__section-headline, .notification__filter-bar) { + .app-body :is(.account__section-headline, .notification__filter-bar) { border-left: 0; border-right: 0; } } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button) { background-color: var(--color-accent-bg); @@ -2136,36 +2151,36 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu max-height: 45px; padding: 14px 10px; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) .icon { margin-top: -1.5px; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):hover { background-color: var(--color-accent-lines); color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { background-color: var(--color-content-bg); color: var(--color-content-fg); box-shadow: 0 0 0 4px var(--color-accent-bg) inset; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active::before { display: none; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) button { background-color: transparent; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button, a.active, button.active)::after { display: block; @@ -2183,52 +2198,52 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu transform: unset; border: 0; } -.layout-single-column +.app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button):last-child::after { display: none; } @media (prefers-color-scheme: dark) { - .layout-single-column + .app-body :is(.account__section-headline, .notification__filter-bar) :is(a, button).active { background-color: var(--color-bg); } } -.layout-single-column .notification__filter-bar .icon-reply-all { +.app-body .notification__filter-bar .icon-reply-all { background-image: var(--icon-reply-accent); } -.layout-single-column .notification__filter-bar .active .icon-reply-all { +.app-body .notification__filter-bar .active .icon-reply-all { background-image: var(--icon-reply); } -.layout-single-column .notification__filter-bar .icon-star { +.app-body .notification__filter-bar .icon-star { background-image: var(--icon-star-accent); } -.layout-single-column .notification__filter-bar .active .icon-star { +.app-body .notification__filter-bar .active .icon-star { background-image: var(--icon-star); } -.layout-single-column .notification__filter-bar .icon-retweet { +.app-body .notification__filter-bar .icon-retweet { background-image: var(--icon-boost-accent); } -.layout-single-column .notification__filter-bar .active .icon-retweet { +.app-body .notification__filter-bar .active .icon-retweet { background-image: var(--icon-boost); } -.layout-single-column .notification__filter-bar .icon-tasks { +.app-body .notification__filter-bar .icon-tasks { background-image: var(--icon-poll-accent); } -.layout-single-column .notification__filter-bar .active .icon-tasks { +.app-body .notification__filter-bar .active .icon-tasks { background-image: var(--icon-poll); } -.layout-single-column .notification__filter-bar .icon-home { +.app-body .notification__filter-bar .icon-home { background-image: var(--icon-post-notification-accent); } -.layout-single-column .notification__filter-bar .active .icon-home { +.app-body .notification__filter-bar .active .icon-home { background-image: var(--icon-post-notification); } @media screen and (max-width:889px) { - .layout-single-column .account__header + .account__section-headline { + .app-body .account__header + .account__section-headline { border-radius: 0; } } @@ -2238,79 +2253,79 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu ------------------- */ @media screen and (min-width:1175px) { /* Order of the side nav items */ - .layout-single-column .navigation-panel__logo { + .app-body .navigation-panel__logo { order: 1; } - .layout-single-column .column-link[href="/home"] { + .app-body .column-link[href="/home"] { order: 2; } - .layout-single-column .column-link[href="/notifications"] { + .app-body .column-link[href="/notifications"] { order: 3; } - .layout-single-column .column-link[href="/explore"] { + .app-body .column-link[href="/explore"] { order: 4; } - .layout-single-column .column-link[href="/public/local"] { + .app-body .column-link[href="/public/local"] { order: 5; } - .layout-single-column .column-link[href="/public"] { + .app-body .column-link[href="/public"] { order: 6; } - .layout-single-column .column-link[href="/conversations"] { + .app-body .column-link[href="/conversations"] { order: 7; } - .layout-single-column .column-link[href="/follow_requests"] { + .app-body .column-link[href="/follow_requests"] { order: 8; } - .layout-single-column .column-link[href="/bookmarks"] { + .app-body .column-link[href="/bookmarks"] { order: 9; } - .layout-single-column .column-link[href="/favourites"] { + .app-body .column-link[href="/favourites"] { order: 10; } - .layout-single-column .column-link[href="/lists"] { + .app-body .column-link[href="/lists"] { order: 12; } - .layout-single-column .list-panel { + .app-body .list-panel { order: 13; } - .layout-single-column .column-link[href="/settings/preferences"] { + .app-body .column-link[href="/settings/preferences"] { order: 11; } - .layout-single-column .navigation-panel__sign-in-banner, - .layout-single-column .navigation-panel__legal { + .app-body .navigation-panel__sign-in-banner, + .app-body .navigation-panel__legal { order: 14; } - .layout-single-column .flex-spacer { + .app-body .flex-spacer { order: 15; } - .layout-single-column .getting-started__trends { + .app-body .getting-started__trends { order: 16; } } -.layout-single-column .column-link--transparent { +.app-body .column-link--transparent { color: var(--color-fg); } -.layout-single-column .ui__header__logo .logo--icon { +.app-body .ui__header__logo .logo--icon { display: none; } -.layout-single-column .ui__header__links .button.button-secondary { +.app-body .ui__header__links .button.button-secondary { padding: 8px 15px; } -.layout-single-column .ui__header__links .button.button-secondary[href="/publish"] { +.app-body .ui__header__links .button.button-secondary[href="/publish"] { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { +.app-body .ui__header__links .button.button-secondary[href="/publish"]:is(:hover, :focus, :active) { background-color: var(--color-accent-focus); color: var(--color-accent-fg); } -.layout-single-column .column-link--logo { +.app-body .column-link--logo { margin-left: 4px; } -.layout-single-column .column-link.column-link--logo, -.layout-single-column .ui__header__logo { +.app-body .column-link.column-link--logo, +.app-body .ui__header__logo { display: inline-flex; padding: 0; width: 50px; @@ -2320,40 +2335,40 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-position: center; background-size: 32px auto; } -.layout-single-column .column-link.column-link--logo svg, -.layout-single-column .ui__header__logo svg { +.app-body .column-link.column-link--logo svg, +.app-body .ui__header__logo svg { display: none; } -.layout-single-column .navigation-panel__logo { +.app-body .navigation-panel__logo { margin-bottom: 10px; } -.layout-single-column .column-link:not(.column-link--logo) { +.app-body .column-link:not(.column-link--logo) { padding: 13px 20px 14px 13px; margin-left: 3px; font-weight: 500; font-size: 18px; overflow: visible; } -.layout-single-column .column-link--transparent:is(.active, .active:hover) { +.app-body .column-link--transparent:is(.active, .active:hover) { color: var(--color-content-fg); font-weight: bold; } -.layout-single-column .column-link--transparent:hover { +.app-body .column-link--transparent:hover { border-radius: 8px; padding-right: 20px; } -.layout-single-column .column-link--transparent span { +.app-body .column-link--transparent span { position: relative; } @media screen and (min-width:1175px) { - .layout-single-column .column-link:not(.column-link--logo) { + .app-body .column-link:not(.column-link--logo) { transition: all .2s; } - .layout-single-column .column-link:not(.column-link--logo)[href="/settings/preferences"] { + .app-body .column-link:not(.column-link--logo)[href="/settings/preferences"] { padding-bottom: 13px; } - .layout-single-column .column-link--transparent span::before { + .app-body .column-link--transparent span::before { content: " "; left: -44px; background-color: transparent; @@ -2365,21 +2380,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu z-index: -1; bottom: -12px; } - .layout-single-column .column-link--transparent:hover span::before { + .app-body .column-link--transparent:hover span::before { background-color: var(--color-accent-bg); } - .layout-single-column .column-link--transparent:is(.active, .active:hover) span::before { + .app-body .column-link--transparent:is(.active, .active:hover) span::before { background-color: var(--color-content-secondary-bg); } } @media (prefers-color-scheme: dark) { @media screen and (min-width:1175px) { - .layout-single-column .column-link--transparent:is(.active, .active:hover) span::before { + .app-body .column-link--transparent:is(.active, .active:hover) span::before { background-color: var(--color-content-secondary-bg); } } } -.layout-single-column .icon-with-badge__badge { +.app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); border-radius: 20px; @@ -2388,39 +2403,39 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border: 0; z-index: 1; } -.layout-single-column .compose-panel hr, .navigation-panel hr { +.app-body .compose-panel hr, .navigation-panel hr { display: none; } -.layout-single-column .column-link span { +.app-body .column-link span { vertical-align: middle; } -.layout-single-column .column-link .fa::before { +.app-body .column-link .fa::before { position: relative; top: 1px; } -.layout-single-column .column-link .fa.fa-cog { +.app-body .column-link .fa.fa-cog { transform: scale(1) translate(1px, -1px); } -.layout-single-column .list-panel { +.app-body .list-panel { padding: 5px 9px 50px 27px; margin: 0 0 5px; display: none; } -.layout-single-column .list-panel .icon { +.app-body .list-panel .icon { display: none; } -.layout-single-column .list-panel .column-link span::before { +.app-body .list-panel .column-link span::before { left: -15px; top: -10px; right: -15px; bottom: -10px; } -.layout-single-column .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { +.app-body .column-link[href="/lists"].active:has(+ .list-panel .column-link.active) span::before { background-color: var(--color-accent-bg); } @media screen and (min-width:1175px) { - .layout-single-column .column-link[href="/lists"]:is(.active, :hover) + .list-panel, - .layout-single-column .list-panel:hover { + .app-body .column-link[href="/lists"]:is(.active, :hover) + .list-panel, + .app-body .list-panel:hover { display: block; animation: fadein .5s 1; } @@ -2436,14 +2451,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } @media screen and (max-width:1174px) { - .layout-single-column .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { + .app-body .columns-area__panels__pane--navigational .columns-area__panels__pane__inner { width: 100vw; height: calc(4.2em + env(safe-area-inset-bottom)); bottom: 0; left: 0; z-index: 3; } - .layout-single-column .columns-area__panels__pane--navigational .navigation-panel { + .app-body .columns-area__panels__pane--navigational .navigation-panel { width: 100vw; height: 4.2em; padding-bottom: env(safe-area-inset-bottom); @@ -2453,8 +2468,8 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-top: 1px solid var(--color-lines); border-left: 0; } - .layout-single-column .navigation-panel :is(.column-link, .navigation-panel__legal), - .layout-single-column .column-link--transparent:is(.active, .active:hover, :active) { + .app-body .navigation-panel :is(.column-link, .navigation-panel__legal), + .app-body .column-link--transparent:is(.active, .active:hover, :active) { flex: 0 0 20vw; margin: 6px 0 8px; padding: 4px 0 3px; @@ -2466,63 +2481,63 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu box-sizing: border-box; background-color: transparent; } - .layout-single-column + .app-body .navigation-panel:has(> *:nth-child(4):last-child) :is(.column-link, .navigation-panel__legal) { flex: 50vw; } - .layout-single-column + .app-body .navigation-panel:has(> *:nth-child(5):last-child) :is(.column-link, .navigation-panel__legal) { flex: calc(100vw / 3); } - .layout-single-column + .app-body .navigation-panel:has(> *:nth-child(6):last-child) :is(.column-link, .navigation-panel__legal) { flex: 25vw; } - .layout-single-column .column-link--transparent:is(.active, .active:hover, :active) { + .app-body .column-link--transparent:is(.active, .active:hover, :active) { margin: 6px 0 8px; padding: 4px 0 3px; border-radius: 8px; border: 0; background-color: #ffffff; } - .layout-single-column .column-link__icon { + .app-body .column-link__icon { margin: 0; } - .layout-single-column .column-link span { + .app-body .column-link span { padding-left: .5em; } - .layout-single-column .columns-area__panels__main { + .app-body .columns-area__panels__main { width: calc(100% - 285px); margin-left: -285px; } - .layout-single-column .columns-area__panels { + .app-body .columns-area__panels { padding-bottom: 6em; } - .layout-single-column .columns-area__panels .navigation-panel__legal { + .app-body .columns-area__panels .navigation-panel__legal { margin: 0; padding: 0; } - .layout-single-column .columns-area__panels .navigation-panel__legal .column-link--transparent { + .app-body .columns-area__panels .navigation-panel__legal .column-link--transparent { height: calc(100% - 13px); box-sizing: border-box; border: 0; } - .layout-single-column .navigation-panel .flex-spacer { + .app-body .navigation-panel .flex-spacer { display: none; } } @media screen and (max-width:889px) { - .layout-single-column .columns-area__panels__main { + .app-body .columns-area__panels__main { width: 100%; margin-left: -55px; } } @media (prefers-color-scheme: dark) { @media screen and (max-width:1174px) { - .layout-single-column .column-link--transparent:is(.active, .active:hover, :active) { + .app-body .column-link--transparent:is(.active, .active:hover, :active) { background-color: var(--color-bg); } } @@ -2532,34 +2547,34 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ‘€ Account view --------------- */ -.layout-single-column .account__header { +.app-body .account__header { border-radius: 0 0 8px 8px; margin-bottom: 10px; background-color: var(--color-content-bg); border: 1px solid var(--color-lines); } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .account__header { + .app-body .account__header { margin-top: 15px; border-radius: 8px; } } @media screen and (max-width:889px) { - .layout-single-column .account__header { + .app-body .account__header { border-left: 0; border-right: 0; border-radius: 0; } } -.layout-single-column .account__header__image { +.app-body .account__header__image { height: 159px; background-color: var(--color-secondary-bg); border-bottom: 0; } -.layout-single-column .account__header__bar { +.app-body .account__header__bar { border: 0; } -.layout-single-column .account__header__bar .avatar .account__avatar { +.app-body .account__header__bar .avatar .account__avatar { border-radius: 50%; border-width: 5px; width: 100px !important; @@ -2567,77 +2582,77 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-color: var(--color-content-bg); border-color: var(--color-content-bg); } -.layout-single-column .account__header__tabs__name h1, -.layout-single-column .account__header__tabs__name h1 small { +.app-body .account__header__tabs__name h1, +.app-body .account__header__tabs__name h1 small { color: var(--color-content-fg); } -.layout-single-column .account__header__tabs__name h1 > span { +.app-body .account__header__tabs__name h1 > span { font-size: 18px; } -.layout-single-column .account__header__tabs__name h1 small { +.app-body .account__header__tabs__name h1 small { opacity: .7; } -.layout-single-column .account__header__tabs__name .icon-lock { +.app-body .account__header__tabs__name .icon-lock { vertical-align: bottom; } -.layout-single-column .account__header__content a { +.app-body .account__header__content a { color: var(--color-accent); text-decoration: none; } -.layout-single-column .account__header__content a:hover { +.app-body .account__header__content a:hover { text-decoration: underline; } -.layout-single-column .account__header__extra__links a strong { +.app-body .account__header__extra__links a strong { color: var(--color-content-fg-bold); } -.layout-single-column .account__header__account-note label { +.app-body .account__header__account-note label { margin-bottom: 0; } -.layout-single-column .account__header__account-note label, -.layout-single-column .account__header__account-note textarea::placeholder { +.app-body .account__header__account-note label, +.app-body .account__header__account-note textarea::placeholder { color: var(--color-content-fg-bold); opacity: .5; } -.layout-single-column .account__header__account-note textarea { +.app-body .account__header__account-note textarea { color: var(--color-content-fg); } -.layout-single-column .account__header__account-note textarea:focus { +.app-body .account__header__account-note textarea:focus { background-color: var(--color-accent-bg); } -.layout-single-column .account__header__badges .account-role { +.app-body .account__header__badges .account-role { border-radius: 8px; border-color: var(--color-accent); color: var(--color-accent); } -.layout-single-column .account-role svg { +.app-body .account-role svg { opacity: 1; } -.layout-single-column .account__header__extra__links a, -.layout-single-column .account__header__bio .account__header__content, -.layout-single-column .account__header__bio .account__header__fields dd { +.app-body .account__header__extra__links a, +.app-body .account__header__bio .account__header__content, +.app-body .account__header__bio .account__header__fields dd { color: var(--color-content-fg); } -.layout-single-column .account__header__bio .account__header__fields { +.app-body .account__header__bio .account__header__fields { background-color: var(--color-content-secondary-bg); border-radius: 8px; } @media (prefers-color-scheme: dark) { - .layout-single-column .account__header__bio .account__header__fields { + .app-body .account__header__bio .account__header__fields { background-color: var(--color-secondary-bg); } } -.layout-single-column .account__header__bio .account__header__fields:has(dl:only-child) { +.app-body .account__header__bio .account__header__fields:has(dl:only-child) { display: none; } -.layout-single-column .account__header__bio .account__header__fields dt { +.app-body .account__header__bio .account__header__fields dt { font-weight: bold; font-size: 12px; } -.layout-single-column .account__header__bio .account__header__fields :is(dl, .verified) { +.app-body .account__header__bio .account__header__fields :is(dl, .verified) { border-bottom: 0; position: relative; } -.layout-single-column .account__header__bio .account__header__fields dl:not(:last-child):after { +.app-body .account__header__bio .account__header__fields dl:not(:last-child):after { display: block; content: " "; height: 1px; @@ -2648,58 +2663,58 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu position: absolute; border-radius: 50px; } -.layout-single-column .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ +.app-body .account__header__bio .account__header__fields dl:nth-child(2) { /* Add a corner radius to the second profile field because we're hiding the Joined field */ border-top-left-radius: 8px; border-top-right-radius: 8px; margin-top: 0; } -.layout-single-column .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ +.app-body .account__header__bio .account__header__fields .verified + .verified { /* Fix double border between 2 successive verified fields */ margin-top: 0; border-top-width: 0; } -.layout-single-column .account__header__bio .account__header__fields .verified :is(a, dd) { +.app-body .account__header__bio .account__header__fields .verified :is(a, dd) { color: var(--color-accent); } -.layout-single-column .account__header__bio .account__header__fields :is(.verified dt, dt) { +.app-body .account__header__bio .account__header__fields :is(.verified dt, dt) { color: var(--color-content-fg); } -.layout-single-column .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ +.app-body .account__header__bio .account__header__fields .verified { /* Verified field tweak: restore default background and border */ border-top: 0; border-right: 0; border-left: 0; background: none; } -.layout-single-column .account__header__extra .account__header__fields .verified dd > span:first-child { +.app-body .account__header__extra .account__header__fields .verified dd > span:first-child { vertical-align: bottom; } -.layout-single-column .account__header__extra .account__header__fields .verified__mark { +.app-body .account__header__extra .account__header__fields .verified__mark { float: left; margin-right: 2px; } -.layout-single-column .account__header__bio .account__header__fields .verified:last-child { +.app-body .account__header__bio .account__header__fields .verified:last-child { border-bottom: 0; } @media screen and (max-width:889px) { - .layout-single-column .account-timeline__header + article :is(.status__wrapper, .account) { + .app-body .account-timeline__header + article :is(.status__wrapper, .account) { border-left: 0; border-right: 0; border-radius: 0; } } -.layout-single-column .follow-request-banner, -.layout-single-column .moved-account-banner { +.app-body .follow-request-banner, +.app-body .moved-account-banner { background-color: var(--color-accent-bg); } -.layout-single-column .moved-account-banner { +.app-body .moved-account-banner { margin-bottom: 10px; border-radius: 8px; } -.layout-single-column .follow-request-banner__message, -.layout-single-column .moved-account-banner__message { +.app-body .follow-request-banner__message, +.app-body .moved-account-banner__message { color: var(--color-content-fg); } -.layout-single-column .moved-account-banner__message { +.app-body .moved-account-banner__message { font-weight: bold; } @@ -2707,50 +2722,50 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ✨ Explore tab -------------- */ @media screen and (min-width:890px) { - .layout-single-column .account__section-headline + .scrollable article:last-child .status__wrapper { + .app-body .account__section-headline + .scrollable article:last-child .status__wrapper { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } } /* #️⃣ Trending hashtags */ -.layout-single-column .trends__item__sparkline path:last-child { +.app-body .trends__item__sparkline path:last-child { stroke: var(--color-accent) !important; } -.layout-single-column .trends__item__sparkline path:first-child { +.app-body .trends__item__sparkline path:first-child { fill: var(--color-accent) !important; fill-opacity: 0.2 !important; } -.layout-single-column .explore__links { +.app-body .explore__links { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); overflow: hidden; margin-top: -1px; } @media screen and (max-width:889px) { - .layout-single-column .explore__links { + .app-body .explore__links { border-left: 0; border-right: 0; } } -.layout-single-column .columns-area__panels__main .trends__item { +.app-body .columns-area__panels__main .trends__item { background-color: var(--color-content-bg); border-bottom: 2px solid var(--color-content-secondary-bg); } -.layout-single-column .explore__links .trends__item:last-child { +.app-body .explore__links .trends__item:last-child { border-bottom: 0; } -.layout-single-column .trends__item__name, -.layout-single-column .trends__item__current { +.app-body .trends__item__name, +.app-body .trends__item__current { color: var(--color-fg-muted); } -.layout-single-column .trends__item__name a { +.app-body .trends__item__name a { color: var(--color-fg); } /* Hashtag header */ -.layout-single-column .hashtag-header { +.app-body .hashtag-header { font-size: 15px; padding: 22px 20px 24px; color: var(--color-content-fg); @@ -2758,13 +2773,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-top: 1px solid var(--color-lines); border-bottom: 0; } -.layout-single-column .hashtag-header__header { +.app-body .hashtag-header__header { margin-bottom: 0; } -.layout-single-column .hashtag-header__header h1 { +.app-body .hashtag-header__header h1 { color: var(--color-content-fg); } -.layout-single-column .hashtag-header .hashtag-header__header + div { +.app-body .hashtag-header .hashtag-header__header + div { color: var(--color-content-fg); font-size: 85%; opacity: .8; @@ -2773,34 +2788,34 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .hashtag-header { + .app-body .hashtag-header { margin-top: 15px; } } @media screen and (min-width:890px) { - .layout-single-column .hashtag-header { + .app-body .hashtag-header { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } - .layout-single-column .hashtag-header .hashtag-header__header button { + .app-body .hashtag-header .hashtag-header__header button { transform: translate(0, 8px); } } /* Account recommendations (For You Tab + User directory */ -.layout-single-column .scrollable .account-card { +.app-body .scrollable .account-card { margin: 0 0 10px; background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); } @media screen and (max-width:889px) { - .layout-single-column .scrollable .account-card { + .app-body .scrollable .account-card { margin: 0 10px 10px; } } -.layout-single-column .account-card__header { +.app-body .account-card__header { padding: 0; border-top-left-radius: 8px; border-top-right-radius: 8px; @@ -2809,163 +2824,163 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu height: 128px; overflow: hidden; } -.layout-single-column .scrollable .account-card__bio:after { +.app-body .scrollable .account-card__bio:after { background: linear-gradient(270deg, var(--color-content-bg), transparent); } -.layout-single-column .account-card__title__avatar .account__avatar { +.app-body .account-card__title__avatar .account__avatar { border: 0; border-radius: 50%; overflow: visible; } -.layout-single-column .account-card__title__avatar img { +.app-body .account-card__title__avatar img { border: 0; border-radius: 50%; box-shadow: 0 0 0 3px var(--color-content-bg); } -.layout-single-column .account-card__title .display-name bdi, -.layout-single-column .account-card__counters__item, -.layout-single-column .account-card__counters__item small { +.app-body .account-card__title .display-name bdi, +.app-body .account-card__counters__item, +.app-body .account-card__counters__item small { color: var(--color-content-fg-bold); } -.layout-single-column .account-card__counters__item small { +.app-body .account-card__counters__item small { opacity: .7; } -.layout-single-column .account-card__bio a { +.app-body .account-card__bio a { color: var(--color-accent); } -.layout-single-column .filter-form { +.app-body .filter-form { background-color: var(--color-accent-bg); border-radius: 8px; margin-bottom: 10px; } -.layout-single-column .filter-form__column { +.app-body .filter-form__column { padding: 10px 15px; } /* πŸ“° Trending stories */ -.layout-single-column .story { +.app-body .story { background-color: var(--color-content-bg); transition: background-color .2s; } -.layout-single-column .story:not(:last-child) { +.app-body .story:not(:last-child) { border-bottom: 2px solid var(--color-content-secondary-separator); } -.layout-single-column .story, -.layout-single-column .story__details__title { +.app-body .story, +.app-body .story__details__title { color: var(--color-content-fg); } -.layout-single-column .story:hover { +.app-body .story:hover { background-color: var(--color-content-bg-focus); } -.layout-single-column .story__details__publisher, -.layout-single-column .story__details__shared { +.app-body .story__details__publisher, +.app-body .story__details__shared { color: var(--color-fg); } -.layout-single-column .story .story__details__publisher, -.layout-single-column .story .story__details__shared { +.app-body .story .story__details__publisher, +.app-body .story .story__details__shared { transition: all .3s; } -.layout-single-column .story:is(:active, :focus, :hover) :is(.story__details__publisher, .story__details__shared) { +.app-body .story:is(:active, :focus, :hover) :is(.story__details__publisher, .story__details__shared) { color: var(--color-accent); } -.layout-single-column .story.expanded .story__thumbnail { +.app-body .story.expanded .story__thumbnail { margin: 0 0 -25px; } -.layout-single-column .story.expanded .story__thumbnail img { +.app-body .story.expanded .story__thumbnail img { width: calc(100% + 30px); margin: -15px -15px 0 -15px; border-radius: 0 0 0 0; } /* πŸ” Search field and search results */ -.layout-single-column .search { +.app-body .search { margin-bottom: 10px; } -.layout-single-column .search__input { +.app-body .search__input { border-radius: 8px; background-color: var(--color-accent-bg); color: var(--color-content-fg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .search__input::placeholder, -.layout-single-column .compose-form .spoiler-input__input::placeholder { +.app-body .search__input::placeholder, +.app-body .compose-form .spoiler-input__input::placeholder { font-weight: 500; color: var(--color-accent); } -.layout-single-column .search__input:focus { +.app-body .search__input:focus { border: 1px solid var(--color-accent); } -.layout-single-column .search__icon .icon { +.app-body .search__icon .icon { margin-right: 4px; transform: scale(.9); } -.layout-single-column .compose-panel .icon-search, -.layout-single-column .compose-panel .icon-search.active, -.layout-single-column .explore__search-header .icon-search { +.app-body .compose-panel .icon-search, +.app-body .compose-panel .icon-search.active, +.app-body .explore__search-header .icon-search { background-image: var(--icon-search-active); } -.layout-single-column .compose-panel .icon-search.active, -.layout-single-column .search__icon .icon-search.active { +.app-body .compose-panel .icon-search.active, +.app-body .search__icon .icon-search.active { opacity: 1; z-index: 1; } -.layout-single-column .explore__search-results { +.app-body .explore__search-results { background-color: transparent; overflow: hidden; } -.layout-single-column .explore__search-header { +.app-body .explore__search-header { background-color: transparent; } -.layout-single-column .explore__search-results .account { +.app-body .explore__search-results .account { padding-top: 16px; } -.layout-single-column .explore__search-results article:last-child > .account { +.app-body .explore__search-results article:last-child > .account { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .explore__search-results .trends__item { +.app-body .explore__search-results .trends__item { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .explore__search-results article:first-child > .trends__item, -.layout-single-column .search-results__section > .trends__item:first-child, -.layout-single-column .search-results__section > .account:first-child { +.app-body .explore__search-results article:first-child > .trends__item, +.app-body .search-results__section > .trends__item:first-child, +.app-body .search-results__section > .account:first-child { border-top: 1px solid var(--color-lines); } -.layout-single-column .explore__search-results article:last-child > .trends__item, -.layout-single-column .search-results__section > .trends__item:last-child, -.layout-single-column .search-results__section > .account:last-child { +.app-body .explore__search-results article:last-child > .trends__item, +.app-body .search-results__section > .trends__item:last-child, +.app-body .search-results__section > .account:last-child { border-bottom: 1px solid var(--color-lines); } -.layout-single-column .search-results__section { +.app-body .search-results__section { background-color: var(--color-bg); border-bottom: 0; } -.layout-single-column .search-results__section__header { +.app-body .search-results__section__header { background-color: var(--color-content-secondary-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); border-bottom: 0; color: var(--color-content-fg); } -.layout-single-column .search-results__section__header button { +.app-body .search-results__section__header button { color: var(--color-accent); } @media screen and (min-width:890px) { - .layout-single-column .explore__search-results + .app-body .explore__search-results :is(article:last-child > .account, article:last-child > .trends__item, .load-more:last-child), - .layout-single-column .search-results__section:last-child > :is(.trends__item, .account):last-child { + .app-body .search-results__section:last-child > :is(.trends__item, .account):last-child { border-radius: 0 0 8px 8px; } } -.layout-single-column .account .account__details > span { +.app-body .account .account__details > span { color: var(--color-content-fg); } -.layout-single-column .account .account__details .verified-badge { +.app-body .account .account__details .verified-badge { color: var(--color-accent); } -.layout-single-column .account .account__details .verified-badge span { +.app-body .account .account__details .verified-badge span { font-weight: 500; } @keyframes fadein-short { @@ -2978,7 +2993,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu opacity: 1; } } -.layout-single-column .search__popout { +.app-body .search__popout { background-color: var(--color-content-bg); border-radius: 8px; box-shadow: none; @@ -2986,49 +3001,49 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border: 1px solid var(--color-lines); animation: .3s fadein-short 1; } -.layout-single-column .search__popout h4 { +.app-body .search__popout h4 { font-weight: bold; } -.layout-single-column .search__popout h4, -.layout-single-column .search__popout__menu__message, -.layout-single-column .search__popout__menu__item { +.app-body .search__popout h4, +.app-body .search__popout__menu__message, +.app-body .search__popout__menu__item { color: var(--color-content-fg); } -.layout-single-column .search__popout__menu__item { +.app-body .search__popout__menu__item { align-items: initial; } -.layout-single-column .search__popout__menu__item mark { +.app-body .search__popout__menu__item mark { color: var(--color-content-fg-bold); } -.layout-single-column .search__popout__menu__item .icon-button:is(:active, :focus, :hover) { +.app-body .search__popout__menu__item .icon-button:is(:active, :focus, :hover) { background-color: transparent; color: var(--color-accent-fg); } -.layout-single-column .search__popout__menu__item:is(.selected, :active, :focus, :hover), -.layout-single-column .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark { +.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover), +.app-body .search__popout__menu__item:is(.selected, :active, :focus, :hover) mark { background-color: var(--color-accent); color: var(--color-accent-fg); } @media screen and (max-width:1174px) { - .layout-single-column .search { + .app-body .search { margin-bottom: 0; } - .layout-single-column .explore__search-header { + .app-body .explore__search-header { padding-top: 2px; } - .layout-single-column .search__input { + .app-body .search__input { padding: 13px; } - .layout-single-column .explore__search-header { + .app-body .explore__search-header { padding: 10px 0; } - .layout-single-column .search__icon .icon { + .app-body .search__icon .icon { top: 11px; } } @media screen and (max-width:889px) { - .layout-single-column .explore__search-header { + .app-body .explore__search-header { padding: 10px; } } @@ -3036,57 +3051,57 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* Dismissable banners */ -.layout-single-column .dismissable-banner { +.app-body .dismissable-banner { background-color: var(--color-accent); box-shadow: 0 5px var(--color-content-bg); border-radius: 0; border: 1px solid var(--color-lines); margin: 0; } -.layout-single-column .explore__links .dismissable-banner { +.app-body .explore__links .dismissable-banner { border: 0; } @media screen and (max-width:889px) { - .layout-single-column .dismissable-banner, - .layout-single-column .explore__links .dismissable-banner { + .app-body .dismissable-banner, + .app-body .explore__links .dismissable-banner { border-left: 0; border-right: 0; } } @media screen and (min-width:890px) and (max-width:1174px) { - .layout-single-column .dismissable-banner { + .app-body .dismissable-banner { margin-top: 10px; } - .layout-single-column .explore__links .dismissable-banner { + .app-body .explore__links .dismissable-banner { margin-top: 0; } } -.layout-single-column .dismissable-banner__message, -.layout-single-column .dismissable-banner__action .icon-button { +.app-body .dismissable-banner__message, +.app-body .dismissable-banner__action .icon-button { color: var(--color-accent-fg); } -.layout-single-column .dismissable-banner__message h1 { +.app-body .dismissable-banner__message h1 { color: var(--color-accent-fg); margin-top: 10px; } -.layout-single-column .dismissable-banner__message__actions__wrapper { +.app-body .dismissable-banner__message__actions__wrapper { flex-flow: row-reverse; } -.layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { +.app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: linear-gradient(to bottom, rgba(247, 105, 2, 0.8), rgba(247, 105, 2, 0.5)); padding-left: 10px; padding-right: 10px; } -.layout-single-column .dismissable-banner__background-image { +.app-body .dismissable-banner__background-image { display: none; } -.layout-single-column .dismissable-banner__message__actions .button, -.layout-single-column .dismissable-banner__message__actions .button.button-tertiary { +.app-body .dismissable-banner__message__actions .button, +.app-body .dismissable-banner__message__actions .button.button-tertiary { line-height: 28px; padding: 6px 17px; } @media (prefers-color-scheme: dark) { - .layout-single-column .dismissable-banner:has(.dismissable-banner__message > img:first-child) { + .app-body .dismissable-banner:has(.dismissable-banner__message > img:first-child) { background: linear-gradient(to top, rgba(230, 137, 51, .5), rgba(230, 137, 51, .3)); } } @@ -3095,16 +3110,16 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ”” Notifications ---------------- */ -.layout-single-column .status.muted +.app-body .status.muted :is(.status__content, .status__content a, .status__content p, .status__display-name strong), -.layout-single-column .attachment-list__list a { +.app-body .attachment-list__list a { color: var(--color-content-fg-muted); } -.layout-single-column .notification.unread::before, -.layout-single-column .status__wrapper.unread::before { +.app-body .notification.unread::before, +.app-body .status__wrapper.unread::before { background-color: var(--color-accent); width: 8px; border: 0; @@ -3115,35 +3130,35 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu left: 5px; z-index: 1; } -.layout-single-column .notification__message { +.app-body .notification__message { padding: 12px 12px 5px; background-color: var(--color-content-bg); color: var(--color-content-fg-bold); transition: all .3s; } -.layout-single-column .notification__display-name { +.app-body .notification__display-name { font-weight: bold; } -.layout-single-column .notification__report { +.app-body .notification__report { background-color: var(--color-content-bg); border-bottom: 0; padding-top: 10px; gap: 15px; } -.layout-single-column .notification__report__details { +.app-body .notification__report__details { color: var(--color-content-fg); } @media screen and (min-width:889px) { - .layout-single-column .notification__message { + .app-body .notification__message { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } - .layout-single-column .notification__report { + .app-body .notification__report { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } } -.layout-single-column .notification__message .icon { +.app-body .notification__message .icon { color: var(--color-accent); width: 18px; margin-left: 38px; @@ -3151,14 +3166,14 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu background-position: center right; } @media screen and (max-width:889px) { - .layout-single-column .notification__message .icon { + .app-body .notification__message .icon { margin-left: 34px; } } -.layout-single-column .notification .status__wrapper { +.app-body .notification .status__wrapper { padding-top: 0; } -.layout-single-column +.app-body :is(.notification-favourite, .notification-reblog, .notification-poll, @@ -3166,22 +3181,22 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu .status__action-bar { display: none; } -.layout-single-column .account { +.app-body .account { background-color: var(--color-content-bg); border-bottom: 0; padding-left: 22px; padding-top: 4px; } -.layout-single-column .explore__search-results .account { +.app-body .explore__search-results .account { padding-top: 16px; } -.layout-single-column +.app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) .display-name__account { display: block; } -.layout-single-column +.app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) .display-name { @@ -3189,94 +3204,94 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } @media screen and (min-width:890px) { - .layout-single-column .account { + .app-body .account { border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } - .layout-single-column .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 32px; padding-right: 22px; } } @media screen and (max-width:889px) { - .layout-single-column .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { + .app-body .notification .account:has(.account__wrapper > .account__relationship > button:nth-child(2)) { padding-left: 27px; } } @media screen and (max-width:1174px) { - .layout-single-column .account { + .app-body .account { padding-left: 18px; } } -.layout-single-column .notification .account__relationship .icon-button { +.app-body .notification .account__relationship .icon-button { padding: 5px; border-radius: 8px; } -.layout-single-column .notification .account__relationship .icon-button:first-child { +.app-body .notification .account__relationship .icon-button:first-child { background-color: rgba(121, 189, 154, 0.3); } -.layout-single-column .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) { +.app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) { background-color: #79bd9a; } -.layout-single-column .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) .icon-check { +.app-body .notification .account__relationship .icon-button:first-child:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } -.layout-single-column .notification .account__relationship .icon-button:last-child { +.app-body .notification .account__relationship .icon-button:last-child { background-color: rgba(223, 64, 90, 0.3); } -.layout-single-column .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) { +.app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) { background-color: #df405a; } -.layout-single-column .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) .icon-times { +.app-body .notification .account__relationship .icon-button:last-child:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } /* πŸ“‹ Lists tab */ -.layout-single-column .column-inline-form { +.app-body .column-inline-form { background-color: var(--color-accent-bg); border: 1px solid var(--color-accent-lines); border-radius: 0 0 8px 8px; margin-bottom: 10px; } @media screen and (max-width:1174px) { - .layout-single-column .column-inline-form { + .app-body .column-inline-form { margin-top: 10px; } } @media screen and (max-width:889px) { - .layout-single-column .column-inline-form { + .app-body .column-inline-form { margin-left: 10px; margin-right: 10px; } } -.layout-single-column .column-inline-form label :is(input, input:focus) { +.app-body .column-inline-form label :is(input, input:focus) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-radius: 8px; } -.layout-single-column .column-inline-form label input:focus { +.app-body .column-inline-form label input:focus { box-shadow: 0 0 0 1px var(--color-accent); } -.layout-single-column :is(.column-subheading, .columns-area__panels__main .column-link) { +.app-body :is(.column-subheading, .columns-area__panels__main .column-link) { background-color: var(--color-content-bg); color: var(--color-fg); } -.layout-single-column .item-list .column-subheading { +.app-body .item-list .column-subheading { color: var(--color-fg-muted); border: 1px solid var(--color-lines); border-bottom: 0; border-radius: 8px 8px 0 0; } @media screen and (max-width:889px) { - .layout-single-column .item-list .column-subheading { + .app-body .item-list .column-subheading { border-left: 0; border-right: 0; border-radius: 0; } } -.layout-single-column .columns-area__panels__main .column-link { +.app-body .columns-area__panels__main .column-link { margin-left: 0; width: 100%; border-left: 1px solid var(--color-lines); @@ -3284,33 +3299,33 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu border-bottom: 2px solid var(--color-content-secondary-separator); box-sizing: border-box; } -.layout-single-column .columns-area__panels__main .column-link:hover { +.app-body .columns-area__panels__main .column-link:hover { background-color: var(--color-content-secondary-bg); color: var(--color-accent); } -.layout-single-column .columns-area__panels__main article:last-child .column-link { +.app-body .columns-area__panels__main article:last-child .column-link { border-bottom: 1px solid var(--color-lines); border-radius: 0 0 8px 8px; } @media screen and (max-width:889px) { - .layout-single-column .columns-area__panels__main .column-link { + .app-body .columns-area__panels__main .column-link { border-left: 0; border-right: 0; } - .layout-single-column .columns-area__panels__main article:last-child .column-link { + .app-body .columns-area__panels__main article:last-child .column-link { border-radius: 0; } } /* List adder dialog */ -.layout-single-column :is(.list-adder, .list-adder__account, .list-adder__lists) { +.app-body :is(.list-adder, .list-adder__account, .list-adder__lists) { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .list-adder__account { +.app-body .list-adder__account { margin-top: 12px; } -.layout-single-column .list-adder .column-inline-form { +.app-body .list-adder .column-inline-form { border-radius: 0; } .list-adder .list { @@ -3319,69 +3334,69 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* βž• Follow requests */ -.layout-single-column #Follow-requests { +.app-body #Follow-requests { margin-bottom: 0; z-index: 0; } -.layout-single-column .account-authorize__wrapper { +.app-body .account-authorize__wrapper { margin: 0; border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); border-bottom: 1px solid var(--color-lines); } -.layout-single-column article:last-child > .account-authorize__wrapper, -.layout-single-column article:last-child > .account-authorize__wrapper .account--panel { +.app-body article:last-child > .account-authorize__wrapper, +.app-body article:last-child > .account-authorize__wrapper .account--panel { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .account-authorize { +.app-body .account-authorize { background-color: var(--color-content-bg); padding: 20px } -.layout-single-column .account--panel { +.app-body .account--panel { background-color: var(--color-content-bg); border: 0; padding: 0 5px; } -.layout-single-column .account__header__content { +.app-body .account__header__content { color: var(--color-content-fg); } -.layout-single-column .account--panel__button { +.app-body .account--panel__button { padding: 0 5px 12px 5px; } -.layout-single-column .account--panel__button .icon-button { +.app-body .account--panel__button .icon-button { padding: 10px; box-sizing: border-box; width: 100%; border-radius: 8px; transition: all .3s; } -.layout-single-column .account--panel button .icon-check { +.app-body .account--panel button .icon-check { background-image: var(--icon-check); } -.layout-single-column .account--panel button:is(:active, :focus, :hover) .icon-check { +.app-body .account--panel button:is(:active, :focus, :hover) .icon-check { background-image: var(--icon-check-inv); } -.layout-single-column .account--panel__button:first-child .icon-button { +.app-body .account--panel__button:first-child .icon-button { background-color: rgba(121, 189, 154, 0.3); } -.layout-single-column .account--panel__button:first-child .icon-button:is(:hover, :active) { +.app-body .account--panel__button:first-child .icon-button:is(:hover, :active) { background-color: #79bd9a; } -.layout-single-column .account--panel button .icon-times { +.app-body .account--panel button .icon-times { background-image: var(--icon-reject); } -.layout-single-column .account--panel button:is(:active, :focus, :hover) .icon-times { +.app-body .account--panel button:is(:active, :focus, :hover) .icon-times { background-image: var(--icon-reject-inv); } -.layout-single-column .account--panel__button:nth-child(2) .icon-button { +.app-body .account--panel__button:nth-child(2) .icon-button { background-color: rgba(223, 64, 90, 0.3); } -.layout-single-column .account--panel__button:nth-child(2) .icon-button:is(:hover, :active) { +.app-body .account--panel__button:nth-child(2) .icon-button:is(:hover, :active) { background-color: #df405a; } @media screen and (max-width:1174px) { - .layout-single-column #Follow-requests + .column-back-button--slim .column-back-button { + .app-body #Follow-requests + .column-back-button--slim .column-back-button { position: absolute; right: 0; margin: 0; @@ -3389,7 +3404,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu } } @media screen and (max-width:889px) { - .layout-single-column .account-authorize__wrapper { + .app-body .account-authorize__wrapper { border-left: 0; border-right: 0; } @@ -3398,126 +3413,126 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* ⏺️ Other UI components : buttons, toggles, ... ----------------------------------------- */ -.layout-single-column .button, -.layout-single-column .account__header__tabs__buttons .icon-button { +.app-body .button, +.app-body .account__header__tabs__buttons .icon-button { border-radius: 8px; } -.layout-single-column .button, -.layout-single-column .button.logo-button, -.layout-single-column .rules-list li:before, -.layout-single-column .icon-with-badge__badge { +.app-body .button, +.app-body .button.logo-button, +.app-body .rules-list li:before, +.app-body .icon-with-badge__badge { background-color: var(--color-accent); color: var(--color-accent-fg); transition: all .2s; } -.layout-single-column .button:disabled, -.layout-single-column .button.disabled { +.app-body .button:disabled, +.app-body .button.disabled { opacity: .7; } -.layout-single-column .text-icon-button.active, -.layout-single-column .button.button-tertiary, -.layout-single-column .account__header__fields a, -.layout-single-column .account__header__bio .account__header__fields a, -.layout-single-column .reply-indicator__content a.unhandled-link, -.layout-single-column .status__content a, -.layout-single-column .status__content a.hashtag, -.layout-single-column .status__content a.unhandled-link, -.layout-single-column .column-back-button, -.layout-single-column .about__section__title, -.layout-single-column .prose a, -.layout-single-column .column-link--transparent.active, -.layout-single-column .column-header > .column-header__back-button, -.layout-single-column .column-header__back-button, -.layout-single-column .interaction-modal__icon, -.layout-single-column .status__content a.mention, -.layout-single-column .status__content__read-more-button, -.layout-single-column .link-button, -.layout-single-column .translate-button button, -.layout-single-column .status__content__translate-button, -.layout-single-column .status__action-bar__dropdown .icon-button.active, -.layout-single-column .account__relationship .icon-button.active, -.layout-single-column .account__header__tabs__buttons .icon-button.active, -.layout-single-column .text-btn, -.layout-single-column .detailed-status__action-bar-dropdown .icon-button, -.layout-single-column .notification-bar-action { +.app-body .text-icon-button.active, +.app-body .button.button-tertiary, +.app-body .account__header__fields a, +.app-body .account__header__bio .account__header__fields a, +.app-body .reply-indicator__content a.unhandled-link, +.app-body .status__content a, +.app-body .status__content a.hashtag, +.app-body .status__content a.unhandled-link, +.app-body .column-back-button, +.app-body .about__section__title, +.app-body .prose a, +.app-body .column-link--transparent.active, +.app-body .column-header > .column-header__back-button, +.app-body .column-header__back-button, +.app-body .interaction-modal__icon, +.app-body .status__content a.mention, +.app-body .status__content__read-more-button, +.app-body .link-button, +.app-body .translate-button button, +.app-body .status__content__translate-button, +.app-body .status__action-bar__dropdown .icon-button.active, +.app-body .account__relationship .icon-button.active, +.app-body .account__header__tabs__buttons .icon-button.active, +.app-body .text-btn, +.app-body .detailed-status__action-bar-dropdown .icon-button, +.app-body .notification-bar-action { color: var(--color-accent); } -.layout-single-column .icon-button, -.layout-single-column .icon-button.inverted, -.layout-single-column .reply-indicator__content .status__content__spoiler-link, -.layout-single-column .status__content .status__content__spoiler-link { +.app-body .icon-button, +.app-body .icon-button.inverted, +.app-body .reply-indicator__content .status__content__spoiler-link, +.app-body .status__content .status__content__spoiler-link { color: var(--color-content-fg); } -.layout-single-column .reply-indicator__content .status__content__spoiler-link, -.layout-single-column .status__content .status__content__spoiler-link { +.app-body .reply-indicator__content .status__content__spoiler-link, +.app-body .status__content .status__content__spoiler-link { background-color: var(--color-accent-bg); border-radius: 8px; } -.layout-single-column .account__header__tabs__buttons .icon-button { +.app-body .account__header__tabs__buttons .icon-button { padding: 6px; border: 0; color: var(--color-content-fg); background-color: var(--color-content-secondary-bg); } -.layout-single-column .account__header__tabs__buttons .icon-button:hover { +.app-body .account__header__tabs__buttons .icon-button:hover { background-color: var(--color-accent-bg); color: var(--color-accent); } -.layout-single-column .icon-button:is(:active, :focus, :hover) { +.app-body .icon-button:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); color: var(--color-accent); } -.layout-single-column .language-dropdown__dropdown { +.app-body .language-dropdown__dropdown { background-color: var(--color-content-bg); border-radius: 8px; border: 1px solid var(--color-lines); box-shadow: 0 0 5px rgba(0, 0, 0, .15); } -.layout-single-column .language-dropdown__dropdown__results__item { +.app-body .language-dropdown__dropdown__results__item { border-radius: 8px; } -.layout-single-column .language-dropdown__dropdown__results__item.active, -.layout-single-column .language-dropdown__dropdown__results__item.active:hover { +.app-body .language-dropdown__dropdown__results__item.active, +.app-body .language-dropdown__dropdown__results__item.active:hover { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { +.app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } -.layout-single-column .language-dropdown__dropdown__results__item__native-name { +.app-body .language-dropdown__dropdown__results__item__native-name { font-weight: bold; } -.layout-single-column .language-dropdown__dropdown__results__item__common-name { +.app-body .language-dropdown__dropdown__results__item__common-name { opacity: .7; } -.layout-single-column +.app-body :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-content-fg); } -.layout-single-column +.app-body .language-dropdown__dropdown__results__item:is(.active, .active:hover) :is(.language-dropdown__dropdown__results__item__common-name, .language-dropdown__dropdown__results__item__native-name) { color: var(--color-accent-fg); } -.layout-single-column +.app-body .language-dropdown__dropdown__results__item:is(:active, :focus, :hover) :is(.language-dropdown__dropdown__results__item__native-name, .language-dropdown__dropdown__results__item__common-name) { color: var(--color-accent); } -.layout-single-column .button:not(.button-secondary):is(:active, :focus, :hover), -.layout-single-column .button.button-tertiary:is(:active, :focus, :hover), -.layout-single-column .button.logo-button:is(:active, :focus, :hover) { +.app-body .button:not(.button-secondary):is(:active, :focus, :hover), +.app-body .button.button-tertiary:is(:active, :focus, :hover), +.app-body .button.logo-button:is(:active, :focus, :hover) { background-color: var(--color-accent-focus); } /* ⏺️ Toggles */ -.layout-single-column .setting-toggle__label { +.app-body .setting-toggle__label { vertical-align: top; } -.layout-single-column .react-toggle-track { +.app-body .react-toggle-track { background-color: var(--color-accent-lines); box-shadow: 0 0 0 20px var(--color-accent-lines) inset, @@ -3525,126 +3540,126 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu 0 0 0 1px var(--color-accent-lines) inset, 0 0 0 1px var(--color-accent-lines) inset } -.layout-single-column .react-toggle-thumb { +.app-body .react-toggle-thumb { border: 0; } -.layout-single-column .react-toggle.react-toggle--checked .react-toggle-track, -.layout-single-column .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, -.layout-single-column .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { +.app-body .react-toggle.react-toggle--checked .react-toggle-track, +.app-body .react-toggle.react-toggle--checked:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track, +.app-body .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-accent); } -.layout-single-column .react-toggle--checked .react-toggle-thumb { +.app-body .react-toggle--checked .react-toggle-thumb { border-color: var(--color-accent); } -.layout-single-column .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { +.app-body .react-toggle:is(:hover,:focus-within):not(.react-toggle--disabled) .react-toggle-track { background-color: var(--color-accent-focus); } /* ⏺️ Radio buttons */ -.layout-single-column .radio-button { +.app-body .radio-button { color: var(--color-content-fg); } -.layout-single-column .radio-button__input { +.app-body .radio-button__input { border-width: 2px; border-color: var(--color-content-fg-muted); background-color: var(--color-content-bg); } -.layout-single-column .radio-button__input.checked { +.app-body .radio-button__input.checked { border-color: var(--color-accent); background-color: var(--color-accent); } -.layout-single-column .dropdown-menu { +.app-body .dropdown-menu { border: 1px solid var(--color-lines); border-radius: 8px; } -.layout-single-column .dropdown-menu, -.layout-single-column .dropdown-menu__container__header, -.layout-single-column .dropdown-menu__item.edited-timestamp__history__item, -.layout-single-column .dropdown-menu__item :is(a, button) { +.app-body .dropdown-menu, +.app-body .dropdown-menu__container__header, +.app-body .dropdown-menu__item.edited-timestamp__history__item, +.app-body .dropdown-menu__item :is(a, button) { background-color: var(--color-content-bg); color: var(--color-content-fg); border-color: var(--color-lines); } -.layout-single-column .dropdown-menu__item a, -.layout-single-column .dropdown-menu__arrow:before { +.app-body .dropdown-menu__item a, +.app-body .dropdown-menu__arrow:before { background-color: var(--color-content-bg); color: var(--color-content-fg); border: 0; } -.layout-single-column .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) { +.app-body .dropdown-menu__item :is(a, button):is(:active, :focus, :hover) { background: var(--color-accent); color: var(--color-accent-fg); outline: 0; } -.layout-single-column .dropdown-menu__separator { +.app-body .dropdown-menu__separator { border-color: var(--color-content-secondary-separator); } -.layout-single-column .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active), -.layout-single-column .privacy-dropdown__option:is(.active, .active:hover, :hover) { +.app-body .privacy-dropdown.active :is(.privacy-dropdown__value, .privacy-dropdown__value.active), +.app-body .privacy-dropdown__option:is(.active, .active:hover, :hover) { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content, -.layout-single-column .privacy-dropdown__option.active .privacy-dropdown__option__content strong, -.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content, -.layout-single-column .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, -.layout-single-column .privacy-dropdown.active .privacy-dropdown__value.active .icon-button, -.layout-single-column .privacy-dropdown .icon-button.inverted.active { +.app-body .privacy-dropdown__option.active .privacy-dropdown__option__content, +.app-body .privacy-dropdown__option.active .privacy-dropdown__option__content strong, +.app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content, +.app-body .privacy-dropdown__option:hover .privacy-dropdown__option__content strong, +.app-body .privacy-dropdown.active .privacy-dropdown__value.active .icon-button, +.app-body .privacy-dropdown .icon-button.inverted.active { background-color: var(--color-accent); color: var(--color-accent-fg); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-globe { background-image: var(--icon-globe-visibility-inv); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-unlock { background-image: var(--icon-unlock-inv); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-lock { background-image: var(--icon-lock-inv); } -.layout-single-column .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { +.app-body .privacy-dropdown__option:is(:hover, .active, .active:hover) .icon-at { background-image: var(--icon-at-inv); } -.layout-single-column .button.button-tertiary:is(.button--confirmation, .button--destructive) { +.app-body .button.button-tertiary:is(.button--confirmation, .button--destructive) { background-color: transparent; } -.layout-single-column .button.button-tertiary.button--confirmation { +.app-body .button.button-tertiary.button--confirmation { color: #4e8a6b; background-color: rgba(121, 189, 154, 0.3); } -.layout-single-column .button.button-tertiary.button--destructive { +.app-body .button.button-tertiary.button--destructive { color: #df405a; background-color: rgba(223, 64, 90, 0.3); } -.layout-single-column .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { +.app-body .button.button-tertiary.button--confirmation:is(:active, :focus, :hover) { background-color: #79bd9a; color: #ffffff; } -.layout-single-column .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { +.app-body .button.button-tertiary.button--destructive:is(:active, :focus, :hover) { background-color: #df405a; color: #ffffff; } @media (prefers-color-scheme: dark) { - .layout-single-column .button.button-tertiary.button--confirmation { + .app-body .button.button-tertiary.button--confirmation { color: #72cb9d; } - .layout-single-column .button.button-tertiary.button--destructive { + .app-body .button.button-tertiary.button--destructive { color: #f3637b; } } -.layout-single-column .app-body +.app-body .app-body :is(.block-modal__cancel-button, .confirmation-modal__cancel-button, .confirmation-modal__secondary-button, .mute-modal__cancel-button) { background-color: transparent; } -.layout-single-column .status__content a.hashtag { +.app-body .status__content a.hashtag { color: var(--color-accent); } @@ -3652,102 +3667,102 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu /* πŸ–±οΈ Interaction modals --------------------- */ -.layout-single-column .modal-root__modal { +.app-body .modal-root__modal { border: 1px solid var(--color-lines); } -.layout-single-column .interaction-modal { +.app-body .interaction-modal { background-color: var(--color-content-bg); } -.layout-single-column .interaction-modal, -.layout-single-column .interaction-modal__lead h3 { +.app-body .interaction-modal, +.app-body .interaction-modal__lead h3 { color: var(--color-content-fg); } -.layout-single-column .interaction-modal__lead p, -.layout-single-column .interaction-modal__choices__choice p { +.app-body .interaction-modal__lead p, +.app-body .interaction-modal__choices__choice p { color: var(--color-fg); } -.layout-single-column .interaction-modal__icon { +.app-body .interaction-modal__icon { vertical-align: middle; } -.layout-single-column .interaction-modal p { +.app-body .interaction-modal p { color: var(--color-content-fg); } -.layout-single-column .interaction-modal p.hint { +.app-body .interaction-modal p.hint { color: var(--color-content-fg-muted); } -.layout-single-column .interaction-modal :is(.button, .button.button-tertiary) { +.app-body .interaction-modal :is(.button, .button.button-tertiary) { padding: 10px 18px; } -.layout-single-column .interaction-modal .button.button-tertiary:hover { +.app-body .interaction-modal .button.button-tertiary:hover { background-color: var(--color-content-secondary-separator); } -.layout-single-column .copypaste input, -.layout-single-column .interaction-modal__login__input { +.app-body .copypaste input, +.app-body .interaction-modal__login__input { border-color: var(--color-accent); background-color: var(--color-accent-lines); color: var(--color-content-fg); border-radius: 8px; } -.layout-single-column .interaction-modal__login.expanded .interaction-modal__login__input { +.app-body .interaction-modal__login.expanded .interaction-modal__login__input { border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; } -.layout-single-column .interaction-modal__login__input input::placeholder { +.app-body .interaction-modal__login__input input::placeholder { color: var(--color-accent); } -.layout-single-column .interaction-modal__login.focused .interaction-modal__login__input { +.app-body .interaction-modal__login.focused .interaction-modal__login__input { background-color: var(--color-content-bg); border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); } -.layout-single-column .interaction-modal__login .search__popout { +.app-body .interaction-modal__login .search__popout { border-color: var(--color-lines); } -.layout-single-column .interaction-modal .copypaste button { +.app-body .interaction-modal .copypaste button { padding: 8px 18px; } -.layout-single-column .modal-root__overlay { +.app-body .modal-root__overlay { background-color: hsla(0, 0%, 1%, 0.7); } -.layout-single-column .modal-root__modal, -.layout-single-column .boost-modal__container, -.layout-single-column .mute-modal__container, -.layout-single-column .block-modal__container { +.app-body .modal-root__modal, +.app-body .boost-modal__container, +.app-body .mute-modal__container, +.app-body .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .boost-modal__container { +.app-body .boost-modal__container { margin-bottom: -11px; } -.layout-single-column .confirmation-modal__container, -.layout-single-column .mute-modal__container, -.layout-single-column .block-modal__container { +.app-body .confirmation-modal__container, +.app-body .mute-modal__container, +.app-body .block-modal__container { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .block-modal__action-bar, -.layout-single-column .boost-modal__action-bar, -.layout-single-column .confirmation-modal__action-bar, -.layout-single-column .mute-modal__action-bar { +.app-body .block-modal__action-bar, +.app-body .boost-modal__action-bar, +.app-body .confirmation-modal__action-bar, +.app-body .mute-modal__action-bar { background-color: var(--color-accent-bg); } -.layout-single-column .block-modal__action-bar > div, -.layout-single-column .boost-modal__action-bar > div, -.layout-single-column .confirmation-modal__action-bar > div, -.layout-single-column .mute-modal__action-bar > div, -.layout-single-column .boost-modal__container .status__content__text, -.layout-single-column .boost-modal__container .display-name strong.display-name__html, -.layout-single-column .boost-modal__container .status__info, -.layout-single-column .boost-modal__container .status__relative-time time, -.layout-single-column .boost-modal__container .status.light .status__visibility-icon { +.app-body .block-modal__action-bar > div, +.app-body .boost-modal__action-bar > div, +.app-body .confirmation-modal__action-bar > div, +.app-body .mute-modal__action-bar > div, +.app-body .boost-modal__container .status__content__text, +.app-body .boost-modal__container .display-name strong.display-name__html, +.app-body .boost-modal__container .status__info, +.app-body .boost-modal__container .status__relative-time time, +.app-body .boost-modal__container .status.light .status__visibility-icon { color: var(--color-content-fg); } -.layout-single-column .actions-modal ul li:not(:empty) a { +.app-body .actions-modal ul li:not(:empty) a { color: var(--color-content-fg); } -.layout-single-column .actions-modal ul li:not(:empty) +.app-body .actions-modal ul li:not(:empty) a:is(.active, .active button, :active, @@ -3762,110 +3777,110 @@ a:is(.active, /* Media modals */ -.layout-single-column .modal-root__modal.media-modal { +.app-body .modal-root__modal.media-modal { background-color: rgba(255, 255, 255, .8); } -.layout-single-column .media-modal__overlay .picture-in-picture__footer { +.app-body .media-modal__overlay .picture-in-picture__footer { background-color: transparent; } -.layout-single-column .media-modal__nav, -.layout-single-column .media-modal__overlay .picture-in-picture__footer .icon-button { +.app-body .media-modal__nav, +.app-body .media-modal__overlay .picture-in-picture__footer .icon-button { color: var(--color-content-fg); } -.layout-single-column .media-modal__page-dot { +.app-body .media-modal__page-dot { background-color: var(--color-content-fg); } @media (prefers-color-scheme: dark) { - .layout-single-column .modal-root__modal.media-modal { + .app-body .modal-root__modal.media-modal { background-color: rgba(0, 0, 0, .6); } } /* Report modals */ -.layout-single-column .report-dialog-modal__container { +.app-body .report-dialog-modal__container { border-top: 0; } -.layout-single-column .report-dialog-modal__lead { +.app-body .report-dialog-modal__lead { color: var(--color-content-fg-muted); } -.layout-single-column .report-dialog-modal .poll__option.dialog-option { +.app-body .report-dialog-modal .poll__option.dialog-option { border-color: var(--color-lines); } -.layout-single-column .report-dialog-modal .dialog-option .poll__input { +.app-body .report-dialog-modal .dialog-option .poll__input { border-color: var(--color-accent); } -.layout-single-column .report-dialog-modal .dialog-option .poll__input.active { +.app-body .report-dialog-modal .dialog-option .poll__input.active { border-color: var(--color-accent); background-color: var(--color-accent); } -.layout-single-column .report-dialog-modal .poll__option.dialog-option>.poll__option__text { +.app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text { color: var(--color-content-fg); } -.layout-single-column .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { +.app-body .report-dialog-modal .poll__option.dialog-option>.poll__option__text strong { color: var(--color-content-fg-bold) } -.layout-single-column .report-modal__comment, -.layout-single-column .report-modal__container { +.app-body .report-modal__comment, +.app-body .report-modal__container { border-color: var(--color-lines); } -.layout-single-column .report-modal__comment .setting-text-label { +.app-body .report-modal__comment .setting-text-label { color: var(--color-content-fg); } -.layout-single-column .report-dialog-modal .status__content__text p { +.app-body .report-dialog-modal .status__content__text p { color: var(--color-content-fg); } /* πŸ–ΌοΈ Picture in Picture */ -.layout-single-column .picture-in-picture { +.app-body .picture-in-picture { box-shadow: 0 0 5px rgba(0, 0, 0, .2); border-radius: 8px; } -.layout-single-column .picture-in-picture__footer, -.layout-single-column .picture-in-picture__header { +.app-body .picture-in-picture__footer, +.app-body .picture-in-picture__header { background-color: var(--color-content-bg); } -.layout-single-column .picture-in-picture__header .display-name span { +.app-body .picture-in-picture__header .display-name span { color: var(--color-content-fg-muted); } /* ⏯️ Video controls */ -.layout-single-column .video-player__seek__progress, -.layout-single-column .video-player__volume__handle, -.layout-single-column .video-player__volume__current, -.layout-single-column .video-player__seek__handle { +.app-body .video-player__seek__progress, +.app-body .video-player__volume__handle, +.app-body .video-player__volume__current, +.app-body .video-player__seek__handle { background-color: var(--color-accent); } /* πŸ“„ Meta ------- */ -.layout-single-column .link-footer p, -.layout-single-column .link-footer a { +.app-body .link-footer p, +.app-body .link-footer a { color: var(--color-fg-muted); } /* Server banner */ -.layout-single-column .server-banner__introduction { +.app-body .server-banner__introduction { display: none; } -.layout-single-column .server-banner { +.app-body .server-banner { padding: 0 0 20px; } -.layout-single-column .server-banner__hero { +.app-body .server-banner__hero { border-radius: 8px 8px 0 0; margin-bottom: 0; } -.layout-single-column .server-banner__description { +.app-body .server-banner__description { padding: 20px 15px 20px; margin-bottom: 0; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); border-right: 1px solid var(--color-lines); } -.layout-single-column .server-banner__meta { +.app-body .server-banner__meta { padding: 0 15px 20px; background-color: var(--color-content-bg); border-left: 1px solid var(--color-lines); @@ -3876,53 +3891,53 @@ a:is(.active, border-radius: 0 0 8px 8px; align-items: end; } -.layout-single-column .server-banner h4 { +.app-body .server-banner h4 { color: var(--color-fg); font-size: 80%; } -.layout-single-column .server-banner__number { +.app-body .server-banner__number { color: var(--color-content-fg-bold); } -.layout-single-column .server-banner__number-label { +.app-body .server-banner__number-label { color: var(--color-content-fg); } -.layout-single-column .server-banner .account { +.app-body .server-banner .account { background-color: transparent; box-shadow: none; padding: 0; border-left: 0; border-right: 0; } -.layout-single-column .server-banner__meta__column:first-child { +.app-body .server-banner__meta__column:first-child { width: calc(60% - 5px); } -.layout-single-column .server-banner__meta__column:nth-child(2) { +.app-body .server-banner__meta__column:nth-child(2) { width: calc(40% - 5px); } -.layout-single-column .server-banner .button.button-secondary { +.app-body .server-banner .button.button-secondary { padding: 10px; margin: 10px 0; } -.layout-single-column .button.button-secondary, -.layout-single-column .button.button-tertiary { +.app-body .button.button-secondary, +.app-body .button.button-tertiary { border: 0; background-color: var(--color-accent-bg); color: var(--color-accent); } -.layout-single-column .button:is(.button-secondary, .button-tertiary):hover { +.app-body .button:is(.button-secondary, .button-tertiary):hover { background-color: var(--color-content-bg); color: var(--color-content-fg); } -.layout-single-column .sign-in-banner .button, -.layout-single-column .button:is(.button-secondary, .button-tertiary) { +.app-body .sign-in-banner .button, +.app-body .button:is(.button-secondary, .button-tertiary) { padding: 10px 18px; } @media screen and (max-width:1174px) { - .layout-single-column .button.button-tertiary { + .app-body .button.button-tertiary { padding: 7px 18px; } } -.layout-single-column .sign-in-banner p { +.app-body .sign-in-banner p { color: var(--color-fg); opacity: .5; } @@ -3930,131 +3945,131 @@ a:is(.active, /* πŸ€— Onboarding */ -.layout-single-column .scrollable.follow-recommendations-container, -.layout-single-column .column-list { +.app-body .scrollable.follow-recommendations-container, +.app-body .column-list { background-color: var(--color-content-bg); } -.layout-single-column .column-title .logo { +.app-body .column-title .logo { display: none; } -.layout-single-column .column-title h3, -.layout-single-column .column-title p { +.app-body .column-title h3, +.app-body .column-title p { color: var(--color-content-fg); } -.layout-single-column .column-list { +.app-body .column-list { border: 0; } -.layout-single-column .account__note { +.app-body .account__note { color: var(--color-content-fg-muted); } -.layout-single-column .onboarding__steps__item, -.layout-single-column .onboarding__link { +.app-body .onboarding__steps__item, +.app-body .onboarding__link { background-color: var(--color-content-secondary-bg); transition: all .2s; } -.layout-single-column .onboarding__steps__item:is(:active, :focus, :hover), -.layout-single-column .onboarding__link:is(:active, :focus, :hover) { +.app-body .onboarding__steps__item:is(:active, :focus, :hover), +.app-body .onboarding__link:is(:active, :focus, :hover) { background-color: var(--color-accent-bg); } -.layout-single-column .onboarding__steps__item__icon, -.layout-single-column .onboarding__steps__item__description h6, -.layout-single-column .onboarding__link { +.app-body .onboarding__steps__item__icon, +.app-body .onboarding__steps__item__description h6, +.app-body .onboarding__link { color: var(--color-accent); } -.layout-single-column .onboarding__steps__item__description p, -.layout-single-column .onboarding__lead, -.layout-single-column .onboarding__lead strong { +.app-body .onboarding__steps__item__description p, +.app-body .onboarding__lead, +.app-body .onboarding__lead strong { color: var(--color-content-fg); } -.layout-single-column .onboarding__steps__item__go svg path, -.layout-single-column .onboarding__link svg path { +.app-body .onboarding__steps__item__go svg path, +.app-body .onboarding__link svg path { fill: var(--color-accent); } -.layout-single-column .follow-recommendations { +.app-body .follow-recommendations { background-color: var(--color-content-bg); } -.layout-single-column .follow-recommendations .account { +.app-body .follow-recommendations .account { border-left: 0; border-right: 0; margin-bottom: 15px; } -.layout-single-column .follow-recommendations .account__note { +.app-body .follow-recommendations .account__note { color: var(--color-content-fg); opacity: .7; } -.layout-single-column .follow-recommendations .account__note p { +.app-body .follow-recommendations .account__note p { overflow: hidden; } -.layout-single-column .copy-paste-text { +.app-body .copy-paste-text { background-color: var(--color-accent-bg); border-color: var(--color-accent-lines); color: var(--color-content-fg); } -.layout-single-column .copy-paste-text:is(:focus, :active), -.layout-single-column .tip-carousel:focus { +.app-body .copy-paste-text:is(:focus, :active), +.app-body .tip-carousel:focus { border-color: var(--color-accent); } -.layout-single-column .copy-paste-text:has(textarea:focus) { +.app-body .copy-paste-text:has(textarea:focus) { border-color: var(--color-accent); } /* πŸ“’ Announcements */ -.layout-single-column .announcements, -.layout-single-column .announcements::after { +.app-body .announcements, +.app-body .announcements::after { background-color: var(--color-accent-bg); color: var(--color-content-fg); } -.layout-single-column .announcements { +.app-body .announcements { overflow: visible; z-index: 0; box-shadow: 0 -20px var(--color-bg); border: 1px solid var(--color-accent-lines); } -.layout-single-column .announcements__item strong { +.app-body .announcements__item strong { font-weight: 800; color: var(--color-content-fg-bold); } -.layout-single-column .announcements__item__unread { +.app-body .announcements__item__unread { color: var(--color-accent); } -.layout-single-column .announcements__pagination, -.layout-single-column .announcements__pagination .icon-button { +.app-body .announcements__pagination, +.app-body .announcements__pagination .icon-button { color: var(--color-content-fg); } -.layout-single-column .announcements__mastodon { +.app-body .announcements__mastodon { border-radius: 0 0 0 8px; } -.layout-single-column .reactions-bar__item { +.app-body .reactions-bar__item { background-color: var(--color-content-bg); } -.layout-single-column .reactions-bar__item.active { +.app-body .reactions-bar__item.active { background-color: var(--color-accent); } -.layout-single-column .reactions-bar__item__count, -.layout-single-column .reactions-bar__item__count .animated-number { +.app-body .reactions-bar__item__count, +.app-body .reactions-bar__item__count .animated-number { color: var(--color-content-fg); } -.layout-single-column .reactions-bar__item.active .reactions-bar__item__count .animated-number { +.app-body .reactions-bar__item.active .reactions-bar__item__count .animated-number { color: var(--color-accent-fg); } -.layout-single-column .reactions-bar .emoji-button, -.layout-single-column .announcements__item__content a.unhandled-link, -.layout-single-column .announcements__item__content a { +.app-body .reactions-bar .emoji-button, +.app-body .announcements__item__content a.unhandled-link, +.app-body .announcements__item__content a { color: var(--color-accent); } -.layout-single-column .announcements .emoji-button { +.app-body .announcements .emoji-button { margin: 0; } @media screen and (max-width:1174px) { - .layout-single-column .announcements { + .app-body .announcements { box-shadow: none; margin-top: -10px; border-radius: 0; } - .layout-single-column .announcements__mastodon { + .app-body .announcements__mastodon { border-radius: 0; } } @@ -4062,25 +4077,25 @@ a:is(.active, /* 404 */ -.layout-single-column .empty-column-indicator, -.layout-single-column .error-column { +.app-body .empty-column-indicator, +.app-body .error-column { background-color: var(--color-content-bg); color: var(--color-content-fg); margin-top: -1px; } -.layout-single-column .error-column { +.app-body .error-column { border: 1px solid var(--color-lines); border-radius: 8px !important; } -.layout-single-column .error-column__message h1, -.layout-single-column .error-column__message { +.app-body .error-column__message h1, +.app-body .error-column__message { color: var(--color-content-fg); } -.layout-single-column .error-column__image { +.app-body .error-column__image { margin-top: 0; } @media screen and (max-width:889px) { - .layout-single-column .error-column { + .app-body .error-column { border-radius: 0 !important; border-left: 0; border-right: 0; @@ -4091,147 +4106,147 @@ a:is(.active, /* πŸ“œ About page ------------- */ -.layout-single-column .scrollable.about { +.app-body .scrollable.about { background-color: var(--color-content-bg); border: 1px solid var(--color-lines); display: flex; flex-flow: column; } @media screen and (max-width:889px) { - .layout-single-column .scrollable.about { + .app-body .scrollable.about { border-left: 0; border-right: 0; } } -.layout-single-column .about__header { +.app-body .about__header { order: 1; margin-bottom: 10px; } -.layout-single-column .about__section:nth-child(3) { +.app-body .about__section:nth-child(3) { order: 3; } -.layout-single-column .about__meta { +.app-body .about__meta { order: 2; } -.layout-single-column .about__section:nth-child(4) { +.app-body .about__section:nth-child(4) { order: 4; } -.layout-single-column .about__section:nth-child(5) { +.app-body .about__section:nth-child(5) { order: 5; } -.layout-single-column .about .link-footer { +.app-body .about .link-footer { order: 6; } -.layout-single-column .about__footer { +.app-body .about__footer { order: 7; } -.layout-single-column .about__header h1, -.layout-single-column .about__header p, -.layout-single-column #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { +.app-body .about__header h1, +.app-body .about__header p, +.app-body #mastodon > div > div > div.columns-area__panels > div.columns-area__panels__main > div.columns-area.columns-area--mobile > div > div > div.about__section.active:nth-of-type(3) > div.about__section__title { display: none; } -.layout-single-column .about__header p, -.layout-single-column .about__meta h4 { +.app-body .about__header p, +.app-body .about__meta h4 { color: var(--color-fg); } -.layout-single-column .about__header__hero { +.app-body .about__header__hero { margin: -20px -20px 20px; width: calc(100% + 40px); border-radius: 0; background-color: var(--color-content-bg); } -.layout-single-column .about__header__hero, -.layout-single-column .about__meta { +.app-body .about__header__hero, +.app-body .about__meta { margin-bottom: 10px; } -.layout-single-column .about__header h1 { +.app-body .about__header h1 { margin-bottom: 0; } @media screen and (min-width:890px) { - .layout-single-column .scrollable.about { + .app-body .scrollable.about { border-radius: 8px !important; } - .layout-single-column .about__header__hero { + .app-body .about__header__hero { border-radius: 8px 8px 0 0; } } -.layout-single-column .about__mail { +.app-body .about__mail { color: var(--color-content-fg); } -.layout-single-column .about__meta h4 { +.app-body .about__meta h4 { font-size: 12px; font-weight: bold; margin-bottom: 8px; } -.layout-single-column .about__meta .account { +.app-body .about__meta .account { background: none; box-shadow: none; padding: 0; border-left: 0; border-right: 0; } -.layout-single-column .about__meta__divider { +.app-body .about__meta__divider { border-left: 3px solid var(--color-content-secondary-separator); } @media screen and (max-width:600px) { - .layout-single-column .about__meta__divider { + .app-body .about__meta__divider { border-top: 3px solid var(--color-content-secondary-separator); width: 90%; } } -.layout-single-column .about__section:nth-child(3) .about__section__body { +.app-body .about__section:nth-child(3) .about__section__body { padding-bottom: 3em; } -.layout-single-column .about__meta, -.layout-single-column .about__section__title { +.app-body .about__meta, +.app-body .about__section__title { color: var(--color-accent); background-color: var(--color-content-secondary-bg); border: 0; border-radius: 8px; } -.layout-single-column .about__section.active .about__section__title { +.app-body .about__section.active .about__section__title { border-radius: 8px 8px 0 0; } -.layout-single-column .about__section.active:not(:nth-of-type(3)) .about__section__body { +.app-body .about__section.active:not(:nth-of-type(3)) .about__section__body { border: 0 !important; background-color: var(--color-content-secondary-bg); border-radius: 0 0 8px 8px; } -.layout-single-column .prose, -.layout-single-column .prose p, -.layout-single-column .prose b, -.layout-single-column .prose h1, -.layout-single-column .prose h2, -.layout-single-column .prose h3, -.layout-single-column .prose h4, -.layout-single-column .prose h5, -.layout-single-column .prose h6, -.layout-single-column .prose strong, -.layout-single-column .rules-list, -.layout-single-column .about__domain-blocks__domain h6, -.layout-single-column .about__domain-blocks__domain__type { +.app-body .prose, +.app-body .prose p, +.app-body .prose b, +.app-body .prose h1, +.app-body .prose h2, +.app-body .prose h3, +.app-body .prose h4, +.app-body .prose h5, +.app-body .prose h6, +.app-body .prose strong, +.app-body .rules-list, +.app-body .about__domain-blocks__domain h6, +.app-body .about__domain-blocks__domain__type { color: var(--color-content-fg); } -.layout-single-column .prose ul>li:before { +.app-body .prose ul>li:before { background-color: var(--color-fg); } -.layout-single-column .about__section__body .prose hr { +.app-body .about__section__body .prose hr { border-color: var(--color-content-secondary-separator); margin-top: 2em; margin-bottom: 2em; border-width: 3px; } -.layout-single-column .about__section__body .prose a, -.layout-single-column .about__section__body .prose a:hover, -.layout-single-column .prose a strong { +.app-body .about__section__body .prose a, +.app-body .about__section__body .prose a:hover, +.app-body .prose a strong { color: var(--color-accent); text-decoration: none; } -.layout-single-column .about__section__body .prose a:hover { +.app-body .about__section__body .prose a:hover { text-decoration: underline; } -.layout-single-column .about__section__body .prose small.lang_label { +.app-body .about__section__body .prose small.lang_label { margin-left: -2em; margin-top: 1px; display: block; @@ -4243,11 +4258,11 @@ a:is(.active, .about__section.active .about__section__title { background-color: var(--color-accent-bg); } -.layout-single-column .rules-list li { +.app-body .rules-list li { border-bottom: 2px solid var(--color-accent-lines); padding: 1em 1.75em 1em 3.4em; } -.layout-single-column .rules-list li:last-child { +.app-body .rules-list li:last-child { border-bottom: 0; } .about__domain-blocks { @@ -4265,7 +4280,7 @@ a:is(.active, /* Privacy Policy page */ -.layout-single-column .column > .scrollable.privacy-policy { +.app-body .column > .scrollable.privacy-policy { border: 1px solid var(--color-lines); background-color: var(--color-content-bg); } @@ -4273,12 +4288,122 @@ a:is(.active, /* πŸ‘‹ Hide superfluous UI */ -.layout-single-column div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr, -.layout-single-column .navigation-panel__legal > hr, -.layout-single-column .about__footer, /* Hide meta footer */ -.layout-single-column .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */ -.layout-single-column .search-banner ~ .search, /* Hide search field for logged out users */ -.layout-single-column .getting-started__trends h4, /* Hide Trending header in sidebar */ -.layout-single-column .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ { +.app-body div#mastodon > div > div > div:nth-child(2) > div:nth-child(3) > div > div > div:nth-child(3) > hr, +.app-body .navigation-panel__legal > hr, +.app-body .about__footer, /* Hide meta footer */ +.app-body .server-banner__introduction, /* Hide generic mastodon server introduction in sidebar */ +.app-body .search-banner ~ .search, /* Hide search field for logged out users */ +.app-body .getting-started__trends h4, /* Hide Trending header in sidebar */ +.app-body .account__header__bio .account__header__fields > dl:first-child /* Hide "Joined" field on profiles */ { display: none; } + +/* Multi-column layout */ +.layout-multiple-columns { + --color-bg: #f5f2ef; +} +:root:has(.layout-multiple-columns) *::-webkit-scrollbar { + width: 4px; +} +:root:has(.layout-multiple-columns) *::-webkit-scrollbar-track { + background-color: var(--color-accent-bg); + border-right: 1px solid var(--color-lines); +} +:root:has(.layout-multiple-columns) *::-webkit-scrollbar-thumb { + opacity: .8; +} +.layout-multiple-columns .scrollable, +.layout-multiple-columns .column > .scrollable { + max-height: 100%; +} +.layout-multiple-columns .column { + width: 400px; + padding-bottom: 0; +} +.layout-multiple-columns .drawer__inner__mastodon { + display: none; +} +.layout-multiple-columns :is(.drawer__inner, .drawer__inner.darker) { + background: transparent; +} +.layout-multiple-columns .drawer__header { + background-color: var(--color-content-bg); + border-top: 1px solid var(--color-lines); + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + border-radius: 8px 8px 0 0; + margin-bottom: 0; +} +.layout-multiple-columns .search__input { + border-radius: 0 0 8px 8px; +} +.layout-multiple-columns .drawer__tab { + transition: all .3s; + border-radius: 6px; + height: 40px; + padding: 5px; + margin: 5px; + box-sizing: border-box; + border: 0; +} +.layout-multiple-columns .drawer__tab:is(:active, :focus, :hover) { + background-color: var(--color-accent-bg); +} +.layout-multiple-columns .drawer__tab .icon-cog { + background-image: var(--icon-gear); +} +.layout-multiple-columns .drawer__tab .icon-globe { + background-image: var(--icon-globe-active); +} +.layout-multiple-columns .drawer__tab .icon-users { + background-image: var(--icon-users); +} +.layout-multiple-columns .drawer__tab .icon-bars { + background-image: var(--icon-ellipsis); +} +.layout-multiple-columns .drawer__tab .icon-sign-out { + background-image: var(--icon-logout); +} +.layout-multiple-columns .column-header__icon.icon-bars { + background-image: var(--icon-globe-active); +} + +.layout-multiple-columns .flex-spacer, +.layout-multiple-columns .getting-started, +.layout-multiple-columns .getting-started__wrapper { + background-color: var(--color-content-bg); +} +.layout-multiple-columns .getting-started__wrapper { + border-left: 1px solid var(--color-lines); + border-right: 1px solid var(--color-lines); + border-bottom: 1px solid var(--color-lines); + padding-bottom: 10px; + border-radius: 0 0 8px 8px; +} +.layout-multiple-columns .getting-started .column-link { + background-color: var(--color-content-bg); + color: var(--color-content-fg); + margin: 0 5px 2px; + border-radius: 8px; +} +.layout-multiple-columns .getting-started .column-link:is(:active, :focus, :hover) { + background-color: var(--color-accent-bg); + color: var(--color-accent); +} + +.layout-multiple-columns .column-link__badge { + background-color: var(--color-accent); + color: var(--color-accent-fg); + border-radius: 8px; + line-height: 15px; + font-weight: bold; +} + +.layout-multiple-columns .column-header, +.layout-multiple-columns .column-back-button { + background-color: var(--color-content-bg); +} + +.layout-multiple-columns .column-header__setting-btn { + font-weight: 600; +}