ಮೀಡಿಯವಿಕಿ:Sitenotice/styles.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* General container styling */
.sitenotice-container-image {
    margin: 1em auto;
    border: 2px solid #586e75; /* Neutral gray-blue border */
    border-radius: 20px;
    padding: 1em;
    max-width: 90%;
    background-color: #fdf6e3; /* Universal beige background */
    color: #073642; /* Universal teal text */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    display: flex; /* Flexbox for layout */
    align-items: center; /* Vertically center the content */
    gap: 1em; /* Space between the image and text */
    text-align: left; /* Align text left */
    flex-wrap: nowrap; /* Prevent text from wrapping */
}

/* Image adjustments */
.sitenotice-container-image img {
    width: 100px; /* Set image width */
    height: auto; /* Maintain aspect ratio */
    margin: 0; /* Remove default margin */
}

/* Text container styling */
.sitenotice-container-image .text {
    flex-grow: 1; /* Allow text to fill remaining space */
    white-space: nowrap; /* Prevent text from breaking to a new line */
    overflow: hidden; /* Hide overflow text if it's too long */
    text-overflow: ellipsis; /* Add ellipsis if the text overflows */
}

/* Links styling */
.sitenotice-container-image a {
    color: #268bd2; /* Universal blue link color */
    text-decoration: none;
}

.sitenotice-container-image a:hover {
    text-decoration: underline;
    color: #0056b3; /* Slightly darker blue on hover */
}