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.
Smaller buttons on larger screens.
Slightly fade "show" button.
Remove fade when hovered.
Signed-off-by: Joshua Criss <owlsy@outlook.com.au>
Match footer with header
padding left and right so they are
aligned (header uses 1180px,
but footer was using 940px).
Signed-off-by: Joshua Criss <owlsy@outlook.com.au>
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>
follow-up to 3c3a5e2b1a
Retain original monospace properties since those are handled by the system
anyway.
Signed-off-by: Paul Donald <newtwen+github@gmail.com>
Replace hardcoded font-family declarations with CSS custom properties
(--font-sans, --font-serif, --font-mono) that fall back to system UI fonts.
Signed-off-by: Akihiro Nagai <bashing.tremors_0f@icloud.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>
Instead of enumerating each SVG graph that the dark mode is applicable to,
apply --background-color-high to each SVG element that is a child of
<div style="…"> and --text-color-highest to each LINE inside such SVG.
This allows dark mode to work in all SVG widgets by default, in any
current or future LuCI component.
Signed-off-by: Marko Mäkelä <marko.makela@iki.fi>
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>
Replace all calc() doing maths on compatible numbers with their final values (to 2 decimal points).
Signed-off-by: Griffen Edge <griffen@griffenedge.com>
This fixes the graphs after extra divs were added.
Signed-off-by: James Lindstrom <jameslindstrom2@gmail.com>
* Customize commit message
Signed-off-by: Florian Eckert <fe@dev.tdt.de>
Fine tuning #6991
Bugfix for the wireless graphs, reorder everything to the same level
as displayed in the menu and make the spaces even.
Signed-off-by: Thomas Schröder <tschroeder_github@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>
With this addition to the body tag, on desktop browsers the vertical scrollbar
is always visible and the content will not be shifted by changing tabs (like
at System/Software when the update tab has no to little content).
I couldn't see any negative side effects with Chromium browsers or Firefox
under Windows/Linux and Android, but I don't have access to Apple devices
for tests.
Signed-off-by: Thomas Schröder <tschroeder_github@outlook.com>
The inherited nowrap of white-space causes the interface boxes to not line break, resulting in a horizontal scroll bar when many interfaces are present.
Tested on Chrome and Firefox.
Signed-off-by: Daniel Nilsson <daniel.nilsson94@outlook.com>
Remove the white background color for the file input elements, this way it'll use the default color defined for input elements, matching the light/dark theme.
Signed-off-by: Santiago Kozak <santikzk1406@gmail.com>
- Apply CSS reset to before/after pseudo elements as well and fix
resulting shifted offsets
- Apply focus highlight to select elements too
- Improve radio button styling
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
Underline the link text if a tab has keyboard focus in order to give a
visual indication of the focus state.
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
- Make control-group containers flex and ensure proper spacing between
elements, fixes e.g. unwanted break for reveal/hide password button
on narrow mobile views
- Decrease top margin of modal popups
- Fix displaying cell titles on mobile wrapped table rows
- Tune mobile flex table styles
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
- Add proper top and bottom margin for tab descriptions
- Allow flex wrapping for cbi-value rows
- Ensure that nested table/grid sections always take the full width
- Make table/grid section row action buttons are as narrow as possible
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
Since the removal of the clearfix styles, overlong captions will displace
subsequent input field rows.
Fix the issue by replace floating label + field margin with flexbox styles.
Fixes: #5535
Fixes: 8055acc9be ("luci-theme-bootstrap: overhaul styles")
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
