bl-css 0.7.4 → 0.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -3
- package/bl.css +36 -20
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,6 +1,17 @@
|
|
|
1
1
|
# bl CSS
|
|
2
2
|
A *lightweight*, **blueviolet**, ***small*** CSS framework!
|
|
3
|
-
# 0.
|
|
4
|
-
|
|
3
|
+
# 0.9.0 - Release notes(by Dev)
|
|
4
|
+
So I finally added cards! They use the --_ variable and you can customize it to your needs!
|
|
5
|
+
Have a great day :D
|
|
6
|
+
# How to Change Accent Color?
|
|
7
|
+
To change from the **original** blueviolet theme you have to open the main```bl.css``` file and you can change the following:
|
|
8
|
+
```css
|
|
9
|
+
:root{
|
|
10
|
+
--_: rgb(/* Your accent's RGB here */)
|
|
11
|
+
--_4: rgba(/* Your RGB */, 0.4)
|
|
12
|
+
--_6: rgba(/* Your RGB */, 0.6)
|
|
13
|
+
}
|
|
14
|
+
```
|
|
5
15
|
|
|
6
|
-
Have a Nice day Using it **:D**
|
|
16
|
+
Have a Nice day Using it **:D**
|
|
17
|
+
Forever Free **:D**
|
package/bl.css
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
@import url(https://fonts.googleapis.com/css2?family=Lilita+One&display=swap);
|
|
2
2
|
@import url(https://fonts.googleapis.com/css2?family=Cause:wght@700&display=swap);
|
|
3
|
+
|
|
4
|
+
:root{
|
|
5
|
+
--_: rgb(138, 43, 226);
|
|
6
|
+
--_4: rgba(138, 43, 226, 0.4);
|
|
7
|
+
--_6: rgba(138, 43, 226, 0.6);
|
|
8
|
+
}
|
|
9
|
+
|
|
3
10
|
body{
|
|
4
11
|
background-color: black;
|
|
5
12
|
color: white;
|
|
@@ -7,11 +14,10 @@ body{
|
|
|
7
14
|
.purpl{
|
|
8
15
|
font-family: "Cause";
|
|
9
16
|
background: linear-gradient(
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
);
|
|
17
|
+
to bottom,
|
|
18
|
+
var(--_4),
|
|
19
|
+
var(--_),
|
|
20
|
+
var(--_4));
|
|
15
21
|
background-clip: text;
|
|
16
22
|
-webkit-background-clip: text;
|
|
17
23
|
color: transparent;
|
|
@@ -27,15 +33,10 @@ body{
|
|
|
27
33
|
}
|
|
28
34
|
.h1:hover{
|
|
29
35
|
color: transparent;
|
|
30
|
-
background:linear-gradient(
|
|
31
|
-
to bottom,
|
|
32
|
-
rgba(138, 43, 226, 0.4),
|
|
33
|
-
rgba(138,43,226,1),
|
|
34
|
-
rgba(138,43,226,0.4)
|
|
35
|
-
);
|
|
36
|
+
background: linear-gradient(to bottom, var(--_4), var(--_), var(--_4));
|
|
36
37
|
background-clip: text;
|
|
37
38
|
-webkit-background-clip: text;
|
|
38
|
-
border-bottom-color:
|
|
39
|
+
border-bottom-color: var(--_);
|
|
39
40
|
}
|
|
40
41
|
.normalp{
|
|
41
42
|
display: table;
|
|
@@ -61,8 +62,8 @@ body{
|
|
|
61
62
|
font-family: "Cause";
|
|
62
63
|
color: white;
|
|
63
64
|
padding: 3px;
|
|
64
|
-
background-color:
|
|
65
|
-
border-left:
|
|
65
|
+
background-color: var(--_4);
|
|
66
|
+
border-left: var(--_) 1px solid;
|
|
66
67
|
border-right: transparent 1px solid;
|
|
67
68
|
border-bottom: transparent 1px solid;
|
|
68
69
|
border-top: transparent 1px solid;
|
|
@@ -70,8 +71,8 @@ body{
|
|
|
70
71
|
transition: 0.4s ease;
|
|
71
72
|
}
|
|
72
73
|
.clearp:hover{
|
|
73
|
-
border:
|
|
74
|
-
background-color:
|
|
74
|
+
border: var(--_) 1px solid;
|
|
75
|
+
background-color: var(--_6);
|
|
75
76
|
}
|
|
76
77
|
.alertp{
|
|
77
78
|
display: table;
|
|
@@ -110,8 +111,8 @@ body{
|
|
|
110
111
|
transition: 0.1s ease;
|
|
111
112
|
}
|
|
112
113
|
.link:hover{
|
|
113
|
-
color:
|
|
114
|
-
text-decoration-color:
|
|
114
|
+
color: var(--_);
|
|
115
|
+
text-decoration-color: var(--_);
|
|
115
116
|
}
|
|
116
117
|
.linkbtn{
|
|
117
118
|
display: table;
|
|
@@ -127,11 +128,26 @@ body{
|
|
|
127
128
|
.linkbtn:hover{
|
|
128
129
|
color: white;
|
|
129
130
|
transform: translateY(2px);
|
|
130
|
-
border:
|
|
131
|
+
border: var(--_6) 2px solid;
|
|
131
132
|
background-color: transparent;
|
|
132
133
|
}
|
|
133
134
|
.linkbtn:active{
|
|
134
135
|
transform: translateY(3px);
|
|
135
|
-
color:
|
|
136
|
+
color: var(--_);
|
|
136
137
|
transition: 0.1s ease;
|
|
138
|
+
}
|
|
139
|
+
.card{
|
|
140
|
+
display: flex;
|
|
141
|
+
flex-direction: column;
|
|
142
|
+
width: fit-content;
|
|
143
|
+
text-align: center;
|
|
144
|
+
padding: 10px;
|
|
145
|
+
box-shadow: 0 0 5px var(--_);
|
|
146
|
+
background-color: black;
|
|
147
|
+
border-radius: 5px;
|
|
148
|
+
transition: 0.4s ease;
|
|
149
|
+
}
|
|
150
|
+
.card:hover{
|
|
151
|
+
transform: translateY(-3px);
|
|
152
|
+
box-shadow: 0 0 10px var(--_);
|
|
137
153
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bl-css",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.9.0",
|
|
4
4
|
"description": "black - blueviolet lightweight CSS framework",
|
|
5
5
|
"main": "bl.css",
|
|
6
6
|
"scripts": {
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"./help": "./README.md",
|
|
18
18
|
"./style": "./bl.css"
|
|
19
19
|
},
|
|
20
|
-
"keywords": ["css", "framework", "
|
|
20
|
+
"keywords": ["css", "framework", "dark", "blueviolet", "lightweight", "simple"],
|
|
21
21
|
"author": "__fg_xd",
|
|
22
22
|
"license": "MIT"
|
|
23
|
-
}
|
|
23
|
+
}
|