mirror of
https://github.com/neon-mmd/websurfx.git
synced 2024-11-22 05:58:21 -05:00
📜 docs: update the theming and customisation explainations (#148)
This commit is contained in:
neon_arch
parent
7a33ee03d6
commit
55e1672883
391
docs/theming.md
391
docs/theming.md
@ -8,17 +8,17 @@ By default `websurfx` comes with 9 colorschemes to choose from which can be easi
|
|||||||
|
|
||||||
Creating coloschemes is as easy as it gets it requires the user to have a theme file name with the colorscheme in which every space should be replaced with a `-` (dash) and it should end with a `.css` file extension. After creating the file you need to add the following code with the `colors` you want:
|
Creating coloschemes is as easy as it gets it requires the user to have a theme file name with the colorscheme in which every space should be replaced with a `-` (dash) and it should end with a `.css` file extension. After creating the file you need to add the following code with the `colors` you want:
|
||||||
|
|
||||||
``` css
|
```css
|
||||||
:root{
|
:root {
|
||||||
--bg: <background color>;
|
--background-color: <background color>;
|
||||||
--fg: <foreground color (text color)>;
|
--foreground-color: <foreground color (text color on the website) >;
|
||||||
--1: <color 1>;
|
--color-one: <color 1>;
|
||||||
--2: <color 2>;
|
--color-two: <color 2>;
|
||||||
--3: <color 3>;
|
--color-three: <color 3>;
|
||||||
--4: <color 4>;
|
--color-four: <color 4>;
|
||||||
--5: <color 5>;
|
--color-five: <color 5>;
|
||||||
--6: <color 6>;
|
--color-six: <color 6>;
|
||||||
--7: <color 7>;
|
--color-seven: <color 7>;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -27,17 +27,17 @@ Creating coloschemes is as easy as it gets it requires the user to have a theme
|
|||||||
|
|
||||||
**Example of `catppuccin-mocha` colorscheme:**
|
**Example of `catppuccin-mocha` colorscheme:**
|
||||||
|
|
||||||
``` css
|
```css
|
||||||
:root {
|
:root {
|
||||||
--bg: #1e1e2e;
|
--background-color: #1e1e2e;
|
||||||
--fg: #cdd6f4;
|
--foreground-color: #cdd6f4;
|
||||||
--1: #45475a;
|
--color-one: #45475a;
|
||||||
--2: #f38ba8;
|
--color-two: #f38ba8;
|
||||||
--3: #a6e3a1;
|
--color-three: #a6e3a1;
|
||||||
--4: #f9e2af;
|
--color-four: #f9e2af;
|
||||||
--5: #89b4fa;
|
--color-five: #89b4fa;
|
||||||
--6: #f5c2e7;
|
--color-six: #f5c2e7;
|
||||||
--7: #ffffff;
|
--color-seven: #ffffff;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -47,14 +47,15 @@ Creating coloschemes is as easy as it gets it requires the user to have a theme
|
|||||||
|
|
||||||
By default `websurfx` comes with 1 theme to choose from which can be easily chosen using the config file. To how to change themes please view the [Configuration](https://github.com/neon-mmd/websurfx/wiki/configuration) section of the wiki.
|
By default `websurfx` comes with 1 theme to choose from which can be easily chosen using the config file. To how to change themes please view the [Configuration](https://github.com/neon-mmd/websurfx/wiki/configuration) section of the wiki.
|
||||||
|
|
||||||
## Custom
|
## Custom
|
||||||
|
|
||||||
To write custom color scheme, it requires the user to have some knowledge of `css stylesheets`.
|
To write custom color scheme, it requires the user to have some knowledge of `css stylesheets`.
|
||||||
|
|
||||||
**Here is an example of `simple theme` (which we provide by default with the app) which will give the user a better idea on how to create a custom theme using it as a template:**
|
**Here is an example of `simple theme` (which we provide by default with the app) which will give the user a better idea on how to create a custom theme using it as a template:**
|
||||||
|
|
||||||
### General
|
### General
|
||||||
``` css
|
|
||||||
|
```css
|
||||||
* {
|
* {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -71,11 +72,13 @@ body {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background: var(--1);
|
background: var(--color-one);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Styles for the index page
|
### Styles for the index page
|
||||||
``` css
|
|
||||||
|
```css
|
||||||
.search-container {
|
.search-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -88,8 +91,10 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Styles for the search box and search button
|
### Styles for the search box and search button
|
||||||
``` css
|
|
||||||
|
```css
|
||||||
.search_bar {
|
.search_bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
@ -101,7 +106,7 @@ body {
|
|||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
box-shadow: rgba(0, 0, 0, 1);
|
box-shadow: rgba(0, 0, 0, 1);
|
||||||
background: var(--fg);
|
background: var(--foreground-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.search_bar button {
|
.search_bar button {
|
||||||
@ -114,8 +119,8 @@ body {
|
|||||||
outline: none;
|
outline: none;
|
||||||
border: none;
|
border: none;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
background: var(--bg);
|
background: var(--background-color);
|
||||||
color: var(--3);
|
color: var(--color-three);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
letter-spacing: 0.1rem;
|
letter-spacing: 0.1rem;
|
||||||
}
|
}
|
||||||
@ -125,10 +130,12 @@ body {
|
|||||||
filter: brightness(1.2);
|
filter: brightness(1.2);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Styles for the footer and header
|
### Styles for the footer and header
|
||||||
``` css
|
|
||||||
|
```css
|
||||||
header {
|
header {
|
||||||
background: var(--bg);
|
background: var(--background-color);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: right;
|
justify-content: right;
|
||||||
@ -151,7 +158,7 @@ footer ul li a,
|
|||||||
header ul li a:visited,
|
header ul li a:visited,
|
||||||
footer ul li a:visited {
|
footer ul li a:visited {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--2);
|
color: var(--color-two);
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
letter-spacing: 0.1rem;
|
letter-spacing: 0.1rem;
|
||||||
}
|
}
|
||||||
@ -162,7 +169,27 @@ header ul li a {
|
|||||||
|
|
||||||
header ul li a:hover,
|
header ul li a:hover,
|
||||||
footer ul li a:hover {
|
footer ul li a:hover {
|
||||||
color: var(--5);
|
color: var(--color-five);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer div span {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--color-four);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer div {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background: var(--background-color);
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer div span {
|
footer div span {
|
||||||
@ -185,8 +212,10 @@ footer {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Styles for the search page
|
### Styles for the search page
|
||||||
``` css
|
|
||||||
|
```css
|
||||||
.results {
|
.results {
|
||||||
width: 90%;
|
width: 90%;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -213,28 +242,28 @@ footer {
|
|||||||
|
|
||||||
.results_aggregated .result h1 a {
|
.results_aggregated .result h1 a {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
color: var(--2);
|
color: var(--color-two);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
letter-spacing: 0.1rem;
|
letter-spacing: 0.1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.results_aggregated .result h1 a:hover {
|
.results_aggregated .result h1 a:hover {
|
||||||
color: var(--5);
|
color: var(--color-five);
|
||||||
}
|
}
|
||||||
|
|
||||||
.results_aggregated .result h1 a:visited {
|
.results_aggregated .result h1 a:visited {
|
||||||
color: var(--bg);
|
color: var(--background-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.results_aggregated .result small {
|
.results_aggregated .result small {
|
||||||
color: var(--3);
|
color: var(--color-three);
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
line-break: anywhere;
|
line-break: anywhere;
|
||||||
}
|
}
|
||||||
|
|
||||||
.results_aggregated .result p {
|
.results_aggregated .result p {
|
||||||
color: var(--fg);
|
color: var(--foreground-color);
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
margin-top: 0.3rem;
|
margin-top: 0.3rem;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
@ -245,13 +274,13 @@ footer {
|
|||||||
text-align: right;
|
text-align: right;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
color: var(--5);
|
color: var(--color-five);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Styles for the 404 page
|
### Styles for the 404 page
|
||||||
|
|
||||||
``` css
|
```css
|
||||||
.error_container {
|
.error_container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -290,16 +319,18 @@ footer {
|
|||||||
|
|
||||||
.error_content p a,
|
.error_content p a,
|
||||||
.error_content p a:visited {
|
.error_content p a:visited {
|
||||||
color: var(--2);
|
color: var(--color-two);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error_content p a:hover {
|
.error_content p a:hover {
|
||||||
color: var(--5);
|
color: var(--color-five);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Styles for the previous and next button on the search page
|
### Styles for the previous and next button on the search page
|
||||||
``` css
|
|
||||||
|
```css
|
||||||
.page_navigation {
|
.page_navigation {
|
||||||
padding: 0 0 2rem 0;
|
padding: 0 0 2rem 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -308,8 +339,8 @@ footer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.page_navigation button {
|
.page_navigation button {
|
||||||
background: var(--bg);
|
background: var(--background-color);
|
||||||
color: var(--fg);
|
color: var(--foreground-color);
|
||||||
padding: 1rem;
|
padding: 1rem;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -326,40 +357,256 @@ footer {
|
|||||||
This part is only available right now in the **rolling/edge/unstable** version
|
This part is only available right now in the **rolling/edge/unstable** version
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.about-container article{
|
.about-container article {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
color:var(--fg);
|
color: var(--foreground-color);
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
}
|
|
||||||
|
|
||||||
.about-container article h1{
|
|
||||||
color: var(--2);
|
|
||||||
font-size: 2.8rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-container article div{
|
|
||||||
padding-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-container a{
|
|
||||||
color:var(--3);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-container article h2{
|
.about-container article h1 {
|
||||||
color: var(--3);
|
color: var(--color-two);
|
||||||
|
font-size: 2.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-container article div {
|
||||||
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-container a {
|
||||||
|
color: var(--color-three);
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-container article h2 {
|
||||||
|
color: var(--color-three);
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-container p{
|
.about-container p {
|
||||||
color:var(--fg);
|
color: var(--foreground-color);
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.about-container h3{
|
.about-container h3 {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.about-container {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
[⬅️ Go back to Home](./README.md)
|
### Styles for the Settings Page
|
||||||
|
|
||||||
|
This part is only available right now in the **rolling/edge/unstable** version
|
||||||
|
|
||||||
|
```css
|
||||||
|
.settings_container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 80dvw;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings h1 {
|
||||||
|
color: var(--color-two);
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings hr {
|
||||||
|
border-color: var(--color-three);
|
||||||
|
margin: 0.3rem 0 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .sidebar {
|
||||||
|
width: 30%;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 2rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
margin-left: -0.7rem;
|
||||||
|
padding: 0.7rem;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: var(--foreground-color);
|
||||||
|
text-transform: capitalize;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .sidebar .btn {
|
||||||
|
padding: 0.5rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .sidebar .btn.active {
|
||||||
|
background-color: var(--color-two);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .main_container {
|
||||||
|
width: 70%;
|
||||||
|
border-left: 1.5px solid var(--color-three);
|
||||||
|
padding-left: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .tab {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .tab.active {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container button {
|
||||||
|
margin-top: 1rem;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
background: var(--color-three);
|
||||||
|
color: var(--background-color);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: all 0.1s ease-out;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 5px 5px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container button:active {
|
||||||
|
box-shadow: none;
|
||||||
|
translate: 5px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .main_container .message {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .tab h3 {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--color-four);
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .tab .description {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
color: var(--foreground-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .user_interface select {
|
||||||
|
margin: 0.7rem 0;
|
||||||
|
width: 20rem;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
color: var(--foreground-color);
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .user_interface option:hover {
|
||||||
|
background-color: var(--color-one);
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .engines .engine_selection {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .engines .toggle_btn {
|
||||||
|
color: var(--foreground-color);
|
||||||
|
font-size: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .engines hr {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings_container .cookies input {
|
||||||
|
margin: 1rem 0rem;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Styles for the Toggle Button
|
||||||
|
|
||||||
|
This part is only available right now in the **rolling/edge/unstable** version
|
||||||
|
|
||||||
|
```css
|
||||||
|
/* The switch - the box around the slider */
|
||||||
|
.switch {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 6rem;
|
||||||
|
height: 3.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hide default HTML checkbox */
|
||||||
|
.switch input {
|
||||||
|
opacity: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The slider */
|
||||||
|
.slider {
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
-webkit-transition: 0.4s;
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider:before {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
height: 2.6rem;
|
||||||
|
width: 2.6rem;
|
||||||
|
left: 0.4rem;
|
||||||
|
bottom: 0.4rem;
|
||||||
|
background-color: var(--foreground-color);
|
||||||
|
-webkit-transition: 0.4s;
|
||||||
|
transition: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider {
|
||||||
|
background-color: var(--color-three);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:focus + .slider {
|
||||||
|
box-shadow: 0 0 1px var(--color-three);
|
||||||
|
}
|
||||||
|
|
||||||
|
input:checked + .slider:before {
|
||||||
|
-webkit-transform: translateX(2.6rem);
|
||||||
|
-ms-transform: translateX(2.6rem);
|
||||||
|
transform: translateX(2.6rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Rounded sliders */
|
||||||
|
.slider.round {
|
||||||
|
border-radius: 3.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider.round:before {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
[⬅️ Go back to Home](./README.md)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user