bin/upgrading/s2layers/skittlishdreams/layout.s2
author fu
Fri Jan 27 19:04:17 2012 +0800
changeset 4241 37aa8a1ac7c8
parent 4240 5bab31c9f015
child 4294 012fdeb244c1
permissions -rw-r--r--
http://bugs.dwscoalition.org/show_bug.cgi?id=4296

Tweak for alignment, and make the tags and icons content area match more closely to the entries

Patch by fu.
     1 layerinfo "type" = "layout";
     2 layerinfo "name" = "Skittlish Dreams";
     3 layerinfo "des" = "A Dreamwidth port of Skittlish. Candy-coloured theme which comes in several flavors";
     4 layerinfo "redist_uniq" = "skittlishdreams/layout";
     5 layerinfo "author_name" = "Kaigou";
     6 layerinfo "lang" = "en";
     7 
     8 set layout_authors = [ { "name" => "Kaigou" } ];
     9 set layout_resources = [ { "name" => "Circular Icons", "url" => "http://prothemedesign.com/circular-icons/" } ];
    10 
    11 set entry_management_links = "text";
    12 set comment_management_links = "text";
    13 set all_commentsubjects = true;
    14 
    15 set text_entry_prev = "Previous";
    16 set text_entry_next = "Next";
    17 set text_mem_add = "Memory";
    18 set text_watch_comments = "Track";
    19 set text_unwatch_comments = "Untrack";
    20 set text_tell_friend = "Share";
    21 set text_post_comment = "Reply";
    22 set text_post_comment_friends = "Reply";
    23 
    24 propgroup presentation {
    25     property use num_items_recent;
    26     property use num_items_reading;
    27     property use use_journalstyle_entry_page;
    28     property use layout_type;
    29     property use tags_page_type;
    30     property use sidebar_width;
    31     property use margins_size;
    32     property use margins_unit;
    33     property use userpics_style_group;
    34     property string entryicons_position {
    35        des = "Place icons on the same side or opposite the sidebar";
    36        values = "none|None (don't show)|same|Same side as sidebar|opposite|Opposite the sidebar";
    37     }
    38     property use entry_metadata_position;
    39     property use use_custom_friend_colors;
    40     property use use_shared_pic;
    41     property use userlite_interaction_links;
    42     property use entry_management_links;
    43     property use comment_management_links;
    44     property use reg_firstdayofweek;
    45     property use entry_datetime_format_group;
    46     property use comment_datetime_format_group;
    47     property bool use_action_links_images {
    48         des = "Theme has images for the entry/comment links";
    49         noui = 1;
    50     }
    51 }
    52 
    53 set layout_type = "two-columns-right";
    54 set sidebar_width = "300px";
    55 set tags_page_type = "";
    56 set entryicons_position = "same";
    57 set custom_colors_template = "%%new%% .userpic a {background-color: %%background%%; border: solid 1px %%foreground%%;}";
    58 set use_action_links_images = true;
    59 
    60 propgroup colors {
    61     property use color_page_background;
    62     property use color_page_text;
    63     property use color_page_link;
    64     property use color_page_link_hover;
    65     property use color_page_link_visited;
    66     property Color color_page_border { des = "Main border color for the page, and various elements"; }
    67     property use color_page_title;
    68     property use color_page_details_text;
    69 
    70 
    71     property use color_header_background;
    72     property use color_footer_background;
    73     property Color color_footer_link {
    74         des = "Header/footer link and text color";
    75     }
    76     property Color color_footer_link_hover {
    77         des = "Header/footer link hover color";
    78     }
    79 
    80     property use color_module_background;
    81     property use color_module_text;
    82     property use color_module_link;
    83     property use color_module_title;
    84 
    85     property use color_entry_background;
    86     property use color_entry_text;
    87 
    88     property use color_entry_title;
    89     property use color_entry_title_background;
    90     property Color color_entry_title_border { des = "Entry title border color"; }
    91     property Color color_entry_title_border_alt { des = "Alternate entry title border color"; }
    92 
    93     property Color color_entry_metadata_text {des = "Entry metadata color";}
    94 }
    95 
    96 propgroup images {
    97     property use image_background_page_group;
    98     property use image_background_header_group;
    99     property use image_background_header_height;
   100     property use image_background_module_group;
   101     property use image_background_entry_group;
   102 
   103     property string[] image_background_container_group {
   104         des = "Main body image";
   105         grouptype = "image";
   106     }
   107     set image_background_container_group = [ "image_background_container_url", "image_background_container_repeat", "image_background_container_position" ];
   108     property string image_background_container_url {
   109         grouped = 1;
   110     }
   111     property string image_background_container_repeat {
   112         values = "repeat|tile image|no-repeat|don't tile|repeat-x|tile horizontally|repeat-y|tile vertically";
   113         grouped = 1;
   114     }
   115     property string image_background_container_position {
   116         values = "top left|top left|top center|top center|top right|top right|center left|center left|center center|center|center right|center right|bottom left|bottom left|bottom center|bottom center|bottom right|bottom right";
   117         grouped = 1;
   118         allow_other = 1;
   119     }
   120     
   121     
   122     property string[] image_background_footer_group {
   123         des = "Footer image";
   124         grouptype = "image";
   125     }
   126     set image_background_footer_group = [ "image_background_footer_url", "image_background_footer_repeat", "image_background_footer_position" ];
   127     property string image_background_footer_url {
   128         grouped = 1;
   129     }
   130     property string image_background_footer_repeat {
   131         values = "repeat|tile image|no-repeat|don't tile|repeat-x|tile horizontally|repeat-y|tile vertically";
   132         grouped = 1;
   133     }
   134     property string image_background_footer_position {
   135         values = "top left|top left|top center|top center|top right|top right|center left|center left|center center|center|center right|center right|bottom left|bottom left|bottom center|bottom center|bottom right|bottom right";
   136         grouped = 1;
   137         allow_other = 1;
   138     }
   139     
   140     property string[] image_background_navigation_group {
   141         des = "Navigation image";
   142         grouptype = "image";
   143     }
   144     set image_background_navigation_group = [ "image_background_navigation_url", "image_background_navigation_repeat", "image_background_navigation_position" ];
   145     property string image_background_navigation_url {
   146         grouped = 1;
   147     }
   148     property string image_background_navigation_repeat {
   149         values = "repeat|tile image|no-repeat|don't tile|repeat-x|tile horizontally|repeat-y|tile vertically";
   150         grouped = 1;
   151     }
   152     property string image_background_navigation_position {
   153         values = "top left|top left|top center|top center|top right|top right|center left|center left|center center|center|center right|center right|bottom left|bottom left|bottom center|bottom center|bottom right|bottom right";
   154         grouped = 1;
   155         allow_other = 1;
   156     }
   157 }
   158 
   159 set image_background_navigation_repeat = "no-repeat";
   160 set image_background_navigation_position = "top right";
   161 set image_background_entry_repeat = "repeat-y";
   162 set image_background_entry_position = "top right";
   163 set image_background_module_repeat = "no-repeat";
   164 set image_background_module_position = "top left";
   165 set image_background_footer_repeat = "repeat-x";
   166 set image_background_footer_position = "top left";
   167 set image_background_container_repeat = "repeat-y";
   168 set image_background_container_position = "top right";
   169 set image_background_header_repeat = "repeat-x";
   170 set image_background_header_position = "top left";
   171 set image_background_header_height = 100;
   172 set image_background_page_repeat = "repeat-x";
   173 set image_background_page_position = "top left";
   174 
   175 propgroup fonts {
   176     property use font_base;
   177     property use font_fallback;
   178     property use font_base_size;
   179     property use font_base_units;
   180     property use font_journal_title;
   181     property use font_journal_title_size;
   182     property use font_journal_title_units;
   183     property use font_entry_title;
   184     property use font_entry_title_size;
   185     property use font_entry_title_units;
   186     property use font_comment_title;
   187     property use font_comment_title_size;
   188     property use font_comment_title_units;
   189     property use font_module_heading_size;
   190     property use font_module_heading;
   191     property use font_module_heading_units;
   192     property use font_module_text;
   193     property use font_module_text_size;
   194     property use font_module_text_units;
   195 }
   196 
   197 set font_base = "Tahoma, Verdana, Arial";
   198 set font_fallback = "sans-serif";
   199 set font_base_size = "1";
   200 set font_base_units = "em";
   201 set font_journal_title_size = "2";
   202 set font_journal_title_units = "em";
   203 set font_module_heading_size = "1.1";
   204 set font_module_heading_units = "em";
   205 
   206 set module_layout_sections = "none|(none)|two|Sidebar";
   207 
   208 propgroup modules {
   209     property use module_userprofile_group;
   210     property use module_navlinks_group;
   211     property use module_calendar_group;
   212     property use module_pagesummary_group;
   213     property use module_tags_group;
   214     property use module_active_group;
   215     property use module_links_group;
   216     property use module_syndicate_group;
   217     property use module_time_group;
   218     property use module_poweredby_group;
   219     property use module_customtext_group;
   220     property use module_credit_group;
   221     property use module_search_group;
   222     property use module_cuttagcontrols_group;
   223 
   224     property string module_navlinks_section_override {
   225        values = "none|(none)|one|Header|two|Sidebar";
   226        grouped = 1;
   227        }
   228 
   229     property string module_poweredby_section_override {
   230        values = "none|(none)|two|Sidebar|three|Footer";
   231        grouped = 1;
   232        }
   233 
   234     property string module_time_section_override {
   235        values = "none|(none)|two|Sidebar|three|Footer";
   236        grouped = 1;
   237        }
   238 }
   239 
   240 set module_userprofile_section = "two";
   241 set module_pagesummary_section = "two";
   242 set module_tags_section = "two";
   243 set module_active_section = "two";
   244 set module_links_section = "two";
   245 set module_syndicate_section = "two";
   246 set module_calendar_section = "two";
   247 set module_customtext_section = "two";
   248 set module_credit_section = "two";
   249 set module_search_section = "two";
   250 set module_cuttagcontrols_section = "two";
   251 
   252 set grouped_property_override = { "module_navlinks_section" => "module_navlinks_section_override",
   253                                 "module_poweredby_section" => "module_poweredby_section_override",
   254                                 "module_time_section" => "module_time_section_override", 
   255                                 };
   256 
   257 set module_navlinks_section = "one";
   258 set module_poweredby_section = "three";
   259 set module_time_section = "none";
   260 
   261 propgroup text {
   262     property use text_view_recent;
   263     property use text_view_friends;
   264     property use text_view_network;
   265     property use text_view_friends_comm;
   266     property use text_view_friends_filter;
   267     property use text_view_archive;
   268     property use text_view_userinfo;
   269     property use text_view_memories;
   270     property use text_view_tags;
   271 
   272     property use text_post_comment;
   273     property use text_max_comments;
   274     property use text_read_comments;
   275     property use text_post_comment_friends;
   276     property use text_read_comments_friends;
   277 
   278     property use text_skiplinks_back;
   279     property use text_skiplinks_forward;
   280     property use text_meta_music; 
   281     property use text_meta_mood; 
   282     property use text_meta_location; 
   283     property use text_meta_xpost;
   284     property use text_tags; 
   285 
   286     property use text_entry_prev;
   287     property use text_entry_next; 
   288     property use text_edit_entry; 
   289     property use text_edit_tags; 
   290     property use text_tell_friend; 
   291     property use text_mem_add; 
   292     property use text_watch_comments; 
   293     property use text_unwatch_comments; 
   294     property use text_permalink; 
   295     property use text_stickyentry_subject;
   296 
   297     property use text_module_customtext;
   298     property use text_module_customtext_content;
   299     property use text_module_customtext_url;
   300 }
   301 
   302 propgroup customcss {
   303     property use external_stylesheet;
   304     property use include_default_stylesheet;
   305     property use linked_stylesheet;
   306     property use custom_css;
   307 }
   308 
   309 function prop_init() {
   310     if ( $*entryicons_position == "none" ) {
   311         $*userpics_position = "none";
   312     }
   313 }
   314 
   315 function Page::print()
   316 {
   317     """
   318     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   319     <html xmlns="http://www.w3.org/1999/xhtml">
   320     <head>""";
   321         $this->print_head();
   322         $this->print_stylesheets();
   323         $this->print_head_title();    
   324     println "</head>";
   325     $this->print_wrapper_start();
   326     $this->print_control_strip();
   327     """
   328             <div id="container">
   329             <div id="header">
   330     """;
   331     """
   332                 <a name="top">
   333     """;
   334     $this->print_global_title();
   335     """
   336                 </a>
   337             </div>
   338     """;
   339     $this->print_module_section("one");
   340     """
   341             <div id="wrap">
   342             <div id="content">
   343     """;
   344     $this->print_body();
   345     """
   346             </div>
   347     """;
   348     $this->print_module_section("two"); 
   349     """
   350             </div><div style="clear:both;"></div>
   351         </div>
   352         <div id="footer"><div class="inner">
   353     """;
   354 
   355     $this->print_module_section("three");
   356     print safe """<div class="page-top"><a href="#">$*text_page_top</a></div>""";
   357     """
   358         </div></div>
   359     """;
   360     $this->print_wrapper_end();
   361     """
   362     </html>
   363     """;
   364 }
   365 
   366 # so that the decorative background image will show up
   367 function TagsPage::print_navigation( string{} opts )  {
   368     """
   369     <div class="navigation $opts{"class"}">
   370         <div class="inner">
   371         </div><!-- navigation>inner -->
   372     </div><!-- navigation -->
   373     """;
   374 }
   375 
   376 function TagsPage::print_body
   377 {
   378     $this->print_navigation( { "class" => "topnav" } );
   379     print safe "<div class='tags-container'><h2>$*text_tags_page_header</h2>";
   380 
   381     if ($*tags_page_type == "multi") {
   382         print_multilevel_tags($.tags, { "list-class" => "ljtaglist tags_multilevel", "print_uses" => $*tags_page_count_type });
   383         print_tag_manage_link();
   384     }
   385     elseif ($*tags_page_type == "cloud") {
   386         print_cloud_tags($.tags, { "list-class" => "ljtaglist tags_cloud", "print_uses" => $*tags_page_count_type });
   387         print_tag_manage_link();
   388     }
   389     else {
   390         print_list_tags($.tags, { "list-class" => "ljtaglist tags_list", "print_uses" => $*tags_page_count_type });
   391         print_tag_manage_link();
   392     }
   393     
   394     print safe "</div>";
   395     $this->print_navigation( { "class" => "bottomnav" } );
   396 }
   397 
   398 # so that the decorative background image will show up
   399 function IconsPage::print_navigation( string{} opts ) {
   400     """
   401     <div class="navigation $opts{"class"}">
   402         <div class="inner">
   403         </div><!-- navigation>inner -->
   404     </div><!-- navigation -->
   405     """;
   406 }
   407 
   408 function IconsPage::print_body {
   409     $this->print_navigation( { "class" => "topnav" } );
   410     """<div class='icons-container'>\n<div class="inner">\n""";
   411     """<div class="header">\n<div class="inner">\n""";
   412     print safe "<h2>$*text_icons_page_header</h2>";
   413     "</div>\n</div>\n";
   414     """<div class="contents">\n<div class="inner">\n""";
   415     """<div class="sorting-options">\n<ul>\n""";
   416     var int sort_ct = 0;
   417     foreach var string k ($.sort_keyseq) {
   418         var string text = lang_icon_sortorder_title($k);
   419         if ( $k == $.sortorder ) {
   420             print safe """<li class='$k active'>$text""";
   421         } else {
   422             print safe """<li class='$k'><a href='$.sort_urls{$k}'>$text</a>""";
   423         }
   424         if ( (++$sort_ct) < size $.sort_keyseq) { print $*text_default_separator; }
   425         "</li>\n";
   426     }
   427     "</ul>\n</div>\n";
   428     $.pages->print({ "class" => "icon-pages toppages" });
   429     foreach var Icon i ($.icons) {
   430         $i->print();
   431     }
   432     $.pages->print({ "class" => "icon-pages bottompages" });
   433     "</div>\n</div>\n";
   434     """<div class="footer">\n<div class="inner">\n""";
   435     $this->print_icon_manage_link();
   436     "</div>\n</div>\n";
   437     "</div>\n</div>\n";
   438     $this->print_navigation( { "class" => "bottomnav" } );
   439 }
   440 
   441 function generate_background_css_flipped (
   442     string background_image, 
   443     string background_image_repeat, 
   444     string background_image_position,
   445     Color background_color
   446 ) : string 
   447 "Same as generate_background_css, but uses a flipped version of the image."
   448 {
   449     var string background_css = generate_background_css( $background_image, $background_image_repeat,
   450         $background_image_position, $background_color );
   451     return $background_css->replace( ".gif", "-REDUX.gif" );
   452 }
   453 
   454 function Page::print_default_stylesheet () {
   455 
   456     var string[] path_components = $*image_background_entry_url->split("/");
   457     var string image_base = $path_components[size($path_components)-1];
   458     var string theme_base_color =  $image_base->substr(0, $image_base->index("_"));
   459 
   460     var string page_font = generate_font_css("", $*font_base, $*font_fallback, $*font_base_size, $*font_base_units );
   461     var string journal_title_font = generate_font_css($*font_journal_title, $*font_base, $*font_fallback, $*font_journal_title_size, $*font_journal_title_units);
   462     var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units);
   463     var string comment_title_font = generate_font_css($*font_comment_title, $*font_base, $*font_fallback, $*font_comment_title_size, $*font_comment_title_units);
   464     var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units);
   465     var string module_font = generate_font_css($*font_module_text, $*font_base, $*font_fallback, $*font_module_text_size, $*font_module_text_units);
   466 
   467     var string page_background = generate_background_css( $*image_background_page_url, $*image_background_page_repeat, $*image_background_page_position, $*color_page_background );
   468 
   469     var string header_background = generate_background_css( $*image_background_header_url, $*image_background_header_repeat, $*image_background_header_position, $*color_header_background );
   470 
   471     if ($*image_background_header_height > 0) {
   472         $header_background = """
   473             $header_background
   474             height: """ + $*image_background_header_height + """px;""";
   475     }
   476 
   477     var string container_background = generate_background_css( $*image_background_container_url, $*image_background_container_repeat, "right", $*color_footer_background );
   478     var string container_background_redux = generate_background_css_flipped( $*image_background_container_url, $*image_background_container_repeat, "left", $*color_footer_background );
   479 
   480     var string footer_background = generate_background_css( $*image_background_footer_url, $*image_background_footer_repeat, $*image_background_footer_position, $*color_footer_background );
   481     if ($*image_background_header_height > 0) {
   482         $footer_background = """
   483             $footer_background
   484             height: """ + $*image_background_header_height + """px;""";
   485     }
   486 
   487 
   488     var string page_link_colors = generate_color_css($*color_page_link, new Color, new Color);
   489     var string page_link_hover_colors = generate_color_css($*color_page_link_hover, new Color, new Color);
   490     var string page_link_visited_colors = generate_color_css($*color_page_link_visited, new Color, new Color);
   491 
   492     var string container_colors = generate_color_css( $*color_page_text, $*color_module_background, new Color );
   493     var string content_colors = generate_color_css( new Color, $*color_page_border, new Color );
   494 
   495     var string page_text_colors = generate_color_css($*color_page_text, new Color, new Color);
   496     var string page_details_text_colors = generate_color_css($*color_page_details_text, new Color, new Color );
   497     var string page_title_colors = generate_color_css($*color_page_title, new Color, new Color);
   498     var string header_colors = generate_color_css($*color_page_title, $*color_header_background, new Color);
   499     var string header_footer_colors = generate_color_css($*color_footer_link, new Color, new Color);
   500     var string header_footer_hover_colors = generate_color_css($*color_footer_link_hover, $*color_footer_background, new Color);
   501     var Color header_bottom_color = $*color_header_background->darker();
   502 
   503     var string module_colors = generate_color_css( new Color, $*color_module_background, new Color );
   504     var string module_box_background = generate_background_css( $*image_background_module_url, $*image_background_module_repeat, $*image_background_module_position, new Color );
   505     var string module_box_colors = generate_color_css( $*color_module_text, new Color, new Color );
   506     var string module_link_colors = generate_color_css( $*color_module_link, new Color, new Color );
   507     var string module_title_colors = generate_color_css( $*color_module_title, new Color, new Color );
   508 
   509 
   510     var string entry_background = generate_background_css( $*image_background_entry_url, $*image_background_entry_repeat, "right", $*color_entry_background );
   511     var string entry_background_redux = generate_background_css_flipped( $*image_background_entry_url, $*image_background_entry_repeat, "left", $*color_entry_background );
   512 
   513     var string entry_colors = generate_color_css( $*color_entry_text, $*color_entry_background, new Color );
   514     var string entry_title_colors = generate_color_css($*color_entry_title, $*color_entry_title_background, new Color);
   515     var string blockquote_colors = generate_color_css(new Color,$*color_entry_background->darker(), new Color);
   516     var string entry_metadata_color = generate_color_css($*color_entry_metadata_text, new Color, new Color);
   517     
   518     var string navigation_background = generate_background_css($*image_background_navigation_url, $*image_background_navigation_repeat, "right top", $*color_entry_background);
   519     var string navigation_background_redux = generate_background_css_flipped($*image_background_navigation_url, $*image_background_navigation_repeat, "left top", $*color_entry_background);
   520 
   521     var string navigation_colors = generate_color_css($*color_page_details_text, $*color_entry_background, new Color);
   522 
   523 
   524     var string entry_userpic_shift = "";
   525     if ( $*entry_userpic_style == "" ) { $entry_userpic_shift = "-66px"; }
   526     elseif ( $*entry_userpic_style == "small" ) { $entry_userpic_shift = "-50px"; }
   527     elseif ( $*entry_userpic_style == "smaller" ) { $entry_userpic_shift = "-33px"; }
   528 
   529     var string comment_userpic_shift = "";
   530     if ( $*comment_userpic_style == "" ) { $comment_userpic_shift = "-66px"; }
   531     elseif ( $*comment_userpic_style == "small" ) { $comment_userpic_shift = "-50px"; }
   532     elseif ( $*comment_userpic_style == "smaller" ) { $comment_userpic_shift = "-33px"; }
   533 
   534 
   535     var string entry_title_margin = "";
   536     if ( $*entry_userpic_style == "" ) { $entry_title_margin = "120px"; }
   537     elseif ( $*entry_userpic_style == "small" ) { $entry_title_margin = "95px"; }
   538     elseif ( $*entry_userpic_style == "smaller" ) { $entry_title_margin = "70px"; }
   539 
   540     var string comment_title_margin = "";
   541     if ( $*comment_userpic_style == "" ) { $comment_title_margin = "120px"; }
   542     elseif ( $*comment_userpic_style == "small" ) { $comment_title_margin = "95px"; }
   543     elseif ( $*comment_userpic_style == "smaller" ) { $comment_title_margin = "70px"; }
   544 
   545     var string entryicon_css = "";
   546         if ($*entryicons_position == "same") {
   547             $entryicon_css = """
   548             .two-columns-right .has-userpic .entry .header { margin-right: $entry_title_margin; }
   549             .two-columns-right .has-userpic .comment .header { margin-right: $comment_title_margin; }
   550 
   551             .two-columns-left .has-userpic .entry .header { margin-left: $entry_title_margin; }
   552             .two-columns-left .has-userpic .comment .header,
   553             .two-columns-left .has-userpic .comment .poster {
   554                 margin-left: $comment_title_margin;
   555                 }
   556 
   557             .two-columns-right .entry .userpic a, 
   558             .two-columns-right .comment .userpic a { right: 10px; left: auto; }
   559             .two-columns-left .entry .userpic a, 
   560             .two-columns-left .comment .userpic a { left: 10px; right: auto; }
   561             """;
   562         }
   563         elseif ($*entryicons_position == "opposite") {
   564             $entryicon_css = """
   565             .two-columns-right .has-userpic .entry .header { margin-left: $entry_title_margin; }
   566             .two-columns-right .has-userpic .comment .header,
   567             .two-columns-right .has-userpic .comment .poster {
   568                 margin-left: $comment_title_margin;
   569                 }
   570 
   571             .two-columns-left .has-userpic .entry .header { margin-right: $entry_title_margin; }
   572             .two-columns-left .has-userpic .comment .header { margin-right: $comment_title_margin; }
   573 
   574             .two-columns-right .entry .userpic a, 
   575             .two-columns-right .comment .userpic a { left: 10px; right: auto; }
   576             .two-columns-left .entry .userpic a, 
   577             .two-columns-left .comment .userpic a { right: 10px; left: auto; }
   578             """;
   579         }
   580 
   581     """
   582 /*
   583 Theme Name:    Skittlish Dreams, a DW port of Skittlish
   584 Description:   A candy coloured theme. Comes in 7 flavors (orange, blue, green, pink, cyan, red, violet).
   585 Version:1.0 Dreamwidth
   586 original designer: Damien Tanner
   587 mephisto (original): Cristi Balan
   588 wordpress port: A.M. Griffin
   589 pmwiki port: Dave G
   590 dw port: Kaigou H.
   591 all versions released under CCL
   592 
   593 changes for dreamwidth port: 
   594 --- rewrote css to fit dw classes
   595 --- reduced image load to three images
   596 --- removed js functionality for color-switching
   597 --- converted font-sizes to ems from px
   598 --- changed layout to flexible-width only
   599 */
   600 
   601 html {margin: 0px; padding: 0px; font-size: 100%; /* IE hack */}
   602 * {box-sizing:border-box; -moz-box-sizing:border-box}
   603 
   604 a, a:link, a:active { $page_link_colors text-decoration: none; }
   605 a:visited { $page_link_visited_colors  }
   606 a:hover {  $page_link_hover_colors text-decoration: underline; }
   607 
   608 q { font-style: italic; }
   609 
   610 body { $page_background $page_font margin: 0; padding: 0; }
   611 
   612 html body {
   613     margin-left: $*margins_size$*margins_unit;
   614     margin-right: $*margins_size$*margins_unit;
   615     }
   616 
   617 .two-columns-right #container { $container_background }
   618 .two-columns-left #container { $container_background_redux }
   619 .two-columns-right #container, .two-columns-left #container { $container_colors margin: 0 4%; }
   620 
   621 #header { $header_background $header_footer_colors  padding: 0; }
   622 .two-columns-right #header { margin: 0 5px 0 0; }
   623 .two-columns-left #header { margin: 0 0 0 5px; text-align: right; }
   624 #footer {margin: 0 4%; padding: 0; background:transparent;}
   625 .two-columns-right #footer { $container_background }
   626 .two-columns-left #footer { $container_background_redux }
   627 #header a, #footer a { $header_footer_colors text-decoration: none; }
   628 
   629 h1, h2, h3, h4 {font-weight: 700; font-variant: normal; letter-spacing: 0.08em; }
   630 #header h1 {margin: 0; padding: 20px  20px  0  2em; $journal_title_font font-weight: lighter; font-variant: normal; text-transform: lowercase; letter-spacing: 0.2em; }
   631 #header h2 {padding: 0 2em; $page_title_colors }
   632 
   633 #wrap { $page_text_colors }
   634 .two-columns-right #wrap {padding-right: $*sidebar_width; padding-top: 20px; padding-left:  20px;}
   635 .two-columns-left #wrap  {padding-left: $*sidebar_width; padding-top: 20px; padding-right: 20px;}
   636 #content {position: relative; width: 100%; padding-bottom: 20px; $content_colors}
   637 .two-columns-right #content {margin: 0 -5px 0 0; float: left;}
   638 .two-columns-left #content {margin: 0 0 0 -5px; float: right;}
   639 
   640 .tags-container,
   641 .icons-container {
   642     background-color: $*color_entry_background;
   643     color: $*color_entry_text;
   644     padding: 10px 10px 10px 30px;
   645     }
   646 
   647 .tags-container a,
   648 .icons-container a {
   649     color: $*color_entry_link;
   650     }
   651 
   652 .tags-container a:visited,
   653 .icons-container a:visited {
   654     color: $*color_entry_link_visited;
   655     }
   656 
   657 .tags-container a:hover,
   658 .icons-container a:hover {
   659     color: $*color_entry_link_hover;
   660     }
   661 
   662 .tags-container a:active,
   663 .icons-container a:active {
   664     color: $*color_entry_link_active;
   665     }
   666 
   667 .module-section-one .inner {border-bottom:2px solid $header_bottom_color;}
   668 .two-columns-right .module-section-one .inner {text-align: right;}
   669 .two-columns-left .module-section-one .inner {text-align: left;}
   670 .two-columns-right .module-section-one {margin-right:5px;}
   671 .two-columns-left .module-section-one {margin-left:5px;}
   672 
   673 .module-section-two { $module_colors position: relative; width: $*sidebar_width;}
   674 .two-columns-right .module-section-two {float: left; margin-right: -$*sidebar_width; /* <--- IMPORTANT */}
   675 .two-columns-left .module-section-two {float: right; margin-left: -$*sidebar_width; /* <--- IMPORTANT */}
   676 .module-section-two .module { $module_box_background $module_box_colors margin: 20px; padding: 10px; }
   677 .two-columns-right .module-section-two .module {margin-left: 10px;}
   678 .two-columns-left .module-section-two .module {margin-right: 10px;}
   679 
   680 .module-section-one ul {
   681     $header_colors
   682     margin: 0;
   683     padding: 0 20px;
   684     }
   685 
   686 .module-section-one li {
   687     display: inline;
   688     line-height: 2.2em;
   689     list-style: none;
   690     }
   691 
   692 .module-section-one li a {text-decoration: none; padding-top: 0.5em; padding-right: 20px; padding-bottom: 0.5em; padding-left: 20px; $header_colors }
   693 .module-section-one ul li a:hover, .module-section-one ul li a.current { $header_footer_hover_colors }
   694 .module-section-two a { $module_link_colors }
   695 .module-section-two .module-header a {text-decoration: none; }
   696 .module-section-two h2 {margin: 0; margin-bottom: 7px; padding: 0.2em; $module_title_colors }
   697 .module-section-two ul {list-style-type: none; margin-left: 0.5em; padding: 0; }
   698 .module-section-two ul ul {list-style-type: none; margin-left: 0.5em; padding: 0.5em; }
   699 .module-userprofile .userpic img {border: none; margin: 20px; }
   700 .module-userprofile .userpic {text-align: center; }
   701 .module-userprofile ul {margin: 0px; padding: 0px; text-align: center; margin-top: 5px; }
   702 .module-userprofile p {margin-top: 0px; margin-bottom: 0px; }
   703 .module-userprofile li {display: inline; padding: 5px; list-style: none; }
   704 .module-calendar .module-content {text-align: center; }
   705 .module-calendar table {margin-left: auto; margin-right: auto; }
   706 
   707 .module h2 {
   708     $module_title_font
   709 }
   710 
   711 .module-content {
   712     $module_font
   713 }
   714 
   715 .two-columns-right #entries, 
   716 .two-columns-right.page-entry .entry-wrapper, 
   717 .two-columns-right.page-entry #comments, 
   718 .two-columns-right.page-archive .year, 
   719 .two-columns-right #archive-month {padding-right:22px; margin:-20px 5px -20px -20px; padding-left:5px; border-left: solid 1px $*color_page_border; $entry_background }
   720 .two-columns-left #entries, 
   721 .two-columns-left.page-entry .entry-wrapper, 
   722 .two-columns-left.page-entry #comments, 
   723 .two-columns-left.page-archive .year, 
   724 .two-columns-left #archive-month {padding-left:22px; margin:-20px -20px -20px 5px; padding-right:5px; border-right: solid 1px $*color_page_border; $entry_background_redux }
   725 
   726 .two-columns-right .tags-container,
   727 .two-columns-right .icons-container { margin: 20px 5px -20px -20px; border-left: solid 1px $*color_page_border; $entry_background }
   728 .two-columns-left .tags-container,
   729 .two-columns-left .icons-container { margin: 20px -20px -20px 5px; border-right: solid 1px $*color_page_border; $entry_background_redux }
   730 
   731 .page-entry .entry-wrapper {margin-top:0;}
   732 
   733 .two-columns-right.page-reply #content, .two-columns-right.page-reply #postform { $navigation_background }
   734 .two-columns-right.page-reply #postform { background-position: right bottom; }
   735 .two-columns-left.page-reply #content, .two-columns-left.page-reply #postform { $navigation_background_redux } .two-columns-left.page-reply #postform { background-position: left bottom; }
   736 .page-reply .entry { border-bottom: solid 2px $*color_page_border}
   737 
   738 .entry, .comment, .text_noentries_day {padding: 10px; margin-top: 76px; position: relative; margin-bottom: 10px; border-top: solid 2px $*color_page_border; $entry_colors}
   739 .entry, .comment, .text_noentries_day, .page-reply .talkform  {margin-left:2em;}
   740 
   741 .page-entry .entry, .page-entry .comment, .page-entry .text_noentries_day {border:0px;}
   742 .page-entry #comments {padding-top:20px;}
   743 
   744 .comment-title {
   745     $comment_title_font
   746     }
   747 
   748 .comment-title h4 {
   749     font-size: inherit;
   750     font-weight: inherit;
   751     margin: 0;
   752     padding: 0;
   753 }
   754 
   755 .entry-title, .comment-title {
   756     border: solid 1px $*color_entry_title_border;
   757     margin: 0 0 .5em;
   758     padding: .2em;
   759     $entry_title_colors
   760     }
   761 
   762 .entry .entry-title {
   763     $entry_title_font
   764 }
   765 
   766 .entry-wrapper-even .entry-title, .comment-wrapper-even .comment-title {border: solid 1px $*color_entry_title_border_alt; $entry_title_colors }
   767 
   768 .userpic a {background-color: $*color_page_border; border: 0px; }
   769 .entry .userpic a, .comment .userpic a {background-color: $*color_entry_background; border: solid 2px $*color_page_border; display: block; position: absolute; padding: 5px; }
   770 
   771 .entry .userpic a {
   772     top: $entry_userpic_shift;
   773     }
   774 
   775 .comment .userpic a {
   776     top: $comment_userpic_shift;
   777     }
   778 
   779 .entry .userpic img, .comment .userpic img {border: none; }
   780 .no-userpic .comment {margin-top: 20px; }
   781 .no-userpic .comment-title {margin: 0px; }
   782 
   783 .entry .time, .entry .date {padding: 0.2em; display: inline-block; }
   784 .entry-content, .comment-content {padding: 10px 0px; }
   785 
   786 p {margin-top: .5em; margin-bottom: 0.5em; }
   787 blockquote {margin: 1em; padding: 1em; $blockquote_colors }
   788 
   789 .tag {font-weight: bold; text-align: left; }
   790 .tag a {font-weight: normal; }
   791 .tag ul {display: inline; margin: 0; padding: 0; }
   792 .tag li {display: inline; list-style: none; padding: 0px; }
   793 *+html .tag li {padding: 0 5px; }
   794 
   795 .entry .metadata.top-metadata { padding-top: 10px; }
   796 .entry .metadata ul {margin: 0px; padding: 0px; }
   797 .entry .metadata li {list-style: none; }
   798 .entry .footer .inner, .comment .footer .inner {text-align: right; }
   799 .entry .footer a {white-space: nowrap; }
   800 
   801 .entry-management-links, .entry-interaction-links, .comment-management-links, .comment-interaction-links {text-align: right; margin: 0; padding: 0; display: inline; }
   802 .entry-management-links li, .entry-interaction-links li,  .comment-management-links li, .comment-interaction-links li {display: inline; list-style: none; margin: 0; padding: 5px; }
   803 .comment-management-links li.unscreen_comment a, .comment-management-links li.screen_comment a, .comment-management-links li.freeze_thread a { padding-left: 0; }""";
   804 
   805 if ( $*use_action_links_images ) {
   806 """.entry-management-links li a, .comment-management-links li a, .comment-interaction-links .thread a {background-repeat: no-repeat; background-position: 0% 50%; padding-left: 18px; }
   807 
   808 .entry-management-links .edit_entry a, .comment-management-links .delete_comment a, .comment-management-links .edit_comment a {background-image: url($*STATDIR/skittlishdreams/${theme_base_color}_edit.png); }
   809 .entry-management-links .edit_tags a, .comment-interaction-links .parent a {background-image: url($*STATDIR/skittlishdreams/${theme_base_color}_tag.png); }
   810 .entry-management-links .mem_add a {background-image: url($*STATDIR/skittlishdreams/${theme_base_color}_add.png); }
   811 .entry-management-links .watch_comments a, .comment-management-links .watch_thread a {background-image: url($*STATDIR/skittlishdreams/${theme_base_color}_track.png); }
   812 .entry-management-links .link_prev a {background-image: url($*STATDIR/skittlishdreams/${theme_base_color}_arrow_left.png); }
   813 .entry-management-links .link_next a {background-image: url($*STATDIR/skittlishdreams/${theme_base_color}_arrow_right.png); }
   814 .entry-management-links .tell_friend a {background-image: url($*STATDIR/skittlishdreams/${theme_base_color}_tell.png);}
   815 .entry-interaction-links .entry-readlink a, .entry-interaction-links .entry-permalink a { background-image: url($*STATDIR/skittlishdreams/${theme_base_color}_comments.png); }
   816 .entry-interaction-links li a, .comment-interaction-links li a { background-image: url($*STATDIR/skittlishdreams/${theme_base_color}_comment.png); background-repeat: no-repeat; background-position: 0% 50%; padding-left: 18px;  display: inline; }""";
   817 }
   818 
   819 """
   820 .entry .footer hr {display: none; }
   821 .entry .metadata-label {font-weight: bold; }
   822 .full .comment-poster {display: inline-block; min-width: 40%; }
   823 
   824 #content > hr {display: none; }
   825 
   826 .module-section-three a:hover { $header_footer_hover_colors }
   827 .module-section-three .module {padding-left: 20px; }
   828 
   829 #footer .inner {
   830     clear: both;
   831     $footer_background
   832     $header_footer_colors
   833     padding: .5em 1em;
   834     }
   835 
   836 .two-columns-right #footer .inner {
   837     margin-right: 5px;
   838     }
   839 
   840 .two-columns-left #footer .inner {
   841     margin-left: 5px;
   842     }
   843 
   844 #footer .inner .inner {
   845     background: none;
   846     height: auto;
   847     margin: 0;
   848     padding: 0;
   849     }
   850 
   851 #footer .page-top {
   852     text-align: right;
   853     }
   854 
   855 .module-tags_cloud li, .tags_cloud li { display: inline; list-style-type: none; }
   856 
   857 .hfeed .navigation, #archive-year .navigation,  #archive-month .navigation, #archive-day .navigation  {height:61px; margin-bottom:-20px; }
   858 .two-columns-right .hfeed .navigation, 
   859 .two-columns-right #archive-year .navigation,  
   860 .two-columns-right #archive-month .navigation,
   861 .two-columns-right #archive-day .navigation  {margin-right:-22px; $navigation_background }
   862 .two-columns-left .hfeed .navigation, 
   863 .two-columns-left #archive-year .navigation,  
   864 .two-columns-left #archive-month .navigation,
   865 .two-columns-left #archive-day .navigation  {margin-left:-22px; $navigation_background_redux}
   866 
   867 .page-tags .navigation,
   868 .page-icons .navigation {
   869     height: 61px;
   870     }
   871 
   872 .two-columns-right.page-tags .navigation,
   873 .two-columns-right.page-icons .navigation {
   874     margin: -20px 5px -20px -20px; border-left: solid 1px $*color_page_border; $navigation_background
   875     }
   876 
   877 .two-columns-left.page-tags .navigation,
   878 .two-columns-left.page-icons .navigation {
   879     margin: -20px -20px -20px 5px; border-right: solid 1px $*color_page_border; $navigation_background_redux
   880     }
   881 
   882 .two-columns-right .bottomcomment, .two-columns-right .comments-message { $navigation_background }
   883 .two-columns-left .bottomcomment, .two-columns-left .comments-message { $navigation_background_redux }
   884 #comments .bottomcomment, #comments .comments-message {min-height:6em;border-top:4px solid $*color_page_border;text-align:center; background-color: transparent;}
   885 .two-columns-right .bottomcomment, .two-columns-right .comments-message {margin:20px -22px 20px 0;padding-right:30px;}
   886 .two-columns-left .bottomcomment, .two-columns-left .comments-message  {margin:20px 0 20px -22px;padding-left:30px;}
   887 
   888 .navigation {margin: 0; padding: 0; text-align: center; $navigation_colors }
   889 .navigation ul {margin: 0; padding: 5px 0 0 0; text-align: center; }
   890 .navigation li {display: inline; padding: 0 5px; }
   891 .navigation .page-back a:before {content: "<--  "; font-size: 0.5em; line-height:2em; letter-spacing: 0.08em; /*vertical-align: 50%; */ padding-right: 1px; }
   892 .navigation .page-forward a:after {content: " -->"; font-size: 0.5em; line-height:2em; letter-spacing: 0.08em; /*vertical-align: 50%; */ padding-left: 1px; }
   893 #archive-year .navigation, #archive-month .navigation  {height:61px;text-align:center;}
   894 .two-columns-right #archive-year .navigation  {margin:-20px 5px -20px -20px; border-left: solid 1px $*color_page_border;}
   895 .two-columns-left #archive-year .navigation  {margin:-20px -20px -20px 5px;border-right: solid 1px $*color_page_border;}
   896 .two-columns-right #archive-month .navigation   {margin:0 -22px 0 0;}
   897 .two-columns-left #archive-month .navigation   {margin:0 0 0 -22px;}
   898 
   899 .page-tags #content h2,
   900 .page-icons #content h2 {
   901     $entry_colors
   902     border: solid 1px $*color_page_border;
   903     font-size: 1.2em;
   904     margin: 0;
   905     margin-bottom: 20px;
   906     padding: .2em;
   907     }
   908 
   909 .two-columns-right.page-tags #content h2,
   910 .two-columns-right.page-icons #content h2 {
   911     margin-right: 10px;
   912     }
   913 
   914 .two-columns-left.page-tags #content h2,
   915 .two-columns-left.page-icons #content h2 {
   916     margin-left: 10px;
   917     }
   918 
   919 #archive-month dt {font-weight: bold; }
   920 .two-columns-right #archive-month .entry-title {display: inline-block; margin:0 0 .5em 0; padding-left: 5px; }
   921 .two-columns-left #archive-month .entry-title {display: inline-block; margin:0 0 .5em 0; padding-right: 5px; }
   922 
   923 .month-wrapper, #archive-month dl {padding:10px;position:relative;background-color:$*color_entry_background;}
   924 .two-columns-right .month-wrapper, .two-columns-right #archive-month dl {margin: 20px 2em 20px 3em;}
   925 .two-columns-left .month-wrapper, .two-columns-left #archive-month dl   {margin: 20px 3em 20px 2em; }
   926 
   927 .month-wrapper h3 {padding: 0.2em; margin: 0; border-top: solid 2px $*color_page_border; $entry_title_colors font-size: 1.2em; margin-bottom: 20px; }
   928 .month caption {display: none; }
   929 .month .day span, .month .day p {padding: 0; margin: 0; }
   930 .month .day p {margin-top: 4px; margin-bottom: -4px; }
   931 .month .day, .month th {line-height: 2em; vertical-align: text-top; padding: 5px; text-align: center; }
   932     /* IE only to line up the empty days neatly */ 
   933     *+html .month .day span, *+html .month th span{vertical-align: 100%; }
   934 .month .day-has-entries {line-height: 1em; }
   935 .month .footer {width: 250px; text-align: center; margin: 10px 0px; }
   936 
   937 .text_noentries_day {margin-top: 20px; margin-bottom: 20px; }
   938 
   939 #postform {margin-top: 20px; }
   940 #commenttext {width: 95%; }
   941 
   942 .metadata-label, .metadata-item, .datetime, .tag, .entry-management-links, .entry-interaction-links {margin-top:.5em; font-weight: lighter; font-variant: normal; text-transform: uppercase; $page_details_text_colors; letter-spacing: 0.08em; display: block; }
   943 .metadata-label-groups, .tag-text {display:none; }
   944 .metadata-item {color: $*color_entry_metadata_text; }
   945 
   946 .journal-name,
   947 .journal-website-name {text-align: center; font-size: 1.8em; color: $*color_module_link; line-height: 1.43em; margin-bottom:.3em; font-weight: lighter; font-variant: normal; letter-spacing: .16em; }
   948 
   949 .journal-name { font-size: 1.8em; }
   950 .journal-website-name { font-size: 1.6em; } 
   951 
   952 .partial .comment-title {
   953     display: inline;
   954     margin-right: .2em;
   955     }
   956 
   957 .partial .comment-title h4 {
   958     display: inline;
   959     }
   960 
   961 .partial .comment-poster:before {
   962     content: "- ";
   963     }
   964 
   965 .partial .comment .datetime {
   966     display: inline;
   967     }
   968 
   969 
   970 /*--- Icons Page ---*/
   971 
   972 .sorting-options ul {
   973     list-style: none;
   974     padding-left: 0;
   975     text-align: center;
   976     }
   977 
   978 .sorting-options ul li {
   979     display: inline;
   980     }
   981 
   982 .page-icons .comment {
   983     background: transparent;
   984     border: none;
   985     margin: 0;
   986     padding: 0;
   987     }
   988 
   989 .page-icons .icon {
   990     margin: 1em 0;
   991     }
   992 
   993 .icon-image {
   994     float: left;
   995     clear: left;
   996     margin-bottom: .25em;
   997     min-width: 100px;
   998     padding-right: 1em;
   999     }
  1000 
  1001 .icon-info {
  1002     min-height: 100px;
  1003     }
  1004 
  1005 .icon-info span {
  1006     font-weight: bold;
  1007     }
  1008 
  1009 .icon-info .default {
  1010     text-decoration: underline;
  1011     }
  1012 
  1013 .keywords ul {
  1014     display: inline;
  1015     list-style: none;
  1016     padding-left: 0;
  1017     }
  1018 
  1019 .keywords ul li {
  1020     display: inline;
  1021     padding: 0 .25em 0 0;
  1022     }
  1023 
  1024 $entryicon_css
  1025 
  1026     """;
  1027 }