nils/gluon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changed:

Browse Source 
- border-radius, margin-and padding, use short-hands
- error-message: with padding & font-weight
- no bottom padding for fieldset.gluon-section
- rem and not em, min partial is 1/8
- duplicates removed
- responsive display optimized: flex-displays and margins
- definitions joined and encapsulated -> this is scss not only css!
- initial viewport-scale and -width
- break-word for long titles and values (pubkey!)
This commit is contained in:
Jonas Hess 2022-01-30 04:25:01 +01:00
parent 9e719001b1
commit 1dfff30d52
No known key found for this signature in database
GPG Key ID: 8F51E16E7961BD47
3 changed files with 358 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package/gluon-config-mode-theme/files/lib/gluon/config-mode/view/theme/layout.html
View File

@ -100,6 +100,7 @@ You may obtain a copy of the License at
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang=""> <html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="screen" href="/static/gluon.css" /> <link rel="stylesheet" type="text/css" media="screen" href="/static/gluon.css" />
<title><%| hostname .. ((rnode and rnode.title) and ' - ' .. title(rnode) or '') %></title> <title><%| hostname .. ((rnode and rnode.title) and ' - ' .. title(rnode) or '') %></title>
</head> </head>

2
package/gluon-config-mode-theme/files/lib/gluon/config-mode/www/static/gluon.css
View File

File diff suppressed because one or more lines are too long

382
package/gluon-config-mode-theme/sass/gluon.scss
View File

@ -31,9 +31,8 @@ $red: #ee3300;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
font-size: 100%; font-size: 100%;
padding: 0.5em 1em; padding: 0.5rem 1rem;
color: rgba(0, 0, 0, 0.80); color: rgba(0, 0, 0, 0.80);
background-color: #E6E6E6; background-color: #E6E6E6;
border: none; border: none;
@ -71,13 +70,12 @@ html {
} }
body, input, select, option { body, input, select, option {
font-family: 'Open Sans', Arial, sans-serif; font: 12pt "Open Sans", Arial, sans-serif
font-size: 12pt;
} }
body { body {
color: rgb(77, 78, 83); color: rgb(77, 78, 83);
line-height: 1.5em; line-height: 1.5rem;
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -92,23 +90,22 @@ body {
ul.tabmenu { ul.tabmenu {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 2em 0; margin: 2rem 0 0;
display: inline-flex; display: block;
}
ul.tabmenu li { li {
white-space: nowrap; white-space: nowrap;
margin: 0 0.5em; margin: 0 0.5rem;
padding: 0; padding: 0;
text-align: center; text-align: center;
a { a {
display: block; display: block;
text-decoration: none; text-decoration: none;
padding: 1em; padding: 1rem;
margin: 0; margin: 0;
color: #333; color: #333;
border-radius: 2em; border-radius: 2rem;
&:hover { &:hover {
background: lighten($ffyellow, 35); background: lighten($ffyellow, 35);
@ -121,27 +118,24 @@ ul.tabmenu li {
color: #333; color: #333;
} }
} }
#maincontent ul {
margin-left: 2em;
} }
.error { .error {
color: #ff0000; color: #ff0000;
background-color: white; background-color: white;
padding: 1rem;
font-weight: bold;
} }
#menubar { #menubar {
display: flex;
background: $ffmagenta; background: $ffmagenta;
color: #ffffff; color: #ffffff;
}
#menubar a:link.topcat, a:link.topcat,
#menubar a:visited.topcat { a:visited.topcat {
position: relative; position: relative;
display: block; display: block;
padding: 0.5em; padding: 0.5rem;
text-decoration: none; text-decoration: none;
font-size: 80%; font-size: 80%;
font-weight: normal; font-weight: normal;
@ -153,22 +147,21 @@ ul.tabmenu li {
} }
&.active { &.active {
background: $ffyellow;
color: black;
font-weight: bold; font-weight: bold;
background: $ffzusatz;
color: white;
} }
} }
#menubar .hostinfo { .hostinfo {
position: relative; position: relative;
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5rem;
flex: 1; flex: 1;
font-weight: bold; font-weight: bold;
font-size: 80%; font-size: 80%;
}
#menubar .hostinfo a { a {
&:link, &:visited { &:link, &:visited {
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
@ -179,85 +172,97 @@ ul.tabmenu li {
} }
} }
} }
}
}
#topmenu { #topmenu {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
}
#topmenu li { li {
display: inline-block; display: inline-block;
} }
}
#maincontent { #maincontent {
padding: 0 1em 2em; max-width: 60rem;
max-width: 60em; margin: 1rem auto;
min-width: 40em; background-color: rgba(255, 255, 255, 0.333);
margin: 1em auto; padding: 0;
border-radius: 0.5rem;
p {
margin: 0 1rem 1rem;
} }
#maincontent p { ul {
margin-bottom: 1em; margin-left: 2rem;
}
} }
.gluon-section { .gluon-section {
margin: 0; margin: 0 0 1.25rem;
padding: 0; padding: 0;
border: none; border: none;
margin-bottom: 1.3em;
&:last-child {
margin-bottom: 0.75rem;
} }
.gluon-section:last-child { legend {
margin-bottom: 0.7em; font-size: 1.5rem;
}
.gluon-section legend {
font-size: 1.4em;
font-weight: bold; font-weight: bold;
position: relative; position: relative;
padding: 0; margin-bottom: 0.5rem;
margin-bottom: 0.5em; padding: 1rem;
} }
.gluon-section h2 { h2 {
margin: 0em 0 0.5em -0.5em; margin: 0 0 0.5rem -0.5rem;
} }
.gluon-section h3 { h3 {
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
color: #555555; color: #555555;
margin: 0.25em; margin: 0.25rem;
font-size: 100%; font-size: 100%;
} }
}
body.admin-network .gluon-section {
margin-bottom: 0;
}
.gluon-section-descr { .gluon-section-descr {
margin-bottom: 2em; margin-bottom: 2rem;
} }
.gluon-osm-map { .gluon-osm-map {
width: 100%; width: 100%;
height: 40em; height: 40rem;
margin-bottom: 1em; margin-bottom: 1rem;
} }
input::placeholder { #value-id\.1\.6\.map {
margin: 0 1rem;
}
input {
&::placeholder,
&::-webkit-input-placeholder {
color: #aaaaaa; color: #aaaaaa;
} }
input::-webkit-input-placeholder { &[type=checkbox] {
color: #aaaaaa;
}
input[type=checkbox] {
display: none; display: none;
& + label { & + label {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 1em; width: 1rem;
height: 1em; height: 1rem;
margin: 0; margin: 0;
} }
@ -268,23 +273,23 @@ input[type=checkbox] {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
margin-top: -0.5em; margin-top: -33.333%;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 1.7em; font-size: 1.7rem;
} }
} }
input[type=radio] { &[type=radio] {
display: none; display: none;
& + label { & + label {
display: inline-block; display: inline-block;
position: relative; position: relative;
width: 0.8em; width: 0.75rem;
height: 0.8em; height: 0.75rem;
padding: 0.5em; padding: 0.75rem;
margin: 0.2em 0.2em 0.2em 0.1em; margin: 0.25rem 0.25rem 0.25rem 0.125rem;
border: none; border: none;
background: lighten($ffyellow, 30); background: lighten($ffyellow, 30);
vertical-align: middle; vertical-align: middle;
@ -298,18 +303,19 @@ input[type=radio] {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
margin-top: -0.4em; margin-top: -0.5rem;
width: 100%; width: 100%;
text-align: center; text-align: center;
font-size: 2em; font-size: 2rem;
} }
} }
input[type=submit], &[type=submit],
input[type=reset], &[type=reset],
input[type=button] { &[type=button] {
cursor: pointer; cursor: pointer;
} }
}
select, select,
input, input,
@ -319,13 +325,18 @@ input[type=checkbox] + label {
border: none; border: none;
background: lighten($ffyellow, 30); background: lighten($ffyellow, 30);
border-radius: 3pt; border-radius: 3pt;
padding: 0.5em; padding: 0.5rem;
margin-top: 1px; margin-top: 1px;
margin-bottom: 2px; margin-bottom: 2px;
box-sizing: content-box; box-sizing: content-box;
outline: 0; outline: 0;
} }
select, input[type="text"],
input[type="password"] {
min-width: auto;
}
.select-wrapper { .select-wrapper {
position: relative; position: relative;
display: inline-block; display: inline-block;
@ -333,17 +344,13 @@ input[type=checkbox] + label {
&::before { &::before {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
right: 0.05em; right: 0.125rem;
top: calc(2px + 0.1em); top: calc(2px + 0.125rem);
bottom: calc(2px + 0.1em); bottom: calc(2px + 0.125rem);
width: 1.4em; width: 1.5rem;
border-left: 0.05em solid rgba(0, 0, 0, 0.25); border-left: 0.125rem solid rgba(0, 0, 0, 0.25);
pointer-events: none; pointer-events: none;
background: background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="5"><path fill="none" stroke="black" stroke-linejoin="bevel" d="M1,1L4,4L7,1"/></svg>') center / 0.75rem 0.5rem no-repeat;
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8" height="5"><path fill="none" stroke="black" stroke-linejoin="bevel" d="M1,1L4,4L7,1"/></svg>')
center / 0.8em 0.5em
no-repeat
;
content: ''; content: '';
} }
@ -360,16 +367,10 @@ option {
background: lighten($ffyellow, 30); background: lighten($ffyellow, 30);
} }
select,
input[type=text],
input[type=password] {
min-width: 20em;
}
.gluon-button { .gluon-button {
@include button; @include button;
margin-left: 0.5em; margin-left: 0.5rem;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
@ -381,11 +382,13 @@ input[type=password] {
.gluon-button-submit { .gluon-button-submit {
background-color: $ffzusatz; background-color: $ffzusatz;
color: #fff; color: #fff;
}
.gluon-button-submit:active { &:active {
background: grey; background: grey;
} }
}
.gluon-input-invalid { .gluon-input-invalid {
background: $red !important; background: $red !important;
color: white; color: white;
@ -393,13 +396,12 @@ input[type=password] {
textarea { textarea {
margin-left: -1px; margin-left: -1px;
margin-bottom: 0.5em; margin-bottom: 0.5rem;
max-width: calc(100% - 3rem);
} }
.gluon-value { .gluon-value {
display: flex; margin-bottom: .75rem;
flex-direction: row;
margin-bottom: 0.5em;
} }
.gluon-section-node .gluon-value:last-child { .gluon-section-node .gluon-value:last-child {
@ -407,31 +409,43 @@ textarea {
} }
.gluon-value-title { .gluon-value-title {
flex: 2; padding-top: .5rem;
text-align: right; padding-right: 1rem;
padding-top: 0.39em;
padding-right: 1em;
font-weight: bold; font-weight: bold;
padding-left: 1rem;
overflow-wrap: break-word;
} }
.gluon-value-field { .gluon-value-field {
flex: 3;
position: relative; position: relative;
margin-right: 1rem;
input, select, input + label { select, input + label {
position: relative; position: relative;
margin-left: 1rem;
}
select {
padding-right: 2rem;
}
input,
.gluon-add,
.gluon-value-description {
margin-left: 1rem;
} }
} }
.gluon-value-field-text { .gluon-value-field-text {
flex: 3; padding-top: 0.5rem;
padding-top: 0.39em; padding-left: 1rem;
overflow-wrap: break-word;
} }
.gluon-value-field-long { .gluon-value-field-long {
flex: 10; flex: 10;
position: relative; position: relative;
margin-top: 0.65em; margin-top: 0.75rem;
input, select, input + label { input, select, input + label {
position: relative; position: relative;
@ -443,23 +457,29 @@ textarea {
} }
.gluon-value-description { .gluon-value-description {
font-size: 8pt; font-size: 0.75rem;
} }
.gluon-form-descr { .gluon-form-descr {
margin-bottom: 1em; margin-bottom: 1rem;
} }
.gluon-form-descr:empty, .gluon-section-descr:empty { .gluon-form-descr,
.gluon-section-descr {
&:empty {
display: none; display: none;
} }
}
.gluon-form-descr, .gluon-section-descr, .gluon-page-actions { .gluon-form-descr,
padding: 1em; .gluon-section-descr {
padding: 1rem;
background: #ececec; background: #ececec;
} }
.gluon-page-actions { .gluon-page-actions {
padding: 1rem;
background: #ececec;
text-align: right; text-align: right;
display: flex; display: flex;
flex-flow: row-reverse; flex-flow: row-reverse;
@ -471,35 +491,39 @@ textarea {
border: none; border: none;
} }
.gluon-value-error input, .gluon-value-error {
.gluon-value-error select { input,
select {
background-color: #ffcccc; background-color: #ffcccc;
} }
}
.gluon-add::after, .gluon-remove::after { .gluon-add,
.gluon-remove {
&::after {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
font-size: 180%; font-size: 180%;
width: 1.2em; width: 1.25rem;
height: 1em; height: 1rem;
}
} }
.gluon-add { .gluon-add {
color: #008000; color: #008000;
position: relative; position: relative;
left: 21em; left: 21.75rem;
input + & { input + & {
left: 0; left: 0;
top: 0.04em; top: 0.125rem;
} }
&:first-child { &:first-child {
top: 0.53em; top: 0.5rem;
left: -0.08em; left: -0.125rem;
} }
&::after { &::after {
@ -509,9 +533,9 @@ textarea {
.gluon-remove { .gluon-remove {
color: #800000; color: #800000;
position: relative; position: relative;
top: -0.03em; top: -0.375rem;
margin-left: 0.75rem;
&::after { &::after {
content: '–'; content: '–';
@ -522,7 +546,7 @@ textarea {
border: 1px dotted #ff0000; border: 1px dotted #ff0000;
background-color: #ffffff; background-color: #ffffff;
color: #000000; color: #000000;
padding: 0.5em; padding: 0.5rem;
} }
.errorbox { .errorbox {
@ -530,18 +554,120 @@ textarea {
background-color: #FFCCCC; background-color: #FFCCCC;
padding: 5px; padding: 5px;
margin-bottom: 5px; margin-bottom: 5px;
}
.errorbox a { a {
color: #000000 !important; color: #000000 !important;
} }
}
.the-key { .the-key {
text-align: left; text-align: left;
font-size: 1.4em; font-size: 1.5rem;
background: lighten($ffyellow, 35); background: lighten($ffyellow, 35);
border: 3pt dashed $ffmagenta; border: 3pt dashed $ffmagenta;
margin-bottom: 0.5em; margin-bottom: 0.5rem;
padding: 0.5em padding: 0.5rem
}
h2 {
color: $ffzusatz;
padding: 1rem;
}
fieldset.gluon-section {
padding-top: 1rem;
}
input[type="checkbox"] + label, select {
border: 1px solid #c0c0c0;
margin-top: 0;
margin-bottom: 1px;
}
input,
option,
select,
input[type="checkbox"] + label,
textarea,
ul.tabmenu li a:hover,
#menubar a:link.topcat:hover,
#menubar a:link.topcat:focus,
#menubar a:visited.topcat:hover,
#menubar a:visited.topcat:focus {
background-color: #99d9F5;
}
.gluon-page-actions {
padding: 1rem;
border-radius: 0 0 0.5rem 0.5rem;
}
.gluon-form-descr,
.gluon-section-descr {
margin: 0 1rem 1rem;
}
.gluon-value:last-child {
padding-bottom: 1rem;
}
textarea,
.gluon-form > p,
form > p {
margin: 0 1rem;
}
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
#menubar {
display: flex;
}
select,
input[type=text],
input[type=password] {
min-width: 20rem;
}
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
#maincontent {
min-width: 40rem;
}
.gluon-value-field {
margin-right: auto;
}
}
// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
ul.tabmenu {
display: inline-flex;
}
.gluon-value {
display: flex;
flex-direction: row;
}
.gluon-value-title {
flex: 2;
text-align: right;
}
.gluon-value-field {
flex: 3;
}
.gluon-value-field-text {
flex: 3;
padding-left: 0;
}
}
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
#value-id\.1\.6\.map {
margin: 0;
}
} }