Add dark mode following the luci-theme-bootstrap pattern: auto-detect
via prefers-color-scheme, with forced MaterialDark/MaterialLight
variants. Replace ~60 hardcoded colors in cascade.css with CSS
variables and override them in a :root[data-darkmode="true"] block.
Signed-off-by: Shannon Barber <sgbarber@gmail.com>
Compliment '-webkit-appearance'
with 'appearance', as it is
non-standard and has since
been succeeded by 'appearance',
accepted by all baseline browsers.
Future consideration to then
remove '-webkit-appearance'.
Signed-off-by: Joshua Criss <owlsy@outlook.com.au>
Change mouse icon from text
cursor to pointer. Fix buttons not
being same min-width. Create
larger buttons for smaller screens,
same behaviour as
luci-theme-bootstrap. Slightly
fade "show" button: no variable
for disabled opacity like
luci-theme-bootstrap, assuming
0.7. Remove fade when hovered.
Resolve mismatched spacing for
each heading in box, fixing
spacing for when contents are
hidden and adding spacing
when contents are shown.
Signed-off-by: Joshua Criss <owlsy@outlook.com.au>
Set text to header colour when
using the header colour
background to match same
behaviour, for e.g. IPv4 Upstream
and IPv6 Upstream boxes.
Signed-off-by: Joshua Criss <owlsy@outlook.com.au>
- Remove `| LuCI` suffix from title tag
- Make material theme zoomable and remove legacy meta tags
- Unify viewport
Link: #8330
Signed-off-by: Self-Hosting-Group <selfhostinggroup-git+openwrt@shost.ing>
follow-up to 720c96ce5b
While ::before CSS styling has been deactivated, and
'content' removed, cbi-value-first-field is a bit
ambiguous. So, restore cbi-section-table-titles, and
replace the ::before tags in CSS.
Remove also the data-title for title rows. We already
insert titles for named headers and rows via HTML and
not via CSS after the mentioned commit.
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
dispatched.title is sometimes null, especially where menu JSON
does not declare a title for a page.
Also, while we're here, wrap these in i18n tags, since the
JSON titles are often translated (they're included in po matter).
Closes#8222
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
follow-up to 788e47034b
Some of the CSS changes have knock-on effects and change behaviour in
other display areas, especially when the CSS is minified.
Simplified to change between label flavours on hide/show status.
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
Add support to show/hide index cards. A card's state is saved using the
browser localstorage and its state is restored on page reload/relogin.
Rework the pool function to check and skip loading of hidden cards.
Rework themes to address new button position.
Signed-off-by: Christian Marangi <ansuelsmth@gmail.com>
[ changed tabs in CSS ]
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
Many LuCI icons doubled in size during migration to vector graphics
in commit ae5d91da90 (16px to 32px).
Sizing of their instances is mostly controlled by CSS, but there's
an exception - network interface boxes of "Interfaces" page in LuCI.
Current CSS doesn't specify any particular size requirements to follow,
so the icons just scale with the images served, thus effectively
doubling in width and height compared to state before the vectorization
commit. Such a big icons look odd and take up too much space, especially
for bridge interfaces with many ports.
Instead of reverting to the original 16×16px, this commit proposes
compromise of 24×24px as most of other icons within LuCI became a bit
bigger as well.
Signed-off-by: Dávid Benko <davidbenko@davidbenko.dev>
Clear, crisp, resolution independent vector graphics replace the trusty
microscopic PNG. Some minor CSS changes were needed to constrain images
in some locations to make sure they don't consume too much space.
Iconography taken from Mate desktop theme with minor adjustments:
https://github.com/mate-desktop/mate-icon-theme/
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
Implement a dynamic menu item width to allow item unwrapped and visible:
'min-width: max-content;' or 'max-width: max-content;'
Remove IE hacks and fix a console error for -webkit-scrollbar-thumb
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
In CSS, the flex-wrap property is used in a flex container to control
how flex items are laid out when there is not enough space in a single
line.
If a modal is displayed on small screens, the buttons are not wrapped. They
remain on one line. This breaks the layout and does not look good.
Signed-off-by: Florian Eckert <fe@dev.tdt.de>
first-child:
Selects an element that is the first child of its parent. The element must
be the very first child of its parent, regardless of its type.
first-of-type:
Selects the first element of its type among its siblings. The element must
be the first of its type (e.g., <p>, <div>, etc.) within its parent, but it
does *not* have to be the first child.
Makes the CSS usage more robust if the layout changes and new html elements
are added.
Signed-off-by: Florian Eckert <fe@dev.tdt.de>
Upstream color is defined as #808080, so for better distinction the
color is changed to var(--white-color).
Signed-off-by: Christian Korber <ck@dev.tdt.de>
This note is also not displayed in the theme luci-theme-boostrap. Also, for
security reasons, we should not explicitly point this out on the login page,
that no password is set.
Signed-off-by: Florian Eckert <fe@dev.tdt.de>
The current implementation made the commands from the app luci-app-commands absolutely positioned which resulted in hiding elements which was underneath it, ie. the buttons. This implementation removes the absolutely positioned behavior making the buttons visible again and as an upside aligns it with how the Bootstrap theme handles commands.
Signed-off-by: Daniel Nilsson <daniel.nilsson94@outlook.com>
Partially reverts 2bdabf14c3 by adding back the deleted color variables as the custom.css was used by users to override the theme with their own colors. To maintain backwards compatibility with users we should not remove/rename these as it will result in colors being applied incorrectly.
Signed-off-by: Daniel Nilsson <daniel.nilsson94@outlook.com>
This changed spawned from trying to make certain text colors readable (such as white text on white background in many dialogs) introduced by commit 4ee2bc6 (ref: #5841) which made obvious the need to improve the color and contrast situation in the theme.
Alot of colors were duplicated in cascade.css and made for a hard time to align colors across different elements. This commit tries to rectify that by introducing variables for all commonly used colors.
* All base colors (white, blue, red, green, blue, yellow, etc) has been consolidated and moved to common variables
* Introduced more specific selectors for info levels to avoid colors bleeding over to other elements
* Removed duplicated properties which were overriden at the next row
Signed-off-by: Daniel Nilsson <daniel.nilsson94@outlook.com>
Subsequent commits will drop the JS based mouse following focus behavior,
so add appropriate replacement CSS hover styles.
Ref: #6903
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
The new OpenWrt logo.svg is copied from luci-theme-openwrt-2020.
The logo.png was copied too but resized from 180px 3.9Kb down to 48px 2.3Kb.
This is enough when used as icon for app pinned to desktop.
Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
Fix the message from "Sytem" to "System" and merge with the existing
message on the other themes.
Signed-off-by: INAGAKI Hiroshi <musashino.open@gmail.com>
Paul Donald
Shannon Barber
Joshua Criss
Self-Hosting-Group
Brian White
Ramon Van Gorkom
Eamon Xiong
Christian Marangi
Dávid Benko
Jyn
Florian Eckert
Christian Korber
Mustafa Can Elmacı
Daniel Nilsson
Fengyu Wu
Jo-Philipp Wich
Sergey Ponomarev
INAGAKI Hiroshi