Skip to content

luci-theme-material: fix overview spacing #8508

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ghost wants to merge 1 commit into from
Closed

luci-theme-material: fix overview spacing #8508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,3 @@ modules/luci-compat/src/plural_formula.h
docs/**/*.*
**eslint.config**
!eslint.config.mjs
.DS_Store
3 changes: 1 addition & 2 deletions modules/luci-mod-system/root/usr/share/rpcd/acl.d/luci-mod-system.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,8 +61,7 @@
"read": {
"file": {
"/usr/share/ucode/luci/*": [ "read" ]
},
"uci": [ "luci_plugins" ]
}
}
},

Expand Down
32 changes: 2 additions & 30 deletions themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1371,9 +1371,8 @@ footer {
font-size: 12px;
color: var(--text-color-medium);
/* the redundant properties below work around a csstidy bug */
/* Match footer with header padding left and right so they are aligned (header uses 1180px, but footer was using 940px) */
padding-left: calc((100% - 1180px) / 2);
padding-right: calc((100% - 1180px) / 2);
padding-left: calc((100% - 940px) / 2);
padding-right: calc((100% - 940px) / 2);
}

footer a {
Expand Down Expand Up @@ -2624,30 +2623,3 @@ div.cbi-value var.cbi-tooltip-container,
#view div[style] > svg line[style] {
stroke: var(--text-color-highest)!important;
}

/* === STATUS OVERVIEW: HIDE/SHOW BUTTONS === */

/* Change mouse icon from text cursor to pointer */
body[data-page='admin-status-overview'] .cbi-title .label {
cursor: pointer;
}

/* Smaller buttons on larger screens */
@media screen and (min-width : 481px) {
body[data-page='admin-status-overview'] .cbi-title .label {
line-height: 1em;
margin: 0.7em 0;
}
}

/* Slightly fade "show" button */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
opacity: var(--disabled-opacity);
}

/* Remove fade when hovered */
body[data-page='admin-status-overview'] .cbi-title .label.notice:hover {
opacity: initial;
}

/* === END STATUS OVERVIEW: HIDE/SHOW BUTTONS === */
47 changes: 5 additions & 42 deletions themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,22 +107,20 @@ abbr[title], acronym[title] {
color: var(--main-bright-color);
display: inline-block;
font-size: .85em;
line-height: 1.5em;
padding: 0 .5em;
margin: .125em;
border-radius: 1em;
cursor: pointer;
white-space: nowrap;
/* Match rounded indicators to same style as "hide" and "show" buttons for design consistency (site wide) */
line-height: 1.8em;
border-radius: .5rem;
padding: 0 .7em;
}

#indicators > [data-style="inactive"] {
background: var(--main-bright-color);
color: var(--secondary-bright-color);
border: 2px solid var(--secondary-bright-color);
/* Update existing calculations with same new adjustments as above */
line-height: calc(1.8em - 4px);
padding:0 calc(.7em - 2px);
line-height: calc(1.5em - 4px);
padding: 0 calc(.5em - 2px);
}

#menubar h2,
Expand Down Expand Up @@ -2017,38 +2015,3 @@ ul.errors {
display: none;
}
}

/* === STATUS OVERVIEW: HIDE/SHOW BUTTONS === */

/* Create larger buttons for smaller screens (same behaviour as luci-theme-bootstrap) */
@media screen and (max-width: 480px) {
body[data-page='admin-status-overview'] h3, .cbi-section > legend:first-child {
line-height: 2em;
}
}

/* Swap the "hide" and "show" button styles to match all other luci-theme, as "hide" is currently using primary style and "show" is currently using secondary style. Also, change mouse icon from text cursor to pointer */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
background: var(--main-bright-color);
color: var(--secondary-bright-color);
border: 0;
}
body[data-page='admin-status-overview'] .cbi-title .label {
background: var(--secondary-bright-color);
color: var(--main-bright-color);
border: 1px solid var(--main-bright-color);
opacity: 1;
cursor: pointer;
}

/* Slightly fade "show" button: no variable for disabled opacity like luci-theme-bootstrap, assuming 0.7 */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
opacity: 0.7;
}

/* Remove fade when hovered */
body[data-page='admin-status-overview'] .cbi-title .label.notice:hover {
opacity: initial;
}

/* === END STATUS OVERVIEW: HIDE/SHOW BUTTONS === */
43 changes: 5 additions & 38 deletions themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -407,8 +407,7 @@ div.hostinfo {
font-size: 11px;
padding: .125em .5em;
margin: .125em;
/* Match rounded indicators to same style as "hide" and "show" buttons for design consistency */
border-radius: 3px;
border-radius: .6em;
}

#indicators > [data-style="inactive"],
Expand Down Expand Up @@ -1773,7 +1772,10 @@ select + .cbi-button {

}

@media screen and (max-width: 992px) {
@media screen and (max-width: 992px) {
body {

}

#maincontainer {
flex-direction: column;
Expand Down Expand Up @@ -2115,38 +2117,3 @@ select + .cbi-button {
display: none;
}
}

/* === STATUS OVERVIEW: HIDE/SHOW BUTTONS === */

/* Match "show" button style to IP table, change border colour to match font colour; fade it slightly: no variable for disabled opacity like luci-theme-bootstrap, assuming 0.7 */
body[data-page='admin-status-overview'] .cbi-title .label.notice {
background: #90c0e0;
color: #000;
border: 1px #000 solid;
opacity: 0.7;
}

/* Remove fade when hovered */
body[data-page='admin-status-overview'] .cbi-title .label.notice:hover {
opacity: initial;
}

/* Change mouse icon from text cursor to pointer, restore button text weight and font similar to indicators, add subtle border to compliment both states of button */
body[data-page='admin-status-overview'] .cbi-title .label {
cursor: pointer;
font-weight: normal;
font-family: Arial,Verdana,sans-serif;
border: 1px #888 solid;
}

/* Work with existing mobile styling for 480px and below, make bigger buttons and fix heading alignment */
@media screen and (max-width: 480px) {
body[data-page='admin-status-overview'] .cbi-title .label {
line-height: 3em;
}
body[data-page='admin-status-overview'] .cbi-title h3 {
align-items: center;
}
}

/* === END STATUS OVERVIEW: HIDE/SHOW BUTTONS === */
Loading