0ct0pu5/magma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add public/custom.css

Browse source
This commit is contained in:
NhanPT 2022-03-25 13:34:59 +07:00
parent 413704cc14
commit b5d52b52d5
4 changed files with 73 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/modules/config.ts
View file

@ -12,8 +12,6 @@ class ServerConfig {
class WebsiteConfig {
public title: string = "";
public description: string = "";
public background: string = "#218c74";
public accent: string = "#ffc107";
public language: string = "en";
public localization: string = "en-US";
}

51
src/private/css/magma.css
View file

@ -1,3 +1,9 @@
body {
background-color: var(--bgColor);
background-image: var(--bgImage);
color: var(--foreground);
}
#header {
margin-top: 10%;
}
@ -13,4 +19,47 @@
.group-title {
margin-top: 5%;
}
}
.group-items a {
padding: 15px !important;
margin-bottom: 0 !important;
border-radius: 0.7rem !important;
align-items: center;
line-height: 2;
transition: all 0.25s;
display: flex;
width: 100%;
color: var(--foreground);
}
.group-items h6 {
align-items: center;
margin-left: 0.5em !important;
display: inline-block;
vertical-align: middle;
text-align: center;
font-weight: bold;
}
.group-items .icon {
width: 32px !important;
height: 32px !important;
margin-top: 0px !important;
margin-right: 0.5em !important;
}
.group-items .icon path {
fill: var(--foreground);
}
.group-items a:hover {
background-color: rgba(0, 0, 0, 0.3) !important;
}
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
.group-items a:hover {
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.3) !important;
}
}

26
src/private/index.html
View file

@ -11,10 +11,11 @@
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="../public/css/custom.css">
<link rel="stylesheet" href="css/magma.css">
</head>
<body style="background: {{background}}">
<body>
<div class="container">
<div id="header" class="row">
<div class="two-thirds column">
@ -34,19 +35,26 @@
<h4><b>Applications</b></h4>
</div>
<div class="row">
<div class="three columns">a</div>
<div class="three columns">b</div>
<div class="three columns">c</div>
<div class="three columns">d</div>
<div class="three columns group-items"><a>
<div class="icon"><svg viewBox="0 0 24 24" role="presentation" class="Icon_Icon__1Fl5u">
<path
d="M20.2,5.9L21,5.1C19.6,3.7 17.8,3 16,3C14.2,3 12.4,3.7 11,5.1L11.8,5.9C13,4.8 14.5,4.2 16,4.2C17.5,4.2 19,4.8 20.2,5.9M19.3,6.7C18.4,5.8 17.2,5.3 16,5.3C14.8,5.3 13.6,5.8 12.7,6.7L13.5,7.5C14.2,6.8 15.1,6.5 16,6.5C16.9,6.5 17.8,6.8 18.5,7.5L19.3,6.7M19,13H17V9H15V13H5A2,2 0 0,0 3,15V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V15A2,2 0 0,0 19,13M8,18H6V16H8V18M11.5,18H9.5V16H11.5V18M15,18H13V16H15V18Z">
</path>
</svg></div>
<h6>OpenWRT</h6>
</a><a>a</a><a>a</a><a>a</a></div>
<div class="three columns group-items">b</div>
<div class="three columns group-items">c</div>
<div class="three columns group-items">d</div>
</div>
<div class="row group-title">
<h4><b>Bookmarks</b></h4>
</div>
<div class="row">
<div class="three columns">a</div>
<div class="three columns">b</div>
<div class="three columns">c</div>
<div class="three columns">d</div>
<div class="three columns group-items">a</div>
<div class="three columns group-items">b</div>
<div class="three columns group-items">c</div>
<div class="three columns group-items">d</div>
</div>
</div>
</div>

6
src/public/css/custom.css Normal file
View file

@ -0,0 +1,6 @@
:root {
--bgColor: #2d3436;
--bgImage: url("https://images.wallpaperscraft.com/image/single/leaf_plant_green_136967_2560x1440.jpg");
--accentColor: #ffc107;
--foreground: #ffffff;
}