mirrors/copyparty
1
0
Fork 0
mirror of https://github.com/9001/copyparty.git synced 2025-08-16 16:42:13 -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
if you want to change the fonts, see [./docs/rice/](./docs/rice/)
## complete examples

14
copyparty/web/browser.css
View file

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

2
copyparty/web/browser.html
View file

@ -7,9 +7,9 @@
<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="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/browser.css?_={{ ts }}">
{{ html_head }}
{%- if css %}
<link rel="stylesheet" media="screen" href="{{ css }}_={{ ts }}">
{%- endif %}

2
copyparty/web/browser2.html
View file

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

2
copyparty/web/md.css
View file

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

2
copyparty/web/md.html
View file

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

1
copyparty/web/md2.css
View file

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

1
copyparty/web/mde.css
View file

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

2
copyparty/web/mde.html
View file

@ -4,11 +4,11 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<meta name="theme-color" content="#333">
{{ html_head }}
<link rel="stylesheet" href="{{ r }}/.cpr/ui.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/easymde.css?_={{ ts }}">
{{ html_head }}
</head>
<body>
<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 {
color: inherit;
background: none;
@ -10,6 +15,7 @@ html {
color: #ccc;
background: #333;
font-family: sans-serif;
font-family: var(--font-main), sans-serif;
text-shadow: 1px 1px 0px #000;
touch-action: manipulation;
}
@ -23,6 +29,7 @@ html, body {
}
pre {
font-family: monospace, monospace;
font-family: var(--font-mono), monospace, monospace;
}
a {
color: #fc5;

2
copyparty/web/msg.html
View file

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

2
copyparty/web/splash.css
View file

@ -2,6 +2,7 @@ html {
color: #333;
background: #f7f7f7;
font-family: sans-serif;
font-family: var(--font-main), sans-serif;
touch-action: manipulation;
}
#wrap {
@ -127,6 +128,7 @@ pre, code {
color: #480;
background: #fff;
font-family: 'scp', monospace, monospace;
font-family: var(--font-mono), 'scp', monospace, monospace;
border: 1px solid rgba(128,128,128,0.3);
border-radius: .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 name="viewport" content="width=device-width, initial-scale=0.8">
<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/ui.css?_={{ ts }}">
{{ html_head }}
</head>
<body>

2
copyparty/web/svcs.html
View file

@ -7,10 +7,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=0.8">
<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/ui.css?_={{ ts }}">
<style>ul{padding-left:1.3em}li{margin:.4em 0}</style>
{{ html_head }}
</head>
<body>

6
copyparty/web/ui.css
View file

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