Advertisement
rccharles

asc header nov, 2016

Nov 4th, 2016
534
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 38.86 KB | None | 0 0
  1. /*  Reduce the size of a header area on a list web page and display of posts in a discussion web page.
  2.  
  3.    Copyright (c) 2016 rccharles
  4.  
  5.    All rights reserved.
  6.  
  7.    Redistribution and use in source and binary forms, with or without
  8.    modification, are permitted provided that the following conditions are met:
  9.  
  10.    1. Redistributions of source code must retain the above copyright notice, this
  11.       list of conditions and the following disclaimer.
  12.    2. Redistributions in binary form must reproduce the above copyright notice,
  13.       this list of conditions and the following disclaimer in the documentation
  14.       and/or other materials provided with the distribution.
  15.  
  16.    THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
  17.    ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  18.    WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  19.    DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
  20.    ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  21.    (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  22.    LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  23.    ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  24.    (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
  25.    SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  26.  
  27.    The views and conclusions contained in the software and documentation are those
  28.    of the authors and should not be interpreted as representing official policies,
  29.    either expressed or implied, of the Custom Styles Project.    
  30.    
  31.    
  32.     Implement these changes by:
  33.       1) running stylish
  34.       2) add the combined user style sheet to stylish
  35.          https://discussions.apple.com/docs/DOC-7501
  36.       3) create a new style sheet in stylish.
  37.       4) copy these css rules to the new sheet.
  38.      
  39.      
  40.     example web pages:
  41.         https://discussions.apple.com/content?filterID=following~objecttype~objecttype[thread]
  42.         https://discussions.apple.com/people/<userid>?view=discussions
  43.    
  44.     What is my user agent and screen size?
  45.     http://whatsmyuseragent.com/
  46.  
  47.     iPhone
  48.                   320px x 480px with window size 320px x 372px
  49.         landscape 320px x 480px with window size 480px x 320px
  50.    
  51.     HTC Desire 520
  52.                   320px x 522px with window size 320px x 448px
  53.         landscape 527px x 320px with window size 527px x 247px
  54.  
  55.     Apple sprites
  56.         https://discussions.apple.com/6.0.3.0453576a/themes/apple_0.7.0/img/apple-sprite.png
  57.        
  58.   */
  59.  
  60. /* ==========================================###======================================= */
  61. @-moz-document
  62.    url-prefix(https://discussions.apple.com/content),
  63.    url-prefix(https://discussions.apple.com/community),
  64.    url-prefix(https://discussions.apple.com/people),
  65.    url-prefix(https://discussionsjapan.apple.com/content),
  66.    url-prefix(https://discussionsjapan.apple.com/community),
  67.    url-prefix(https://discussionsjapan.apple.com/people),
  68.    url-prefix(https://discussionskorea.apple.com/content),
  69.    url-prefix(https://discussionskorea.apple.com/community),
  70.    url-prefix(https://discussionskorea.apple.com/people),
  71.    url-prefix(https://communities.apple.com/es/content),    
  72.    url-prefix(https://communities.apple.com/es/community/),
  73.    url-prefix(https://communities.apple.com/es/people),  
  74.    url-prefix(https://communities.apple.com/pt/content),
  75.    url-prefix(https://communities.apple.com/pt/community/),
  76.    url-prefix(https://communities.apple.com/pt/people)  {  
  77.      
  78.       /* debug:
  79.          background-color: yellow !important;
  80.       */          
  81.       /* top line:
  82.          Communities                Contact support
  83.        
  84.          I guess we know by now that we are in the communities. */
  85.        
  86.        /* Top portion of the header. First two "lines" on the page.  
  87.          Second lines is:
  88.            My Subscriptions Content People Search Post */
  89.       div#j-header-wrap {
  90.         margin-bottom: 2px !important;
  91.         /*background-color: antiquewhite !important; /* */ }
  92.  
  93.      
  94.       /* Ditch first line across page.  */
  95.       div#body-apple header nav#j-globalNav-bg  {border-bottom: 0px !important; }
  96.      
  97.       /* Ditch Communities */
  98.       div#body-apple header div#apple-site-title a { display: none!important; }
  99.        
  100.       /* Ditch avatar of logged in user.
  101.          Be consistant with display of posts which doesn't have avatar */
  102.       ul#j-satNav-wrap a#j-satNav img {
  103.            display:none !important;
  104.            background-color: azure !important; /* */
  105.           }
  106.        
  107.       /* Ditch "Content" upper left of window.  
  108.          Glad to get rid of this redundant waste of space. */
  109.       div#jive-body  header#apple-full-header { display: none!important; }
  110.        
  111.       /* Ditch "Find helpful content and discussions"
  112.          Total waste of space. */
  113.       header#apple-full-header h4#apple-full-subheader { display: none!important; }  
  114.        
  115.       /* Ditch Box and list view icons
  116.          Who ever uses the box view?  No need. */
  117.        div#jive-body ul#j-item-view-toggle { display: none!important; }
  118.        
  119.       /* Ditch the line under
  120.                [All User(nnn)] [Announcements] [User Tips(nnn)] [Discussions(nnn)] */
  121.       ul.j-content-types.js-browse-filter-toggle-set { border-bottom-width: 0 !important;}
  122.        
  123.       /* [Filter by personal content] check box only appears
  124.          on your content web page. It doesn't seem to work. */
  125.      div.j-browse-filter-row.j-content-filter span.js-browse-filter-toggle{
  126.         display: none!important;
  127.       /*  margin: -20px -20px 0 0 !important;
  128.         background-color: teal !important; /* */
  129.         }
  130.        
  131.       /* User id    My subscriptions  Content ... */
  132.       header#j-header div#second-row {
  133.           /*background-color: yellow !important;*/
  134.           padding-top: 6px !important;
  135.         }
  136.      
  137.       /* User id  signout */
  138.       div#second-row ul#j-satNav-wrap {
  139.           /*background-color: aqua  !important;*/
  140.           margin-left: -40px !important;
  141.           margin-top: -10px !important;
  142.        }
  143.            
  144.       /*  Delete line under [all discussions]. This is a band in back of
  145.          [All Discussions] the spans the width of the window. */
  146.      div.j-layout.j-layout-sl form#js-browse-controls div.j-browse-filter-row.j-content-filter {
  147.           border-bottom: 0px !important;
  148.           /*background-color: azure !important; /* */
  149.       }
  150.        
  151.        /* Alert.
  152.           Could get rid of all the wasted white space to avoid this */
  153.        div#jive-alert {
  154.            margin-top: 0px !important;
  155.          }
  156. /* ==================================== */    
  157. /* ... for small windows such as a smart phone ... */  
  158.        
  159. @media all and (max-width: 499px) {
  160.    
  161.  
  162.       /* [Contact Support]  */
  163.       div#body-apple header ul#contact-support-link a {
  164.           font-size: 10px !important;
  165.           background-color: antiquewhite !important; /**/
  166.         }  
  167.    
  168.  
  169.     /* [my Subscriptions] [Content] [People [Search] [Post] */
  170.     #body-apple ul#menubar.sub-nav-wrap li {
  171.         font-size: 10px !important;
  172.       /*  background-color: blanchedalmond !important; /**/}
  173.    
  174.       /* [All User(nnn)] [Announcements] [User Tips(nnn)] [Discussions(nnn)]*/
  175.       div.j-browse-filter-row.j-type-row.apple-custom-line-height{
  176.           height:20px !important;                
  177.           margin:10px 0 15px !important;/**/
  178.           /*background-color: pink!important; /**/
  179.     }
  180.    
  181.      div#jive-body div.j-layout {
  182.         margin: 5px 0 0 0 !important;
  183.         /* background-color: grey !important; /* */      
  184.     }
  185.      
  186.       /* for some reason when left out User Tips drifts downward. */
  187.       ul.j-content-types.js-browse-filter-toggle-set li a{          
  188.           height: 18px!important;
  189.           font-size: 13px !important;
  190.           padding:0px   !important;
  191.           vertical-align: middle !important;
  192.           display:inline-block;
  193.           overflow:hidden !important;
  194.           white-space:nowrap !important;
  195.           /*background-color: tan  !important; /**/ }
  196.          
  197.      ul.j-content-types.js-browse-filter-toggle-set li.filter-All.Content a {
  198.          width: 18px !important;
  199.          /*background-color: tomato !important; /**/
  200.    
  201.          }
  202.      ul.j-content-types.js-browse-filter-toggle-set li.filter-Announcements a {
  203.          width: 58px !important;
  204.          /*background-color: tomato !important; /**/  
  205.          }
  206.    
  207.       ul.j-content-types.js-browse-filter-toggle-set li.filter-User.Tips a {
  208.          width: 58px !important;
  209.          /*background-color: orchid !important; /**/  
  210.          }
  211.        
  212.     ul.j-content-types.js-browse-filter-toggle-set li.filter-Discussions a span.js-shrinkable{
  213.          display:inline-block;  /* No workie without */
  214.          overflow:hidden !important;
  215.          white-space:nowrap !important;
  216.          width: 70px !important;
  217.          /*background-color: tomato !important; /**/  
  218.          }
  219.    
  220.      /* moves list up */
  221.       div.j-browse-sorts.j-browse-filter-row.last-child {
  222.           margin:0 !important;
  223.           height: 14px !important;
  224.           /*background-color: aqua  !important;/**/
  225.        }
  226.    
  227.     /* Set common width for all words.
  228.        Will truncate span width to save space. Biased toward English */
  229.     ul.j-content-types.js-browse-filter-toggle-set li {      
  230.           width: 80px !important;
  231.           /*background-color: tomato !important; /**/    
  232.          }    
  233.        
  234.       /* for some reason when left out User Tips drifts downward. */
  235.       ul.j-content-types.js-browse-filter-toggle-set li a{          
  236.           height: 18px!important;
  237.           font-size: 13px !important;
  238.           padding:0px   !important;
  239.           vertical-align: middle !important;
  240.           display:inline-block;
  241.           overflow:hidden !important;
  242.           white-space:nowrap !important;
  243.           /*background-color: tan  !important;/**/  }
  244.          
  245.      ul.j-content-types.js-browse-filter-toggle-set li.filter-All.Content a {
  246.          width: 18px !important;
  247.          /*background-color: tomato !important; /**/
  248.    
  249.          }
  250.      ul.j-content-types.js-browse-filter-toggle-set li.filter-Announcements a {
  251.          width: 58px !important;
  252.          /*background-color: tomato !important; /**/  
  253.          }
  254.    
  255.       ul.j-content-types.js-browse-filter-toggle-set li.filter-User.Tips a {
  256.          width: 58px !important;
  257.          /*background-color: orchid !important; /**/  
  258.          }
  259.        
  260.     ul.j-content-types.js-browse-filter-toggle-set li.filter-Discussions a span.js-shrinkable{
  261.          display:inline-block;  /* No workie without */
  262.          overflow:hidden !important;
  263.          white-space:nowrap !important;
  264.          width: 70px !important;
  265.          /*background-color: tomato !important; /**/  
  266.          }
  267.    
  268.    
  269.    
  270.       /*
  271.          These are the three pulldowns.
  272.          initally:
  273.            [All discussions]
  274.            [Type to filter by text]
  275.            [Sort by latest activity: newest first] */  
  276.      
  277.     /* Top portion of the header. First two "lines" on the page.  
  278.          Second lines is:
  279.            [My Subscriptions] [Content] [People] [Search] [Post] */
  280.       div#j-header-wrap {
  281.         margin-bottom: 2px !important;
  282.         /*background-color: antiquewhite !important; /* */ }
  283.  
  284.  
  285.        /* even number strips.  Lower header. Large box. Starts with
  286.           [All content] [Annoucements] [User tips] [Discussions] includes contents listing.
  287.       div.j-layout.j-layout-sl.clearfix.j-contained {
  288.          
  289.          } */    
  290.        /* The second line in the header FYI
  291.           limit selection to just user's content
  292.        div.j-layout.j-layout-sl.clearfix.j-contained.j-contained-tabs.j-browse-content.j-rc5
  293.        form#js-browse-controls div.j-browse-sorts {}  */
  294.  
  295.    
  296.      /* move up a bit the horizonal nav bar.  In the main css, the sidebar was made horizontal */
  297.      div .j-colum-wrap-s nav.j-second-nav ul {
  298.        /*  margin-top: -10px !important; /**/
  299.          /*background-color: orchid !important; /**/  }
  300.    
  301.  
  302.      /*  Adjust height associated with the band in back of
  303.          "[ll Discussions] the spans the width of the window. */
  304.      div.j-layout.j-layout-sl form#js-browse-controls div.j-browse-filter-row.j-content-filter {
  305.           height: 20px !important;
  306.          /* background-color: tan !important; /* */
  307.       }
  308.        
  309.      /* [All discussions] */
  310.      select.j-browse-filter.js-browse-filter,
  311.          #js-browse-controls #j-browse-filters #j-sort,
  312.          div.j-browse-sorts.j-browse-filter-row span.j-browse-search input {
  313.          padding: 0 !important;
  314.          vertical-align: middle!important;
  315.          font-size: 12px !important;
  316.          height: 20px !important;
  317.          border-color: #9b9b9b !important;
  318.          background-color: #f2f2f2 !important;      
  319.       }
  320.    
  321.    
  322.        select.j-browse-filter.js-browse-filter{
  323.            text-align: left !important;
  324.            width: 130px !important;  }
  325.      
  326.      /* [Type to filter by text] on list of discussions in a community. */
  327.      div.j-browse-sorts.j-browse-filter-row span.j-browse-search input {
  328.          width: 130px !important;  
  329.          text-align: center !important;    
  330.        }
  331.        
  332.      /* [Sort by ...] */
  333.      #js-browse-controls #j-browse-filters #j-sort {
  334.         margin: 0 !important;
  335.         text-align: left !important;
  336.         width: 230px !important;
  337.         margin-top: -16px !important;
  338.        }
  339.      
  340.     div.j-pagination {
  341.         margin-top: -32px !important;
  342.         height: 22px !important;
  343.         width: 140px !important;
  344.         /*background-color: yellow !important;  /**/      
  345.     }
  346.        
  347. } /* media all and (max-width: 499px)
  348.      end of smart phone adjustment */
  349.        
  350.        
  351. /* ================================================= */
  352. @media all and ( min-width: 400px ) and ( max-width: 499px ) {
  353.            
  354.       /* [contact support] link upper right corner
  355.          to move, you need to use the ul
  356.          actually, the ul.  link is in a li. */
  357.       div#body-apple header ul#contact-support-link {
  358.           margin: -15px -46px 0;
  359.         }
  360.                
  361.        /* Alert.
  362.           Could get rid of all the wasted white space to avoid this */
  363.        div#body-apple div#jive-alert {
  364.           width: 91% !important;
  365.           margin-top: 5px !important;
  366.           margin-right: 10px !important;
  367.           margin-bottom: 10px !important;
  368.           margin-left: 10px !important;            
  369.          }    
  370.      
  371.       /* Move breadcrumb to the upper left, thus avoiding the repeating of Communities and content    
  372.           For examples:
  373.                Support Communities / Content
  374.                Support Communities / iPad / iPad in Business and Education
  375.             */
  376.       section#j-main nav#jive-breadcrumb {  /* add more selectors to overwhele main css */
  377.           position: absolute !important;  /* override what in the main css */
  378.           text-align: left !important;
  379.           top: -120px !important;  
  380.           left: 5px !important;
  381.           font-weight: 500 !important;
  382.           font-size: 13px !important;
  383.           width: 225px !important;   /* override what in the main css */  
  384.           /*background-color: tan  !important;/**/
  385.        }
  386.            
  387.     /* Set common width for all words.
  388.        Will truncate span width to save space. Biased toward English */
  389.     ul.j-content-types.js-browse-filter-toggle-set li {      
  390.           width: 80px !important;
  391.           /*background-color: tomato !important; /**/    
  392.          }  
  393.    
  394.      /* actual button [Type to filter by text] on list of discussions in a community. */
  395.      div.j-browse-sorts.j-browse-filter-row span.j-browse-search input {
  396.          /*background-color: yellowgreen  !important;/**/}
  397.    
  398.      /* enclosing tag [Type to filter by text] on list of discussions in a community. */
  399.      div.j-browse-sorts.j-browse-filter-row span.j-browse-search  {
  400.         padding-right: 70px !important; /**/
  401.         /*background-color: aquamarine  !important;/**/}
  402.    
  403.          
  404.      /* was sidebar now moved to horizontal */
  405.      div.j-column.j-column-s nav.j-second-nav {    
  406.         margin-top: 40px !important;/**/
  407.         margin-bottom: 10px !important;
  408.         /*background-color: red !important;/**/}
  409.    
  410.     form#js-browse-controls {
  411.         height: 120px!important;
  412.       }
  413.    
  414.     /* < 1 2 > */
  415.     div.j-pagination {
  416.         margin-top: 1px !important;
  417.         height: 20px !important;
  418.         width: 250px !important;/**/    
  419.         font-size: 11px !important;
  420.         margin-left: -25px !important;
  421.         top: 0px !important;
  422.         left: 180px !important;
  423.         /*background-color: lightgrey !important;  /**/      
  424.       }
  425.    
  426.     /* spacing around the whole page */
  427.     div#body-apple {
  428.         padding-right: 10px !important;
  429.         padding-left: 10px !important;
  430.         /*background-color: green !important;  /**/
  431.       }
  432.   } /* end of media */
  433.        
  434. /* ================================================= */
  435. /* Just a marker so we know when we have a 320px screen plus a little more stuff.  */
  436. @media all and ( max-width: 320px ) {
  437.    
  438.       /* spacing around the while page */
  439.       div.j-pagination span.j-pagination-prevnext {
  440.         padding-left: 0 !important;  
  441.         padding-right: 0 !important;}
  442.      
  443.       /* [contact support] link upper right corner
  444.          to move, you need to use the ul
  445.          actually, the ul.  link is in a li. */
  446.       div#body-apple header ul#contact-support-link {
  447.           margin: -15px -60px 0;
  448.         }
  449.      
  450.       /* [Contact Support]
  451.          How we tell we have the iPhone 4's size with a desktop window. */
  452.       div#body-apple header ul#contact-support-link a {
  453.           background-color: lightgrey !important; /**/
  454.         }
  455.    
  456.       /* Move breadcrumb to the upper left, thus avoiding the repeating of Communities and content    
  457.           For examples:
  458.                Support Communities / Content
  459.                Support Communities / iPad / iPad in Business and Education
  460.       */
  461.       section#j-main nav#jive-breadcrumb {  /* add more selectors to overwhele main css */
  462.           top: -140px !important;
  463.           /*background-color: tan  !important;/**/
  464.         }
  465.    
  466.      
  467.     /* < 1 2 > */
  468.     div.j-pagination {
  469.         margin-top: 1px !important;
  470.         height: 20px !important;
  471.         /*width: 120px !important;/**/
  472.        
  473.         font-size: 13px !important;
  474.         margin-left: -35px !important;
  475.         top: 0px !important;
  476.         left: 180px !important;
  477.         /*background-color: lightgrey !important;  /**/      
  478.       }
  479.    
  480.     /* Little less space around <  > */
  481.     div.j-pagination span.j-pagination-prevnext {
  482.             margin-left: 0 !important;
  483.             margin-right: 0 !important;
  484.             /*background-color: tan  !important;/**/
  485.       }
  486.     /* Let enough room so someone can click on the sidebar moved horizontal. */
  487.     form#js-browse-controls {
  488.         height: 120px !important;
  489.       }  
  490. } /* end of media */
  491.    
  492.              
  493. /* ================================================= */
  494. /* list of discussions adjustment for small windows found on potraited smart phones */
  495. @media all and (min-width: 321px ) and ( max-width: 399px ) {
  496.    
  497.            
  498.        /* Alert.
  499.           Could get rid of all the wasted white space to avoid this */
  500.        div#body-apple div#jive-alert {
  501.           width: 89% !important;
  502.           margin-top: -30px !important;
  503.           margin-right: 10px !important;
  504.           margin-bottom: 10px !important;
  505.           margin-left: 10px !important;            
  506.          }
  507.    
  508.       /* Move breadcrumb to the upper left, thus avoiding the repeating of Communities and content    
  509.           For examples:
  510.                Support Communities / Content
  511.                Support Communities / iPad / iPad in Business and Education
  512.             */
  513.       section#j-main nav#jive-breadcrumb {  /* add more selectors to overwhelm main css */
  514.           top: -140px !important;  
  515.         }
  516.    
  517.       /* spacing around the while page */
  518.       div#body-apple {
  519.         padding-right: 10px !important;
  520.         padding-left: 10px !important;
  521.         /*background-color: yellowgreen  !important;/**/
  522.       }
  523.    
  524.       /* [Contact Support]
  525.          How we tell we have the iPhone 4's size with a desktop window. */
  526.       div#body-apple header ul#contact-support-link a {
  527.           margin: -15px -46px 0;
  528.           background-color: peachpuff !important; /**/
  529.         }
  530.  
  531.    
  532.    
  533. } /* end of media */
  534.        
  535.        
  536. /* ================================================= */
  537. /* list of discussions adjustment for small windows found on potraited smart phones */
  538. @media all and ( max-width: 399px ) {
  539.    
  540.       /* [contact support] link upper right corner
  541.          to move, you need to use the ul
  542.          actually, the ul.  link is in a li. */
  543.       #contact-support-link {
  544.           margin-right: -40px !important;}
  545.    
  546.      /* Move breadcrumb to the upper left, thus avoiding the repeating of Communities and content    
  547.           For examples:
  548.                Support Communities / Content
  549.                Support Communities / iPad / iPad in Business and Education
  550.             */
  551.       section#j-main nav#jive-breadcrumb {  /* add more selectors to overwhele main css */
  552.           position: absolute !important;  /* override what in the main css */
  553.           text-align: left !important;  
  554.           left: 5px !important;
  555.           font-weight: 500 !important;
  556.           font-size: 13px !important;
  557.           width: 225px !important;   /* override what in the main css */  
  558.           /*background-color: tan  !important;/**/
  559.        }
  560.      /* Set common width for all words.
  561.        Will truncate span width to save space. Biased toward English */
  562.      ul.j-content-types.js-browse-filter-toggle-set li {      
  563.           width: 70px !important;
  564.           /*background-color: tomato !important; /**/    
  565.          }
  566.    
  567.      /* for some reason when left out [User Tips] drifts downward. */
  568.      ul.j-content-types.js-browse-filter-toggle-set li a{
  569.           border-radius: 5px !important;
  570.           background-color:  #ffe6b3 !important; /* light tan */
  571.        }
  572.    
  573.      /* area for [All] [Announce] [User Tips] [Discussions]
  574.          and for expanded content [All discussions]
  575.          [Type to filter by text]
  576.          [Sort by latest activity newest first]
  577.      */
  578.      div#j-browse-filters.j-browse-filters {
  579.         height: 100px !important;
  580.         margin-bottom: 0px !important;
  581.         /*background-color: azure !important; /* doesn't appear anyway */ }
  582.    
  583.      /* [Sort by ...] <-------*/
  584.      #js-browse-controls #j-browse-filters #j-sort {
  585.         /* background-color: tan  !important;/**/
  586.        }
  587.        
  588.   } /* end of media */
  589.  
  590. /* ==================================== */
  591. /* ...... For medium and large size windows ...... */
  592.        
  593. @media all and (min-width: 500px) {  
  594.    
  595.       /* Space between first and second line of the upper header space.  Second line starts
  596.           with Signin / Signout */
  597.       nav#j-globalNav-bg {
  598.           height: 26px !important;
  599.         }
  600.    
  601.       /* [All Content(nnn)]   [User [Tips(nnn)]   [Discussions(nnn)]
  602.          [All User(nnn)] [Announcements] [User [Tips(nnn)] [Discussions(nnn)] */
  603.       div#jive-body div.j-browse-filter-row.j-type-row.apple-custom-line-height{
  604.           margin: 5px 0 0 0 !important;
  605.           margin-top: 5px !important;
  606.           height:20px !important;              
  607.           margin:10px 0 15px !important;/**/
  608.           /*background-color: rosybrown !important; /**/
  609.        }
  610.      
  611.       /* now adjust the size of the letters in this row */
  612.       div#jive-body div.j-browse-filter-row.j-type-row.apple-custom-line-height ul li button{
  613.           font-size: 16px !important;
  614.           height:18px !important;  
  615.           padding: 0 !important;
  616.           vertical-align: middle !important;
  617.           display:inline-block;
  618.           overflow:hidden !important;
  619.           white-space:nowrap !important;
  620.           /*background-color: lightgreen  !important; /**/
  621.           }
  622.          
  623.        
  624.       /* Effects margin same as div#jive-body */
  625.       div#jive-body div.j-layout {
  626.           margin-top: 5px !important;
  627.           /*background-color: grey !important; /* */      
  628.        }
  629.    
  630.       /* for some reason when left out User [Tips drifts] downward. */
  631.       ul.j-content-types.js-browse-filter-toggle-set li a{          
  632.           height: 18px!important;
  633.           font-size: 16px !important;
  634.           padding:0px   !important;
  635.           vertical-align: middle !important;
  636.           display:inline-block;
  637.           overflow:hidden !important;
  638.           white-space:nowrap !important;
  639.           /* background-color: tan  !important; /**/ }
  640.          
  641.  
  642.       /* [Contact Support] seen on top right */
  643.       div#body-apple header ul#contact-support-link {
  644.           margin-top: -6px !important;
  645.           margin-right: -40px !important;
  646.           /* background-color: palegoldenrod !important;  /**/                  
  647.         }
  648.    
  649.         /* Support Communities   Content
  650.          Move breadcrumb to the upper left, thus avoiding the repeating of Communities and content */
  651.       section#j-main nav#jive-breadcrumb {  /* add more selectors to overwhele main css */
  652.           position: absolute !important;  /* override what in the main css */
  653.           text-align: left !important;
  654.           top: -70px !important;   /* === if you want to run this with out the main css,
  655.                                            change from -120 to -80px === */
  656.           left: 0px !important;
  657.           font-size: 20px !important;        
  658.           width: inherit !important;   /* override what in the main css */
  659.           /*background-color: tan  !important;/**/        
  660.        }
  661.      
  662.         /*  Adjust height associated with the band in back of
  663.          [All Discussions] the spans the width of the window. */
  664.      div.j-layout.j-layout-sl form#js-browse-controls div.j-browse-filter-row.j-content-filter {
  665.           height: 20px !important;
  666.           width: 180px;
  667.           /*background-color: tan !important; /* */
  668.       }
  669.    
  670.  
  671.      /* Pagination info */
  672.      div span.j-pagination-prevnext.full-pagination{
  673.         margin:0 !important;
  674.           /*background-color: pink !important; /* */ }
  675.    
  676.      /* [All discussions] */
  677.      select.j-browse-filter.js-browse-filter {
  678.      
  679.          padding: 0px 6px 0px 8px !important;
  680.          font-size: 14px !important;
  681.          width: 160px !important;      
  682.          text-align: left !important;
  683.          border-color: #9b9b9b !important;
  684.          background-color: #f2f2f2 !important;        
  685.       }
  686.      
  687.      /* [Type to filter by text] on list of discussions in a community. */
  688.      div.j-browse-sorts.j-browse-filter-row span.j-browse-search input {
  689.          display:inline-block !important;
  690.          padding: 0px 6px 0px 8px !important;
  691.          height: 32px !important;
  692.          font-size: 14px !important;
  693.          width: 160px !important;      /* Was 220px */
  694.          text-align: center !important;
  695.          border-color: #9b9b9b !important;
  696.          background-color: #f2f2f2 !important;
  697.        }
  698.        
  699.    
  700.      /* [Sort by: ...]
  701.         Suspect javscript forces 32px has the height :-( */
  702.      #js-browse-controls div.j-browse-sorts span select {
  703.          border-color: #9b9b9b !important; /* grey, Apple's color */
  704.          padding: 0px 6px 0px 28px !important;
  705.          text-align: left !important;          
  706.          height:  32px !important;
  707.          font-size: 14px !important;
  708.          padding: 0px !important;
  709.          width: 200px !important;
  710.          margin-right: -49px;
  711.          background-color: #f2f2f2 !important;
  712.          /*background-color: lightsalmon !important;/**/
  713.        }
  714.    
  715.          #js-browse-controls div.j-browse-sorts span select option{        
  716.          border-color: #9b9b9b !important; /* grey, Apple's color */
  717.          padding: 0px 6px 0px 28px !important;        
  718.          text-align: left !important;
  719.          height:  22px !important;
  720.          font-size: 12px !important;
  721.          padding: 0px !important;      
  722.          /* background-color: yellow !important;/**/    
  723.        }
  724.    
  725.     /* box for horizontal side-bar */
  726.     div.j-colum-wrap-s div.j-column.j-column-s {
  727.         height: 60px !important;
  728.         /* background-color: yellow !important;/**/
  729.     }
  730.    
  731.     /* margin around horizontal side-bar
  732.        The real space waster */
  733.     div.j-box.j-sub-facets.j-browse-mine{
  734.         margin-top: 4px !important;
  735.         margin-bottom: 10px !important;
  736.     }
  737.     /* Hover over  */
  738.         /* [All discussions] */
  739.     select.j-browse-filter.js-browse-filter:hover,
  740.         /* text */
  741.     div.j-browse-sorts.j-browse-filter-row span.j-browse-search input:hover,
  742.         /* [sort by ...] */
  743.     #js-browse-controls #j-browse-filters #j-sort:hover {  
  744.         border-color: #42aaff !important;  /* light blue */    
  745.       }  
  746.  }  /* media all and (min-width: 500px) */    
  747.      
  748. } /* end of moz-document */
  749.  
  750.  
  751. /* ==========================================###======================================= */
  752. /* Disply of all posts in a discussion.
  753.    examples:
  754.        https://discussions.apple.com/message/30492563#message30492563
  755.        https://discussions.apple.com/thread/7628966  
  756. */
  757. @-moz-document
  758.     url-prefix(https://discussions.apple.com/message/),
  759.     url-prefix(https://discussions.apple.com/thread/){
  760.        
  761.     /* Communities title -- incomplete title on top left of page. So use breadcrumb trail. */
  762.     nav div#apple-site-title {display: none !important;} /* */  
  763.        
  764.     div#jive-body-intro-content h2 {
  765.         font-size: 20px !important;
  766.         margin-top: 14px !important;
  767.         /*background-color: lightskyblue !important; /**/      
  768.         }
  769.        
  770.         /* no Avatar for logged in user.  
  771.            Seems to get in the way of Original Poster's avatar */
  772.         div#second-row img {display: none !important; }
  773.  /* ==================================== */
  774.  /* For medium and large size windows... */
  775.  @media all and (min-width: 500px) {
  776.      
  777.     /* Seems to be space for previously hidden Communities header */
  778.      div.navbar-desktop-container nav#j-globalNav-bg {height: 22px !important;}
  779.            
  780.     /* [Contact support] */  
  781.     nav ul#contact-support-link {margin-top: -6px !important;}
  782.            
  783.     /* [Log in]         [My Subscriptions] [Content] [People] [Search] [Post [Lounge] */
  784.     div#second-row {
  785.         padding-top: 2px !important;
  786.         /*background-color: lightskyblue !important; /**/ }
  787.            
  788.     /* [My Subscriptions] [Content] [People] [Search] [Post [Lounge] */
  789.     div ul#menubar.sub-nav-wrap {margin-top: 12px !important;}
  790.        
  791.     /* Breadcrumb trail
  792.        Examples:
  793.            Support Communities  /  Content
  794.            Support Communities / iPad  /  iPad in Business and Education
  795.        Move breadcrumb to the upper left, thus avoiding the repeating of Communities  */
  796.     section#j-main nav#jive-breadcrumb ul {  /* add more selectors to overwhele main css */
  797.             position: absolute !important;  /* override what in the main css */
  798.             text-align: left !important;
  799.             top: -78px !important;   /* === if you want to run this with out the main css,
  800.                                             change from -85 to ?? px === */
  801.             left: 0px !important;
  802.             font-size: 20px !important;          
  803.             width: inherit !important;   /* override what in the main css */
  804.             height: 30px !important;
  805.               /* background-color: yellow !important; /* */
  806.         }
  807.          
  808.     /* First two lines of the header */    
  809.     div#j-header-wrap {
  810.         margin-bottom: 10px !important;
  811.         /* background-color: tan !important; /* */ }
  812.        
  813.     /* ASC displays the message when original poster posts from a message
  814.        Sometime appearing article name from where the poster made the original post
  815.        example:          
  816.            HT203995: Mail settings you might need from your email provider
  817.            Learn about Mail settings you might need from your email provider
  818.     */
  819.     div div#jive-body-intro-content {
  820.             padding-bottom: 0px !important;
  821.             /* There is a margin tag in larger user css.  To override, you need to use the margin
  822.               tag.  The margin-bottom will not work.
  823.               To see the effect, you need to reload the page. */
  824.             margin: -20px 40px 0px 40px !important;
  825.             /*   background-color: pink !important; /* */}        
  826.      
  827.     /* Seems to be some filler area between messaage and [following].
  828.        Seem to have to use the exact name to override.
  829.        When in stylish editor, effects page after save, but to see chanage in debug window you need to reload. */
  830.     .j-thread #body-apple .thread-container-wrapper {
  831.         padding-bottom: 0px !important;
  832.         margin: 0px 40px !important;
  833.          /* background-color: grey !important; */}  
  834.        
  835.     /*  [following].  This is the encompassing area.  It's the width of the window [mostly].*/
  836.     header.js-original-header.apple-overflow-hidden {
  837.             padding-top: 0px !important;
  838.             margin-top: 0px !important;      
  839.         }
  840.        
  841.     /*  [Follow]
  842.        just the area of Follow [pulldown].
  843.        reduces the space between these items.Follow [pulldown], and first post. */
  844.     div ul.apple-social-actions-toolbar {
  845.         margin-top: -20px !important;
  846.       } /* */
  847.    
  848.  } /* media all and (min-width: 500px) */
  849.          
  850.        
  851.  /* ================================================= */
  852.  /* list of discussions adjustment for small windows found on potraited smart phones */
  853.  @media all and ( max-width: 499px ) {
  854.      
  855.     /* [Contact support] */  
  856.     nav ul#contact-support-link {margin-top: 2px !important;}
  857.    
  858.    
  859.     /* spacing around the whole page */
  860.     div#body-apple {
  861.         padding-right: 0px !important;
  862.         padding-left: 0px !important;
  863.         /*background-color: green !important;  /**/
  864.       }
  865.       /* spacing around the while page */
  866.       div.j-pagination span.j-pagination-prevnext {
  867.         padding-left: 0 !important;  
  868.         padding-right: 0 !important;}
  869.      
  870.       /* [contact support] link upper right corner
  871.          to move up, you need to use the ul.
  872.          Link is in a li. */
  873.       div#body-apple header ul#contact-support-link {
  874.           margin-top: -13px !important;
  875.           margin-right:  0px !important;
  876.         }
  877.      
  878.       /* [Contact Support] */
  879.       div#body-apple header ul#contact-support-link a {
  880.           font-size: 10px !important;
  881.         }
  882.    
  883.      div#body-apple div#j-header-wrap {
  884.          padding-right: 0 !important;
  885.          padding-left: 0 !important;
  886.          margin-bottom:  10px !important;
  887.      }
  888.      
  889.      div#body-apple div#second-row {
  890.          padding-top: 0 !important;        
  891.      }
  892.          
  893.      /* just the area of [Following].
  894.          reduces the space between these items.Follow [pulldown], and first post. */
  895.      div#body-apple div ul.apple-social-actions-toolbar {
  896.           margin-top: -45px !important;
  897.         } /* */
  898.    
  899.      
  900.      
  901.  } /* end of media */
  902.    
  903.        
  904.  /* ==================================== */
  905.  /* for small windows such as a smart phone.    */      
  906.  @media all and (min-width: 321px) and (max-width: 499px) {
  907.        
  908.              /* [Contact Support]  */
  909.       div#body-apple header ul#contact-support-link a {
  910.           background-color: lavender!important; /**/
  911.         }
  912.      
  913.        /* Alert.
  914.           Could get rid of all the wasted white space to avoid this */
  915.        div#body-apple div#jive-alert {
  916.           width: 89% !important;
  917.           margin-top: -30px !important;
  918.           margin-right: 10px !important;
  919.           margin-bottom: 10px !important;
  920.           margin-left: 10px !important;            
  921.          }
  922.      
  923.       /* Move breadcrumb to the upper left, thus avoiding the repeating of Communities and content    
  924.           For examples:
  925.                Support Communities / Content
  926.                Support Communities / iPad / iPad in Business and Education
  927.       */
  928.       section#j-main nav#jive-breadcrumb ul {  /* add more selectors to overwhele main css */
  929.             position: absolute !important;  /* override what in the main css */
  930.             text-align: left !important;
  931.             top: -75px !important;   /* === if you want to run this with out the main css,
  932.                                             change from -75 to ?? px === */
  933.             left: -48px !important;
  934.             font-size: 13px !important;          
  935.             width: inherit !important;   /* override what in the main css */
  936.             height: 30px !important;
  937.             /*background-color: yellow !important; /* */
  938.         }
  939.  
  940.    
  941.  }
  942.        
  943.        
  944.     /* ==================================== */
  945.  /* for small windows such as a smart phone -- iphone 4 width in portrait */      
  946.  @media all and (max-width: 320px) {
  947.      
  948.      /* [Contact Support]
  949.          How we tell we have the iPhone 4's size with a desktop window. */
  950.       div#body-apple header ul#contact-support-link a {
  951.           background-color: lightsteelblue !important; /**/
  952.         }
  953.      
  954.      /* Move breadcrumb to the upper left, thus avoiding the repeating of Communities and content    
  955.           For examples:
  956.                Support Communities / Content
  957.                Support Communities / iPad / iPad in Business and Education
  958.       */
  959.       section#j-main nav#jive-breadcrumb ul {  /* add more selectors to overwhele main css */
  960.             position: absolute !important;  /* override what in the main css */
  961.             text-align: left !important;
  962.             top: -76px !important;   /* === if you want to run this with out the main css,
  963.                                             change from -85 to ?? px === */
  964.             left: -30px !important;
  965.             font-size: 13px !important;          
  966.             width: inherit !important;   /* override what in the main css */
  967.             height: 30px !important;
  968.             /* background-color: yellow !important; /* */
  969.         }
  970.      
  971.        /* Alert.
  972.           Could get rid of all the wasted white space to avoid this */
  973.        div#body-apple div#jive-alert {
  974.           /* margin-top: 0px !important; */
  975.           width: 87% !important;
  976.           margin-top: -20px !important;
  977.           margin-right: 5px !important;  
  978.           margin-bottom: 10px !important;
  979.           margin-left: 5px !important;    
  980.          }
  981.  
  982.    
  983.  
  984.      
  985.  } /* end of media */
  986.        
  987. } /* end of moz-document */
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement