CSS   74

system

Guest on 5th May 2022 02:08:38 AM

  1. /*
  2.  This is a system css file to define default css rules so that new sites are at least legible.
  3.  The css placed here should be easily over written even with simple css rules for site css.
  4.  Note that the class names could be updated and change often.
  5.  
  6.  
  7. /* Site Errors */
  8. .error-message, .error {
  9.         color: #C00;
  10. }
  11. pre.prettyprint {
  12.         white-space: pre-wrap;
  13.         white-space: -moz-pre-wrap;
  14.         white-space: -pre-wrap;
  15.         white-space: -o-pre-wrap;
  16.         word-wrap: break-word;
  17. }
  18. img:-moz-broken {
  19.         -moz-force-broken-image-icon: 1;
  20.         width: 24px;
  21.         height: 24px;
  22. }
  23. .toggleClick.toggle:after {
  24.         content: '\25B8 \ ';
  25.         color: #AAAAAA;
  26.         display: inline-block;
  27.         font-size: 0.6em;
  28.         margin: 0 0 0 5px;
  29.         position: relative;
  30.         vertical-align: middle;
  31. }
  32. .toggleClick.toggled:after {
  33.         content: '\25BE \ ';
  34.         color: #AAAAAA;
  35.         display: inline-block;
  36.         font-size: 0.6em;
  37.         margin: 0 0 0 5px;
  38.         position: relative;
  39.         vertical-align: middle;
  40. }
  41. .toggleClick, .toggleHover {
  42.         cursor: pointer;
  43. }
  44.  
  45. .hide {
  46.         display: none;
  47. }
  48. .show {
  49.         display: block;
  50. }
  51. td.show {
  52.         display: table-cell;
  53. }
  54. .edit input, .edit textarea, .edit select {
  55.         min-width: 0;
  56. }
  57.  
  58. .bold { font-weight:bold; }
  59.  
  60. /* Threaded Blog Comment Layout */
  61. .comment {
  62.         clear: both;
  63. }
  64. .comment .avatar, .comment .full_name, .comment .meta {
  65.         float: left;
  66. }
  67. .comment .avatar img {
  68.         width: 3em;
  69.         height: 3em;
  70. }
  71. .comment .body {
  72.         clear: both;
  73. }
  74. .comments .tree-block li {
  75.         list-style-type: none;
  76. }
  77.  
  78. /* Very light form styling */
  79. .select .checkbox {
  80.         display: block;
  81. }
  82. input[type=radio], input[type=checkbox] {
  83.         width: auto;
  84.         min-width: 0;
  85. }
  86.  
  87. /* Specific for invoices /invoices/invoices/add */
  88. .lineTotal {
  89.         text-align: right;
  90. }
  91. .invoiceTotal {
  92.         text-align: right;
  93. }
  94. .invoiceTotal ul, .invoiceTotal li {
  95.         list-style-type: none;
  96.         margin: 0;
  97.         padding: 0;
  98. }
  99. .invoiceTotal input, .invoiceTotal label {
  100.         float: none;
  101.         clear: none;
  102.         display: inline;
  103.         min-width: 5em;
  104.         text-align: right;
  105.         background: #FFF;
  106. }
  107. .invoiceTotal label {
  108.         margin: 0 0.5em 0 0;
  109.         border: none;
  110. }
  111. .invoiceTotal input {
  112.         font-size: 1em;
  113.         margin: 0 0 0.5em 0;
  114. }
  115. .invoiceProjects {
  116.         display: block;
  117.         float: left;
  118. }
  119. .generate .projects {
  120.         clear: both;
  121. }
  122.  
  123. /* Very light default form formatting to make new sites easier */
  124. label {
  125.         display: block;
  126.         padding: 0.2em 0 0 0;
  127. }
  128. input[type=radio], input[type=checkbox] {
  129.         float: left;
  130.         clear: left;
  131. }
  132.  
  133. .catalogItemOptions {
  134.         float: left;
  135.         width: 200px;
  136.         clear: none;
  137. }
  138.  
  139. .richtextarea {
  140.         clear: both;
  141. }
  142.  
  143. .contextSorter form select option.des:after {
  144.         content: '\25B2 \ ';
  145. }
  146. .contextSorter form select option.asc:after {
  147.         content: '\25BC \ ';
  148. }
  149.  
  150. .ajaxLoader {
  151.         position: fixed;
  152.         top: 50%;
  153.         left: 50%;
  154.         z-index: 9999999999;
  155.         padding: 3em;
  156.         background-color: rgba(255,255,255,0.8);
  157.         border: 1px solid #999;
  158.         border-radius: 1em;
  159.         margin-top: -5em;
  160.         margin-left: -6em;
  161.         display: none;
  162. }
  163.  
  164. .preview {
  165.         border: 1px dashed #999;
  166.         padding: 1em;
  167.         margin: 0 0 1em 0;
  168. }
  169. .preview:after {
  170.         content: ".";
  171.         display: block;
  172.         height: 0;
  173.         clear: both;
  174.         visibility: hidden;
  175. }
  176.  
  177. /* user edit profile picture  */
  178. #userEditThumb {
  179.         display: inline-block;
  180.         position: relative;
  181. }
  182. #userEditThumbLink {
  183.         position: absolute;
  184.         bottom: 0;
  185.         right: 0;
  186.         background: #000;
  187.         margin: 0;
  188.         padding: 1px 4px;
  189.         opacity: 0.6;
  190.         color: #EEE;
  191.         font-size: 10px;
  192. }
  193.  
  194. /* code mirror */
  195. .CodeMirror-lines div {
  196.         display: block !important;
  197. }
  198.  
  199. /* media browser */
  200. #mediaBrowser .media-container img {
  201.         max-height: 80px;
  202.         border: 1px solid #ccc;
  203.         padding: 1px;
  204. }
  205. #mediaBrowser .media-item {
  206.         float: left;
  207.         width: 22%;
  208.         height: 128px;
  209.         margin: 0 8px 8px 0;
  210.         border: 1px solid #eaeaea;
  211.         padding: 8px;
  212.         overflow: hidden !important;
  213.         font-size: 10px;
  214.         white-space: nowrap;
  215.         border-radius: 3px;
  216. }
  217. #mediaBrowser .media-item.checked {
  218.         border: 2px solid #3276b1;
  219. }
  220. #mediaBrowser .media-container {
  221.         max-height: 380px;
  222.         overflow-y: scroll;
  223. }
  224. #mediaBrowser .media-item .title {
  225.         text-overflow: ellipsis;
  226.         width: 100%;
  227.         white-space: nowrap;
  228.         overflow: hidden;
  229. }
  230. #mediaBrowser .media-item .actions {
  231.         font-size: 1.6em;
  232.         text-align: left;
  233. }
  234. #mediaBrowser .media-item .actions input[name=mediaSelected] {
  235.         visibility: hidden;
  236. }
  237. .media-selected.thumbnail.pull-left {
  238.         margin: 4px 4px 0 0;
  239. }
  240. .media-selected .content {
  241.         text-align: center;
  242. }
  243. .media-selected img {
  244.         height: 48px;
  245. }
  246. .media-selected .content p {
  247.         font-size: 10px;
  248.         color: #777;
  249.         width: 75px;
  250.         margin: 0 auto;
  251.         white-space: nowrap;
  252.         overflow: hidden;
  253.         text-overflow: ellipsis;
  254. }
  255. #mediaBrowserModal .modal-footer {
  256.         border: 0;
  257.         margin: 0;
  258.         padding: 8px;
  259. }
  260.  
  261. @media (min-width: 768px) {
  262.         #mediaBrowserModal .modal-dialog {
  263.                 width: 75%;
  264.         }
  265. }
  266.  
  267. /* skip nav link - https://webaim.org/techniques/skipnav */
  268. #skip-nav-link a {
  269.         font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;
  270.         padding:6px;position:absolute;top:-40px;left:0px;color:white;
  271.         border-right:1px solid white;border-bottom:1px solid white;
  272.         border-bottom-right-radius:8px;background:#BF1722;-webkit-transition: top 1s ease-out;
  273.         transition: top 1s ease-out;z-index: 100;
  274. }
  275.  
  276. #skip-nav-link a:focus {
  277.         position:absolute;left:0px;top:0px;
  278.         outline-color:transparent;-webkit-transition: top .1s ease-in;
  279.         transition: top .1s ease-in;
  280. }

Raw Paste

Login or Register to edit or fork this paste. It's free.