-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
133 lines (122 loc) · 4.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>OverCSS by RogueSignal.io</title>
<link rel="icon" href="./assets/favicon.png">
<link rel="stylesheet" href="./over_css.css" title="MainCSS" type="text/css">
<link rel="stylesheet" href="./over_css2.css" title="MainCSS2" type="text/css">
<script src="https://roboyeti.github.io/overgrowl/over_growl.js"></script>
<script src="over_css.js"></script>
</head>
<body class="app" id="app">
<div id="controls" class="controls">
<button onClick="ocss.reset_css()">Reset CSS</button><br>
<button onClick="ocss.undo_last()" class="small">Undo</button>|
<button onClick="ocss.redo_last()" class="small">Redo</button><br>
<button onClick="style1()">Style #1</button><br>
<button onClick="style2()">Style #2</button><br>
<button onClick="ocss.clear_rules('.logo')">Clear #1</button><br>
<button onClick="style3()">Style #3</button><br>
<button onClick="sheet2()">Enable CSS2</button><br>
<button onClick="style4()">Style #4</button><br>
<button onClick="ocss2.reset_css()">Reset CSS2</button><br>
<button onClick="ocss2.disable()">Disable CSS2</button><br>
<button onClick="new_sheet_test()">New Sheet Test</button><br>
</div>
<div id="logo" class="logo">
<p class="rsyellow">OverCSS by <a href="http://www.roguesignal.io" target="_BLANK_">RogueSignal.IO</a><p>
<img src="assets/RogueSignal_FullLogo.svg" style="width:350px;"/>
<p></p>
<ul id="details" class="details">
<li> Access current style sheets and rules
<li> Easily append style rules
<li> Undo/Redo new and appended styles
<li> Clear all or by matching rules
<li> Original style sheet is preserved
<li> Style sheet selector by index or title.
<li> See <a href="https://github.com/roboyeti/overcss" target="_BLANK_" id="readme">Git Project</a> for more.
</ul>
</div>
<script>
var ocss;
var ogrowler
document.addEventListener("DOMContentLoaded", function(){
ocss = new OverCSS({ sheet: 'MainCSS' });
ocss2 = new OverCSS({ sheet: 'MainCSS2' });
ogrowler = new OverGrowl({});
});
function new_sheet_test() {
newcss = new OverCSS({ sheet: '_BLANK' });
newcss.apply_css('#app',`
background: #000000 url("assets/roguesignal_bg.png") repeat;
background-size: 512px;
background-position: 0 0;
animation: appanim 5s linear infinite;
` )
newcss.apply_css('@keyframes appanim',`
to { background-position:260% 0};
` )
ogrowler.info("Created new style sheet and appended moving background css. Wait a few seconds for reset.");
setTimeout(function() { newcss.reset_css(); }, 3000);
}
function style1() {
ocss.apply_style('.logo', 'box-shadow', '0px 0px 10px 10px rgba(86,124,126,1)');
ocss.apply_style('.logo', 'font-family', "'Brush Script MT', cursive");
ocss.apply_style('.logo', 'background-color', '#264646');
ogrowler.info("You have added three property styles individually. Each of these is one undo, but all are on the '.logo class' and can also all be removed by this rule.");
}
function style2() {
ocss.apply_css('.details',`
border-color:rgba(86,124,126,1);
border-width:4px;
border-style:solid;
background-color: rgba(16,34,36,1);
color: rgba(96,134,136,1);
padding:20px;
margin:5px;
font-size: 18px;
` )
ogrowler.info("You have added a rule as one block of css style, so is one undo.");
}
function style3() {
ocss.apply_css('#logo',`
background: linear-gradient(rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%) 0 0/100% 200%;
animation: logobackanim 3s linear infinite;
` )
ocss.apply_css('@keyframes logobackanim',`
to {background-position:0 -200%};
` )
ocss.apply_css('#app',`
background: #000000 url("assets/roguesignal_bg.png") repeat;
background-size: 256px;
background-position: 0 0;
animation: appanim 3s linear infinite;
` )
ocss.apply_css('@keyframes appanim',`
to { background-position:0 200%};
` )
ogrowler.info("You have added four rules, two appends to current rules and two new @keyframe rules. This would require four undos.");
}
function sheet2() {
ocss2.enable();
ogrowler.info("You have enabled the second CSS file & instance with it's own undo/clear storage.");
}
function style4() {
ocss2.apply_css('button',`
border-color:rgba(86,124,126,1);
border-width:1px;
border-style:solid;
background-color: rgba(16,34,36,1);
color: rgba(96,134,136,1);
font-size: 18px;
box-shadow: 0px 0px 10px 10px rgba(86,124,126,1);
font-family: 'Brush Script MT', cursive;
` )
ogrowler.info("This instance only works with the 2nd CSS sheet. Try the undo above. It will not work on this instance.");
}
</script>
</body>
</html>