MediaWiki:Common.css: Difference between revisions
Appearance
No edit summary |
No edit summary Tag: Reverted |
||
| Line 6: | Line 6: | ||
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=DM+Serif+Display&family=Noto+Serif:wght@400;500;600&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=DM+Serif+Display&family=Noto+Serif:wght@400;500;600&display=swap'); | ||
.cw_0 { | |||
display: none; | |||
} | |||
.cw_0 { display: none; } | .cw_50 { | ||
.cw_50 { width: 50px; } | width: 50px; | ||
.cw_150 { width: 150px; } | } | ||
.cw_500 { width: 500px; } | .cw_150 { | ||
width: 150px; | |||
} | |||
.cw_500 { | |||
width: 500px; | |||
} | |||
.tabs-input { display: none !important; } | .tabs-input { | ||
.noautonum .tocnumber { display: none; } | display: none !important; | ||
} | |||
.noautonum .tocnumber { | |||
display: none; | |||
} | |||
.daytable { text-align: left; } | /* --- Vanisource Core Table & Journal Styles --- */ | ||
.journaltable { | |||
max-width: 108em; | |||
min-width: 65em; | |||
} | |||
.daytable { | |||
text-align: left; | |||
} | |||
.vanitable { | .vanitable { | ||
border: 0.1em solid #BFBFBF; | border: 0.1em solid #BFBFBF; | ||
| Line 26: | Line 42: | ||
vertical-align: middle; | vertical-align: middle; | ||
} | } | ||
.timelineh2 { | .timelineh2 { | ||
text-align: center; | text-align: center; | ||
| Line 40: | Line 54: | ||
border-top: 1px solid #ddcef2; | border-top: 1px solid #ddcef2; | ||
border-bottom: 1px solid #ddcef2; | border-bottom: 1px solid #ddcef2; | ||
background: #FFFFFF; | background: #FFFFFF; | ||
padding: 0.2em 0.4em; | padding: 0.2em 0.4em; | ||
margin: auto; | margin: auto; | ||
| Line 55: | Line 69: | ||
text-align: center; | text-align: center; | ||
} | } | ||
.timelinelinks { text-align: center; font-size: 132%; font-weight: bold; } | .timelinelinks { | ||
.timelinelinks a { color: #B5BD64; } | text-align: center; | ||
font-size: 132%; | |||
.greentext { color: #296F39; } | font-weight: bold; | ||
.quotelink { font-size: 1em; font-weight: bold; color: #296F39; } | } | ||
.nectardroptext { font-size: 1em; font-weight: bold; | .timelinelinks a { | ||
color: #B5BD64; | |||
} | |||
.greentext { | |||
color: #296F39; | |||
} | |||
.quotelink { | |||
font-size: 1em; | |||
font-weight: bold; | |||
color: #296F39; | |||
} | |||
.nectardroptext { | |||
font-size: 1em; | |||
font-weight: bold; | |||
color: #296F39; | |||
} | |||
.firstchar { | .firstchar { | ||
float: left; | float: left; | ||
| Line 76: | Line 96: | ||
font-family: algerian, courier; | font-family: algerian, courier; | ||
line-height: 80%; | line-height: 80%; | ||
} | |||
.daystext { | |||
color: #296F39; | |||
} | |||
.daystextb { | |||
color: #296F39; | |||
font-weight: bold; | |||
} | |||
.lec_code { | |||
font-weight: bold; | |||
} | |||
.code { | |||
font-weight: bold; | |||
font-size: 90%; | |||
} | } | ||
.MITL_page_nav { | .MITL_page_nav { | ||
text-align: left; | text-align: left; | ||
border: 1px solid #BFBFBF; | border: 1px solid #BFBFBF; | ||
background: #FFF2E6; | background: #FFF2E6; | ||
padding: 0.2em 0.4em; | padding: 0.2em 0.4em; | ||
margin: auto; | margin: auto; | ||
} | } | ||
.daysnav,.monthsnav { display: flex; flex-wrap: wrap; justify-content: center; } | .daysnav,.monthsnav { | ||
.daysnav .month { margin: 25px 2%; } | display: flex; | ||
.monthsnav .year { margin: 25px 5%; } | flex-wrap: wrap; | ||
justify-content: center; | |||
} | |||
.daysnav .month { | |||
margin: 25px 2%; | |||
} | |||
.monthsnav .year { | |||
margin: 25px 5%; | |||
} | |||
/* ----------------- Book styles ----------------- */ | /* ----------------- Book styles ----------------- */ | ||
.devanagari { color: #000000; font-weight: bold; } | .devanagari { | ||
color: #000000; | |||
font-weight: bold; | |||
} | |||
@font-face { | @font-face { | ||
font-family: interDiac; | font-family: interDiac; | ||
src: url(/css/GauraTimes.ttf); | src: url(/css/GauraTimes.ttf); | ||
} | } | ||
.verse { color: #000000; font-style: italic; } | .verse { | ||
.versecenter { color: #000000; font-style: italic; text-align: center; } | color: #000000; | ||
.verse.inter_diac { font-family: interDiac; } | font-style: italic; | ||
.synonyms { color: #000000; } | } | ||
.synonyms.inter_diac { font-family: interDiac; } | .versecenter { | ||
.translation { color: #000000; font-weight: bold; } | color: #000000; | ||
.translation.inter_diac { font-family: interDiac; font-size: 1.1em; } | font-style: italic; | ||
.purport { color: #000000; } | text-align: center; | ||
.purport.inter_diac { font-family: interDiac; font-size: 1.1em; } | } | ||
*:not(a).text { color: #000000; } | .verse.inter_diac { | ||
.text.inter_diac { font-family: interDiac; font-size: 1.1em; } | font-family: interDiac; | ||
a[href*="syno_o"]:visited { color: purple; } | } | ||
.synonyms { | |||
color: #000000; | |||
} | |||
.synonyms.inter_diac { | |||
font-family: interDiac; | |||
} | |||
.translation { | |||
color: #000000; | |||
font-weight: bold; | |||
} | |||
.translation.inter_diac { | |||
font-family: interDiac; | |||
font-size: 1.1em; | |||
} | |||
.purport { | |||
color: #000000; | |||
} | |||
.purport.inter_diac { | |||
font-family: interDiac; | |||
font-size: 1.1em; | |||
} | |||
*:not(a).text { | |||
color: #000000; | |||
} | |||
.text.inter_diac { | |||
font-family: interDiac; | |||
font-size: 1.1em; | |||
} | |||
a[href*="syno_o"]:visited { | |||
color: purple; | |||
} | |||
.SB65verse { | .SB65verse { | ||
white-space: pre-line; | white-space: pre-line; | ||
| Line 115: | Line 190: | ||
text-align: center; | text-align: center; | ||
color: #000000; | color: #000000; | ||
} | |||
#verse { | |||
white-space: pre; | |||
} | } | ||
/* -------------------- COMPILE FORMS & QUOTES -------------------- */ | |||
.quote { | |||
margin: 1.5em 0em; | |||
/* -------------------- | font-family: tahoma; | ||
.quote { margin: 1.5em 0em; font-family: tahoma; } | } | ||
.quote_heading { font-weight: bold; color: #296F39; } | .quote_heading { | ||
.quote_translation { font-weight: bold; color: #000000; } | font-weight: bold; | ||
.quote_link { font-weight: bold; } | color: #296F39; | ||
.quote_text | } | ||
.quote_verse { color: #000000; } | .quote_translation { | ||
.quote_text a { font-weight: bold; | font-weight: bold; | ||
color: #000000; | |||
} | |||
.quote_link { | |||
font-weight: bold; | |||
} | |||
background | .quote_text, .quote_verse { | ||
color: #000000; | |||
border | } | ||
padding: | .quote_text a { | ||
margin: | font-weight: bold; | ||
color: # | } | ||
.hlterm { | |||
background-color: yellow; | |||
border: 1px Solid #EE9977; | |||
padding: 1px 2px 1px 2px; | |||
margin: -1px; | |||
} | |||
.highlight_quote { | |||
background-color: #F9F7E0; | |||
margin: 0px; | |||
padding: 4px 2px; | |||
} | |||
.highlight_terms { | |||
background-color: #EEE8AA; | |||
} | } | ||
/* -------------------- MAIN BANNER & LAYOUT -------------------- */ | |||
.MainHeader h4 { | |||
margin: 0 !important; | |||
padding: 0.2em 0.4em; | |||
padding: 0. | |||
} | } | ||
#mainbanner { | #mainbanner { | ||
text-align: center; | text-align: center; | ||
background: # | background: #345B63; | ||
border-bottom: 1px solid #ccc; | border-bottom: 1px solid #ccc; | ||
border-top: 1px solid #ccc; | border-top: 1px solid #ccc; | ||
padding: 0.3em; | padding: 0.3em; | ||
color: #faf2af; | color: #faf2af; | ||
font-family: georgia; | font-family: georgia; | ||
font-size: 150%; | font-size: 150%; | ||
font-style: italic; | font-style: italic; | ||
} | |||
#mainlinks { | |||
text-align: center; | |||
font-weight: bold; | |||
font-size: 110%; | |||
margin-bottom: 0.5em; | |||
} | |||
#mainlinks a { | |||
color: #B5BD64; | |||
} | |||
#mainmantra { | |||
text-align: center; | |||
margin-top: 1.5em; | |||
color: #B5BD64; | |||
} | |||
.maincenter { | |||
text-align: center; | |||
max-width: 65em; | |||
margin: 0px auto; | |||
padding-bottom: 1em; | |||
} | |||
.mainleft { | |||
text-align: left; | |||
max-width: 100em; | |||
margin: 0px auto; | |||
padding-bottom: 1em; | |||
} | |||
.mainjustify { | |||
text-align: justify; | |||
max-width: 65em; | |||
margin: 0px auto; | |||
padding-bottom: 1em; | |||
} | } | ||
# | /* Hide specific elements on Main Page */ | ||
# | body.page-Main_Page #t-cite, | ||
body.page-Main_Page #lastmod, | |||
. | body.page-Main_Page #siteSub, | ||
. | body.page-Main_Page h1.firstHeading { | ||
display: none !important; | |||
} | |||
/* -------------------- VECTOR 2022 INTEGRATION & CSS VARIABLES -------------------- */ | |||
:root, | |||
.skin-vector-2022, | |||
html { | |||
:root, .skin-vector-2022, html { | |||
--background-color-base: #faf2af !important; | --background-color-base: #faf2af !important; | ||
--background-color-page: #faf2af !important; | --background-color-page: #faf2af !important; | ||
| Line 187: | Line 299: | ||
} | } | ||
body, #content, .mw-body, #mw-page-base, #mw-head-base { | body, | ||
#content, | |||
.mw-body, | |||
#mw-page-base, | |||
#mw-head-base { | |||
background: #faf2af !important; | background: #faf2af !important; | ||
background-image: none !important; | background-image: none !important; | ||
| Line 193: | Line 309: | ||
} | } | ||
.mw-page-container, .mw-page-container-inner, .mw-content-container, .mw-header, | #headertabs { | ||
.vector-header-container, .vector-sticky-header, .vector-column-start, .vector-column-end, | background: inherit; | ||
.vector-sidebar-container, .vector-pinnable-element, .vector-toc, #vector-toc, | } | ||
.vector-toc-pinned-container, .vector-toc-contents, .vector-dropdown-content, | #headertabs ul li.ui-state-active { | ||
.vector-menu-content, .cdx-menu, .cdx-menu__list { | background: #faf2af; | ||
} | |||
/* Force container styling and remove borders on Vector 2022 elements */ | |||
.mw-page-container, | |||
.mw-page-container-inner, | |||
.mw-content-container, | |||
.mw-header, | |||
.vector-header-container, | |||
.vector-sticky-header, | |||
.vector-column-start, | |||
.vector-column-end, | |||
.vector-sidebar-container, | |||
.vector-pinnable-element, | |||
.vector-toc, | |||
#vector-toc, | |||
.vector-toc-pinned-container, | |||
.vector-toc-contents, | |||
.vector-dropdown-content, | |||
.vector-menu-content, | |||
.cdx-menu, | |||
.cdx-menu__list { | |||
background-color: #faf2af !important; | background-color: #faf2af !important; | ||
background-image: none !important; | background-image: none !important; | ||
| Line 204: | Line 341: | ||
} | } | ||
div.thumb { | |||
border: none; | |||
} | |||
div.thumb { border: none; } | div.tright { | ||
div.tright { border: none; margin: 0.5em 0 0.8em 1.4em; } | border: none; | ||
div.tleft { border: none; margin: 0.5em 1.4em 0.8em 0; } | margin: 0.5em 0 0.8em 1.4em; | ||
#lastmod | } | ||
div.tleft { | |||
border: none; | |||
margin: 0.5em 1.4em 0.8em 0; | |||
} | |||
#lastmod { | |||
display: none; | |||
display: none | |||
} | } | ||
li#ca-unify { | |||
margin-left: 1.6em; | |||
} | } | ||
#google-search input { | |||
font-size: 95%; | |||
width: 10.9em; | |||
} | } | ||
#searchform { | |||
padding-bottom: 0.5em; | |||
} | } | ||
#p-logo a, #p-logo a:hover { | |||
# | height: 190px; | ||
} | } | ||
# | #column-one { | ||
padding-top: 190px; | |||
} | } | ||
# | #p-navigation { | ||
padding-top: 30px; | |||
} | } | ||
. | div.center { | ||
text-align: center; | |||
} | } | ||
.vaniquotebox { | |||
# | text-align: left; | ||
min-height: 11.6em; | |||
font-size: | border: thin solid #000000; | ||
border-radius: 1em; | |||
box-shadow: 0.5em 0.5em 1em #bcbcbc; | |||
margin: 1em 0em; | |||
} | |||
@media screen and (min-width: 800px) { | |||
.vaniquotebox { | |||
max-width: 80%; | |||
} | |||
} | |||
.vaniquotebox > table { | |||
text-align: left; | |||
font-size: 1em; | |||
color: #000000; | |||
min-height: 11.5em; | |||
margin: 0; | |||
} | } | ||
.vaniquotebox td { | |||
padding: 8px; | |||
} | } | ||
/* Navbar utilities */ | |||
.verse-nav { | |||
float: right; | |||
} | } | ||
.prev-link { | |||
float: left; | |||
min-height: 22px; | |||
padding: 0 0 0 25px; | |||
background: url(/w/images/Go-previous.png) no-repeat left; | |||
/ | |||
} | } | ||
.next-link { | |||
float: left; | |||
min-height: 22px; | |||
. | padding: 0 25px; | ||
background: url(/w/images/Go-next.png) no-repeat right; | |||
} | } | ||
.chap-nav, #chap-nav, #book-nav, #page-nav { | |||
float: left; | |||
} | } | ||
/* | /* Custom Popup Alternative */ | ||
a[title]:hover::after { | a[title]:hover::after { | ||
content: "Preview: " attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); | content: "Preview: " attr(title); | ||
background: var(--background-color-page, #ffffff); color: var(--color-base, #202122); padding: 12px 16px; | position: absolute; | ||
border: 1px solid var(--border-color-base, #a2a9b1); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); | bottom: 120%; | ||
font-size: 14px; line-height: 1.5; white-space: normal; width: 280px; z-index: 10000; | left: 50%; | ||
transform: translateX(-50%); | |||
background: var(--background-color-page, #ffffff); | |||
color: var(--color-base, #202122); | |||
padding: 12px 16px; | |||
border: 1px solid var(--border-color-base, #a2a9b1); | |||
border-radius: 8px; | |||
box-shadow: 0 4px 12px rgba(0,0,0,0.15); | |||
font-size: 14px; | |||
line-height: 1.5; | |||
white-space: normal; | |||
width: 280px; | |||
z-index: 10000; | |||
} | } | ||
Revision as of 10:08, 17 September 2026
/* CSS placed here will be applied to all skins */
/* Use IDs (#) when there is only one concurrence per page */
/* Use classes (.) when there are one or more occurrences per page */
/* Useful parameters... margin-bottom:0.5em */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=DM+Serif+Display&family=Noto+Serif:wght@400;500;600&display=swap');
.cw_0 {
display: none;
}
.cw_50 {
width: 50px;
}
.cw_150 {
width: 150px;
}
.cw_500 {
width: 500px;
}
.tabs-input {
display: none !important;
}
.noautonum .tocnumber {
display: none;
}
/* --- Vanisource Core Table & Journal Styles --- */
.journaltable {
max-width: 108em;
min-width: 65em;
}
.daytable {
text-align: left;
}
.vanitable {
border: 0.1em solid #BFBFBF;
border-collapse: collapse;
padding: 0.25em;
background-color: #F2F2F2;
text-align: left;
vertical-align: middle;
}
.timelineh2 {
text-align: center;
border: 1px solid #ddcef2;
background: #F2F2F2;
padding: 0.2em 0.4em;
margin: auto;
overflow: hidden;
}
.timelineh3 {
text-align: center;
border-top: 1px solid #ddcef2;
border-bottom: 1px solid #ddcef2;
background: #FFFFFF;
padding: 0.2em 0.4em;
margin: auto;
overflow: hidden;
}
.timelinesummary {
border: thin solid #ddcef2;
border-radius: 1em;
box-shadow: 0.5em 0.5em 0.5em #888888;
background: #FFFFCC;
min-width: 77em;
margin: 1em auto 3em auto;
padding: 1em;
text-align: center;
}
.timelinelinks {
text-align: center;
font-size: 132%;
font-weight: bold;
}
.timelinelinks a {
color: #B5BD64;
}
.greentext {
color: #296F39;
}
.quotelink {
font-size: 1em;
font-weight: bold;
color: #296F39;
}
.nectardroptext {
font-size: 1em;
font-weight: bold;
color: #296F39;
}
.firstchar {
float: left;
width: 0.7em;
font-size: 375%;
font-family: algerian, courier;
line-height: 80%;
}
.daystext {
color: #296F39;
}
.daystextb {
color: #296F39;
font-weight: bold;
}
.lec_code {
font-weight: bold;
}
.code {
font-weight: bold;
font-size: 90%;
}
.MITL_page_nav {
text-align: left;
border: 1px solid #BFBFBF;
background: #FFF2E6;
padding: 0.2em 0.4em;
margin: auto;
}
.daysnav,.monthsnav {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.daysnav .month {
margin: 25px 2%;
}
.monthsnav .year {
margin: 25px 5%;
}
/* ----------------- Book styles ----------------- */
.devanagari {
color: #000000;
font-weight: bold;
}
@font-face {
font-family: interDiac;
src: url(/css/GauraTimes.ttf);
}
.verse {
color: #000000;
font-style: italic;
}
.versecenter {
color: #000000;
font-style: italic;
text-align: center;
}
.verse.inter_diac {
font-family: interDiac;
}
.synonyms {
color: #000000;
}
.synonyms.inter_diac {
font-family: interDiac;
}
.translation {
color: #000000;
font-weight: bold;
}
.translation.inter_diac {
font-family: interDiac;
font-size: 1.1em;
}
.purport {
color: #000000;
}
.purport.inter_diac {
font-family: interDiac;
font-size: 1.1em;
}
*:not(a).text {
color: #000000;
}
.text.inter_diac {
font-family: interDiac;
font-size: 1.1em;
}
a[href*="syno_o"]:visited {
color: purple;
}
.SB65verse {
white-space: pre-line;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
text-align: center;
color: #000000;
}
#verse {
white-space: pre;
}
/* -------------------- COMPILE FORMS & QUOTES -------------------- */
.quote {
margin: 1.5em 0em;
font-family: tahoma;
}
.quote_heading {
font-weight: bold;
color: #296F39;
}
.quote_translation {
font-weight: bold;
color: #000000;
}
.quote_link {
font-weight: bold;
}
.quote_text, .quote_verse {
color: #000000;
}
.quote_text a {
font-weight: bold;
}
.hlterm {
background-color: yellow;
border: 1px Solid #EE9977;
padding: 1px 2px 1px 2px;
margin: -1px;
}
.highlight_quote {
background-color: #F9F7E0;
margin: 0px;
padding: 4px 2px;
}
.highlight_terms {
background-color: #EEE8AA;
}
/* -------------------- MAIN BANNER & LAYOUT -------------------- */
.MainHeader h4 {
margin: 0 !important;
padding: 0.2em 0.4em;
}
#mainbanner {
text-align: center;
background: #345B63;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 0.3em;
color: #faf2af;
font-family: georgia;
font-size: 150%;
font-style: italic;
}
#mainlinks {
text-align: center;
font-weight: bold;
font-size: 110%;
margin-bottom: 0.5em;
}
#mainlinks a {
color: #B5BD64;
}
#mainmantra {
text-align: center;
margin-top: 1.5em;
color: #B5BD64;
}
.maincenter {
text-align: center;
max-width: 65em;
margin: 0px auto;
padding-bottom: 1em;
}
.mainleft {
text-align: left;
max-width: 100em;
margin: 0px auto;
padding-bottom: 1em;
}
.mainjustify {
text-align: justify;
max-width: 65em;
margin: 0px auto;
padding-bottom: 1em;
}
/* Hide specific elements on Main Page */
body.page-Main_Page #t-cite,
body.page-Main_Page #lastmod,
body.page-Main_Page #siteSub,
body.page-Main_Page h1.firstHeading {
display: none !important;
}
/* -------------------- VECTOR 2022 INTEGRATION & CSS VARIABLES -------------------- */
:root,
.skin-vector-2022,
html {
--background-color-base: #faf2af !important;
--background-color-page: #faf2af !important;
--background-color-quiet: #faf2af !important;
--border-color-base: transparent !important;
}
body,
#content,
.mw-body,
#mw-page-base,
#mw-head-base {
background: #faf2af !important;
background-image: none !important;
font-family: tahoma;
}
#headertabs {
background: inherit;
}
#headertabs ul li.ui-state-active {
background: #faf2af;
}
/* Force container styling and remove borders on Vector 2022 elements */
.mw-page-container,
.mw-page-container-inner,
.mw-content-container,
.mw-header,
.vector-header-container,
.vector-sticky-header,
.vector-column-start,
.vector-column-end,
.vector-sidebar-container,
.vector-pinnable-element,
.vector-toc,
#vector-toc,
.vector-toc-pinned-container,
.vector-toc-contents,
.vector-dropdown-content,
.vector-menu-content,
.cdx-menu,
.cdx-menu__list {
background-color: #faf2af !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
}
div.thumb {
border: none;
}
div.tright {
border: none;
margin: 0.5em 0 0.8em 1.4em;
}
div.tleft {
border: none;
margin: 0.5em 1.4em 0.8em 0;
}
#lastmod {
display: none;
}
li#ca-unify {
margin-left: 1.6em;
}
#google-search input {
font-size: 95%;
width: 10.9em;
}
#searchform {
padding-bottom: 0.5em;
}
#p-logo a, #p-logo a:hover {
height: 190px;
}
#column-one {
padding-top: 190px;
}
#p-navigation {
padding-top: 30px;
}
div.center {
text-align: center;
}
.vaniquotebox {
text-align: left;
min-height: 11.6em;
border: thin solid #000000;
border-radius: 1em;
box-shadow: 0.5em 0.5em 1em #bcbcbc;
margin: 1em 0em;
}
@media screen and (min-width: 800px) {
.vaniquotebox {
max-width: 80%;
}
}
.vaniquotebox > table {
text-align: left;
font-size: 1em;
color: #000000;
min-height: 11.5em;
margin: 0;
}
.vaniquotebox td {
padding: 8px;
}
/* Navbar utilities */
.verse-nav {
float: right;
}
.prev-link {
float: left;
min-height: 22px;
padding: 0 0 0 25px;
background: url(/w/images/Go-previous.png) no-repeat left;
}
.next-link {
float: left;
min-height: 22px;
padding: 0 25px;
background: url(/w/images/Go-next.png) no-repeat right;
}
.chap-nav, #chap-nav, #book-nav, #page-nav {
float: left;
}
/* Custom Popup Alternative */
a[title]:hover::after {
content: "Preview: " attr(title);
position: absolute;
bottom: 120%;
left: 50%;
transform: translateX(-50%);
background: var(--background-color-page, #ffffff);
color: var(--color-base, #202122);
padding: 12px 16px;
border: 1px solid var(--border-color-base, #a2a9b1);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
font-size: 14px;
line-height: 1.5;
white-space: normal;
width: 280px;
z-index: 10000;
}