Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
erp5
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Labels
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Commits
Open sidebar
Romain Courteaud
erp5
Commits
2dd2a4f7
Commit
2dd2a4f7
authored
Jan 20, 2021
by
Romain Courteaud
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
erp5_core: viewer css
parent
0169e234
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
208 additions
and
658 deletions
+208
-658
product/ERP5/bootstrap/erp5_core/SkinTemplateItem/portal_skins/erp5_core/gadget_html_viewer.css.css
...ateItem/portal_skins/erp5_core/gadget_html_viewer.css.css
+94
-297
product/ERP5/bootstrap/erp5_core/SkinTemplateItem/portal_skins/erp5_core/gadget_html_viewer.less.txt
...teItem/portal_skins/erp5_core/gadget_html_viewer.less.txt
+114
-361
No files found.
product/ERP5/bootstrap/erp5_core/SkinTemplateItem/portal_skins/erp5_core/gadget_html_viewer.css.css
View file @
2dd2a4f7
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
{
max-width
:
50em
;
max-width
:
50em
;
/* Set the global variables for everything. Change these to use your own fonts/colours. */
display
:
block
;
/* Set sans-serif & mono fonts */
word-wrap
:
break-word
;
--sans-font
:
-apple-system
,
BlinkMacSystemFont
,
"Avenir Next"
,
Avenir
,
"Nimbus Sans L"
,
Roboto
,
Noto
,
"Segoe UI"
,
Arial
,
Helvetica
,
"Helvetica Neue"
,
sans-serif
;
font-family
:
Cambria
,
"Hoefler Text"
,
Utopia
,
"Liberation Serif"
,
"Nimbus Roman No9 L Regular"
,
Times
,
"Times New Roman"
,
serif
;
--mono-font
:
Consolas
,
Menlo
,
Monaco
,
"Andale Mono"
,
"Ubuntu Mono"
,
monospace
;
text-align
:
justify
;
/* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
}
--base-fontsize
:
1.15rem
;
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
canvas
,
/* Major third scale progression - see https://type-scale.com/ */
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
img
,
--header-scale
:
1.25
;
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
iframe
,
/* Line height is set to the "Golden ratio" for optimal legibility */
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
svg
{
--line-height
:
1.618
;
max-width
:
100%
;
/* Default (light) theme */
max-height
:
100vh
;
--bg
:
#FFF
;
--accent-bg
:
#F5F7FF
;
--text
:
#212121
;
--text-light
:
#585858
;
--border
:
#D8DAE1
;
--accent
:
#0D47A1
;
--accent-light
:
#90CAF9
;
--code
:
#D81B60
;
/* Dark theme */
/* Make the body a nice central block */
/* Make the main element a nice central block */
/* Make the header bg full width, but the content inline with body */
/* Reduces header padding on smaller screens */
/* Remove margins for header text */
/* Format navigation */
/* Format headers */
/* Format links & buttons */
/* Format the expanding box */
/* Format tables */
/* Lists */
/* Format forms */
/* Make the textarea wider than other inputs */
/* Makes input fields wider on smaller screens */
/* Ensures the checkbox and radio inputs do not have a set width like other input fields */
/* Without this any HTML using <fieldset> shows ugly borders and has additional padding/margin. (Issue #3) */
/* Misc body elements */
/* Use mono font for code like elements */
/* Fix embedded code within pre */
}
@media
(
prefers-color-scheme
:
dark
)
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
{
--bg
:
#212121
;
--accent-bg
:
#2B2B2B
;
--text
:
#DCDCDC
;
--text-light
:
#ABABAB
;
--border
:
#666
;
--accent
:
#FFB300
;
--accent-light
:
#FFECB3
;
--code
:
#F06292
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
img
{
opacity
:
0.6
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
*
{
/* Set the font globally */
font-family
:
var
(
--sans-font
);
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
html
{
font-size
:
16px
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
body
{
color
:
var
(
--text
);
background
:
var
(
--bg
);
font-size
:
var
(
--base-fontsize
);
line-height
:
var
(
--line-height
);
margin
:
0
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
main
{
margin
:
0
auto
;
margin-top
:
1rem
;
max-width
:
45rem
;
padding
:
0
0.5rem
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
header
{
background
:
var
(
--accent-bg
);
border-bottom
:
1px
solid
var
(
--border
);
padding
:
1.5rem
15rem
;
margin-bottom
:
3rem
;
}
@media
only
screen
and
(
max-width
:
1200px
)
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
header
{
padding
:
1rem
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
nav
{
text-align
:
center
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
header
h1
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
header
p
{
margin
:
0
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
nav
{
font-size
:
1rem
;
line-height
:
2
;
padding
:
1rem
0
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
nav
a
{
margin
:
1rem
1rem
0
0
;
border
:
1px
solid
var
(
--border
);
border-radius
:
5px
;
color
:
var
(
--text
)
!important
;
display
:
inline-block
;
padding
:
0.1rem
1rem
;
text-decoration
:
none
;
transition
:
0.4s
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
nav
a
:hover
{
color
:
var
(
--accent
)
!important
;
border-color
:
var
(
--accent
);
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
nav
a
.current
:hover
{
text-decoration
:
none
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
footer
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
video
{
margin-top
:
4rem
;
max-width
:
100%
;
padding
:
2rem
1rem
1.5rem
1rem
;
height
:
auto
;
color
:
var
(
--text-light
);
max-height
:
100vh
;
font-size
:
0.9rem
;
text-align
:
center
;
border-top
:
1px
solid
var
(
--border
);
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
h1
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
h1
{
font-size
:
calc
(
var
(
--base-fontsize
)
*
var
(
--header-scale
)
*
var
(
--header-scale
)
*
var
(
--header-scale
)
*
var
(
--header-scale
));
font-family
:
Cambria
,
"Hoefler Text"
,
Utopia
,
"Liberation Serif"
,
"Nimbus Roman No9 L Regular"
,
Times
,
"Times New Roman"
,
serif
;
margin-top
:
calc
(
var
(
--line-height
)
*
1.5rem
);
font-size
:
1.5em
;
text-transform
:
capitalize
;
text-align
:
center
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
h2
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
h2
{
font-size
:
calc
(
var
(
--base-fontsize
)
*
var
(
--header-scale
)
*
var
(
--header-scale
)
*
var
(
--header-scale
));
font-family
:
'Open Sans'
,
Helvetica
,
Arial
,
sans-serif
;
margin-top
:
calc
(
var
(
--line-height
)
*
1.5rem
);
font-size
:
1.3em
;
text-transform
:
capitalize
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
h3
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
h3
{
font-size
:
calc
(
var
(
--base-fontsize
)
*
var
(
--header-scale
)
*
var
(
--header-scale
));
font-family
:
'Open Sans'
,
Helvetica
,
Arial
,
sans-serif
;
margin-top
:
calc
(
var
(
--line-height
)
*
1.5rem
);
font-size
:
1.1em
;
text-transform
:
uppercase
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
h4
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
h4
{
font-size
:
calc
(
var
(
--base-fontsize
)
*
var
(
--header-scale
));
font-family
:
'Open Sans'
,
Helvetica
,
Arial
,
sans-serif
;
margin-top
:
calc
(
var
(
--line-height
)
*
1.5rem
);
font-size
:
1.1em
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
h5
{
font-size
:
var
(
--base-fontsize
);
margin-top
:
calc
(
var
(
--line-height
)
*
1.5rem
);
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
h6
{
font-size
:
calc
(
var
(
--base-fontsize
)
/
var
(
--header-scale
));
margin-top
:
calc
(
var
(
--line-height
)
*
1.5rem
);
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
a
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
blockquote
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
a
:visited
{
margin
:
6pt
6pt
6pt
0
;
color
:
var
(
--accent
);
padding-left
:
6pt
;
border-left
:
2px
solid
#0E81C2
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
i
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
cite
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
em
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
var
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
address
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
dfn
{
font-style
:
italic
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
a
:hover
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
strong
,
text-decoration
:
none
;
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
b
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
figcaption
{
font-weight
:
600
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
a
button
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
u
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
button
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
ins
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"submit"
],
text-decoration
:
underline
;
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"reset"
],
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"button"
]
{
border
:
none
;
border-radius
:
5px
;
background
:
var
(
--accent
);
font-size
:
1rem
;
color
:
var
(
--bg
);
padding
:
0.7rem
0.9rem
;
margin
:
0.5rem
0
;
transition
:
0.4s
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
a
button
[
disabled
],
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
s
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
button
[
disabled
],
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
strike
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"submit"
][
disabled
],
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
del
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"reset"
][
disabled
],
text-decoration
:
line-through
;
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"button"
][
disabled
]
{
cursor
:
default
;
opacity
:
0.5
;
cursor
:
not-allowed
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
button
:focus
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
tt
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
button
:enabled:hover
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
code
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"submit"
]
:focus
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
kbd
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"submit"
]
:enabled:hover
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
samp
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"reset"
]
:focus
,
font-family
:
"Courier New"
,
Courier
,
monospace
;
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"reset"
]
:enabled:hover
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"button"
]
:focus
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"button"
]
:enabled:hover
{
opacity
:
0.8
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
details
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
code
,
padding
:
0.6rem
1rem
;
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
kbd
{
background
:
var
(
--accent-bg
);
color
:
#2CC32C
;
border
:
1px
solid
var
(
--border
);
border-radius
:
5px
;
margin-bottom
:
1rem
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
summary
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
q
{
cursor
:
pointer
;
display
:
inline
;
font-weight
:
bold
;
quotes
:
initial
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
details
[
open
]
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
q
:before
{
padding-bottom
:
0.75rem
;
content
:
open-quote
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
details
[
open
]
summary
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
q
:after
{
margin-bottom
:
0.5rem
;
content
:
close-quote
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
details
[
open
]
>
*
:last-child
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
pre
,
margin-bottom
:
0
;
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
xmp
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
plaintext
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
listing
{
display
:
block
;
white-space
:
pre-wrap
;
font-family
:
"Courier New"
,
Courier
,
monospace
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
table
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
table
{
border
-collapse
:
collapse
;
border
:
1px
solid
#1F1F1F
;
width
:
100%
;
width
:
100%
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
td
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
th
{
border
:
1px
solid
var
(
--border
);
text-align
:
left
;
padding
:
0.5rem
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
th
{
background
:
var
(
--accent-bg
);
font-weight
:
bold
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
tr
:nth-child
(
even
)
{
/* Set every other cell slightly darker. Improves readability. */
background
:
var
(
--accent-bg
);
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
table
caption
{
font-weight
:
bold
;
margin-bottom
:
0.5rem
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
ol
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
ul
{
padding-left
:
3rem
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
textarea
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
select
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
{
font-size
:
inherit
;
font-family
:
inherit
;
padding
:
0.5rem
;
margin-bottom
:
0.5rem
;
color
:
var
(
--text
);
background
:
var
(
--bg
);
border
:
1px
solid
var
(
--border
);
border-radius
:
5px
;
box-shadow
:
none
;
box-sizing
:
border-box
;
width
:
60%
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
textarea
{
width
:
80%
;
}
@media
only
screen
and
(
max-width
:
720px
)
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
textarea
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
select
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
{
width
:
100%
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"checkbox"
],
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
input
[
type
=
"radio"
]
{
width
:
auto
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
fieldset
{
border
:
0
;
padding
:
0
;
margin
:
0
;
margin
:
0
;
padding
:
0
;
border-collapse
:
collapse
;
border-spacing
:
0
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
hr
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
table
tr
{
color
:
var
(
--border
);
border
:
1px
solid
#1F1F1F
;
border-top
:
1px
;
padding-top
:
6pt
;
margin
:
1rem
auto
;
padding-bottom
:
6pt
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
mark
{
padding
:
3px
6px
;
background
:
var
(
--accent-light
);
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
main
img
{
max-width
:
100%
;
border-radius
:
5px
;
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
figure
{
margin
:
0
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
figcaption
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
table
th
,
font-size
:
0.9rem
;
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
table
td
{
color
:
var
(
--text-light
);
text-align
:
center
;
text-align
:
center
;
margin-bottom
:
1rem
;
padding-top
:
6pt
;
}
padding-bottom
:
6pt
;
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
blockquote
{
margin
:
2rem
0
2rem
2rem
;
padding
:
0.4rem
0.8rem
;
border-left
:
0.35rem
solid
var
(
--accent
);
opacity
:
0.8
;
font-style
:
italic
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
cite
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
table
th
{
font-size
:
0.9rem
;
text-transform
:
uppercase
;
color
:
var
(
--text-light
);
font-style
:
normal
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
code
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
ul
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
pre
,
list-style
:
disc
;
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
kbd
,
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
samp
{
font-family
:
var
(
--mono-font
);
font-size
:
1.1rem
;
color
:
var
(
--code
);
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
kbd
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
ul
li
{
border
:
1px
solid
var
(
--code
);
margin-left
:
2em
;
border-bottom
:
3px
solid
var
(
--code
);
border-radius
:
5px
;
padding
:
0.1rem
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
pre
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
ol
{
padding
:
1rem
1.4rem
;
list-style
:
decimal
;
max-width
:
100%
;
overflow
:
auto
;
background
:
var
(
--accent-bg
);
border
:
1px
solid
var
(
--border
);
border-radius
:
5px
;
}
}
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
pre
code
{
div
[
data-gadget-url
$
=
"gadget_html_viewer.html"
]
ol
li
{
color
:
var
(
--text
);
margin-left
:
2em
;
background
:
none
;
margin
:
0
;
padding
:
0
;
}
}
product/ERP5/bootstrap/erp5_core/SkinTemplateItem/portal_skins/erp5_core/gadget_html_viewer.less.txt
View file @
2dd2a4f7
div[data-gadget-url$="gadget_html_viewer.html"] {
@sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
max-width: 50em;
@monospace: "Courier New", Courier, monospace;
@serif: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;
/* Set the global variables for everything. Change these to use your own fonts/colours. */
@margin-size: 6pt;
@border-size: 2px;
/* Set sans-serif & mono fonts */
@border-type: solid;
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
@colorsubheaderbackground: #0E81C2;
--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
@bold-font-weight: 600;
@black: #1F1F1F;
@colorforeground: @black;
/* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
--base-fontsize: 1.15rem;
/* Major third scale progression - see https://type-scale.com/ */
div[data-gadget-url$="gadget_html_viewer.html"] {
--header-scale: 1.25;
max-width: 50em;
/* Line height is set to the "Golden ratio" for optimal legibility */
--line-height: 1.618;
/* Default (light) theme */
--bg: #FFF;
--accent-bg: #F5F7FF;
--text: #212121;
--text-light: #585858;
--border: #D8DAE1;
--accent: #0D47A1;
--accent-light: #90CAF9;
--code: #D81B60;
/* Dark theme */
display: block;
@media (prefers-color-scheme: dark) {
word-wrap: break-word;
--bg: #212121;
font-family: @serif;
--accent-bg: #2B2B2B;
text-align: justify;
--text: #DCDCDC;
--text-light: #ABABAB;
--border: #666;
--accent: #FFB300;
--accent-light: #FFECB3;
--code: #F06292;
img {
canvas, img, iframe, svg {
opacity: .6;
max-width: 100%;
max-height: 100vh;
}
}
}
video {
max-width: 100%;
* {
height: auto;
/* Set the font globally */
max-height: 100vh;
font-family: var(--sans-font);
}
html {
font-size: 16px;
}
/* Make the body a nice central block */
body {
color: var(--text);
background: var(--bg);
font-size: var(--base-fontsize);
line-height: var(--line-height);
margin: 0;
}
/* Make the main element a nice central block */
main {
margin: 0 auto;
margin-top: 1rem;
max-width: 45rem;
padding: 0 .5rem;
}
/* Make the header bg full width, but the content inline with body */
header {
background: var(--accent-bg);
border-bottom: 1px solid var(--border);
padding: 1.5rem 15rem;
margin-bottom: 3rem;
}
/* Reduces header padding on smaller screens */
@media only screen and (max-width: 1200px) {
header {
padding: 1rem;
}
}
nav {
text-align: center;
}
}
/* Remove margins for header text */
header h1,
header p {
margin: 0;
}
/* Format navigation */
nav {
font-size: 1rem;
line-height: 2;
padding: 1rem 0;
}
nav a {
margin: 1rem 1rem 0 0;
border: 1px solid var(--border);
border-radius: 5px;
color: var(--text) !important;
display: inline-block;
padding: .1rem 1rem;
text-decoration: none;
transition: .4s;
}
nav a:hover {
color: var(--accent) !important;
border-color: var(--accent);
}
nav a.current:hover {
text-decoration: none;
}
footer {
margin-top: 4rem;
padding: 2rem 1rem 1.5rem 1rem;
color: var(--text-light);
font-size: .9rem;
text-align: center;
border-top: 1px solid var(--border);
}
/* Format headers */
h1 {
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
margin-top: calc(var(--line-height) * 1.5rem);
}
h2 {
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
margin-top: calc(var(--line-height) * 1.5rem);
}
h3 {
font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale));
margin-top: calc(var(--line-height) * 1.5rem);
}
h4 {
font-size: calc(var(--base-fontsize) * var(--header-scale));
margin-top: calc(var(--line-height) * 1.5rem);
}
h5 {
font-size: var(--base-fontsize);
margin-top: calc(var(--line-height) * 1.5rem);
}
h6 {
font-size: calc(var(--base-fontsize) / var(--header-scale));
margin-top: calc(var(--line-height) * 1.5rem);
}
/* Format links & buttons */
a,
a:visited {
color: var(--accent);
}
a:hover {
text-decoration: none;
}
a button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
border: none;
border-radius: 5px;
background: var(--accent);
font-size: 1rem;
color: var(--bg);
padding: .7rem .9rem;
margin: .5rem 0;
transition: .4s;
}
a button[disabled],
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
cursor: default;
opacity: .5;
cursor: not-allowed;
}
button:focus,
button:enabled:hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover {
opacity: .8;
}
/* Format the expanding box */
h1 {
details {
font-family: @serif;
padding: .6rem 1rem;
font-size: 1.5em;
background: var(--accent-bg);
text-transform: capitalize;
border: 1px solid var(--border);
text-align: center;
border-radius: 5px;
}
margin-bottom: 1rem;
}
summary {
h2 {
cursor: pointer;
font-family: @sans-serif;
font-weight: bold;
font-size: 1.3em;
}
text-transform: capitalize;
}
details[open] {
h3 {
padding-bottom: .75rem;
font-family: @sans-serif;
}
font-size: 1.1em;
text-transform: uppercase;
}
details[open] summary {
h4 {
margin-bottom: .5rem;
font-family: @sans-serif;
}
font-size: 1.1em;
}
details[open]>*:last-child {
blockquote {
margin-bottom: 0;
margin: @margin-size @margin-size @margin-size 0;
}
padding-left: @margin-size;
border-left: @border-size @border-type @colorsubheaderbackground;
}
/* Format tables */
i, cite, em, var, address, dfn {
table {
font-style: italic;
border-collapse: collapse;
}
width: 100%
}
td,
strong, b, figcaption {
th {
font-weight: @bold-font-weight;
border: 1px solid var(--border);
}
text-align: left;
padding: .5rem;
}
th {
u, ins {
background: var(--accent-bg);
text-decoration: underline;
font-weight: bold;
}
}
tr:nth-child(even) {
s, strike, del {
/* Set every other cell slightly darker. Improves readability. */
text-decoration: line-through;
background: var(--accent-bg);
}
}
table caption {
tt, code, kbd, samp {
font-weight: bold;
font-family: @monospace;
margin-bottom: .5rem;
}
}
/* Lists */
code, kbd {
ol,
color: #2CC32C;
ul {
}
padding-left: 3rem;
}
/* Format forms */
q {
textarea,
display: inline;
select,
&:before {
input {
content: open-quote;
font-size: inherit;
}
font-family: inherit;
&:after {
padding: .5rem;
content: close-quote;
margin-bottom: .5rem;
}
color: var(--text);
quotes: initial;
background: var(--bg);
}
border: 1px solid var(--border);
border-radius: 5px;
box-shadow: none;
box-sizing: border-box;
width: 60%;
}
/* Make the textarea wider than other inputs */
pre, xmp, plaintext, listing {
textarea {
display: block;
width: 80%
white-space: pre-wrap;
}
font-family: @monospace;
}
/* Makes input fields wider on smaller screens */
table {
@media only screen and (max-width: 720px) {
border: 1px solid @colorforeground;
textarea,
select,
input {
width: 100%;
width: 100%;
margin:0;
padding:0;
border-collapse: collapse;
border-spacing: 0;
tr {
border: 1px solid @colorforeground;
padding-top: @margin-size;
padding-bottom: @margin-size;
}
th, td {
text-align: center;
padding-top: @margin-size;
padding-bottom: @margin-size;
}
th {
text-transform: uppercase;
}
}
}
}
/* Ensures the checkbox and radio inputs do not have a set width like other input fields */
input[type="checkbox"], input[type="radio"]{
width: auto;
}
/* Without this any HTML using <fieldset> shows ugly borders and has additional padding/margin. (Issue #3) */
fieldset {
border: 0;
padding: 0;
margin: 0;
}
/* Misc body elements */
hr {
color: var(--border);
border-top: 1px;
margin: 1rem auto;
}
mark {
padding: 3px 6px;
background: var(--accent-light);
}
main img {
max-width: 100%;
border-radius: 5px;
}
figure {
margin: 0;
}
figcaption {
ul {
font-size: .9rem;
list-style: disc;
color: var(--text-light);
li {
text-align: center;
margin-left: 2em;
margin-bottom: 1rem;
}
}
}
blockquote {
margin: 2rem 0 2rem 2rem;
padding: .4rem .8rem;
border-left: .35rem solid var(--accent);
opacity: .8;
font-style: italic;
}
cite {
font-size: 0.9rem;
color: var(--text-light);
font-style: normal;
}
/* Use mono font for code like elements */
code,
pre,
kbd,
samp {
font-family: var(--mono-font);
font-size: 1.1rem;
color: var(--code);
}
kbd {
border: 1px solid var(--code);
border-bottom: 3px solid var(--code);
border-radius: 5px;
padding: .1rem;
}
pre {
ol {
padding: 1rem 1.4rem;
list-style: decimal;
max-width: 100%;
li {
overflow: auto;
margin-left: 2em;
background: var(--accent-bg);
}
border: 1px solid var(--border);
}
border-radius: 5px;
}
/* Fix embedded code within pre */
pre code {
color: var(--text);
background: none;
margin: 0;
padding: 0;
}
}
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
