mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
179 lines
3.2 KiB
CSS
179 lines
3.2 KiB
CSS
|
|
/* OSM Notes Layer */
|
|
.layer-notes {
|
|
pointer-events: none;
|
|
}
|
|
.layer-notes .note * {
|
|
pointer-events: none;
|
|
}
|
|
.layer-notes .note .note-fill {
|
|
pointer-events: visible;
|
|
cursor: pointer; /* Opera */
|
|
cursor: url(img/cursor-select-point.png), pointer; /* FF */
|
|
}
|
|
|
|
.note-header-icon .note-shadow,
|
|
.layer-notes .note .note-shadow {
|
|
color: #000;
|
|
}
|
|
.note-header-icon .note-fill,
|
|
.layer-notes .note .note-fill {
|
|
color: #ff3300;
|
|
stroke: #333;
|
|
}
|
|
.note-header-icon.new .note-fill,
|
|
.layer-notes .note.new .note-fill {
|
|
color: #00bcdd;
|
|
stroke: #333;
|
|
}
|
|
.note-header-icon.closed .note-fill,
|
|
.layer-notes .note.closed .note-fill {
|
|
color: #55dd00;
|
|
stroke: #333;
|
|
}
|
|
.layer-notes .note.hovered .note-fill {
|
|
color: #eebb00;
|
|
stroke: #333;
|
|
}
|
|
.layer-notes .note.selected .note-fill {
|
|
color: #ffee00;
|
|
stroke: #333;
|
|
}
|
|
|
|
/* slight adjustments to preset icon for note icons */
|
|
.note-header-icon .preset-icon-28 {
|
|
top: 18px;
|
|
}
|
|
|
|
.note-header-icon .note-icon-annotation {
|
|
position: absolute;
|
|
top: 21px;
|
|
left: 21px;
|
|
margin: auto;
|
|
}
|
|
|
|
.note-header-icon .note-icon-annotation .icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
|
|
/* OSM Note UI */
|
|
.note-header {
|
|
background-color: #f6f6f6;
|
|
border-radius: 5px;
|
|
border: 1px solid #ccc;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.note-header-icon {
|
|
background-color: #fff;
|
|
padding: 10px;
|
|
flex: 0 0 62px;
|
|
position: relative;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-right: 1px solid #ccc;
|
|
border-radius: 5px 0 0 5px;
|
|
}
|
|
[dir='rtl'] .note-header-icon {
|
|
border-right: unset;
|
|
border-left: 1px solid #ccc;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
|
|
.note-header-icon .icon-wrap {
|
|
position: absolute;
|
|
top: 0px;
|
|
}
|
|
|
|
.note-header-label {
|
|
background-color: #f6f6f6;
|
|
padding: 0 15px;
|
|
flex: 1 1 100%;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
border-radius: 0 5px 5px 0;
|
|
}
|
|
[dir='rtl'] .note-header-label {
|
|
border-radius: 5px 0 0 5px;
|
|
}
|
|
|
|
.comments-container {
|
|
background: #ececec;
|
|
padding: 1px 10px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.comment {
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
border: 1px solid #ccc;
|
|
margin: 10px auto;
|
|
display: flex;
|
|
flex-flow: row nowrap;
|
|
}
|
|
.comment-avatar {
|
|
padding: 10px;
|
|
flex: 0 0 62px;
|
|
}
|
|
.comment-avatar .icon.comment-avatar-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
object-fit: cover;
|
|
border: 1px solid #ccc;
|
|
border-radius: 20px;
|
|
}
|
|
.comment-main {
|
|
padding: 10px 10px 10px 0;
|
|
flex: 1 1 100%;
|
|
flex-flow: column nowrap;
|
|
overflow: hidden;
|
|
overflow-wrap: break-word;
|
|
}
|
|
[dir='rtl'] .comment-main {
|
|
padding: 10px 0 10px 10px;
|
|
}
|
|
|
|
.comment-metadata {
|
|
flex-flow: row nowrap;
|
|
justify-content: space-between;
|
|
}
|
|
.comment-author {
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
.comment-date {
|
|
color: #aaa;
|
|
}
|
|
.comment-text {
|
|
color: #333;
|
|
margin-top: 10px;
|
|
overflow-y: auto;
|
|
max-height: 250px;
|
|
}
|
|
.comment-text::-webkit-scrollbar {
|
|
border-left: none;
|
|
}
|
|
|
|
.note-save {
|
|
padding: 10px;
|
|
}
|
|
|
|
.note-save #new-comment-input {
|
|
width: 100%;
|
|
height: 100px;
|
|
max-height: 300px;
|
|
min-height: 100px;
|
|
}
|
|
|
|
.note-save .detail-section {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.note-report {
|
|
float: right;
|
|
}
|