Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Simple HTML5 Edit Redesign #1

Merged
merged 3 commits into from

2 participants

@Noxdzine

Simple UI Redesign

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

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

@mlabod mlabod merged commit ebb8c23 into mlabod:master
@mlabod
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. @Noxdzine

    UI Redesign

    Noxdzine authored
    Simple UI Redesign
  2. @Noxdzine

    Revert "UI Redesign"

    Noxdzine authored
    This reverts commit 61284a0d1e061b01ba75a2e1c6376faa317bb04b.
  3. @Noxdzine

    UI Redesign

    Noxdzine authored
    Simple UI Redesign
This page is out of date. Refresh to see the latest.
View
0  README.md 100644 → 100755
File mode changed
View
75 editor.css 100644 → 100755
@@ -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;}
View
0  editor.jquery.js 100644 → 100755
File mode changed
View
8 index.html 100644 → 100755
@@ -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.