| | @@ -1596,132 +1596,10 @@ |
| 1596 | 1596 | opacity: 0 !important; |
| 1597 | 1597 | pointer-events: none !important; |
| 1598 | 1598 | display: none !important; |
| 1599 | 1599 | } |
| 1600 | 1600 | |
| 1601 | | -/* Chat-related */ |
| 1602 | | -body.chat span.at-name { /* for @USERNAME references */ |
| 1603 | | - text-decoration: underline; |
| 1604 | | - font-weight: bold; |
| 1605 | | -} |
| 1606 | | -/* A wrapper for a single single chat message (one row of the UI) */ |
| 1607 | | -body.chat .message-widget { |
| 1608 | | - margin-bottom: 0.75em; |
| 1609 | | - border: none; |
| 1610 | | - display: flex; |
| 1611 | | - flex-direction: column; |
| 1612 | | - border: none; |
| 1613 | | - align-items: flex-start; |
| 1614 | | -} |
| 1615 | | -body.chat.my-messages-right .message-widget.mine { |
| 1616 | | - /* Right-aligns a user's own chat messages, similar to how |
| 1617 | | - most mobile messaging apps do it. */ |
| 1618 | | - align-items: flex-end; |
| 1619 | | -} |
| 1620 | | -body.chat.my-messages-right .message-widget.notification { |
| 1621 | | - /* Center-aligns a system-level notification message. */ |
| 1622 | | - align-items: center; |
| 1623 | | -} |
| 1624 | | -/* The content area of a message. */ |
| 1625 | | -body.chat .message-widget-content { |
| 1626 | | - display: inline-block; |
| 1627 | | - border-radius: 0.25em; |
| 1628 | | - border: 1px solid rgba(0,0,0,0.2); |
| 1629 | | - box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29); |
| 1630 | | - padding: 0.25em 0.5em; |
| 1631 | | - margin-top: 0; |
| 1632 | | - min-width: 9em /*avoid unsightly "underlap" with the neighboring |
| 1633 | | - .message-widget-tab element*/; |
| 1634 | | - white-space: normal; |
| 1635 | | -} |
| 1636 | | -body.chat.monospace-messages .message-widget-content, |
| 1637 | | -body.chat.monospace-messages textarea, |
| 1638 | | -body.chat.monospace-messages input[type=text]{ |
| 1639 | | - font-family: monospace; |
| 1640 | | -} |
| 1641 | | -body.chat .message-widget-content > * { |
| 1642 | | - margin: 0; |
| 1643 | | - padding: 0; |
| 1644 | | -} |
| 1645 | | -body.chat .message-widget-content > pre { |
| 1646 | | - white-space: pre-wrap; |
| 1647 | | -} |
| 1648 | | -body.chat .message-widget-content > .markdown > *:first-child { |
| 1649 | | - margin-top: 0; |
| 1650 | | -} |
| 1651 | | -body.chat .message-widget-content > .markdown > *:last-child { |
| 1652 | | - margin-bottom: 0; |
| 1653 | | -} |
| 1654 | | -/* User name and timestamp (a LEGEND-like element) */ |
| 1655 | | -body.chat .message-widget .message-widget-tab { |
| 1656 | | - border-radius: 0.25em 0.25em 0 0; |
| 1657 | | - margin: 0 0.25em 0em 0.15em; |
| 1658 | | - padding: 0 0.5em 0.15em 0.5em; |
| 1659 | | - cursor: pointer; |
| 1660 | | - white-space: nowrap; |
| 1661 | | -} |
| 1662 | | -body.chat .fossil-tooltip.help-buttonlet-content { |
| 1663 | | - font-size: 80%; |
| 1664 | | -} |
| 1665 | | -body.chat .message-widget .message-widget-tab .xfrom { |
| 1666 | | - /* Element which holds the "this message is from user X" part |
| 1667 | | - of the message banner. */ |
| 1668 | | - font-style: italic; |
| 1669 | | - font-weight: bold; |
| 1670 | | -} |
| 1671 | | -/* The popup element for displaying message timestamps |
| 1672 | | - and deletion controls. */ |
| 1673 | | -body.chat .chat-message-popup { |
| 1674 | | - font-family: monospace; |
| 1675 | | - font-size: 0.8em; |
| 1676 | | - text-align: left; |
| 1677 | | - display: flex; |
| 1678 | | - flex-direction: column; |
| 1679 | | - align-items: stretch; |
| 1680 | | - padding: 0.25em; |
| 1681 | | - z-index: 200; |
| 1682 | | -} |
| 1683 | | -/* Full message timestamps. */ |
| 1684 | | -body.chat .chat-message-popup > span { white-space: nowrap; } |
| 1685 | | -/* Container for the message deletion buttons. */ |
| 1686 | | -body.chat .chat-message-popup > .toolbar { |
| 1687 | | - padding: 0; |
| 1688 | | - margin: 0; |
| 1689 | | - border: 2px inset rgba(0,0,0,0.3); |
| 1690 | | - border-radius: 0.25em; |
| 1691 | | - display: flex; |
| 1692 | | - flex-direction: row; |
| 1693 | | - justify-content: stretch; |
| 1694 | | - flex-wrap: wrap; |
| 1695 | | - align-items: center; |
| 1696 | | -} |
| 1697 | | -body.chat .chat-message-popup > .toolbar > * { |
| 1698 | | - margin: 0.35em; |
| 1699 | | -} |
| 1700 | | -body.chat .chat-message-popup > .toolbar > button { |
| 1701 | | - flex: 1 1 auto; |
| 1702 | | -} |
| 1703 | | -/* The widget for loading more/older chat messages. */ |
| 1704 | | -body.chat #load-msg-toolbar { |
| 1705 | | - border-radius: 0.25em; |
| 1706 | | - padding: 0.1em 0.2em; |
| 1707 | | - margin-bottom: 1em; |
| 1708 | | -} |
| 1709 | | -/* .all-done is set when chat has loaded all of the available |
| 1710 | | - historical messages */ |
| 1711 | | -body.chat #load-msg-toolbar.all-done { |
| 1712 | | - opacity: 0.5; |
| 1713 | | -} |
| 1714 | | -body.chat #load-msg-toolbar > div { |
| 1715 | | - display: flex; |
| 1716 | | - flex-direction: row; |
| 1717 | | - justify-content: stretch; |
| 1718 | | - flex-wrap: wrap; |
| 1719 | | -} |
| 1720 | | -body.chat #load-msg-toolbar > div > button { |
| 1721 | | - flex: 1 1 auto; |
| 1722 | | -} |
| 1723 | 1601 | |
| 1724 | 1602 | /* An icon element intended for use as a button/menu for |
| 1725 | 1603 | accessing app-specific settings. */ |
| 1726 | 1604 | .settings-icon { |
| 1727 | 1605 | /* Icon source: https://de.wikipedia.org/wiki/Datei:OOjs_UI_icon_settings.svg |
| | @@ -1751,234 +1629,10 @@ |
| 1751 | 1629 | border: 1px outset rgba(127,127,127,1); |
| 1752 | 1630 | } |
| 1753 | 1631 | body.fossil-dark-style .settings-icon { |
| 1754 | 1632 | filter: invert(100%); |
| 1755 | 1633 | } |
| 1756 | | -/* "Chat-only mode" hides the site header/footer, showing only |
| 1757 | | - the chat app. */ |
| 1758 | | -body.chat.chat-only-mode{} |
| 1759 | | -body.chat #chat-settings-button {} |
| 1760 | | -/** Popup widget for the /chat settings. */ |
| 1761 | | -body.chat .chat-settings-popup { |
| 1762 | | - font-size: 0.8em; |
| 1763 | | - text-align: left; |
| 1764 | | - display: flex; |
| 1765 | | - flex-direction: column; |
| 1766 | | - align-items: stretch; |
| 1767 | | - padding: 0.25em; |
| 1768 | | - z-index: 200; |
| 1769 | | -} |
| 1770 | | -body.chat .chat-settings-popup > span { |
| 1771 | | - vertical-align: middle; |
| 1772 | | -} |
| 1773 | | -body.chat .chat-settings-popup > span.menu-entry{ |
| 1774 | | - white-space: nowrap; |
| 1775 | | - cursor: pointer; |
| 1776 | | - border: 1px solid; |
| 1777 | | - border-radius: 0.25em; |
| 1778 | | - padding: 0.25em 0.5em; |
| 1779 | | - display: flex; |
| 1780 | | - flex-direction: row; |
| 1781 | | - align-items: center; |
| 1782 | | - justify-content: space-between; |
| 1783 | | -} |
| 1784 | | -body.chat .chat-settings-popup > span.menu-entry:hover { |
| 1785 | | -} |
| 1786 | | -body.chat .chat-settings-popup > span.menu-entry > .help-buttonlet { |
| 1787 | | - vertical-align: middle; |
| 1788 | | -} |
| 1789 | | -body.chat .chat-settings-popup > span.menu-entry > span.button { |
| 1790 | | - margin: 0.25em 0.2em; |
| 1791 | | - padding: 0.25em; |
| 1792 | | - flex: 1 1 auto/*eliminates dead no-click zones on the right*/; |
| 1793 | | -} |
| 1794 | | -body.chat .chat-settings-popup > span.menu-entry > input[type=checkbox] { |
| 1795 | | - cursor: inherit; |
| 1796 | | -} |
| 1797 | | -body.chat .chat-settings-popup > select.menu-entry { |
| 1798 | | - flex: 1 1 auto; |
| 1799 | | - padding: 0; |
| 1800 | | - cursor: pointer; |
| 1801 | | - min-height: 2.5em; |
| 1802 | | - border-radius: 0.25em; |
| 1803 | | -} |
| 1804 | | -body.chat .chat-settings-popup > select.menu-entry > option { |
| 1805 | | - /*Recall that many browsers don't allow styling of OPTION |
| 1806 | | - elements, or allow only very limited styling.*/ |
| 1807 | | -} |
| 1808 | | - |
| 1809 | | -/** Container for the list of /chat messages. */ |
| 1810 | | -body.chat #chat-messages-wrapper { |
| 1811 | | - overflow: auto; |
| 1812 | | - flex: 2 1 auto; |
| 1813 | | - padding: 0 0.25em; |
| 1814 | | -} |
| 1815 | | -body.chat #chat-messages-wrapper.loading > * { |
| 1816 | | - /* An attempt at reducing flicker when loading lots of messages. */ |
| 1817 | | - visibility: hidden; |
| 1818 | | -} |
| 1819 | | -body.chat div.content { |
| 1820 | | - margin: 0; |
| 1821 | | - padding: 0; |
| 1822 | | - display: flex; |
| 1823 | | - flex-direction: column-reverse; |
| 1824 | | - /* ^^^^ In order to get good automatic scrolling of new messages on |
| 1825 | | - the BOTTOM in bottom-up chat mode, such that they scroll up |
| 1826 | | - instead of down, we have to use column-reverse layout, which |
| 1827 | | - changes #chat-messages-wrapper's "gravity" for purposes of |
| 1828 | | - scrolling! If we instead use flex-direction:column then each new |
| 1829 | | - message pushes #chat-input-area down further off the screen! |
| 1830 | | - */ |
| 1831 | | - align-items: stretch; |
| 1832 | | -} |
| 1833 | | -/* Wrapper for /chat user input controls */ |
| 1834 | | -body.chat #chat-input-area { |
| 1835 | | - display: flex; |
| 1836 | | - flex-direction: column; |
| 1837 | | - padding: 0.5em 1em; |
| 1838 | | - border-bottom: none; |
| 1839 | | - border-top: 1px solid black; |
| 1840 | | - margin: 0.5em 1em 0 1em; |
| 1841 | | - position: initial /*sticky currently disabled due to scrolling-related issues*/; |
| 1842 | | - bottom: 0; |
| 1843 | | -} |
| 1844 | | -body.chat:not(.chat-only-mode) #chat-input-area{ |
| 1845 | | - /* Safari user reports that 2em is necessary to keep the file selection |
| 1846 | | - widget from overlapping the page footer, whereas a margin of 0 is fine |
| 1847 | | - for FF/Chrome (and 2em is a *huge* waste of space for those). */ |
| 1848 | | - margin-bottom: 0; |
| 1849 | | -} |
| 1850 | | - |
| 1851 | | -/* Widget holding the chat message input field, send button, and |
| 1852 | | - settings button. */ |
| 1853 | | -body.chat #chat-input-line { |
| 1854 | | - display: flex; |
| 1855 | | - flex-direction: row; |
| 1856 | | - margin-bottom: 0.25em; |
| 1857 | | - align-items: stretch; |
| 1858 | | -} |
| 1859 | | -body.chat #chat-edit-buttons { |
| 1860 | | - display: flex; |
| 1861 | | - flex-direction: column; |
| 1862 | | - justify-content: space-between; |
| 1863 | | -} |
| 1864 | | -body.chat #chat-input-line.single-line { |
| 1865 | | - flex-direction: column; |
| 1866 | | -} |
| 1867 | | -body.chat #chat-input-line.single-line #chat-edit-buttons { |
| 1868 | | - flex-direction: row; |
| 1869 | | -} |
| 1870 | | -body.chat #chat-edit-buttons > * { |
| 1871 | | - /*flex: 1 5 auto;*/ |
| 1872 | | - max-width: 6em; |
| 1873 | | - margin: 0 0.25em; |
| 1874 | | -} |
| 1875 | | -body.chat #chat-input-line > button { |
| 1876 | | - max-width: 4em; |
| 1877 | | -} |
| 1878 | | -body.chat #chat-input-line > #chat-settings-button{ |
| 1879 | | - margin: 0 0 0 0.25em; |
| 1880 | | - max-width: 2em; |
| 1881 | | -} |
| 1882 | | -body.chat #chat-input-line > input[type=text], |
| 1883 | | -body.chat #chat-input-line > textarea { |
| 1884 | | - flex: 5 1 auto; |
| 1885 | | - max-width: revert; |
| 1886 | | -} |
| 1887 | | -/* Widget holding the file selection control and preview */ |
| 1888 | | -body.chat #chat-input-file-area { |
| 1889 | | - display: flex; |
| 1890 | | - flex-direction: row; |
| 1891 | | - align-items: center; |
| 1892 | | - flex-wrap: wrap; |
| 1893 | | -} |
| 1894 | | -body.chat #chat-input-file-area > .file-selection-wrapper { |
| 1895 | | - align-self: flex-start; |
| 1896 | | - margin-right: 0.5em; |
| 1897 | | - flex: 0 1 auto; |
| 1898 | | - padding: 0.25em 0.25em 0.25em 0; |
| 1899 | | -} |
| 1900 | | -body.chat #chat-input-file-area .file-selection-wrapper > * { |
| 1901 | | - vertical-align: middle; |
| 1902 | | - margin: 0; |
| 1903 | | -} |
| 1904 | | -body.chat #chat-input-file { |
| 1905 | | - border:1px solid rgba(0,0,0,0);/*avoid UI shift during drop-targeting*/ |
| 1906 | | - border-radius: 0.25em; |
| 1907 | | - padding: 0.25em; |
| 1908 | | -} |
| 1909 | | -body.chat #chat-input-file > input { |
| 1910 | | - flex: 1 0 auto; |
| 1911 | | -} |
| 1912 | | -/* Indicator when a drag/drop is in progress */ |
| 1913 | | -body.chat #chat-input-file.dragover { |
| 1914 | | - border: 1px dashed green; |
| 1915 | | -} |
| 1916 | | -/* Widget holding the details of a selected/dropped file/image. */ |
| 1917 | | -body.chat #chat-drop-details { |
| 1918 | | - flex: 0 1 auto; |
| 1919 | | - padding: 0.5em 1em; |
| 1920 | | - margin-left: 0.5em; |
| 1921 | | - white-space: pre; |
| 1922 | | - font-family: monospace; |
| 1923 | | -} |
| 1924 | | - |
| 1925 | | -body.chat #chat-drop-details img { |
| 1926 | | - max-width: 45%; |
| 1927 | | - max-height: 45%; |
| 1928 | | -} |
| 1929 | | - |
| 1930 | | -body.chat #chat-config, |
| 1931 | | -body.chat #chat-preview { |
| 1932 | | - /* /chat configuration widget */ |
| 1933 | | - display: flex; |
| 1934 | | - flex-direction: column; |
| 1935 | | - overflow: auto; |
| 1936 | | - flex: 2 1 auto; |
| 1937 | | - padding: 0; |
| 1938 | | - margin: 0; |
| 1939 | | - align-items: stretch; |
| 1940 | | - min-height: 6em; |
| 1941 | | -} |
| 1942 | | -body.chat #chat-config #chat-config-options { |
| 1943 | | - /* /chat config options go here */ |
| 1944 | | - flex: 1 1 auto; |
| 1945 | | - display: flex; |
| 1946 | | - flex-direction: column; |
| 1947 | | - overflow: auto; |
| 1948 | | -} |
| 1949 | | -body.chat #chat-config #chat-config-options .menu-entry { |
| 1950 | | - display: flex; |
| 1951 | | - align-items: center; |
| 1952 | | - flex-direction: row; |
| 1953 | | - flex-wrap: wrap; |
| 1954 | | - padding: 1em; |
| 1955 | | -} |
| 1956 | | -body.chat #chat-config #chat-config-options .menu-entry > *:first-child { |
| 1957 | | - margin-right: 1em; |
| 1958 | | -} |
| 1959 | | -body.chat #chat-preview #chat-preview-content { |
| 1960 | | - overflow: auto; |
| 1961 | | - flex: 1 1 auto; |
| 1962 | | - padding: 0.5em; |
| 1963 | | - border: 1px dotted; |
| 1964 | | -} |
| 1965 | | -body.chat #chat-preview #chat-preview-content > * { |
| 1966 | | - margin: 0; |
| 1967 | | - padding: 0; |
| 1968 | | -} |
| 1969 | | -body.chat #chat-preview #chat-preview-buttons { |
| 1970 | | - flex: 0 1 auto; |
| 1971 | | - display: flex; |
| 1972 | | - flex-direction: column; |
| 1973 | | -} |
| 1974 | | -body.chat #chat-config > button, |
| 1975 | | -body.chat #chat-preview #chat-preview-buttons > button { |
| 1976 | | - padding: 0.5em; |
| 1977 | | - flex: 0 1 auto; |
| 1978 | | - margin: 0.25em 0; |
| 1979 | | -} |
| 1980 | 1634 | |
| 1981 | 1635 | input[type="checkbox"].diff-toggle { |
| 1982 | 1636 | float: right; |
| 1983 | 1637 | } |
| 1984 | 1638 | |
| 1985 | 1639 | |