Fossil SCM

CSS docs and line-wrapped the new settings icon data URL. No functional changes.

stephan 2020-12-25 23:38 trunk
Commit ca42098af0af0411694113550ffb41e8789ec5ae66aa931c54a284dd2197d9b6
Parent 6849bb0b6b5ae9e…
1 file changed +28 -7
~ src/default.css
M src/default.css
+28 -7
--- src/default.css
+++ src/default.css
@@ -1472,53 +1472,57 @@
14721472
 /* Chat-related */
14731473
 body.chat span.at-name { /* for @USERNAME references */
14741474
 text-decoration: underline;
14751475
 font-weight: bold;
14761476
 }
1477
-/* A wrapper for a single single message (one row of the UI) */
1477
+/* A wrapper for a single single chat message (one row of the UI) */
14781478
 body.chat .message-widget {
14791479
 margin-bottom: 0.75em;
14801480
 border: none;
14811481
 display: flex;
14821482
 flex-direction: column;
14831483
 border: none;
14841484
 align-items: flex-start;
14851485
 }
14861486
 body.chat.my-messages-right .message-widget.mine {
1487
+ /* Right-aligns a user's own chat messages, similar to how
1488
+ most mobile messaging apps do it. */
14871489
 align-items: flex-end;
14881490
 }
1489
-/* The content area of a message (the body element of a FIELDSET) */
1491
+/* The content area of a message. */
14901492
 body.chat .message-widget-content {
14911493
 display: inline-block;
14921494
 border-radius: 0.25em;
14931495
 border: 1px solid rgba(0,0,0,0.2);
14941496
 box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
14951497
 padding: 0.25em 0.5em;
14961498
 margin-top: 0;
1497
- min-width: 9em /*avoid unsightly "underlap" with the user name label*/;
1499
+ min-width: 9em /*avoid unsightly "underlap" with the neighboring
1500
+ .message-widget-tab element*/;
14981501
 white-space: pre-wrap/*needed for multi-line edits*/;
14991502
 }
15001503
 body.chat.monospace-messages .message-widget-content,
15011504
 body.chat.monospace-messages textarea,
15021505
 body.chat.monospace-messages input[type=text]{
15031506
 font-family: monospace;
15041507
 }
15051508
1506
-/* User name for the post (a LEGEND element) */
1509
+/* User name and timestamp (a LEGEND-like element) */
15071510
 body.chat .message-widget .message-widget-tab {
15081511
 border-radius: 0.25em 0.25em 0 0;
15091512
 padding: 0 0.5em;
1510
- /*text-align: left; Firefox requires the 'align' attribute */
15111513
 margin: 0 0.25em 0em 0.15em;
15121514
 padding: 0 0.5em 0.15em 0.5em;
15131515
 cursor: pointer;
15141516
 }
15151517
15161518
 body.chat .fossil-tooltip.help-buttonlet-content {
15171519
 font-size: 80%;
15181520
 }
15191521
1522
+/* The popup element for displaying message timestamps
1523
+ and deletion controls. */
15201524
 body.chat .chat-message-popup {
15211525
 font-family: monospace;
15221526
 font-size: 0.8em;
15231527
 text-align: left;
15241528
 display: flex;
@@ -1526,10 +1530,11 @@
15261530
 align-items: stretch;
15271531
 padding: 0.25em;
15281532
 z-index: 200;
15291533
 }
15301534
 body.chat .chat-message-popup > span { white-space: nowrap; }
1535
+/* Container for the message deletion buttons. */
15311536
 body.chat .chat-message-popup > .toolbar {
15321537
 padding: 0.2em;
15331538
 margin: 0;
15341539
 border: 2px inset rgba(0,0,0,0.3);
15351540
 border-radius: 0.25em;
@@ -1540,15 +1545,18 @@
15401545
 }
15411546
 body.chat .chat-message-popup > .toolbar > button {
15421547
 flex: 1 1 auto;
15431548
 }
15441549
1550
+/* The main widget for loading more/older chat messages. */
15451551
 body.chat #load-msg-toolbar {
15461552
 border-radius: 0.25em;
15471553
 padding: 0.1em 0.2em;
15481554
 margin-bottom: 1em;
15491555
 }
1556
+/* Set when chat has loaded all of the available historical
1557
+ messages */
15501558
 body.chat #load-msg-toolbar.all-done {
15511559
 opacity: 0.5;
15521560
 }
15531561
 body.chat #load-msg-toolbar > div {
15541562
 display: flex;
@@ -1558,14 +1566,23 @@
15581566
 }
15591567
 body.chat #load-msg-toolbar > div > button {
15601568
 flex: 1 1 auto;
15611569
 }
15621570
1571
+/* An icon element intended for use as a button/menu for
1572
+ accessing app-specific settings. */
15631573
 .settings-icon {
15641574
 /* Icon source: https://de.wikipedia.org/wiki/Datei:OOjs_UI_icon_settings.svg
15651575
 MIT License. */
1566
- background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0, 0, 24, 24'%3e%3cg id='settings'%3e%3cpath id='gear' d='M3 4h3v2h-3zM12 4h9v2h-9zM8 3h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 11h9v2h-9zM18 11h3v2h-3zM14 10h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 18h6v2h-6zM15 18h6v2h-6zM11 17h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1z'/%3e%3c/g%3e%3c/svg%3e");
1576
+ background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg \
1577
+xmlns='http://www.w3.org/2000/svg' width='24' height='24' \
1578
+viewBox='0, 0, 24, 24'%3e%3cg id='settings'%3e%3cpath id='gear' \
1579
+d='M3 4h3v2h-3zM12 4h9v2h-9zM8 3h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 \
1580
+0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 11h9v2h-9zM18 11h3v2h-3zM14 10h2c.552 0 1 .448 \
1581
+1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 18h6v2h-6zM15 \
1582
+18h6v2h-6zM11 17h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 \
1583
+0-1-.448-1-1v-2c0-.552.448-1 1-1z'/%3e%3c/g%3e%3c/svg%3e");
15671584
 background-repeat: no-repeat;
15681585
 background-position: center;
15691586
 display: inline-block;
15701587
 min-height: 1em;
15711588
 max-height: 1em;
@@ -1583,10 +1600,11 @@
15831600
 body.fossil-dark-style .settings-icon {
15841601
 filter: invert(100%);
15851602
 }
15861603
 body.chat #chat-settings-button {
15871604
 }
1605
+/** Popup widget for the /chat settings. */
15881606
 body.chat .chat-settings-popup {
15891607
 font-size: 0.8em;
15901608
 text-align: left;
15911609
 display: flex;
15921610
 flex-direction: column;
@@ -1617,14 +1635,17 @@
16171635
 flex: 1 1 auto/*eliminates dead no-click zones on the right*/;
16181636
 }
16191637
 body.chat .chat-settings-popup > span.menu-entry > input[type=checkbox] {
16201638
 cursor: inherit;
16211639
 }
1640
+/** Container for the list of /chat messages. */
16221641
 body.chat #chat-messages-wrapper {
16231642
 display: flex;
16241643
 flex-direction: column;
16251644
 }
1645
+/* "Chat-only mode" hides the site header/footer, showing only
1646
+ the chat app. */
16261647
 body.chat.chat-only-mode{
16271648
 }
16281649
 body.chat.chat-only-mode > div.content {
16291650
 margin: 0;
16301651
 padding: 0;
@@ -1651,11 +1672,11 @@
16511672
 top: 0;
16521673
 z-index: 99 /* so that it scrolls under input area. If it's
16531674
 lower than div.content then mouse events to it
16541675
 are blocked!*/;
16551676
 }
1656
-
1677
+/* Wrapper for /chat user input controls */
16571678
 body.chat #chat-input-area {
16581679
 display: flex;
16591680
 flex-direction: column;
16601681
 border-bottom: 1px solid black;
16611682
 margin-bottom: 0.5em;
16621683
--- src/default.css
+++ src/default.css
@@ -1472,53 +1472,57 @@
1472 /* Chat-related */
1473 body.chat span.at-name { /* for @USERNAME references */
1474 text-decoration: underline;
1475 font-weight: bold;
1476 }
1477 /* A wrapper for a single single message (one row of the UI) */
1478 body.chat .message-widget {
1479 margin-bottom: 0.75em;
1480 border: none;
1481 display: flex;
1482 flex-direction: column;
1483 border: none;
1484 align-items: flex-start;
1485 }
1486 body.chat.my-messages-right .message-widget.mine {
 
 
1487 align-items: flex-end;
1488 }
1489 /* The content area of a message (the body element of a FIELDSET) */
1490 body.chat .message-widget-content {
1491 display: inline-block;
1492 border-radius: 0.25em;
1493 border: 1px solid rgba(0,0,0,0.2);
1494 box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
1495 padding: 0.25em 0.5em;
1496 margin-top: 0;
1497 min-width: 9em /*avoid unsightly "underlap" with the user name label*/;
 
1498 white-space: pre-wrap/*needed for multi-line edits*/;
1499 }
1500 body.chat.monospace-messages .message-widget-content,
1501 body.chat.monospace-messages textarea,
1502 body.chat.monospace-messages input[type=text]{
1503 font-family: monospace;
1504 }
1505
1506 /* User name for the post (a LEGEND element) */
1507 body.chat .message-widget .message-widget-tab {
1508 border-radius: 0.25em 0.25em 0 0;
1509 padding: 0 0.5em;
1510 /*text-align: left; Firefox requires the 'align' attribute */
1511 margin: 0 0.25em 0em 0.15em;
1512 padding: 0 0.5em 0.15em 0.5em;
1513 cursor: pointer;
1514 }
1515
1516 body.chat .fossil-tooltip.help-buttonlet-content {
1517 font-size: 80%;
1518 }
1519
 
 
1520 body.chat .chat-message-popup {
1521 font-family: monospace;
1522 font-size: 0.8em;
1523 text-align: left;
1524 display: flex;
@@ -1526,10 +1530,11 @@
1526 align-items: stretch;
1527 padding: 0.25em;
1528 z-index: 200;
1529 }
1530 body.chat .chat-message-popup > span { white-space: nowrap; }
 
1531 body.chat .chat-message-popup > .toolbar {
1532 padding: 0.2em;
1533 margin: 0;
1534 border: 2px inset rgba(0,0,0,0.3);
1535 border-radius: 0.25em;
@@ -1540,15 +1545,18 @@
1540 }
1541 body.chat .chat-message-popup > .toolbar > button {
1542 flex: 1 1 auto;
1543 }
1544
 
1545 body.chat #load-msg-toolbar {
1546 border-radius: 0.25em;
1547 padding: 0.1em 0.2em;
1548 margin-bottom: 1em;
1549 }
 
 
1550 body.chat #load-msg-toolbar.all-done {
1551 opacity: 0.5;
1552 }
1553 body.chat #load-msg-toolbar > div {
1554 display: flex;
@@ -1558,14 +1566,23 @@
1558 }
1559 body.chat #load-msg-toolbar > div > button {
1560 flex: 1 1 auto;
1561 }
1562
 
 
1563 .settings-icon {
1564 /* Icon source: https://de.wikipedia.org/wiki/Datei:OOjs_UI_icon_settings.svg
1565 MIT License. */
1566 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0, 0, 24, 24'%3e%3cg id='settings'%3e%3cpath id='gear' d='M3 4h3v2h-3zM12 4h9v2h-9zM8 3h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 11h9v2h-9zM18 11h3v2h-3zM14 10h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 18h6v2h-6zM15 18h6v2h-6zM11 17h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1z'/%3e%3c/g%3e%3c/svg%3e");
 
 
 
 
 
 
 
1567 background-repeat: no-repeat;
1568 background-position: center;
1569 display: inline-block;
1570 min-height: 1em;
1571 max-height: 1em;
@@ -1583,10 +1600,11 @@
1583 body.fossil-dark-style .settings-icon {
1584 filter: invert(100%);
1585 }
1586 body.chat #chat-settings-button {
1587 }
 
1588 body.chat .chat-settings-popup {
1589 font-size: 0.8em;
1590 text-align: left;
1591 display: flex;
1592 flex-direction: column;
@@ -1617,14 +1635,17 @@
1617 flex: 1 1 auto/*eliminates dead no-click zones on the right*/;
1618 }
1619 body.chat .chat-settings-popup > span.menu-entry > input[type=checkbox] {
1620 cursor: inherit;
1621 }
 
1622 body.chat #chat-messages-wrapper {
1623 display: flex;
1624 flex-direction: column;
1625 }
 
 
1626 body.chat.chat-only-mode{
1627 }
1628 body.chat.chat-only-mode > div.content {
1629 margin: 0;
1630 padding: 0;
@@ -1651,11 +1672,11 @@
1651 top: 0;
1652 z-index: 99 /* so that it scrolls under input area. If it's
1653 lower than div.content then mouse events to it
1654 are blocked!*/;
1655 }
1656
1657 body.chat #chat-input-area {
1658 display: flex;
1659 flex-direction: column;
1660 border-bottom: 1px solid black;
1661 margin-bottom: 0.5em;
1662
--- src/default.css
+++ src/default.css
@@ -1472,53 +1472,57 @@
1472 /* Chat-related */
1473 body.chat span.at-name { /* for @USERNAME references */
1474 text-decoration: underline;
1475 font-weight: bold;
1476 }
1477 /* A wrapper for a single single chat message (one row of the UI) */
1478 body.chat .message-widget {
1479 margin-bottom: 0.75em;
1480 border: none;
1481 display: flex;
1482 flex-direction: column;
1483 border: none;
1484 align-items: flex-start;
1485 }
1486 body.chat.my-messages-right .message-widget.mine {
1487 /* Right-aligns a user's own chat messages, similar to how
1488 most mobile messaging apps do it. */
1489 align-items: flex-end;
1490 }
1491 /* The content area of a message. */
1492 body.chat .message-widget-content {
1493 display: inline-block;
1494 border-radius: 0.25em;
1495 border: 1px solid rgba(0,0,0,0.2);
1496 box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
1497 padding: 0.25em 0.5em;
1498 margin-top: 0;
1499 min-width: 9em /*avoid unsightly "underlap" with the neighboring
1500 .message-widget-tab element*/;
1501 white-space: pre-wrap/*needed for multi-line edits*/;
1502 }
1503 body.chat.monospace-messages .message-widget-content,
1504 body.chat.monospace-messages textarea,
1505 body.chat.monospace-messages input[type=text]{
1506 font-family: monospace;
1507 }
1508
1509 /* User name and timestamp (a LEGEND-like element) */
1510 body.chat .message-widget .message-widget-tab {
1511 border-radius: 0.25em 0.25em 0 0;
1512 padding: 0 0.5em;
 
1513 margin: 0 0.25em 0em 0.15em;
1514 padding: 0 0.5em 0.15em 0.5em;
1515 cursor: pointer;
1516 }
1517
1518 body.chat .fossil-tooltip.help-buttonlet-content {
1519 font-size: 80%;
1520 }
1521
1522 /* The popup element for displaying message timestamps
1523 and deletion controls. */
1524 body.chat .chat-message-popup {
1525 font-family: monospace;
1526 font-size: 0.8em;
1527 text-align: left;
1528 display: flex;
@@ -1526,10 +1530,11 @@
1530 align-items: stretch;
1531 padding: 0.25em;
1532 z-index: 200;
1533 }
1534 body.chat .chat-message-popup > span { white-space: nowrap; }
1535 /* Container for the message deletion buttons. */
1536 body.chat .chat-message-popup > .toolbar {
1537 padding: 0.2em;
1538 margin: 0;
1539 border: 2px inset rgba(0,0,0,0.3);
1540 border-radius: 0.25em;
@@ -1540,15 +1545,18 @@
1545 }
1546 body.chat .chat-message-popup > .toolbar > button {
1547 flex: 1 1 auto;
1548 }
1549
1550 /* The main widget for loading more/older chat messages. */
1551 body.chat #load-msg-toolbar {
1552 border-radius: 0.25em;
1553 padding: 0.1em 0.2em;
1554 margin-bottom: 1em;
1555 }
1556 /* Set when chat has loaded all of the available historical
1557 messages */
1558 body.chat #load-msg-toolbar.all-done {
1559 opacity: 0.5;
1560 }
1561 body.chat #load-msg-toolbar > div {
1562 display: flex;
@@ -1558,14 +1566,23 @@
1566 }
1567 body.chat #load-msg-toolbar > div > button {
1568 flex: 1 1 auto;
1569 }
1570
1571 /* An icon element intended for use as a button/menu for
1572 accessing app-specific settings. */
1573 .settings-icon {
1574 /* Icon source: https://de.wikipedia.org/wiki/Datei:OOjs_UI_icon_settings.svg
1575 MIT License. */
1576 background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg \
1577 xmlns='http://www.w3.org/2000/svg' width='24' height='24' \
1578 viewBox='0, 0, 24, 24'%3e%3cg id='settings'%3e%3cpath id='gear' \
1579 d='M3 4h3v2h-3zM12 4h9v2h-9zM8 3h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 \
1580 0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 11h9v2h-9zM18 11h3v2h-3zM14 10h2c.552 0 1 .448 \
1581 1 1v2c0 .552-.448 1-1 1h-2c-.552 0-1-.448-1-1v-2c0-.552.448-1 1-1zM3 18h6v2h-6zM15 \
1582 18h6v2h-6zM11 17h2c.552 0 1 .448 1 1v2c0 .552-.448 1-1 1h-2c-.552 \
1583 0-1-.448-1-1v-2c0-.552.448-1 1-1z'/%3e%3c/g%3e%3c/svg%3e");
1584 background-repeat: no-repeat;
1585 background-position: center;
1586 display: inline-block;
1587 min-height: 1em;
1588 max-height: 1em;
@@ -1583,10 +1600,11 @@
1600 body.fossil-dark-style .settings-icon {
1601 filter: invert(100%);
1602 }
1603 body.chat #chat-settings-button {
1604 }
1605 /** Popup widget for the /chat settings. */
1606 body.chat .chat-settings-popup {
1607 font-size: 0.8em;
1608 text-align: left;
1609 display: flex;
1610 flex-direction: column;
@@ -1617,14 +1635,17 @@
1635 flex: 1 1 auto/*eliminates dead no-click zones on the right*/;
1636 }
1637 body.chat .chat-settings-popup > span.menu-entry > input[type=checkbox] {
1638 cursor: inherit;
1639 }
1640 /** Container for the list of /chat messages. */
1641 body.chat #chat-messages-wrapper {
1642 display: flex;
1643 flex-direction: column;
1644 }
1645 /* "Chat-only mode" hides the site header/footer, showing only
1646 the chat app. */
1647 body.chat.chat-only-mode{
1648 }
1649 body.chat.chat-only-mode > div.content {
1650 margin: 0;
1651 padding: 0;
@@ -1651,11 +1672,11 @@
1672 top: 0;
1673 z-index: 99 /* so that it scrolls under input area. If it's
1674 lower than div.content then mouse events to it
1675 are blocked!*/;
1676 }
1677 /* Wrapper for /chat user input controls */
1678 body.chat #chat-input-area {
1679 display: flex;
1680 flex-direction: column;
1681 border-bottom: 1px solid black;
1682 margin-bottom: 0.5em;
1683

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button