홈 탐색 도움말
가입하기 로그인
Apq
/
violentmonkey
의 미러 https://github.com/violentmonkey/violentmonkey.git
1
0
포크 0
파일 이슈 0 위키
소스 검색

updated styles, rewritten with lesscss

Signed-off-by: Gerald <[email protected]>
Gerald 11 년 전
부모
eff9ae64f3
커밋
fb3bf7cf0f
12개의 변경된 파일과 350개의 추가작업 그리고 123개의 파일을 삭제
분할 보기 변경상태 보기
  1. 0 9
      common.css
  2. 0 5
      confirm.css
  3. 2 3
      confirm.html
  4. 1 34
      editor.js
  5. 0 49
      options.css
  6. 4 4
      options.html
  7. 2 3
      options.js
  8. 0 9
      popup.css
  9. 3 4
      popup.html
  10. 4 3
      popup.js
  11. 334 0
      style.less
  12. 0 0
      style.min.css

+ 0 - 9
common.css
파일 보기 

@@ -1,9 +0,0 @@
 
-html,body{background:#eee;font:menu;height:100%;margin:0;padding:0;}
 
-h1{text-shadow:#999 3px 3px 5px;}
 
-.hide{display:none;}
 
-.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
 
-.frame{position:fixed;background:lightgray;border-spacing:10px;left:0;right:0;top:0;bottom:0;table-layout:fixed;width:100%;height:100%;}
 
-.frame>.header{position:relative;padding:1px 1rem;}
 
-.frame>.header>.buttons{position:absolute;right:1rem;}
 
-.frame>.body{position:absolute;left:5px;right:5px;}
 
-.fa{width:1em;margin-right:.3em;}

+ 0 - 5
confirm.css
파일 보기 

@@ -1,5 +0,0 @@
 
-.frame>.header{height:7rem;}
 
-.frame>.header>.buttons{bottom:3rem;}
 
-#url{float:left;max-width:50%;}
 
-#msg{text-align:right;}
 
-.frame>.body{top:7rem;bottom:5px;}

+ 2 - 3
confirm.html
파일 보기 

@@ -3,12 +3,11 @@
 
 	<head>
 
 		<meta http-equiv="content-type" content="text/html;charset=utf-8">
 
 		<link rel="shortcut icon" type="image/png" href="images/icon16.png" />
 
-		<link rel="stylesheet" type="text/css" href="common.css" />
 
-		<link rel="stylesheet" type="text/css" href="confirm.css" />
 
+		<link rel="stylesheet" type="text/css" href="style.min.css" />
 
 		<script type="text/javascript" src="load.js"></script>
 
 		<title data-i18n=extName></title>
 
 	</head>
 
-	<body>
 
+	<body id=confirm>
 
 		<div class=frame>
 
 			<div class=header>
 
 				<h1><span data-i18n=labelInstall></span> - <span data-i18n=extName></span></h1>

+ 1 - 34
editor.js
파일 보기 

@@ -1,35 +1,4 @@
 
-/*function initAce(callback,data){
 
-	data=data||{};
 
-	addScript({src:'lib/ace-min-noconflict/ace.js'},function(){
 
-		var T=ace.edit('eCode'),s=T.getSession();
 
-		T.setTheme('ace/theme/github');
 
-		T.setValueAndFocus=function(v){
 
-			T.setValue(v);T.focus();T.gotoLine(0,0);
 
-		};
 
-		s.setMode('ace/mode/javascript');
 
-		s.setUseSoftTabs(false);
 
-		s.setUseWrapMode(true);
 
-		s.setUseWorker(true);
 
-		T.clearHistory=s.getUndoManager().reset;
 
-		if(data.onchange) s.on('change',data.onchange);
 
-		if(data.save) T.commands.addCommand({
 
-			name:'Save',
 
-			bindKey:{win:'Ctrl-S',mac:'Command-S'},
 
-			exec:data.save,
 
-			readOnly:false,
 
-		});
 
-		if(data.exit) T.commands.addCommand({
 
-			name:'Exit',
 
-			bindKey:{win:'Esc'},
 
-			exec:data.exit,
 
-			readOnly:true,
 
-		});
 
-		if(data.readonly) T.setReadOnly(data.readonly);
 
-		callback(T);
 
-	});
 
-}*/
 
-
 
-function initCodeMirror(callback,data){
 
+function initEditor(callback,data){
 
 	data=data||{};
 
 	addCSS([
 
 		{href:'lib/CodeMirror/lib/codemirror.css'},
 
@@ -83,5 +52,3 @@ function initCodeMirror(callback,data){
 
 		callback(T);
 
 	});
 
 }
 
-
 
-var initEditor=initCodeMirror;

+ 0 - 49
options.css
파일 보기 

@@ -1,49 +0,0 @@
 
-a{color:dodgerblue;}
 
-textarea,input[type=text]{box-sizing:border-box;width:100%;}
 
-.main{max-width:900px;height:100%;margin:0 auto;}
 
-.sidebar{position:fixed;background:#fafafa;width:200px;margin-top:30px;box-sizing:border-box;border:1px solid darkgray;border-radius:10px 0 0 10px;border-right:none;padding:20px 10px 10px;text-align:right;}
 
-.sidebar img{width:64px;}
 
-.sidebar>hr{border:none;border-top:1px solid darkgray;}
 
-.sidemenu>a{color:gray;display:block;font-size:1.17em;font-weight:bold;line-height:2.5em;text-decoration:none;}
 
-.sidemenu>a.selected,.sidemenu>a:hover{color:black;}
 
-.content{background:white;margin-left:200px;box-sizing:border-box;border-left:1px solid darkgray;border-right:1px solid darkgray;height:100%;overflow-y:auto;position:relative;}
 
-.content>div{margin:20px;}
 
-.controls{height:1px;}
 
-.controls>div{padding:5px 10px;}
 
-fieldset.title{border:none;border-top:1px solid silver;margin:20px 0 0;}
 
-tr{vertical-align:top;padding:0;height:1px;}
 
-
 
-/* Installed scripts */
 
-#tabInstalled{height:100%;width:100%;margin:0;}
 
-#tabInstalled>.header{height:2rem;line-height:2rem;}
 
-#sList{overflow-y:auto;box-sizing:border-box;border-top:1px solid darkgray;position:absolute;top:2rem;bottom:0;width:100%;}
 
-#sList>div{border-bottom:1px dashed silver;padding:10px;position:relative;}
 
-#sList>div.disabled{background:lightgray;color:gray;}
 
-#sList>div.disabled .name{color:blueviolet;}
 
-#sList>div.disabled .icon{opacity:0.5;}
 
-#sList>div.moving{background:lightgreen;border:1px outset gray;cursor:move;}
 
-#sList .name{font-weight:bold;font-size:120%;}
 
-#sList .support{width:16px;height:16px;border-radius:8px;background-color:green;color:white;text-align:center;display:inline-block;text-decoration:none;font-size:12px;}
 
-#sList .support.hide{display:none;}
 
-#sList .icon{top:1em;width:40px;height:40px;margin:2px;position:absolute;}
 
-#sList .descrip{margin-left:60px;min-height:1em;max-height:4.5em;overflow-y:auto;}
 
-#sList .move{cursor:move;color:gray;font-size:150%;}
 
-#sList .panelH{margin-left:60px;margin-right:20px;}
 
-#sList .panelH>*{display:inline-block;margin-right:10px;}
 
-#sList .panelT{position:absolute;top:10px;right:10px;}
 
-
 
-/* Editor */
 
-#eMeta{max-width:450px;max-height:100%;height:auto;background:lightgray;z-index:10;right:0;top:0;padding:10px;box-sizing:border-box;overflow-y:auto;box-shadow:gray -2px 4px 4px;position:absolute;}
 
-#eMeta table{width:100%;}
 
-#eMeta td{width:1px;white-space:nowrap;vertical-align:middle;}
 
-#eMeta td.expand{width:auto;}
 
-.frame>.header{height:5rem;}
 
-.frame>.header>.buttons{bottom:1rem;}
 
-.frame>.footer{position:absolute;height:3rem;bottom:0;width:100%;line-height:3rem;}
 
-.frame>.footer>.options{float:left;}
 
-.frame>.footer>.right{text-align:right;}
 
-.frame>.body{top:5rem;bottom:3rem;}
 
-
 
-/* Settings */
 
-#xList{display:block;width:100%;white-space:normal;min-height:100px;}
 
-#xList>option{display:inline-block;width:180px;margin:2px;padding:0 5px;border:1px dashed lightgray;}

+ 4 - 4
options.html
파일 보기 

@@ -3,13 +3,13 @@
 
 	<head>
 
 		<meta http-equiv="content-type" content="text/html;charset=utf-8">
 
 		<link rel="shortcut icon" type="image/png" href="images/icon16.png">
 
-		<link rel="stylesheet" type="text/css" href="common.css">
 
-		<link rel="stylesheet" type="text/css" href="options.css">
 
+		<link rel="stylesheet" type="text/css" href="lib/font-awesome/font-awesome.min.css">
 
+		<link rel="stylesheet" type="text/css" href="style.min.css">
 
 		<script src="lib/zip.js/zip.js"></script>
 
 		<script src="load.js"></script>
 
 		<title data-i18n=extName></title>
 
 	</head>
 
-	<body>
 
+	<body id=options>
 
 		<div class=main>
 
 			<div class=sidebar>
 
 				<img src=images/icon128.png>
 
@@ -62,7 +62,7 @@
 
 		<div id=wndEditor class="frame hide">
 
 			<div class=header>
 
 				<h2 data-i18n=labelScriptEditor></h2>
 
-				<div class=buttons><button id=bCustom><span id=sCustom></span> <span data-i18n=buttonCustomMeta></span></button></div>
 
+				<div class=buttons><button id=bCustom><i id=sCustom class="fa fa-caret-down"></i> <span data-i18n=buttonCustomMeta></span></button></div>
 
 			</div>
 
 			<div class=body>
 
 				<div id=eCode></div>

+ 2 - 3
options.js
파일 보기 

@@ -54,7 +54,7 @@ function loadItem(o,r){
 
 		+'<span class=author></span>'
 
 	+'</div>'
 
 	+'<div class=panelT>'
 
-		+'<span class=move data=move>&equiv;</span>'
 
+		+'<i class="fa fa-arrows move" data="move"></i>'
 
 	+'</div>'
 
 	+'<p class="descrip ellipsis"></p>'
 
 	+'<div class=panelB>'
 
@@ -296,7 +296,6 @@ function markClean(){
 
 }
 
 function mReset(){
 
 	M.classList.add('hide');
 
-	sC.innerHTML='&laquo;';
 
 	var e=[],c=E.scr.custom,m=E.scr.meta;
 
 	M.dirty=false;
 
 	mN.value=c.name||'';
 
@@ -367,7 +366,7 @@ M.markDirty=function(){M.dirty=true;E.markDirty();};
 
 [mN,mH,mR,mU,mD,mI,mM,mE,cI,cM,cE].forEach(function(i){i.onchange=M.markDirty;});
 
 $('#bCustom').onclick=function(){
 
 	var r=M.classList.toggle('hide');
 
-	sC.innerHTML=r?'&laquo;':'&raquo;';
 
+	sC.className='fa '+(r?'fa-caret-down':'fa-caret-up');
 
 };
 
 eS.onclick=eSave;
 
 eSC.onclick=function(){eSave();eClose();};

+ 0 - 9
popup.css
파일 보기 

@@ -1,9 +0,0 @@
 
-html,body{height:auto;background:inherit;}
 
-.menu{overflow-y:auto;max-width:300px;}
 
-.menu>div{cursor:pointer;padding:5px;display:block;}
 
-.menu>div:hover{background:gray;color:gold;}
 
-.menu>div.disabled{color:gray;}
 
-.menu>div.disabled:hover{color:silver;}
 
-.menu>div span{display:inline-block;width:20px;}
 
-.menu>hr{border:none;border-top:1px solid silver;}
 
-.expand>td{border-top:1px solid silver;}

+ 3 - 4
popup.html
파일 보기 

@@ -1,14 +1,13 @@
 
 <!DOCTYPE html>
 
-<html>
 
+<html id=popup>
 
 	<head>
 
 		<meta content="text/html;charset=utf-8" http-equiv="content-type" />
 
 		<link rel="stylesheet" type="text/css" href="lib/font-awesome/font-awesome.min.css">
 
-		<link rel="stylesheet" type="text/css" href="common.css">
 
-		<link rel="stylesheet" type="text/css" href="popup.css">
 
+		<link rel="stylesheet" type="text/css" href="style.min.css">
 
 		<title>Popup Menu - Violentmonkey</title>
 
 	</head>
 
 	<body>
 
-		<div id=popup>
 
+		<div id=main>
 
 			<div class="top menu ellipsis"></div>
 
 			<div class="bot menu ellipsis"></div>
 
 		</div>

+ 4 - 3
popup.js
파일 보기 

@@ -1,4 +1,4 @@
 
-var P=$('#popup'),C=$('#commands'),
 
+var P=$('#main'),C=$('#commands'),
 
 		pT=P.querySelector('.top'),pB=P.querySelector('.bot'),
 
 		cT=C.querySelector('.top'),cB=C.querySelector('.bot'),
 
 		tab=null,ia=null,scripts={},hr=null;
 
@@ -14,12 +14,11 @@ function loadItem(d,c) {
 
 }
 
 function addItem(h,c,b) {
 
   var d=document.createElement('div');
 
-  d.innerHTML='<i></i>'+h;
 
+  d.innerHTML='<i></i> '+h;
 
   if('title' in c) {
 
     d.title=typeof c.title=='string'?c.title:h;
 
     delete c.title;
 
   }
 
-  d.className='ellipsis';
 
   c.holder.insertBefore(d,b);
 
   for(h in c) d[h]=c[h];
 
 	if(d.symbols) loadItem(d,d.data);
 
@@ -36,6 +35,7 @@ function menuScript(s) {
 
 		addItem(n,{
 
 			holder: pB,
 
 			symbols: ['fa-times','fa-check'],
 
+			className: 'ellipsis',
 
 			title: s.meta.name,
 
 			onclick: function(e){
 
 				var d=!this.data;
 
@@ -108,6 +108,7 @@ function load(data) {
 
     data[0].forEach(function(i) {
 
       addItem(i[0], {
 
         holder: cB,
 
+				className: 'ellipsis',
 
         symbols: ['fa-hand-o-right'],
 
         //title: true,
 
         onclick: menuCommand,

+ 334 - 0
style.less
파일 보기 

@@ -0,0 +1,334 @@
 
+.fill(){
 
+	height: 100%;
 
+	margin: 0;
 
+	padding: 0;
 
+}
 
+.fullsize(){
 
+	box-sizing: border-box;
 
+	width: 100%;
 
+}
 
+
 
+// common styles
 
+html{
 
+	.fill;
 
+	body{
 
+		.fill;
 
+		background: #eee;
 
+		font: menu;
 
+	}
 
+}
 
+h1{
 
+	text-shadow: #999 3px 3px 5px;
 
+}
 
+.hide{
 
+	display: none;
 
+}
 
+.ellipsis{
 
+	white-space: nowrap;
 
+	text-overflow: ellipsis;
 
+	overflow: hidden;
 
+}
 
+.frame{
 
+	position: fixed;
 
+	background: lightgray;
 
+	border-spacing:10px;
 
+	left:0;
 
+	right:0;
 
+	top:0;
 
+	bottom:0;
 
+	table-layout:fixed;
 
+	width:100%;
 
+	height:100%;
 
+	.header{
 
+		position:relative;
 
+		padding:1px 1rem;
 
+		.buttons{
 
+			position:absolute;
 
+			right:1rem;
 
+		}
 
+	}
 
+	.body{
 
+		position:absolute;
 
+		left:5px;
 
+		right:5px;
 
+	}
 
+}
 
+
 
+// popup menu
 
+#popup{
 
+	body {
 
+		background:inherit;
 
+	}
 
+	.fa{
 
+		width:1em;
 
+	}
 
+}
 
+.menu{
 
+	overflow-y:auto;
 
+	max-width:300px;
 
+	div{
 
+		cursor:pointer;
 
+		padding:5px;
 
+		display:block;
 
+		&:hover{
 
+			background:gray;
 
+			color:gold;
 
+		}
 
+		&.disabled{
 
+			color:gray;
 
+			&:hover{
 
+				color:silver;
 
+			}
 
+		}
 
+	}
 
+	hr{
 
+		border:none;
 
+		border-top:1px solid silver;
 
+	}
 
+}
 
+
 
+// options page
 
+a{
 
+	color:dodgerblue;
 
+}
 
+textarea{
 
+	.fullsize;
 
+}
 
+input[type=text]{
 
+	.fullsize;
 
+}
 
+label>*{
 
+	vertical-align: middle;
 
+}
 
+#options{
 
+	.main{
 
+		max-width:900px;
 
+		height:100%;
 
+		margin:0 auto;
 
+	}
 
+	.sidebar{
 
+		position:fixed;
 
+		background:#fafafa;
 
+		width:200px;
 
+		margin-top:30px;
 
+		box-sizing:border-box;
 
+		border:1px solid darkgray;
 
+		border-radius:10px 0 0 10px;
 
+		border-right:none;
 
+		padding:20px 10px 10px;
 
+		text-align:right;
 
+		img{
 
+			width: 64px;
 
+		}
 
+		hr{
 
+			border:none;
 
+			border-top:1px solid darkgray;
 
+		}
 
+	}
 
+	.sidemenu>a{
 
+		color:gray;
 
+		display:block;
 
+		font-size:1.17em;
 
+		font-weight:bold;
 
+		line-height:2.5em;
 
+		text-decoration:none;
 
+		&.selected,&:hover{
 
+			color:black;
 
+		}
 
+	}
 
+	fieldset.title{
 
+		border:none;
 
+		border-top:1px solid silver;
 
+		margin:20px 0 0;
 
+	}
 
+}
 
+.content{
 
+	background:white;
 
+	margin-left:200px;
 
+	box-sizing:border-box;
 
+	border-left:1px solid darkgray;
 
+	border-right:1px solid darkgray;
 
+	height:100%;
 
+	overflow-y:auto;
 
+	position:relative;
 
+	&>div{
 
+		margin:20px;
 
+	}
 
+}
 
+// Installed scripts
 
+#tabInstalled{
 
+	height:100%;
 
+	width:100%;
 
+	margin:0;
 
+	&>.header{
 
+		height:1.5rem;
 
+		line-height:1.5rem;
 
+	}
 
+}
 
+#sList{
 
+	overflow-y:auto;
 
+	box-sizing:border-box;
 
+	border-top:1px solid darkgray;
 
+	position:absolute;
 
+	top:1.5rem;
 
+	bottom:0;
 
+	width:100%;
 
+	&>div{
 
+		border-bottom:1px dashed silver;
 
+		padding:10px;
 
+		position:relative;
 
+		.move{
 
+			cursor: pointer;
 
+			color: gray;
 
+			&:hover{
 
+				color: black;
 
+			}
 
+		}
 
+		&.disabled{
 
+			background:lightgray;
 
+			color:gray;
 
+			.name{
 
+				color:blueviolet;
 
+			}
 
+			.icon{
 
+				opacity:0.5;
 
+			}
 
+		}
 
+		&.moving{
 
+			background:lightgreen;
 
+			border:1px outset gray;
 
+			cursor:move;
 
+		}
 
+	}
 
+	.name{
 
+		font-weight:bold;
 
+		font-size:120%;
 
+	}
 
+	.support{
 
+		width:16px;
 
+		height:16px;
 
+		border-radius:8px;
 
+		background-color:green;
 
+		color:white;
 
+		text-align:center;
 
+		text-decoration:none;
 
+		font-size:12px;
 
+		&.hide{
 
+			.hide;
 
+		}
 
+	}
 
+	.icon{
 
+		top:1em;
 
+		width:40px;
 
+		height:40px;
 
+		margin:2px;
 
+		position:absolute;
 
+	}
 
+	.descrip{
 
+		margin-left:60px;
 
+		min-height:1em;
 
+		max-height:4.5em;
 
+		overflow-y:auto;
 
+	}
 
+	.panelH{
 
+		margin-left:60px;
 
+		margin-right:20px;
 
+		&>*{
 
+			display:inline-block;
 
+			margin-right:10px;
 
+			vertical-align:middle;
 
+		}
 
+	}
 
+	.panelT{
 
+		position:absolute;
 
+		top:10px;
 
+		right:10px;
 
+	}
 
+}
 
+// Editor
 
+#eMeta{
 
+	max-width:450px;
 
+	max-height:100%;
 
+	height:auto;
 
+	background:lightgray;
 
+	z-index:10;
 
+	right:0;
 
+	top:0;
 
+	padding:10px;
 
+	box-sizing:border-box;
 
+	overflow-y:auto;
 
+	box-shadow:gray -2px 4px 4px;
 
+	position:absolute;
 
+	table{
 
+		width: 100%;
 
+		td{
 
+			width:1px;
 
+			white-space:nowrap;
 
+			&.expand{
 
+				width:auto;
 
+			}
 
+		}
 
+	}
 
+}
 
+.frame{
 
+	.header{
 
+		height:5rem;
 
+		.buttons{
 
+			bottom:1rem;
 
+		}
 
+	}
 
+	.body{
 
+		top:5rem;
 
+		bottom:3rem;
 
+	}
 
+	.footer{
 
+		position:absolute;
 
+		height:3rem;
 
+		bottom:0;
 
+		width:100%;
 
+		line-height:3rem;
 
+		.options{
 
+			float:left;
 
+		}
 
+		.right{
 
+			text-align:right;
 
+		}
 
+	}
 
+}
 
+// Settings
 
+#xList{
 
+	display:block;
 
+	width:100%;
 
+	white-space:normal;
 
+	min-height:100px;
 
+	&>option{
 
+		display:inline-block;
 
+		width:180px;
 
+		margin:2px;
 
+		padding:0 5px;
 
+		border:1px dashed lightgray;
 
+	}
 
+}
 
+
 
+// confirm page
 
+#confirm{
 
+	.frame{
 
+		.header{
 
+			height:6rem;
 
+			.buttons{
 
+				bottom:3rem;
 
+			}
 
+		}
 
+		.body{
 
+			top:6rem;
 
+			bottom:5px;
 
+		}
 
+	}
 
+}
 
+#url{
 
+	float:left;
 
+	max-width:50%;
 
+}
 
+#msg{
 
+	text-align:right;
 
+}

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 0 - 0
style.min.css


이 변경점에서 너무 많은 파일들이 변경되어 몇몇 파일들은 표시되지 않았습니다.