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>
Replace all calc() doing maths on compatible numbers with their final values (to 2 decimal points).
Signed-off-by: Griffen Edge <griffen@griffenedge.com>
luci-theme-openwrt: change to HTML (like all other themes) instead of XML to fix incompatibility
see also https://github.com/openwrt/luci/issues/7229
Signed-off-by: Ramon Van Gorkom <Ramon00c00@gmail.com>
Convert the theme's Lua templates to ucode to avoid the implicit dependency
on the luci-lua-runtime package.
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
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>
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 2bdabf14c30320ef0433828b1a080f6b8fe9c430 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>
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>
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>
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>
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>
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>
* add the decorations for when the links are included in the field descriptions
Thanks @dibdot, @stokito!
Signed-off-by: Stan Grishin <stangri@melmac.ca>
According to a style guide the color should be #00B5E2.
In a9f6d850a2 added a light blue square background to logo.svg.
Their color started differs, the change fixes this.
Signed-off-by: Sergey Ponomarev <stokito@gmail.com>
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>
Paul Donald