mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-08-17 09:02:15 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

add support for custom fonts; closes #74

Browse source
This commit is contained in:
ed 2024-02-24 23:30:17 +00:00
parent ac96fd9c96
commit 263adec70a
16 changed files with 67 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -1292,6 +1292,8 @@ the classname of the HTML tag is set according to the selected theme, which is u
see the top of [./copyparty/web/browser.css](./copyparty/web/browser.css) where the color variables are set, and there's layout-specific stuff near the bottom see the top of [./copyparty/web/browser.css](./copyparty/web/browser.css) where the color variables are set, and there's layout-specific stuff near the bottom
if you want to change the fonts, see [./docs/rice/](./docs/rice/)
## complete examples ## complete examples

14
copyparty/web/browser.css
View file

@ -494,6 +494,7 @@ html.dz {
text-shadow: none; text-shadow: none;
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
} }
html.dy { html.dy {
--fg: #000; --fg: #000;
@ -603,6 +604,7 @@ html {
color: var(--fg); color: var(--fg);
background: var(--bgg); background: var(--bgg);
font-family: sans-serif; font-family: sans-serif;
font-family: var(--font-main), sans-serif;
text-shadow: 1px 1px 0px var(--bg-max); text-shadow: 1px 1px 0px var(--bg-max);
} }
html, body { html, body {
@ -611,6 +613,7 @@ html, body {
} }
pre, code, tt, #doc, #doc>code { pre, code, tt, #doc, #doc>code {
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
} }
.ayjump { .ayjump {
position: fixed; position: fixed;
@ -759,6 +762,7 @@ html #files.hhpick thead th {
} }
#files tbody td:nth-child(3) { #files tbody td:nth-child(3) {
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
text-align: right; text-align: right;
padding-right: 1em; padding-right: 1em;
white-space: nowrap; white-space: nowrap;
@ -821,6 +825,7 @@ html.y #path a:hover {
.logue.raw { .logue.raw {
white-space: pre; white-space: pre;
font-family: 'scp', 'consolas', monospace; font-family: 'scp', 'consolas', monospace;
font-family: var(--font-mono), 'scp', 'consolas', monospace;
} }
#doc>iframe, #doc>iframe,
.logue>iframe { .logue>iframe {
@ -1417,6 +1422,7 @@ input[type="checkbox"]:checked+label {
} }
html.dz input { html.dz input {
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
} }
.opwide div>span>input+label { .opwide div>span>input+label {
padding: .3em 0 .3em .3em; padding: .3em 0 .3em .3em;
@ -1702,6 +1708,7 @@ html.y #tree.nowrap .ntree a+a:hover {
} }
.ntree a:first-child { .ntree a:first-child {
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
font-size: 1.2em; font-size: 1.2em;
line-height: 0; line-height: 0;
} }
@ -1859,6 +1866,7 @@ html.y #tree.nowrap .ntree a+a:hover {
} }
#rn_vadv input { #rn_vadv input {
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
} }
#rui td+td, #rui td+td,
#rui td input[type="text"] { #rui td input[type="text"] {
@ -1922,6 +1930,7 @@ html.y #doc {
#doc.mdo { #doc.mdo {
white-space: normal; white-space: normal;
font-family: sans-serif; font-family: sans-serif;
font-family: var(--font-main), sans-serif;
} }
#doc.prism * { #doc.prism * {
line-height: 1.5em; line-height: 1.5em;
@ -1981,6 +1990,7 @@ a.btn,
} }
#hkhelp td:first-child { #hkhelp td:first-child {
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
} }
html.noscroll, html.noscroll,
html.noscroll .sbar { html.noscroll .sbar {
@ -2490,6 +2500,7 @@ html.y #bbox-overlay figcaption a {
} }
#op_up2k.srch td.prog { #op_up2k.srch td.prog {
font-family: sans-serif; font-family: sans-serif;
font-family: var(--font-main), sans-serif;
font-size: 1em; font-size: 1em;
width: auto; width: auto;
} }
@ -2504,6 +2515,7 @@ html.y #bbox-overlay figcaption a {
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
} }
#u2etas.o { #u2etas.o {
width: 20em; width: 20em;
@ -2573,6 +2585,7 @@ html.y #bbox-overlay figcaption a {
#u2cards span { #u2cards span {
color: var(--fg-max); color: var(--fg-max);
font-family: 'scp', monospace; font-family: 'scp', monospace;
font-family: var(--font-mono), 'scp', monospace;
} }
#u2cards > a:nth-child(4) > span { #u2cards > a:nth-child(4) > span {
display: inline-block; display: inline-block;
@ -2738,6 +2751,7 @@ html.b #u2conf a.b:hover {
} }
.prog { .prog {
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
} }
#u2tab span.inf, #u2tab span.inf,
#u2tab span.ok, #u2tab span.ok,

2
copyparty/web/browser.html
View file

@ -7,9 +7,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.8, minimum-scale=0.6"> <meta name="viewport" content="width=device-width, initial-scale=0.8, minimum-scale=0.6">
<meta name="theme-color" content="#333"> <meta name="theme-color" content="#333">
{{ html_head }}
<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/ui.css?_={{ ts }}"> <link rel="stylesheet" media="screen" href="{{ r }}/.cpr/ui.css?_={{ ts }}">
<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/browser.css?_={{ ts }}"> <link rel="stylesheet" media="screen" href="{{ r }}/.cpr/browser.css?_={{ ts }}">
{{ html_head }}
{%- if css %} {%- if css %}
<link rel="stylesheet" media="screen" href="{{ css }}_={{ ts }}"> <link rel="stylesheet" media="screen" href="{{ css }}_={{ ts }}">
{%- endif %} {%- endif %}

2
copyparty/web/browser2.html
View file

@ -6,12 +6,12 @@
<title>{{ title }}</title> <title>{{ title }}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.8"> <meta name="viewport" content="width=device-width, initial-scale=0.8">
{{ html_head }}
<style> <style>
html{font-family:sans-serif} html{font-family:sans-serif}
td{border:1px solid #999;border-width:1px 1px 0 0;padding:0 5px} td{border:1px solid #999;border-width:1px 1px 0 0;padding:0 5px}
a{display:block} a{display:block}
</style> </style>
{{ html_head }}
</head> </head>
<body> <body>

2
copyparty/web/md.css
View file

@ -2,6 +2,7 @@ html, body {
color: #333; color: #333;
background: #eee; background: #eee;
font-family: sans-serif; font-family: sans-serif;
font-family: var(--font-main), sans-serif;
line-height: 1.5em; line-height: 1.5em;
} }
html.y #helpbox a { html.y #helpbox a {
@ -67,6 +68,7 @@ a {
position: relative; position: relative;
display: inline-block; display: inline-block;
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
font-weight: bold; font-weight: bold;
font-size: 1.3em; font-size: 1.3em;
line-height: .1em; line-height: .1em;

2
copyparty/web/md.html
View file

@ -4,12 +4,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.7"> <meta name="viewport" content="width=device-width, initial-scale=0.7">
<meta name="theme-color" content="#333"> <meta name="theme-color" content="#333">
{{ html_head }}
<link rel="stylesheet" href="{{ r }}/.cpr/ui.css?_={{ ts }}"> <link rel="stylesheet" href="{{ r }}/.cpr/ui.css?_={{ ts }}">
<link rel="stylesheet" href="{{ r }}/.cpr/md.css?_={{ ts }}"> <link rel="stylesheet" href="{{ r }}/.cpr/md.css?_={{ ts }}">
{%- if edit %} {%- if edit %}
<link rel="stylesheet" href="{{ r }}/.cpr/md2.css?_={{ ts }}"> <link rel="stylesheet" href="{{ r }}/.cpr/md2.css?_={{ ts }}">
{%- endif %} {%- endif %}
{{ html_head }}
</head> </head>
<body> <body>
<div id="mn"></div> <div id="mn"></div>

1
copyparty/web/md2.css
View file

@ -56,6 +56,7 @@
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-word; word-break: break-word;
overflow-wrap: break-word; overflow-wrap: break-word;

1
copyparty/web/mde.css
View file

@ -17,6 +17,7 @@ html, body {
padding: 0; padding: 0;
min-height: 100%; min-height: 100%;
font-family: sans-serif; font-family: sans-serif;
font-family: var(--font-main), sans-serif;
background: #f7f7f7; background: #f7f7f7;
color: #333; color: #333;
} }

2
copyparty/web/mde.html
View file

@ -4,11 +4,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.7"> <meta name="viewport" content="width=device-width, initial-scale=0.7">
<meta name="theme-color" content="#333"> <meta name="theme-color" content="#333">
{{ html_head }}
<link rel="stylesheet" href="{{ r }}/.cpr/ui.css?_={{ ts }}"> <link rel="stylesheet" href="{{ r }}/.cpr/ui.css?_={{ ts }}">
<link rel="stylesheet" href="{{ r }}/.cpr/mde.css?_={{ ts }}"> <link rel="stylesheet" href="{{ r }}/.cpr/mde.css?_={{ ts }}">
<link rel="stylesheet" href="{{ r }}/.cpr/deps/mini-fa.css?_={{ ts }}"> <link rel="stylesheet" href="{{ r }}/.cpr/deps/mini-fa.css?_={{ ts }}">
<link rel="stylesheet" href="{{ r }}/.cpr/deps/easymde.css?_={{ ts }}"> <link rel="stylesheet" href="{{ r }}/.cpr/deps/easymde.css?_={{ ts }}">
{{ html_head }}
</head> </head>
<body> <body>
<div id="mw"> <div id="mw">

7
copyparty/web/msg.css
View file

@ -1,3 +1,8 @@
:root {
--font-main: sans-serif;
--font-serif: serif;
--font-mono: 'scp';
}
html,body,tr,th,td,#files,a { html,body,tr,th,td,#files,a {
color: inherit; color: inherit;
background: none; background: none;
@ -10,6 +15,7 @@ html {
color: #ccc; color: #ccc;
background: #333; background: #333;
font-family: sans-serif; font-family: sans-serif;
font-family: var(--font-main), sans-serif;
text-shadow: 1px 1px 0px #000; text-shadow: 1px 1px 0px #000;
touch-action: manipulation; touch-action: manipulation;
} }
@ -23,6 +29,7 @@ html, body {
} }
pre { pre {
font-family: monospace, monospace; font-family: monospace, monospace;
font-family: var(--font-mono), monospace, monospace;
} }
a { a {
color: #fc5; color: #fc5;

2
copyparty/web/msg.html
View file

@ -7,8 +7,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.8"> <meta name="viewport" content="width=device-width, initial-scale=0.8">
<meta name="theme-color" content="#333"> <meta name="theme-color" content="#333">
{{ html_head }}
<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/msg.css?_={{ ts }}"> <link rel="stylesheet" media="screen" href="{{ r }}/.cpr/msg.css?_={{ ts }}">
{{ html_head }}
</head> </head>
<body> <body>

2
copyparty/web/splash.css
View file

@ -2,6 +2,7 @@ html {
color: #333; color: #333;
background: #f7f7f7; background: #f7f7f7;
font-family: sans-serif; font-family: sans-serif;
font-family: var(--font-main), sans-serif;
touch-action: manipulation; touch-action: manipulation;
} }
#wrap { #wrap {
@ -127,6 +128,7 @@ pre, code {
color: #480; color: #480;
background: #fff; background: #fff;
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
border: 1px solid rgba(128,128,128,0.3); border: 1px solid rgba(128,128,128,0.3);
border-radius: .2em; border-radius: .2em;
padding: .15em .2em; padding: .15em .2em;

2
copyparty/web/splash.html
View file

@ -7,9 +7,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.8"> <meta name="viewport" content="width=device-width, initial-scale=0.8">
<meta name="theme-color" content="#333"> <meta name="theme-color" content="#333">
{{ html_head }}
<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/splash.css?_={{ ts }}"> <link rel="stylesheet" media="screen" href="{{ r }}/.cpr/splash.css?_={{ ts }}">
<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/ui.css?_={{ ts }}"> <link rel="stylesheet" media="screen" href="{{ r }}/.cpr/ui.css?_={{ ts }}">
{{ html_head }}
</head> </head>
<body> <body>

2
copyparty/web/svcs.html
View file

@ -7,10 +7,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.8"> <meta name="viewport" content="width=device-width, initial-scale=0.8">
<meta name="theme-color" content="#333"> <meta name="theme-color" content="#333">
{{ html_head }}
<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/splash.css?_={{ ts }}"> <link rel="stylesheet" media="screen" href="{{ r }}/.cpr/splash.css?_={{ ts }}">
<link rel="stylesheet" media="screen" href="{{ r }}/.cpr/ui.css?_={{ ts }}"> <link rel="stylesheet" media="screen" href="{{ r }}/.cpr/ui.css?_={{ ts }}">
<style>ul{padding-left:1.3em}li{margin:.4em 0}</style> <style>ul{padding-left:1.3em}li{margin:.4em 0}</style>
{{ html_head }}
</head> </head>
<body> <body>

6
copyparty/web/ui.css
View file

@ -1,4 +1,8 @@
:root { :root {
--font-main: sans-serif;
--font-serif: serif;
--font-mono: 'scp';
--fg: #ccc; --fg: #ccc;
--fg-max: #fff; --fg-max: #fff;
--bg-u2: #2b2b2b; --bg-u2: #2b2b2b;
@ -378,6 +382,7 @@ html.y textarea:focus {
.mdo code, .mdo code,
.mdo tt { .mdo tt {
font-family: 'scp', monospace, monospace; font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
white-space: pre-wrap; white-space: pre-wrap;
word-break: break-all; word-break: break-all;
} }
@ -447,6 +452,7 @@ html.y textarea:focus {
} }
.mdo blockquote { .mdo blockquote {
font-family: serif; font-family: serif;
font-family: var(--font-serif), serif;
background: #f7f7f7; background: #f7f7f7;
border: .07em dashed #ccc; border: .07em dashed #ccc;
padding: 0 2em; padding: 0 2em;

25
docs/rice/README.md Normal file
View file

@ -0,0 +1,25 @@
# custom fonts
to change the fonts in the web-UI, first create a css file with your customizations, for example `customfonts.css`, for example in your webroot
add this to your copyparty config so the css file gets loaded: `--html-head='<link rel="stylesheet" href="/customfonts.css">'`
make your changes in the css file; this is the default values to get you started:
```css
:root {
--font-main: sans-serif;
--font-serif: serif;
--font-mono: 'scp';
}
```
if you are introducing a new ttf/woff font, don't forget to declare the font itself in the css file; here's one of the default fonts from `ui.css`:
```css
@font-face {
font-family: 'scp';
font-display: swap;
src: local('Source Code Pro Regular'), local('SourceCodePro-Regular'), url(deps/scp.woff2) format('woff2');
}
```