diff options
Diffstat (limited to 'skins/standard')
-rw-r--r-- | skins/standard/attachment.css | 266 | ||||
-rw-r--r-- | skins/standard/describecomponents.css | 2 |
2 files changed, 244 insertions, 24 deletions
diff --git a/skins/standard/attachment.css b/skins/standard/attachment.css index 401bce92b..cec2d49e1 100644 --- a/skins/standard/attachment.css +++ b/skins/standard/attachment.css @@ -15,11 +15,12 @@ * Erik Stambaugh <erik@dasbistro.com> * Marc Schumann <wurblzap@gmail.com> * Guy Pyrzak <guy.pyrzak@gmail.com> + * Kohei Yoshino <kohei.yoshino@gmail.com> */ table.attachment_entry th { text-align: right; - vertical-align: baseline; + vertical-align: top; white-space: nowrap; } @@ -38,14 +39,6 @@ table#attachment_flags td { font-size: small; } -#data-error { - margin: 4px 0 0; -} - -#data-error:empty { - margin: 0; -} - /* Rules used to view patches in diff mode. */ .file_head { @@ -173,7 +166,7 @@ table.attachment_info td { } #attachment_info.edit #attachment_information_read_only { - display: none; + display: none; } #attachment_info.edit #attachment_view_window { @@ -187,14 +180,14 @@ table.attachment_info td { #attachment_info.edit #attachment_information_edit input.text, #attachment_info.edit #attachment_information_edit textarea { - width: 90%; + width: 90%; } #attachment_isobsolete { padding-right: 1em; } -#attachment_information_edit { +#attachment_information_edit { float: left; } @@ -207,13 +200,13 @@ textarea.bz_private { } #update { - clear: both; - display: block; + clear: both; + display: block; } div#update_container { - clear: both; - padding: 1.5em 0; + clear: both; + padding: 1.5em 0; } #attachment_flags { @@ -226,7 +219,7 @@ div#update_container { } #editFrame, #viewDiffFrame, #viewFrame { - height: 400px; + height: 400px; width: 95%; margin-left: 2%; overflow: auto; @@ -247,12 +240,241 @@ div#update_container { } #hidden_obsolete_message { - text-align: left; - width: 75%; - margin: 0 auto; + text-align: left; + width: 75%; + margin: 0 auto; font-weight: bold } -#description { - resize: vertical; +/** + * AttachmentForm + */ + +#att-selector [hidden] { + display: none; +} + +#att-selector label[role="button"] { + border-bottom: 1px solid #277AC1; + color: #277AC1; + cursor: pointer; + pointer-events: auto; +} + +#att-selector .icon::before { + line-height: 100%; + font-family: "Material Icons"; + font-style: normal; +} + +#att-dropbox { + box-sizing: border-box; + border: 1px solid #999; + border-radius: 4px; + margin: 4px; + width: 560px; + background-color: #FFF; + -moz-user-select: none; + -webkit-user-select: none; + user-select: none; + transition: all .2s; +} + +#att-dropbox.invalid { + border-color: #F33; + background-color: #FEE; + box-shadow: 0 0 4px #F33; +} + +#att-dropbox.dragover { + border-color: #277AC1; + background-color: #DCE9F5; + box-shadow: 0 0 4px #277AC1; +} + +#att-dropbox.invalid header, +#att-dropbox.invalid #att-textarea, +#att-dropbox.dragover header, +#att-dropbox.dragover #att-textarea { + background-color: transparent; +} + +#att-dropbox header { + display: flex; + align-items: center; + justify-content: center; + border-bottom: 1px solid #C0C0C0; + border-radius: 4px 4px 0 0; + padding: 8px; + font-size: 14px; + font-style: italic; + background-color: #F3F3F3; + pointer-events: none; + transition: all .2s; +} + +#att-dropbox header .icon { + display: inline-block; + margin: 2px 8px 0 0; + color: #999; + transition: all .2s; +} + +#att-dropbox.invalid header .icon { + color: #F33; +} + +#att-dropbox.dragover header .icon { + color: #277AC1; +} + +#att-dropbox header .icon::before { + font-size: 24px; + content: "\E2C3"; +} + +#att-dropbox > div { + position: relative; + min-height: 160px; +} + +#att-data { + display: none; + position: absolute; + bottom: 0; + left: 0; + z-index: -1; + outline: 0; + border: 0; + padding: 0; + width: 100%; + height: 100%; + box-shadow: none; + resize: none; +} + +#att-data:invalid { + display: block; /* To display the validation message */ +} + +#att-textarea { + margin: 0; + border: 0; + border-radius: 0 0 4px 4px; + padding: 8px; + width: 100%; + height: 160px; + min-height: 160px; + font: 13px/1.2 "Droid Sans Mono", Menlo, Monaco, "Courier New", Courier, monospace; + white-space: pre; + resize: vertical; + transition: all .2s; +} + +#att-preview { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: 0 0 4px 4px; + padding: 8px; + pointer-events: none; +} + +#att-preview figure { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + right: 0; + overflow: hidden; + margin: 0; + width: 100%; + height: 100%; + background-color: #EEE; +} + +#att-preview [itemprop="name"] { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + right: 0; + overflow: hidden; + box-sizing: border-box; + padding: 40px; + width: 100%; + height: 100%; + font-size: 14px; + text-align: center; + text-shadow: 0 0 4px #000; + color: #FFF; + background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .4)); +} + +#att-preview [itemprop="text"] { + position: absolute; + top: 0; + right: 0; + overflow: hidden; + box-sizing: border-box; + margin: 0; + padding: 8px; + width: 100%; + height: 100%; + font: 13px/1.2 "Droid Sans Mono", Menlo, Monaco, "Courier New", Courier, monospace; + color: #333; +} + +#att-preview [itemprop="image"] { + max-width: 100%; +} + +#att-preview [itemprop="text"]:empty, +#att-preview [itemprop="text"]:not(:empty) ~ .icon, +#att-preview [itemprop="image"][src=""], +#att-preview [itemprop="image"]:not([src=""]) ~ .icon { + display: none; +} + +#att-preview [itemprop="image"] ~ .icon::before { + font-size: 100px; + color: #999; + content: "\E24D"; +} + +#att-remove-button { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 4px; + right: 4px; + padding: 4px; + pointer-events: auto; +} + +#att-remove-button .icon::before { + font-size: 16px; + color: #666; + content: "\E5C9"; +} + +#att-error-message { + box-sizing: border-box; + margin: 8px 4px 0; + padding: 0 8px; + width: 560px; + text-align: center; + font-style: italic; +} + +#att-error-message:empty { + margin: 0; } diff --git a/skins/standard/describecomponents.css b/skins/standard/describecomponents.css index cf5c1a98d..b0601541b 100644 --- a/skins/standard/describecomponents.css +++ b/skins/standard/describecomponents.css @@ -46,8 +46,6 @@ } .component.highlight { - margin: 0; - padding: 1em 0; background-color: lightgreen; } |