Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Simple HTML5 Edit Redesign #1

Merged
merged 3 commits into from

2 participants

Anthony Aubertin Marvin
Anthony Aubertin

Simple UI Redesign

Noxdzine added some commits
Anthony Aubertin Noxdzine UI Redesign
Simple UI Redesign
61284a0
Anthony Aubertin Noxdzine Revert "UI Redesign"
This reverts commit 61284a0d1e061b01ba75a2e1c6376faa317bb04b.
333d0c9
Anthony Aubertin Noxdzine UI Redesign
Simple UI Redesign
9db76d6
Marvin
Owner

looks cool, maybe the formatting buttons need a little more contrast to the background

Marvin mlabod merged commit ebb8c23 into from
Marvin
Owner

That was here for the page styling, which has nothing to do with the plugin css :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jul 11, 2011
  1. Anthony Aubertin

    UI Redesign

    Noxdzine authored
    Simple UI Redesign
  2. Anthony Aubertin

    Revert "UI Redesign"

    Noxdzine authored
    This reverts commit 61284a0d1e061b01ba75a2e1c6376faa317bb04b.
  3. Anthony Aubertin

    UI Redesign

    Noxdzine authored
    Simple UI Redesign
This page is out of date. Refresh to see the latest.
0  README.md 100644 → 100755
View
File mode changed
75 editor.css 100644 → 100755
View
@@ -1,9 +1,13 @@
/* Simple HTML5 Editor */
-.texteditor {position:relative}
+ .texteditor {position:relative}
+ *{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
+ h1{margin:0;}
+ body {background:#414141;font-family:"Arial", "Helvetica", Sans-Serif;color:#2a2a2a}
.texteditor .textarea {
- margin-top:5px;
+ width:100%;
+ margin-top:15px;
padding:10px;
background:white;
border-radius:3px;
@@ -13,14 +17,67 @@
.textarea:focus {
outline:none}
+ footer{text-align:center;text-shadow:0px 1px 0px rgba(255,255,255,.1);}
+ footer a{color:#181818; text-decoration:none;}
+
button {
- cursor:pointer;
- padding:5 10px;
- background:#f0f0f0;
+ padding:5px 7px 4px 7px;
+ margin-right:8px;
+ border:none;
+ font-size:12px;
+ color:#777777;
+ text-shadow:0px 1px 0px rgba(255,255,255,1);
+ cursor:pointer;
border-radius:3px;
- border:1px solid #ccc;
- box-shadow:0px 0px 5px #ddd}
+ background:-webkit-gradient(linear, left top, left bottom, from(#ececec), to(#d6d6d6));
+ background:-moz-linear-gradient(top, #ececec, #d6d6d6);
+ -moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(0, 0, 0, 0.2);
+ -webkit-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(0, 0, 0, 0.2);
+ box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(0, 0, 0, 0.2),0px 0px 2px rgba(0, 0, 0, 0.2);
+ }
button:hover {
- background:#e8e8e8;
- box-shadow:0px 0px 5px #bbb}
+ background:-webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#ececec));
+ background:-moz-linear-gradient(top, #d6d6d6, #ececec);
+ -moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(0, 0, 0, 0.2);
+ -webkit-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(0, 0, 0, 0.2);
+ box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5),0px 1px 0px rgba(0, 0, 0, 0.2),0px 0px 2px rgba(0, 0, 0, 0.2);}
+
+ .text{
+ padding:15px;
+ width:100%;
+ background:#ececec;
+ -moz-border-radius:0 0 6px 6px;
+ -webkit-border-radius:0 0 6px 6px;
+ -o-border-radius:0 0 6px 6px;
+ border-radius:0 0 6px 6px;}
+
+ .main {
+ width:600px;
+ margin:100px auto;
+ margin-bottom: 15px;
+ -moz-border-radius:6px;
+ -webkit-border-radius:6px;
+ -o-border-radius:6px;
+ border-radius:6px;
+ -moz-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.7);
+ -webkit-box-shadow:0px 1px 3px rgba(0, 0, 0, 0.7);
+ box-shadow:0px 2px 3px rgba(0, 0, 0, 0.7);}
+
+ .main h1{
+ width:100%;
+ height:42px;
+ -moz-border-radius:6px 6px 0 0;
+ -webkit-border-radius:6px 6px 0 0;
+ -o-border-radius:6px 6px 0 0;
+ border-radius:6px 6px 0 0;
+ border-bottom:1px solid #383838;
+ background:-webkit-gradient(linear, left top, left bottom, from(#c1c1c1), to(#a3a3a3));
+ background:-moz-linear-gradient(top, #c1c1c1, #a3a3a3);
+ -moz-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5);
+ -webkit-box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5);
+ box-shadow:inset 0px 1px 0px rgba(255, 255, 255, 0.5);
+ color:#3f3f3f;
+ text-shadow:0px 1px 0px rgba(255, 255, 255, 0.5);
+ font-size:14px;
+ padding:14px;}
0  editor.jquery.js 100644 → 100755
View
File mode changed
8 index.html 100644 → 100755
View
@@ -7,12 +7,6 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="editor.jquery.js"></script>
- <style type="text/css">
- body {background:#f0f0f0; font-family:"Arial", "Helvetica", Sans-Serif;color:#333}
- h1 {text-align:center; font-size:18px}
- .main {width:400px;margin:100px auto}
- </style>
-
<script type="text/javascript">
$(function(){
$("div.text").simpleEdit();
@@ -20,11 +14,13 @@
</script>
</head>
<body>
+
<div class="main">
<h1>Simple HTML5 Editor</h1>
<div class="text">Lorem Ipsum Dolor..</div>
<span></span>
</div>
+ <footer>Developement by <a href="http://www.inlovewithcss.com/" target="_blank">mlabod</a> & design by <a href="http://twitter.com/Noxdzine" target="_blank">Noxdzine</a></footer>
<a href="http://github.com/mlabod/simple-edit">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://gs1.wac.edgecastcdn.net/80460E/assets/img/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub">
Something went wrong with that request. Please try again.