a few changes in the popup look based on #38
This commit is contained in:
parent
277a180cd0
commit
0646f6bd65
|
@ -266,7 +266,7 @@
|
|||
"description": "Text displayed when no styles are installed for the current site"
|
||||
},
|
||||
"openManage": {
|
||||
"message": "Manage installed styles",
|
||||
"message": "Manage",
|
||||
"description": "Link to open the manage page."
|
||||
},
|
||||
"openOptionsManage": {
|
||||
|
@ -274,7 +274,7 @@
|
|||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsPopup": {
|
||||
"message": "Options UI",
|
||||
"message": "Options",
|
||||
"description": "Go to Options UI"
|
||||
},
|
||||
"openOptionsShortcuts": {
|
||||
|
|
67
popup.css
67
popup.css
|
@ -1,13 +1,13 @@
|
|||
body {
|
||||
width: 200px;
|
||||
font-size: 13px;
|
||||
width: 240px;
|
||||
font-size: 12px;
|
||||
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
|
||||
}
|
||||
input[type=checkbox] {
|
||||
outline: none;
|
||||
}
|
||||
#disable-all-wrapper {
|
||||
padding: 0.2em 0 0.7em;
|
||||
padding: 0.7em 0 0.7em;
|
||||
}
|
||||
#disable-all-wrapper .main-controls {
|
||||
padding-top: 0.1em;
|
||||
|
@ -27,9 +27,6 @@ input[type=checkbox] {
|
|||
margin-bottom: 2px;
|
||||
display: block;
|
||||
}
|
||||
.actions {
|
||||
font-size: x-small;
|
||||
}
|
||||
a, a:visited {
|
||||
color: black;
|
||||
}
|
||||
|
@ -49,14 +46,11 @@ a, a:visited {
|
|||
|
||||
.entry {
|
||||
padding: 0.5em 0;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
.entry:first-child {
|
||||
padding-top: 0;
|
||||
}
|
||||
.entry:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
body > DIV {
|
||||
border-bottom: 1px solid black;
|
||||
padding-bottom: 2px;
|
||||
|
@ -68,7 +62,7 @@ body.blocked > DIV {
|
|||
#installed {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
#installed.disabled .style-name {
|
||||
#installed .disabled .style-name {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
#installed .actions a {
|
||||
|
@ -141,3 +135,54 @@ body:not(.blocked) #unavailable {
|
|||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* action buttons */
|
||||
#popup-options {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
padding: 1.2em 0;
|
||||
}
|
||||
#popup-options button {
|
||||
margin: 0 2px;
|
||||
width: 33%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* margins */
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
body>div:not(#installed) {
|
||||
margin-left:0.75em;
|
||||
margin-right:0.75em;
|
||||
}
|
||||
#unavailable {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
#installed .entry {
|
||||
}
|
||||
/* entries */
|
||||
#installed .entry {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 5px 0.75em;
|
||||
}
|
||||
#installed .entry:nth-child(even) {
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
#installed .main-controls {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: calc(100% - 20px);
|
||||
align-items: center;
|
||||
}
|
||||
#installed .main-controls label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
|
18
popup.html
18
popup.html
|
@ -45,21 +45,21 @@
|
|||
</div>
|
||||
<div class="left-gutter"></div>
|
||||
<div class="main-controls">
|
||||
<div id="manage-styles">
|
||||
<button id="popup-manage-button" i18n-text="openManage"></button>
|
||||
</div>
|
||||
<div id="popup-options">
|
||||
<button id="popup-options-button" i18n-text="openOptionsPopup">
|
||||
<button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
|
||||
</div>
|
||||
<div id="find-styles">
|
||||
<a id="find-styles-link" href="#" i18n-text="findStylesForSite"></a>
|
||||
</div>
|
||||
<div id="write-style"><span id="write-style-for" i18n-text="writeStyleFor"><br></span>
|
||||
<div id="write-style">
|
||||
<span id="write-style-for" i18n-text="writeStyleFor"><br></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div id="popup-options">
|
||||
<button id="popup-manage-button" i18n-text="openManage"></button>
|
||||
<button id="popup-options-button" i18n-text="openOptionsPopup">
|
||||
<button id="popup-shortcuts-button" i18n-text="openShortcutsPopup"></button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
Loading…
Reference in New Issue
Block a user