microsoft-translator_minimalist by kenaycock

/* ==UserStyle==
@name       microsoft-translator_minimalist
@version    20240312.22.17
@namespace  ?
==/UserStyle== */

@-moz-document url("https://translator.microsoft.com/Conversation") {
/* Global settings */
body {
    background-color: black; /* Set page background to black for a minimalist design */
}

/* Hide unnecessary elements for a cleaner interface */
.sourceTextSubtext, .username, .userIcon, .userIconContainer, 
.customBrand img, form.sendMessage, label.form-label, .navbar {
    display: none;
}

/* Chat interface styling for a unified look */
.chatWrapper, .chatBox, .messageList, .messageContainer, 
.my-2, .messageContent {
    background-color: black; /* Ensure all chat elements have a black background */
    color: black; /* Set text color to black for consistency - may need to adjust if text should be visible */
    margin: 0;
    padding: 0;
    max-width: 100%;
    border-radius: 0; /* Remove rounded corners for a sleek, modern look */
}

/* Message text styling for visibility and readability */
.messageText {
    color: white; /* Ensure message text is white for contrast against dark backgrounds */
    background-color: #272727; /* Dark grey background for message text for readability */
    font-size: 5vh; /* Large font size for clear readability */
    border-radius: 25px; /* Rounded corners for message bubbles */
    margin: 0px; /* Space between messages */
    padding: 5px; /* Padding inside message bubbles */
    line-height: 1.5; /* Spacing between lines of text within messages */
}

/* Navbar customization for a minimalist top navigation bar */
.navbar {
    min-height: 18px;
    padding: 10px; /* Minimize padding to reduce navbar height */
}

.navbar .navbar-brand, .navbar .navbar-nav .navbar-item, 
.navbar .navbarButton, .navbar .navbar-brand img, 
.navbar .participantIconContainer, .navbar .navbarButton img {
    font-size: 10px; /* Smaller text for a minimalist look */
    margin: 10px; /* Remove margins to decrease space between navbar items */
    padding: 10px; /* Remove padding to reduce overall navbar size */
    height: 18px; /* Standardize height for brand and icons for consistency */
    width: auto; /* Maintain aspect ratio of navbar images */
}

/* Chat wrapper and container optimizations for better screen space usage */
.chatWrapper.container {
    box-sizing: border-box; /* Include padding and border in element's total dimensions */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange child elements in a vertical stack */
    flex-grow: 1; /* Allow chat wrapper to fill available space */
    height: auto; /* Adjust height automatically to content */
    max-height: none; /* No maximum height to allow full use of screen space */
    max-width: none; /* No maximum width to use full width of screen */
    padding: 0; /* No padding to use full width and height */
    width: 100%; /* Full width for maximum screen usage */
}

/* Styling adjustments for card within chat wrapper */
.chatWrapper .card {
    height: 50%; /* Start with half height, but allow for expansion */
    margin: 0; /* No margin to ensure card fits neatly within container */
    min-height: 50%; /* Minimum height to ensure visibility */
    padding: 2px; /* Padding for content within card */
}

}