Updated toolbar popup design

This commit is contained in:
sienori 2017-12-23 03:17:36 +09:00
parent 07dfc32d14
commit 77f7545772
2 changed files with 116 additions and 49 deletions

View file

@ -1,66 +1,130 @@
body { :root {
font-family: 'Segoe UI', 'San Francisco', 'Ubuntu', 'Fira Sans', 'Roboto', 'Arial', 'Helvetica', sans-serif !important; --main-text: #0c0c0d;
text-align: left; --sub-text: #737373;
font-size: 13px; --line: #ededf0;
height: auto; --button: #d7d7db;
width: 300px; --highlight: #5595ff;
padding: 5px 20px 0px; --main-bg: #ffffff;
overflow: hidden;
} }
#main { body {
margin: 10px 0px; font-family: 'Segoe UI', 'San Francisco', 'Ubuntu', 'Fira Sans', 'Roboto', 'Arial', 'Helvetica', sans-serif;
text-align: left;
font-size: 13px;
width: 350px;
overflow: hidden;
background-color: var(--main-bg);
padding: 10px;
margin: 0px;
display: flex;
flex-direction: column;
}
#main {}
textarea {
font: inherit;
resize: none;
overflow: auto;
max-height: 240px;
height: 37px;
/* 100% - padding*2 - border*2 */
width: calc(100% - 22px);
padding: 10px;
border: solid 1px var(--button);
border-radius: 2px;
transition: border-color 100ms ease-out;
}
textarea:hover,
textarea:focus {
border-color: var(--highlight)
} }
hr { hr {
border: none; border: none;
border-top: solid 1px #bbb; border-top: solid 1px var(--button);
height: 1px; height: 1px;
color: #FFFFFF; margin: 10px 0px;
margin: 0 6 0 6;
} }
p {} #target {
max-height: 240px;
min-height: 20px;
overflow-y: auto;
word-wrap: break-word;
padding: 0px 5px 20px;
}
textarea { #footer {
font: inherit; display: flex;
text-align: left; flex-direction: row;
resize: none; align-items: center;
overflow: auto; justify-content: space-between;
max-height: 250px; }
height: 30px;
width: 277px; #link {
padding-top: 10px; flex-shrink: 0;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
} }
#link a { #link a {
font-style: normal; font-style: normal;
text-decoration: none; text-decoration: none;
color: #4268da; color: var(--highlight);
} }
#target { #link a:hover {
max-height: 250px; text-decoration: underline;
min-height: 20px;
overflow-y: auto;
word-wrap: break-word;
} }
#link {
margin-top: 3px; select {
-moz-appearance: none;
text-overflow: ellipsis;
border: var(--button) solid 1px;
border-radius: 2px;
padding: 3px 5px;
padding-right: 20px;
width: 100%;
transition: border-color 100ms ease-out;
} }
#langList { select:hover {
font: inherit; border: var(--highlight) solid 1px;
text-align: left; }
float: right;
margin-bottom: 20px; .selectWrap {
max-width: 140px; position: relative;
margin-left: 5px;
}
.selectWrap:before {
pointer-events: none;
content: "";
z-index: 1;
position: absolute;
top: 40%;
right: 7px;
width: 5px;
height: 5px;
transform: rotate(45deg);
border-bottom: 2px solid var(--sub-text);
border-right: 2px solid var(--sub-text);
transition: border-color 100ms ease-out;
}
.selectWrap:hover::before {
border-bottom: 2px solid var(--highlight);
border-right: 2px solid var(--highlight);
} }
::-moz-selection { ::-moz-selection {
background: #ebebeb; background: var(--line);
} }

View file

@ -9,16 +9,19 @@
<body> <body>
<div id=main> <div id=main>
<form>
<textarea id=textarea spellcheck=false contenteditable=true></textarea> <textarea id=textarea spellcheck=false contenteditable=true></textarea>
</form>
<hr> <hr>
<div id=target> <div id=target>
<p></p> <p></p>
</div> </div>
</div> </div>
<select id="langList"></select> <div id=footer>
<div id=link></div> <div id=link></div>
<div class=selectWrap>
<select id="langList"></select>
</div>
</div>
<script src="../Settings.js"></script> <script src="../Settings.js"></script>
<script src="popup.js"></script> <script src="popup.js"></script>