You are here

Home » API reference » Scald: Media Management made easy 6

dnd_test.css in Scald: Media Management made easy 6 

/* This is bad stuff! */
.body-field-wrapper {
  float: left;
  width: 100%;
}
.dnd-library-wrapper {
  float: left;
  width: 250px;
  margin-right: 10px;
  margin-top: 1em;
}
.dnd-library-wrapper .header {
  padding: 1px 4px;
}
.dnd-library-wrapper .header h3 {
  font-size: 12px;
  font-weight: bold;
}
.dnd-library-wrapper .footer {
  float: left;
  width: 100%;
  border-top: 1px solid #aaa;
  background-color: #ccc;
}
.dnd-library-wrapper .pager {
  font-weight: bold;
  padding: 0 5px;
}
#edit-body-wrapper {
  float: left;
  width: 600px;
}
.dnd-library-wrapper .library {
  border: 1px solid #aaa;
  float: left;
}
.dnd-library-wrapper .editor-item {
  float: left;
  width: 250px;
  border-bottom: 2px solid #fff;
  background-color: #ddd;
}
.dnd-library-wrapper .editor-item > div {
  padding: 3px;
}
.dnd-library-wrapper div.image {
  float: left;
  width: 32px;
  padding-left: 4px;
  line-height: 1;
}
.dnd-library-wrapper div.meta {
  float: left;
  width: 149px;
  line-height: 1.2;
}
.dnd-library-wrapper .title {
  font-weight: bold;
  font-size: 12px;
}
.dnd-library-wrapper .date, .dnd-library-wrapper .author {
  font-size: 10px;
  float: left;
  margin-top: .5em;
}
.dnd-library-wrapper .author {
  margin-right: 1em;
}
.dnd-library-wrapper .editor-item .sizes {
  float: left;
  width: 50px;
  margin-top: 14px;
  line-height: 1;
}
.dnd-library-wrapper .editor-item .sizes ul {
  list-style-type: none;
  margin: 0;
}
.dnd-library-wrapper .editor-item .sizes ul li {
  background: none;
  list-style-type: none;
  display: inline;
  padding: 0;
  margin: 0 0 0 2px;
}
.dnd-library-wrapper .editor-item .sizes a {
  float: left;
  display: block;
  font-size: 9px;
  line-height: 9px;
  margin-bottom: 2px;
  width: 19px;
  text-align: center;
}
.dnd-library-wrapper .editor-item .sizes a:link,
.dnd-library-wrapper .editor-item .sizes a:visited,
.dnd-library-wrapper .editor-item .sizes a:active {
  border: 1px solid #888;
  color: #fff;
  cursor: move;
  text-align: center;
}
.dnd-library-wrapper .editor-item .sizes a:hover,
.dnd-library-wrapper .editor-item .sizes a.dnd-inserted:link,
.dnd-library-wrapper .editor-item .sizes a.dnd-inserted:visited,
.dnd-library-wrapper .editor-item .sizes a.dnd-inserted:active {
  border: 1px solid #555;
  color: #fff;
  text-decoration: none;
}
.dnd-library-wrapper .editor-item .sizes a:hover span,
.dnd-library-wrapper .editor-item .sizes a.dnd-inserted span {
  background-color: #555;
}

.dnd-library-wrapper .editor-item .sizes a span {
  display: block;
  background-color: #888;
}
.dnd-library-wrapper .editor-item .sizes a.size-S span {
  margin: 3px;
  padding: 2px 0;
}
.dnd-library-wrapper .editor-item .sizes a.size-M span {
  margin: 2px;
  padding: 3px 0;
}
.dnd-library-wrapper .editor-item .sizes a.size-L span {
  margin: 1px;
  padding: 4px 0;
}
.dnd-library-wrapper .editor-item.dnd-child-inserted {
  background-color: #ccc;
}
.dnd-editor-preview h2.title {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 0.5em;
}
.dnd-editor-preview .media-preview {
  float: left;
  width: 125px;
}

.dnd-editor-preview .media-meta {
  float: left;
  width: 225px;
  margin-right: 20px;
}

.dnd-editor-preview .attribution {
  font-size: .875em;
  margin-bottom: .5em;
}

File

dnd/modules/dnd_test/dnd_test.css
View source 
  1. /* This is bad stuff! */

  2. .body-field-wrapper {

  3.   float: left;

  4.   width: 100%;

  5. }

  6. .dnd-library-wrapper {

  7.   float: left;

  8.   width: 250px;

  9.   margin-right: 10px;

  10.   margin-top: 1em;

  11. }

  12. .dnd-library-wrapper .header {

  13.   padding: 1px 4px;

  14. }

  15. .dnd-library-wrapper .header h3 {

  16.   font-size: 12px;

  17.   font-weight: bold;

  18. }

  19. .dnd-library-wrapper .footer {

  20.   float: left;

  21.   width: 100%;

  22.   border-top: 1px solid #aaa;

  23.   background-color: #ccc;

  24. }

  25. .dnd-library-wrapper .pager {

  26.   font-weight: bold;

  27.   padding: 0 5px;

  28. }

  29. #edit-body-wrapper {

  30.   float: left;

  31.   width: 600px;

  32. }

  33. .dnd-library-wrapper .library {

  34.   border: 1px solid #aaa;

  35.   float: left;

  36. }

  37. .dnd-library-wrapper .editor-item {

  38.   float: left;

  39.   width: 250px;

  40.   border-bottom: 2px solid #fff;

  41.   background-color: #ddd;

  42. }

  43. .dnd-library-wrapper .editor-item > div {

  44.   padding: 3px;

  45. }

  46. .dnd-library-wrapper div.image {

  47.   float: left;

  48.   width: 32px;

  49.   padding-left: 4px;

  50.   line-height: 1;

  51. }

  52. .dnd-library-wrapper div.meta {

  53.   float: left;

  54.   width: 149px;

  55.   line-height: 1.2;

  56. }

  57. .dnd-library-wrapper .title {

  58.   font-weight: bold;

  59.   font-size: 12px;

  60. }

  61. .dnd-library-wrapper .date, .dnd-library-wrapper .author {

  62.   font-size: 10px;

  63.   float: left;

  64.   margin-top: .5em;

  65. }

  66. .dnd-library-wrapper .author {

  67.   margin-right: 1em;

  68. }

  69. .dnd-library-wrapper .editor-item .sizes {

  70.   float: left;

  71.   width: 50px;

  72.   margin-top: 14px;

  73.   line-height: 1;

  74. }

  75. .dnd-library-wrapper .editor-item .sizes ul {

  76.   list-style-type: none;

  77.   margin: 0;

  78. }

  79. .dnd-library-wrapper .editor-item .sizes ul li {

  80.   background: none;

  81.   list-style-type: none;

  82.   display: inline;

  83.   padding: 0;

  84.   margin: 0 0 0 2px;

  85. }

  86. .dnd-library-wrapper .editor-item .sizes a {

  87.   float: left;

  88.   display: block;

  89.   font-size: 9px;

  90.   line-height: 9px;

  91.   margin-bottom: 2px;

  92.   width: 19px;

  93.   text-align: center;

  94. }

  95. .dnd-library-wrapper .editor-item .sizes a:link,

  96. .dnd-library-wrapper .editor-item .sizes a:visited,

  97. .dnd-library-wrapper .editor-item .sizes a:active {

  98.   border: 1px solid #888;

  99.   color: #fff;

  100.   cursor: move;

  101.   text-align: center;

  102. }

  103. .dnd-library-wrapper .editor-item .sizes a:hover,

  104. .dnd-library-wrapper .editor-item .sizes a.dnd-inserted:link,

  105. .dnd-library-wrapper .editor-item .sizes a.dnd-inserted:visited,

  106. .dnd-library-wrapper .editor-item .sizes a.dnd-inserted:active {

  107.   border: 1px solid #555;

  108.   color: #fff;

  109.   text-decoration: none;

  110. }

  111. .dnd-library-wrapper .editor-item .sizes a:hover span,

  112. .dnd-library-wrapper .editor-item .sizes a.dnd-inserted span {

  113.   background-color: #555;

  114. }

  115. 

  116. .dnd-library-wrapper .editor-item .sizes a span {

  117.   display: block;

  118.   background-color: #888;

  119. }

  120. .dnd-library-wrapper .editor-item .sizes a.size-S span {

  121.   margin: 3px;

  122.   padding: 2px 0;

  123. }

  124. .dnd-library-wrapper .editor-item .sizes a.size-M span {

  125.   margin: 2px;

  126.   padding: 3px 0;

  127. }

  128. .dnd-library-wrapper .editor-item .sizes a.size-L span {

  129.   margin: 1px;

  130.   padding: 4px 0;

  131. }

  132. .dnd-library-wrapper .editor-item.dnd-child-inserted {

  133.   background-color: #ccc;

  134. }

  135. .dnd-editor-preview h2.title {

  136.   font-size: 1em;

  137.   font-weight: bold;

  138.   margin-bottom: 0.5em;

  139. }

  140. .dnd-editor-preview .media-preview {

  141.   float: left;

  142.   width: 125px;

  143. }

  144. 

  145. .dnd-editor-preview .media-meta {

  146.   float: left;

  147.   width: 225px;

  148.   margin-right: 20px;

  149. }

  150. 

  151. .dnd-editor-preview .attribution {

  152.   font-size: .875em;

  153.   margin-bottom: .5em;

  154. }