help3/xhpeditor/DisplayArea.css | 65 ++++++++++++++++++++++------------------
1 file changed, 36 insertions(+), 29 deletions(-)
New commits:
commit 13f010b2187a779473655bf563fa121b7f6ad68d
Author: Olivier Hallot <olivier.hal...@libreoffice.org>
AuthorDate: Sat Dec 23 12:29:30 2023 -0300
Commit: Olivier Hallot <olivier.hal...@libreoffice.org>
CommitDate: Sat Dec 23 16:54:03 2023 +0100
Help editor: Housekeeping on CSS
Bring some classes and settings from recent CSS in help/default.css
Change-Id: I9287c1570e4e76c9eb5bc19f248d6db3a7cb6a45
Reviewed-on: https://gerrit.libreoffice.org/c/dev-tools/+/161246
Tested-by: Olivier Hallot <olivier.hal...@libreoffice.org>
Reviewed-by: Olivier Hallot <olivier.hal...@libreoffice.org>
diff --git a/help3/xhpeditor/DisplayArea.css b/help3/xhpeditor/DisplayArea.css
index 6b4df043..c6351c0f 100644
--- a/help3/xhpeditor/DisplayArea.css
+++ b/help3/xhpeditor/DisplayArea.css
@@ -9,6 +9,14 @@
/* Imported from default css for DisplayArea */
+
+:root {
+ --font_mono: Menlo, "Cascadia Mono", "Cascadia Code", Consolas, "DejaVu Sans
Mono", monospace;
+ --font_body: Ubuntu, Cantarell, "Segoe UI Variable", "Segoe UI", "Noto
Sans", "DejaVu Sans", "Lucida Grande", sans-serif, FreeSerif, NanumGothic,
"Noto Sans Tibetan", Taprom;
+ --background-color: #f7f8f7;
+ --module-color: #18A303;
+}
+
#DisplayArea {
background-color: white;
overflow: auto;
@@ -26,14 +34,14 @@
.listitemintable,
.paragraph,
.tablecontent {
- font-family: -apple-system, system-ui, "Segoe UI", Roboto, Ubuntu,
Cantarell, "Noto Sans", "DejaVu Sans", "Lucida Grande", "Helvetica Neue",
Helvetica, Arial, sans-serif, FreeSerif, NanumGothic, "Noto Sans Tibetan",
Taprom;
+ font-family: var(--font_body);
}
.input {
background-color: rgba(0,0,0,0.04);
transition-property: background-color;
transition-duration: 150ms;
border-bottom: 1px dashed rgba(0,0,0,0.1);
- font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida
Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+ font-family: var(--font_mono);
}
#DisplayArea ::selection {
@@ -60,12 +68,16 @@
border-radius: 2px;
display: inline;
padding: 1px 3px;
- font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida
Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+ font-family: var(--font_mono);
+ word-wrap: anywhere;
+}
+.literal {
+ white-space: normal;
}
.smathcode {
border-radius: 2px;
padding: 1px 3px;
- font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida
Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+ font-family: var(--font_mono);
}
.acronym {
@@ -82,7 +94,7 @@
}
.keycode {
/*font-weight: bold;*/
- font-family: Menlo, Consolas, "DejaVu Sans Mono", "Nimbus Mono L", "Lucida
Sans Typewriter", "Courier New", Courier, Monaco, monospace;
+ font-family: var(--font_mono);
}
.widget{
padding: 1px 10px;
@@ -100,33 +112,27 @@
.warning {
display:flex;
align-items: center;
- border-radius: 0 4px 4px 0;
- box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
+ border-radius: 2px;
+ box-shadow: 0 2px 5px -3px rgb(0 0 0 / 10%);
padding: 0.2em;
margin-top: 15px;
}
.note {
- border-left: 4px solid #FFDE09;
- background-color: #FFF4D0;
+ border-left: 2px solid #309048;
+ background-color: #d9f1dd;
}
.tip {
- border-left: 4px solid #38618C;
- background-color: #DAE2EA;
+ border-left: 2px solid #0063b1;
+ background-color: #cde5f7;
}
.warning {
- border-left: 4px solid #FF5964;
- background-color: #FFE0E2;
-}
-.noteicon {
- padding:0.3em;
- transition: transform .2s; /* Animation */
-}
-.noteicon:hover {
- transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it
will go outside of the viewport) */
+ border-left: 2px solid #ed8733;
+ background-color: #f6f1d2;
}
-.notetext {
+.noteicon, .notetext {
padding:0.3em;
}
+
#DisplayArea h1,
#DisplayArea h2,
#DisplayArea h3,
@@ -207,19 +213,13 @@
border-bottom: 1px solid #E8E8E8;
}
/* Special case of icon table*/
-icontable {
+.icontable {
display:flex;
align-items:center;
}
.iconcell {
padding:0.3em;
}
-.imageicon {
- transition: transform .2s; /* Animation */
-}
-.imageicon:hover{
- transform: scale(2.0); /* (200% zoom - Note: if the zoom is too large, it
will go outside of the viewport) */
-}
#DisplayArea table {
box-shadow: rgba(0,0,0,0.1) 0px 1px 3px 0px;
@@ -235,16 +235,23 @@ icontable {
border-right: 0;
padding: 0.3em;
}
+
.tablehead,
.tableheadintable {
font-weight: bold;
margin-top: 0px;
}
+
.tableheadcell {
- background: #148603;
+ background: var(--module-color);
color: white;
vertical-align:top;
}
+
+.table_font_small {
+ font-size: 0.98rem;
+}
+
#DisplayArea footer {
border-top: 2px solid #148603;
padding: 15px 10px 0 10px;
