Skip to content

Commit

Permalink
fix styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexiscolin
alexiscolin committed Nov 11, 2023
1 parent 9476b40 commit 5bbfea9
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 44 deletions.
5 changes: 4 additions & 1 deletion examples/gno.land/r/demo/markdown_test/markdown.gno
View file
Original file line number Diff line number Diff line change
Expand Up @@ -471,9 +471,11 @@ _Using HTML:_
_Render:_
:::stack
:::button("Link button with comma, needs quotes", https://gno.land)/
:::button(Plain button)/
:::/stack
Accordion component
-------------------
Expand Down Expand Up @@ -879,9 +881,10 @@ _Using HTML:_
_Render:_
:::stack
:::action("reset", "Reset")/
:::action("submit", "Submit")/
:::/stack
:::/form
`
Expand Down
132 changes: 89 additions & 43 deletions gno.land/cmd/gnoweb/static/css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ html[data-theme="light"] {
--icon-color: #000;

--quote-background: #ddd;
--quote-2-background: #aaa4;
--quote-2-background: #757575;
--code-background: #d7d9db;
--header-background: #d7d9db;

Expand Down Expand Up @@ -84,7 +84,7 @@ html[data-theme="dark"] {
--muted-color: #737373;
--hover-color: #a0a0a0;
--hover-color-reverse: #555555;
--border-color: #606060;
--border-color: #c7c7c7;
--icon-color: #dddddd;

--quote-background: #404040;
Expand Down Expand Up @@ -167,7 +167,7 @@ h4,
nav {
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
"Segoe UI Symbol", "Noto Color Emoji";
font-weight: 600;
font-weight: 500;
letter-spacing: 0.08rem;
}

Expand All @@ -179,16 +179,18 @@ h1 {
text-align: center;
font-size: 2rem;
margin-block: 4.2rem 2rem;
font-weight: 700;
}

h2 {
font-size: 1.625rem;
font-size: 1.7rem;
margin-block: 3.4rem 1.2rem;
line-height: 1.4;
font-weight: 700;
}

h3 {
font-size: 1.467rem;
font-size: 1.4rem;
margin-block: 2.6rem 1rem;
}

Expand Down Expand Up @@ -254,12 +256,12 @@ li > * {
input,
select {
font-family: "Roboto Mono", "Monaco", monospace;
background-color: var(--input-background-color, #eee);
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text-color, #000);
min-width: 25em;
padding: 0.6rem 0.7rem;
padding: 0.3rem 0.7rem;
max-width: 100%;
min-width: 14rem;
display: inline-flex;
}

Expand All @@ -286,11 +288,12 @@ input + label {

select {
position: relative;
-moz-appearance: none; /* Firefox */
-webkit-appearance: none; /* Safari and Chrome */
padding-inline-end: 2.5rem;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
background-position: calc(102% - 20px) calc(0.7em + 2px), calc(102% - 15px) calc(0.7em + 2px), calc(100% - 2em) 0.15em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
}
Expand All @@ -304,26 +307,26 @@ textarea {
width: 100%;
height: 8rem;
padding: 0.7rem;
background-color: var(--input-background-color, #eee);
background-color: transparent;
border: 1px solid var(--border-color);
color: var(--text-color, #000);
}

blockquote {
margin: 0;
padding: 0.5em 1em;
background-color: var(--quote-background, #ddd);
border-left: 0.5rem solid var(--border-color, #aaa4);
}

blockquote blockquote {
margin: 0;
background-color: var(--quote-2-background, #aaa4);
}

pre {
background-color: var(--code-background, #d7d9db);
margin: 1rem 0;
padding: 1em;
border-left: 0.5rem solid var(--border-color, #aaa4);
}

label {
Expand Down Expand Up @@ -396,7 +399,7 @@ code {
flex-direction: row;
}
.gno-stack *:not(:first-child) {
margin-left: 3.75rem;
margin-left: 1rem;
}
.gno-stack > a,
.gno-stack > p > a {
Expand Down Expand Up @@ -832,17 +835,26 @@ code.hljs {

#realm_render ul,
#realm_help ul {
padding-inline-start: 1rem;
list-style: disc;
}

#realm_render ul,
#realm_help ul {
padding-inline-start: 1rem;
#realm_render ol,
#realm_help ol {
padding-inline-start: 2rem;
}

#realm_render ul > li > ul,
#realm_help ul > li > ul {
#realm_help ul > li > ul,
#realm_render ol > li > ol,
#realm_help ol > li > ol,
#realm_render ol > li > ul,
#realm_help ol > li > ul,
#realm_render ul > li > ol,
#realm_help ul > li > ol {
padding-left: 1rem;
}
#realm_render ul > li > ul,
#realm_help ul > li > ul {
list-style: circle inside;
}

Expand Down Expand Up @@ -957,15 +969,15 @@ code.hljs {
padding: 0.5rem 0.75rem;
margin-inline-start: -1px;
line-height: 1.25;
color: var(--text-color-reverse, #eee);
background-color: var(--text-color, #000);
color: var(--text-color, #000);
background-color: var(--input-background-color, #eee);
border: 1px solid transparent;
text-decoration: none;
}

.gno-pagination a:hover {
color: var(--text-color, #000);
background-color: var(--background-color, #eee);
color: var(--text-color-reverse, #eee);
background-color: var(--text-color, #000);
border-color: var(--text-color, #000);
}

Expand All @@ -980,28 +992,28 @@ code.hljs {
/** Button **/
.gno-btn {
cursor: pointer;
color: var(--text-color-reverse, #eee);
background-color: var(--text-color, #000);
color: var(--text-color, #000);
background-color: var(--input-background-color, #eee);
display: inline-block;
font-weight: 400;
text-align: center;
padding: 0.3rem 2rem;
white-space: nowrap;
vertical-align: middle;
border: 1px solid var(--border-color);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
min-width: 8rem;
font-size: 1rem;
line-height: 1.5;
text-decoration: none;
margin-inline-end: 0.2rem;
}

.gno-btn:hover {
color: var(--text-color, #000);
background-color: var(--background-color, #eee);
color: var(--text-color-reverse, #fff);
background-color: var(--text-color, #000);
border-color: var(--text-color, #000);
}

Expand All @@ -1013,14 +1025,37 @@ code.hljs {

/** Accordion **/
.gno-accordion-trigger {
position: relative;
width: 100%;
text-align: left;
margin-block-start: 1rem;
}

.gno-accordion-trigger::after {
content: "";
display: block;
position: absolute;
top: 0.875rem;
left: 0.875rem;
width: 0;
height: 0;
border-style: solid;
border-width: 6px 4px 0 4px;
border-color: var(--text-color, #000) transparent transparent transparent;
transform: rotate(0deg);
}
.gno-accordion-trigger[aria-expanded="false"]::after {
transform: rotate(-90deg);
}
.gno-accordion-trigger:hover::after {
border-color: var(--text-color-reverse, #fff) transparent transparent transparent;
}

.gno-accordion-trigger + div {
padding: 0.875rem 0.7rem 2.2rem;
background: var(--code-background, #d7d9db);
background: transparent;
border: var(--input-background-color, #eee) 1px solid;
border-top: 0;
margin-block-end: 1rem;
}

Expand Down Expand Up @@ -1093,40 +1128,51 @@ code.hljs {
.gno-dropdown {
position: relative;
margin-block: 1rem;
display: inline-block;
}

.gno-dropdown > ul,
.gno-dropdown > ol {
#realm_render .gno-dropdown > ul,
#realm_help .gno-dropdown > ul,
#realm_render .gno-dropdown > ol,
#realm_help .gno-dropdown > ol {
position: absolute;
top: calc(100% - 0.2rem);
left: 0;
border: 1px solid var(--border-color);
z-index: 1000;
display: block;
float: left;
min-width: 10rem;
padding: 0.8rem 0.7rem;
min-width: 100%;
padding-inline-start: 0;
margin: 0.125rem 0 0;
font-size: 1rem;
text-align: left;
list-style: none;
background-color: var(--text-color);
background-color: var(--input-background-color, #eee);
background-clip: padding-box;
}
.gno-dropdown li {
margin-block: 0.8rem;
}

#realm_render .gno-dropdown ul,
#realm_help .gno-dropdown ul,
#realm_render .gno-dropdown ol,
#realm_help .gno-dropdown ol {
list-style: none;
}

#realm_render .gno-dropdown li,
#realm_help .gno-dropdown li {
margin: 0;
}

.gno-dropdown a {
color: var(--text-color-reverse, #eee);
color: var(--text-color, #000);
display: inline-block;
width: 100%;
padding-inline: 2rem;
padding-block: 0.4rem;
}
.gno-dropdown a:hover {
color: var(--hover-color-reverse, #b0b0b0);
color: var(--text-color-reverse, #fff);
background: var(--text-color, #000);
}

/** Tabs **/
Expand Down

0 comments on commit 5bbfea9

Please sign in to comment.