Anonymous avatar Anonymous committed 9d82004 Draft

new CSS for editor

Comments (0)

Files changed (1)

semanticeditor/static/semanticeditor/wymeditor/iframe/default/wymiframe.css

-body  { 
-    background: white;
+* {margin: 0;}
+
+/*  We use px font sizes, because we want the <element>:after (the element 
+    labels) all to be the same size, and not relative to the size of the    
+    element.
+    
+    The base size for the user's text is 16px; the information provided by the 
+    editor about containers, commands and classes is 12px, i.e. 75%. 
+    
+    The line-height of 1.5 is adequate for most typefaces, except those with 
+    extravagant height requirements.
+    
+    This means that different fonts can be used without too much difficulty - 
+    some suitable alternative font stacks for the body are:
+
+    "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
+    "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+    Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
+    Georgia, Times, "Times New Roman", serif;
+
+    */
+
+body { 
+    font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
+    font-size: 16px;    
+    line-height: 1.5; /* make room for labels above the line */
     color: black;
-    font-family: "Gill Sans", "Bitstream Vera Sans", sans-serif;
-    margin: 0;
+    background: #fbfbfb;
     }
 
-* {margin: 0;} /* reset them all */
-
-p   {font-size: 100%;}
-
-h1  {font-size: 194%;}  /* heading sizes increase by 25% */
+h1  {font-size: 194%;}  /* heading sizes decrease by 25% */
 h2  {font-size: 155%;}
 h3  {font-size: 125%;}
 h4  {font-size: 100%;}
 h5  {font-size: 88%;}
 h6  {font-size: 78%;}
 
-/* basic styles for all legal block-level elements */
-
+/*  The block-level elements we cater for
+    'position' establishes containing block for :before and :after elements */           
+    
 p, div,
 h1, h2, h3, h4, h5, h6,
-ul, ol,
-table,
-blockquote,
-pre,
-table,
-table caption
-{
-    padding: 0 30px 1px; /* left margin is for the container symbol; right margin to look nice */
-    position:relative; /* to establish containing block for ':before' elements */
-    border-top: 1px solid #f0f0f0; /* a soft pale line around each element */
-}
+ul, ol, li,
+blockquote, pre,
+table, table caption {
+    position: relative;
+    padding: .75rem 0.5rem 0 3rem;
+    }
 
-/* lists present some special cases */
-li  {padding-left: 60px; position: relative;} /* position: relative for the absolutely positioned children */
-li:first-child  {margin-top: 1em;} /* get out of the way of any list markers */
-ul li   {list-style: none;}
-ol li   {list-style: decimal;}
+li  {
+    padding-left: 3rem;
+    list-style: none;
+    }
+       
+/*  for elements contained in others, make room for the containing element's 
+    label */
 
-/* table captions do too - we're going to need something suitable here */
-table caption   {}
+li:first-child, 
+blockquote *:first-child  {
+    margin-top: 1rem;
+    } 
 
+/*  Element, command and  class labels are :before/:after pseudo-classes.
+    All are positioned absolutely with respect to their elements. */
 
-/* styles for the container and command markers */
+*:after,
+*:before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    font-size: 0.75rem;    
+    }
 
-p:after,
-h1:after, h2:after, h3:after, h4:after, h5:after, h6:after,
-ul:after, ol:after, li:after,
-table:after,
-blockquote:after,
-pre:after,
-table:after,
-table caption:after
-    {
-    position: absolute; /* take it out of the flow */
-    left: 0; top: 1em; /* 1em should be enough vertical space for the :before style marker */
-    font-size: 12px; color: #a33; font-weight: bold; /* bold and red */
-}
+/* Element labels */ 
 
-/* the block-level element markers for the left margin */
+*:after {
+    line-height: 1.5rem;
+    margin-top: 0.75rem; /* leave space for the class labels */
+    font-weight: bold; 
+    color: #a33; 
+    }
 
+/*  left-margin element (i.e. container) labels */
 p:after {content:'p';}
+blockquote:after {content:'blockquote';}
 li:after {content:'item';}
 li:after {content:'item';}
 h1:after {content:'h1';}
 h5:after {content:'h5';}
 h6:after {content:'h6';}
 ul:after {content:'unordered list';}
+ol:after {content:'ordered list';}
 h6:after {content:'h6';}
 table:after {content:'table';}
 table caption:after {content:'caption';}
 
-/* inline semantic elements - this doesn't work in FF <= 3.6.13, but it's not essential */
+/*  Inline semantic elements */
+    
+em, strong {
+    position: relative;
+      }
 
-em, strong  {position: relative;}   /* for :after elements */
-em:hover:after   {content: "emphasis";}
-strong:hover:after   {content: "strong\0000a0emphasis"; }
-em strong:hover:after, strong em:hover:after {    
-    content: "emphasis\0000a0\000026\0000a0strong\0000a0emphasis\0000a0(silly)";
-    z-index: 100; } /* to hide emphasis/strong emphasis element markers */
-em:after, strong:after {
-    position: absolute; 
-    margin-top: -.5em;
-    left: 0; 
-    background: white; 
-    font-size: 10px; 
-    color: #a33; 
-    font-weight: bold; 
-    font-style: normal;
+/* inline semantic element labels */
+em:after, 
+strong:after {
+    font-size: 0.6rem;
+    line-height: 1rem;
+    /* clear the line of text - for some fonts 0.7rem works better */
+    margin-top: -0.6rem;
+    font-style: normal;  
+    z-index: -200;
+    }
+        
+em:after {
+    content: "emphasis";
+    }
+strong:after {
+    content: "strong\0000a0emphasis";
     }
 
+/* Command labels are similar to container labels */ 
 
-/* each block-level element has a class marker that appear in the editor. */
+p.secommand {
+    line-height: 1rem;
+    }
+
+p.secommand:after   {
+    line-height: 1rem;
+    color: #67a;
+}
+    
+p.secommand.secommand-newcol {margin-left: 3rem;}
+p.secommand.secommand-innerrow {margin-left: 6rem;} 
+p.secommand.secommand-innercol {margin-left: 9rem;} 
+
+p.secommand.secommand-newrow {
+    border-top: 1px solid #aaa; 
+    background: #e0e0e0;
+    }
+
+p.secommand.secommand-newcol {
+    background: #e6e6e6;
+    }
+    
+p.secommand.secommand-innerrow {
+    background: #ececec;
+    }
+
+p.secommand.secommand-innercol {
+    background: #f0f0f0;
+    }     
+    
+/*  Class labels */ 
 
 p:before, div:before,
 h1:before, h2:before, h3:before, h4:before, h5:before, h6:before, 
 ul:before, ol:before, li:before,
+blockquote:before, pre:before,
 table:before,
-blockquote:before,
-pre:before,
-table:before,
-table caption:before
-{
-    display: block;
-    content: "\00a0";   /* puts a non-breaking space in it, so it always takes space */
-    /* small green italic */    
-    font-size: 10px; 
+table caption:before {
+    font-style: italic;
+    font-weight: normal;  
+    z-index: 200; /* to obscure em/strong labels when necessary */
     color: #686; 
-    font-style: italic; 
-    font-weight: normal;  
-    margin-left: -30px; /* to counteract block-level elements' 30px padding */ 
-}
-
-li:before   {margin-left: 0;}
-
-
-/* the row/column command and style markers */ 
-
-p.secommand {
-    font-weight: bold;
-    margin: 0; padding: 0;
-    z-index: -100;  /* for some reason, sending this backwards makes it easier to hit in Firefox */
-}
-
-/* each one is successively indented further by 50px */
-
-p.secommand:after   {color: #67a;} /* commands are not semantic, so a different color */
-p.secommand:before, p.secommand:after  {
-    margin-left: 0; 
-    z-index: 100; /* bring it forward to make the p easier to hit in Firefox */
-    }
-p.secommand.secommand-newcol:before, p.secommand.secommand-newcol:after     {margin-left: 50px;}
-p.secommand.secommand-innerrow:before, p.secommand.secommand-innerrow:after    {margin-left: 100px;} 
-p.secommand.secommand-innercol:before, p.secommand.secommand-innercol:after    {margin-left: 150px;} 
-
-/* and they get lighter as we proceed */
-
-p.secommand.secommand-newrow    {
-    border-top: 1px solid #aaa; 
-    background: #ddd;
+    background: #fbfbfb;
     }
 
-p.secommand.secommand-newcol    {
-    border-top: 1px solid #bbb; 
-    background: #e8e8e8;
-    }
-    
-p.secommand.secommand-innerrow   {
-    border-top: 1px solid #ccc; 
-    background: #eee;
+p.secommand:before  {
+    background: none;
     }
 
-p.secommand.secommand-innercol    {
-    border-top: 1px solid #ddd; 
-    background: #f8f8f8;
-    }
-
-/* plugins */
+/* Plugins */
 
 img { border-radius: 5px;}
 
-/* angry warnings */
+/* Warnings */
+
+/* warn the user that empahsis *and* strong emphasis doesn't make sense */
+
+em strong,
+strong em {
+    color: #ec2; 
+    }
+
+em strong:after, 
+strong em:after {
+    background: #fbfbfb;
+    content: "emphasis\0000a0\000026\0000a0strong\0000a0emphasis\0000a0(silly)";
+    z-index: -100; } /* to hide emphasis/strong emphasis element markers */
+
+/* content problems */
 
 a   {text-decoration: none;}
-a:before {content: "Warning - illegal content will be deleted: "; text-decoration: none; color: #ec2; font-weight: bold;}
+a:before {
+    content: "Warning - illegal content will be deleted: "; 
+    text-decoration: none; 
+    color: #ec2; 
+    font-weight: bold;
+    }
 a:after {position: fixed; top: 1em; right: 1em; content: "Warning: this plugin contains illegal content"; text-decoration: none; background: #ec2; color: white; border-radius: 5px; font-weight: bold; padding: 1px;}
 
 img[id][alt] {border: none;} /* good, decent welcome plugin images have no ugly warning borders */
 
 /* things to do */
 
-blockquote	{font-weight: light; color: #666;} /* not actually used yet, but we should */
+blockquote  {font-weight: light; color: #666;} /* not actually used yet, but we should */
 
 /* tables */
 
     font-weight: normal; }
 
 
-/* fixes for browser bugs and quirks */
+/*  fixes for browser bugs and quirks */
+
+/*  make commands easier to select in Firefox */ 
+p.secommand {
+    z-index: -100; 
+    }
 
 /* Gecko min height fix */
-  p             { min-height: 1em; } /*min-height is needed under Firefox, because empty parargraphs */
+  p             { min-hei ght: 1em; } /*min-height is needed under Firefox, because empty parargraphs */
   *+html p      { min-height: auto; } /* but we have to remove it under IE7 because it triggers the 'haslayout' mode */
   td            { height: 1.6em; }
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.