Refactor CSS
* Moving CSS to dedicated files * Refactoring common CSS and adding variablespull/613/head
Elaeagnifolia
GitHub
parent
39e44da293
commit
b5490d0198
|
|
@ -0,0 +1,289 @@
|
|||
/** CSS VARIABLES **/
|
||||
:root {
|
||||
--body-max-width: 700px;
|
||||
--popup-width: 600px;
|
||||
|
||||
--base-color-primary: #f5fbff;
|
||||
--base-color-primary-dark: #e8f0fe;
|
||||
--base-color-secondary: #fff;
|
||||
--base-color-dark: #2b2a33;
|
||||
--base-color-outline-light: #ccc;
|
||||
--base-color-outline-dark: #222;
|
||||
|
||||
--primary-color: #005799;
|
||||
--secondary-color: #ceeaff;
|
||||
--accent-color: #3174f1;
|
||||
--accent-color-dark: #205ed0;
|
||||
--notification-color: #f8f3d6;
|
||||
--disabled-color: #3f3f3f;
|
||||
|
||||
--text-color-primary: #000;
|
||||
--text-color-white: #fff;
|
||||
--text-link-color: #005799;
|
||||
|
||||
--header-padding: .5em 1em;
|
||||
--default-icon-size: 18px;
|
||||
}
|
||||
|
||||
/* ELEMENTS */
|
||||
body {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: var(--base-color-dark);
|
||||
font-family: Helvetica, Sans-Serif;
|
||||
font-size: .9rem;
|
||||
color: var(--text-color-primary);
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-thickness: 1px;
|
||||
color: var(--text-link-color);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--text-link-color);
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border: none;
|
||||
color: var(--primary-color);
|
||||
background-color: var(--primary-color);
|
||||
margin: 1rem 0 .5rem 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.3rem;
|
||||
padding: .5em 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
padding: .5em 0 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* CONTAINERS AND LAYOUT */
|
||||
.two-col {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1em;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.two-col>div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.two-col>div {
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
#header {
|
||||
box-sizing: border-box;
|
||||
padding: var(--header-padding);
|
||||
width: 100%;
|
||||
|
||||
line-height: 1.5em;
|
||||
|
||||
background-color: var(--primary-color);
|
||||
color: var(--text-color-white);
|
||||
}
|
||||
|
||||
#links {
|
||||
display: flex;
|
||||
column-gap: 1.5em;
|
||||
flex-wrap: wrap;
|
||||
padding: var(--header-padding);
|
||||
|
||||
white-space: nowrap;
|
||||
|
||||
background-color: var(--secondary-color);
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
#content {
|
||||
background-color: var(--base-color-primary);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
#footer {
|
||||
padding-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
line-height: 1.6rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
padding: 5px 0px;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* NOTIFICATIONS */
|
||||
#notificationBannerContainer {
|
||||
background-color: var(--notification-color);
|
||||
font-size: .9em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
#notificationBannerContainer span {
|
||||
padding: .5rem 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#notificationBannerContainer span[style]~span[style] {
|
||||
border-top: 1px solid var(--primary-color);
|
||||
}
|
||||
|
||||
/* SETTINGS SECTION */
|
||||
fieldset {
|
||||
background-color: var(--base-color-secondary);
|
||||
border: 1px solid var(--base-color-outline-light);
|
||||
border-radius: 5px;
|
||||
padding: 0 12px 12px 0;
|
||||
margin: 0;
|
||||
margin-bottom: .5em;
|
||||
font-size: .9em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
fieldset+fieldset {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
fieldset>div {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
fieldset>span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
fieldset>div+span {
|
||||
margin: .8rem 0 0 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
input,
|
||||
label,
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.options {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: .5rem;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.options label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.settingToggle {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.settingToggle img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.radioGroup.horizontal {
|
||||
flex-direction: row;
|
||||
line-height: 1.5rem;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
.radioGroup.vertical {
|
||||
flex-direction: column;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
/* BREEZEWIKI */
|
||||
#breeezwikiLearnMore {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#breezewikiHost {
|
||||
display: none;
|
||||
padding: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
#breezewikiHost label {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#breezewikiHost button {
|
||||
background: var(--accent-color);
|
||||
border: none;
|
||||
color: var(--text-color-white);
|
||||
border-radius: 5px;
|
||||
padding: .3em;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
#breezewikiHost button:hover {
|
||||
cursor: pointer;
|
||||
background: var(--accent-color-dark);
|
||||
}
|
||||
|
||||
#breezewikiHost label+label {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#breezewikiCustomHost {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#breezewikiCustomHostStatus {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
/* CONTROL CLASSES */
|
||||
.visuallyHidden {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/* ELEMENTS */
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 1em 1em 1em -.5em;
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
#content {
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
/* ELEMENTS */
|
||||
html {
|
||||
max-width: var(--popup-width);
|
||||
}
|
||||
|
||||
body {
|
||||
width: max-content;
|
||||
max-width: min(100%, var(--popup-width));
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
fieldset>span {
|
||||
margin: .8rem 0 .4rem;
|
||||
}
|
||||
|
||||
legend {
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
#header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: .3em 1em;
|
||||
}
|
||||
|
||||
#header div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
/* POWER TOGGLE */
|
||||
#power {
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
vertical-align: middle;
|
||||
padding-top: .2em;
|
||||
}
|
||||
|
||||
#power>label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
background-color: var(--base-color-secondary);
|
||||
border-radius: 20px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#power>label:hover {
|
||||
outline: 2px solid var(--accent-color);
|
||||
}
|
||||
|
||||
#power>input {
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
#power img {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
#content {
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
/* SETTINGS */
|
||||
.settingToggle {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#breezewikiCustomHostStatus {
|
||||
display: block;
|
||||
padding-top: .4em;
|
||||
}
|
||||
|
||||
/* SETTINGS BUTTON */
|
||||
#openSettingsButton {
|
||||
border: 0;
|
||||
background: var(--base-color-secondary);
|
||||
color: var(--accent-color);
|
||||
border-radius: 5px;
|
||||
padding: .2em .4em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#openSettingsButton:hover {
|
||||
cursor: pointer;
|
||||
outline: 2px solid var(--accent-color);
|
||||
}
|
||||
|
|
@ -0,0 +1,291 @@
|
|||
/* ELEMENTS */
|
||||
legend {
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
#version {
|
||||
float: right;
|
||||
font-size: 1.2rem;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
#firstInstallInfo {
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
#content {
|
||||
padding: 1rem .75rem;
|
||||
}
|
||||
|
||||
.site-container {
|
||||
background: var(--base-color-secondary);
|
||||
}
|
||||
|
||||
/* NOTIFICATIONS */
|
||||
#notificationBannerReviewLinks {
|
||||
display: flex;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
/* SETTINGS SECTION */
|
||||
#searchFilteringSettings>div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#legend div,
|
||||
#legend span {
|
||||
padding: 0 0 0 8px;
|
||||
}
|
||||
|
||||
#legend div {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
/* WIKI FILTERS */
|
||||
#wikiFiltersContainer {
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#wikiFiltersContainer>div {
|
||||
display: grid;
|
||||
gap: 0.5em;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin: 1em auto;
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
#wikiFiltersContainer>div>div {
|
||||
text-align: right;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
@media (max-width: 35em) {
|
||||
#wikiFiltersContainer>div {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#wikiFiltersContainer>div>div {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/** TOGGLE OPTIONS **/
|
||||
.toggles {
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggles img {
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
|
||||
.toggles a img {
|
||||
padding-right: .5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.toggles label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toggles input {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toggles>div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 .5rem;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.toggles .inputsContainer {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.togglesHeader {
|
||||
border-bottom: 1px solid var(--base-color-outline);
|
||||
background-color: var(--base-color-primary);
|
||||
}
|
||||
|
||||
.togglesHeader span {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
margin-right: 1em;
|
||||
padding: .75em 0;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.toggles:not(.togglesHeader) span {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
#toggles>div:hover {
|
||||
background-color: var(--base-color-primary-dark);
|
||||
}
|
||||
|
||||
#togglesKeys button {
|
||||
all: unset;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: var(--default-icon-size);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button#setAllDisabled {
|
||||
background-image: url('../../images/toggle-disabled.png');
|
||||
}
|
||||
|
||||
button#setAllAlert {
|
||||
background-image: url('../../images/toggle-alert.png');
|
||||
}
|
||||
|
||||
button#setAllRedirect {
|
||||
background-image: url('../../images/toggle-redirect.png');
|
||||
}
|
||||
|
||||
button#setAllSearchEngineDisabled {
|
||||
background-image: url('../../images/toggle-disabled.png');
|
||||
}
|
||||
|
||||
button#setAllSearchEngineReplace {
|
||||
background-image: url('../../images/toggle-replace.png');
|
||||
}
|
||||
|
||||
button#setAllSearchEngineHide {
|
||||
background-image: url('../../images/toggle-hide.png');
|
||||
}
|
||||
|
||||
#togglesKeys button:focus {
|
||||
outline: revert;
|
||||
}
|
||||
|
||||
#togglesDefaults input[type=radio] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
#togglesDefaults input+label {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('../../images/star-off.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: var(--default-icon-size);
|
||||
}
|
||||
|
||||
#togglesDefaults input:checked+label {
|
||||
background-image: url('../../images/star-on.png');
|
||||
}
|
||||
|
||||
#togglesDefaults label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#togglesKeys .inputsContainer button:hover::after,
|
||||
#togglesDefaults .inputsContainer label:hover::after {
|
||||
content: attr(data-title);
|
||||
padding: 5px;
|
||||
width: fit-content;
|
||||
border: 1px solid var(--base-color-outline-dark);
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
background: var(--base-color-dark);
|
||||
z-index: 999999;
|
||||
transform: translateX(calc(-100% - 5px));
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
#togglesColumnLabels {
|
||||
background-color: var(--base-color-secondary);
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
#togglesColumnLabels>div>div {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#togglesColumnLabels>div>div>div {
|
||||
flex: 1 1 0;
|
||||
font-weight: 600;
|
||||
font-size: .9em;
|
||||
white-space: break-spaces;
|
||||
line-height: initial;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inputsContainer>label,
|
||||
.inputsContainer>div {
|
||||
width: 20px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.togglesHeader .inputsContainer>div:nth-child(4),
|
||||
.toggles>div>div>label:nth-child(4) {
|
||||
padding-left: 5px;
|
||||
border-left: 1px solid var(--base-color-outline-light);
|
||||
}
|
||||
|
||||
.inputsContainer label:nth-child(1) input,
|
||||
.inputsContainer label:nth-child(4) input {
|
||||
accent-color: var(--disabled-color);
|
||||
}
|
||||
|
||||
/** CUSTOM SEARCH ENGINE **/
|
||||
#customSearchEnginesContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
#customSearchEnginesList>div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.5em .5em;
|
||||
min-height: 20px;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
#customSearchEnginesList>div:hover {
|
||||
background-color: #e8f0fe;
|
||||
}
|
||||
|
||||
.customSearchEngineHostname {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#customSearchEnginesAdd {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
#customSearchEnginesAdd input {
|
||||
width: 25em;
|
||||
}
|
||||
|
|
@ -6,83 +6,8 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="../../images/logo.png" />
|
||||
<title>Indie Wiki Buddy settings</title>
|
||||
<style>
|
||||
/* ELEMENTS */
|
||||
body {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #2b2a33;
|
||||
font-family: Helvetica, Sans-Serif;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-thickness: 1px;
|
||||
color: #005799;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #005799;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border: none;
|
||||
color: #005799;
|
||||
background-color: #005799;
|
||||
margin: .5em 0px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.3rem;
|
||||
padding: .5em 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
padding: .5em 0 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 1em 1em 1em -.5em;
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
#header {
|
||||
line-height: 1.5em;
|
||||
padding: .5em 1em;
|
||||
box-sizing: border-box;
|
||||
background-color: #005799;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#links {
|
||||
background-color: #e5f4ff;
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
#content {
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 1.5em;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../css/common.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../css/guide.css" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -5,265 +5,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta charset="UTF-8" />
|
||||
<title>Indie Wiki Buddy</title>
|
||||
<style>
|
||||
/* ELEMENTS */
|
||||
html {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
body {
|
||||
width: max-content;
|
||||
max-width: min(100%, 600px);
|
||||
background-color: #005799;
|
||||
margin: 0px;
|
||||
font-family: Helvetica, Sans-Serif;
|
||||
font-size: .9em;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-thickness: 1px;
|
||||
color: #005799;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #005799;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.3rem;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border: none;
|
||||
color: #005799;
|
||||
background-color: #005799;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
background-color: #f5fbff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 0 12px 12px 0;
|
||||
margin: 0;
|
||||
margin-bottom: .5em;
|
||||
font-size: .9em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
fieldset>div {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
fieldset>span {
|
||||
margin: .8rem 0 .4rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: 600;
|
||||
margin-bottom: .6em;
|
||||
}
|
||||
|
||||
input,
|
||||
label,
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* GENERIC CONTROL CLASSES */
|
||||
.text-sm {
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
#header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
line-height: 1.5em;
|
||||
padding: .3em 1em;
|
||||
box-sizing: border-box;
|
||||
background-color: #005799;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#header div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
/* NOTIFICATION BANNER */
|
||||
#notificationBannerContainer {
|
||||
background-color: #f8f3d6;
|
||||
font-size: .9em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
#notificationBannerContainer span {
|
||||
padding: .5rem 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#notificationBannerContainer span[style]~span[style] {
|
||||
border-top: 1px solid #005799;
|
||||
}
|
||||
|
||||
/* POWER TOGGLE */
|
||||
#power {
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
vertical-align: middle;
|
||||
padding-top: .2em;
|
||||
}
|
||||
|
||||
#power>label {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#power>label:hover {
|
||||
outline: 2px solid #3174f1;
|
||||
}
|
||||
|
||||
#power>input {
|
||||
height: 0;
|
||||
width: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
#power img {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
#content {
|
||||
padding: .5em 1em;
|
||||
background-color: #e5f4ff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 1.5em;
|
||||
background-color: #ceeaff;
|
||||
padding: .5rem 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* SETTINGS */
|
||||
.options {
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10px;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.options label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.settingToggle {
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.radioGroup.horizontal {
|
||||
flex-direction: row;
|
||||
line-height: 1.5rem;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
.radioGroup.vertical {
|
||||
flex-direction: column;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
#breeezwikiLearnMore {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#breezewikiHost {
|
||||
display: none;
|
||||
padding: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
#breezewikiHost label {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#breezewikiHost button {
|
||||
background: #3174f1;
|
||||
border: 1px solid #333333;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: .3em;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
#breezewikiHost button:hover {
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
border: 1px solid#3174f1;
|
||||
color: #3174f1;
|
||||
}
|
||||
|
||||
#breezewikiHost label+label {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#breezewikiCustomHost {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#breezewikiCustomHostStatus {
|
||||
display: block;
|
||||
padding-top: .4em;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
/* SETTINGS BUTTON */
|
||||
#openSettingsButton {
|
||||
border: 0;
|
||||
background: #fff;
|
||||
color: #3174f1;
|
||||
border-radius: 5px;
|
||||
padding: .2em .4em;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#openSettingsButton:hover {
|
||||
cursor: pointer;
|
||||
outline: 2px solid#3174f1;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../css/common.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../css/popup.css" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -6,544 +6,8 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="../../images/logo.png" />
|
||||
<title>Indie Wiki Buddy settings</title>
|
||||
<style>
|
||||
/* ELEMENTS */
|
||||
body {
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
background-color: #2b2a33;
|
||||
font-family: Helvetica, Sans-Serif;
|
||||
font-size: .9rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration-style: dotted;
|
||||
text-decoration-thickness: 1px;
|
||||
color: #005799;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #005799;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border: none;
|
||||
color: #005799;
|
||||
background-color: #005799;
|
||||
margin: 1rem 0 .5rem 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.3rem;
|
||||
padding: .5rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2rem;
|
||||
text-align: center;
|
||||
padding: .8rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
background-color: #f5fbff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
padding: 0 12px 12px 0;
|
||||
margin: 0;
|
||||
margin-bottom: .5em;
|
||||
font-size: .9em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
fieldset+fieldset {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
fieldset>div {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
fieldset>span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
fieldset>div+span {
|
||||
margin: .8rem 0 0 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
font-weight: 600;
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
|
||||
input,
|
||||
label,
|
||||
select {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* CONTAINERS AND LAYOUT */
|
||||
.container {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.two-col {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1em;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.two-col>div {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.two-col>div {
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
#header {
|
||||
line-height: 1.5rem;
|
||||
padding: .5rem 1rem;
|
||||
box-sizing: border-box;
|
||||
background-color: #005799;
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#header .settingToggle label {
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
height: fit-content;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
#version {
|
||||
float: right;
|
||||
font-size: 1.2rem;
|
||||
margin: .5rem 0;
|
||||
}
|
||||
|
||||
#links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 1.5em;
|
||||
background-color: #e5f4ff;
|
||||
padding: .5rem 1rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#firstInstallInfo {
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
#content {
|
||||
background-color: #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem .75rem;
|
||||
}
|
||||
|
||||
/* FOOTER */
|
||||
#footer {
|
||||
padding-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
line-height: 1.6rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
padding: 5px 0px;
|
||||
color: #005799;
|
||||
}
|
||||
|
||||
/* NOTIFICATIONS */
|
||||
#notificationBannerContainer {
|
||||
background-color: #f8f3d6;
|
||||
font-size: .9em;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
#notificationBannerContainer span {
|
||||
padding: .5rem 1rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#notificationBannerContainer span[style]~span[style] {
|
||||
border-top: 1px solid #005799;
|
||||
}
|
||||
|
||||
#notificationBannerReviewLinks {
|
||||
display: flex;
|
||||
column-gap: 1em;
|
||||
}
|
||||
|
||||
/* SETTINGS SECTION */
|
||||
.options {
|
||||
box-sizing: border-box;
|
||||
padding-bottom: .5rem;
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.options label {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.radioGroup {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.radioGroup.horizontal {
|
||||
flex-direction: row;
|
||||
line-height: 1.5rem;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
.radioGroup.vertical {
|
||||
flex-direction: column;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
.settingToggle {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.settingToggle img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#searchFilteringSettings>div {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#breeezwikiLearnMore {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#breezewikiHost {
|
||||
display: none;
|
||||
padding: 0 0 0 1rem;
|
||||
}
|
||||
|
||||
#breezewikiHost label {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#breezewikiHost button {
|
||||
background: #3174f1;
|
||||
border: 1px solid #333333;
|
||||
color: #fff;
|
||||
border-radius: 5px;
|
||||
padding: .3em;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
#breezewikiHost button:hover {
|
||||
cursor: pointer;
|
||||
background: #ffffff;
|
||||
border: 1px solid#3174f1;
|
||||
color: #3174f1;
|
||||
}
|
||||
|
||||
#breezewikiHost label+label {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
#breezewikiCustomHost {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#breezewikiCustomHostStatus {
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
#customSearchEnginesContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
#customSearchEnginesList>div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.5em .5em;
|
||||
min-height: 20px;
|
||||
align-items: center;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
#customSearchEnginesList>div:hover {
|
||||
background-color: #e8f0fe;
|
||||
}
|
||||
|
||||
.customSearchEngineHostname {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#customSearchEnginesAdd {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
#customSearchEnginesAdd input {
|
||||
width: 25em;
|
||||
}
|
||||
|
||||
#legend div,
|
||||
#legend span {
|
||||
padding: 0 0 0 8px;
|
||||
}
|
||||
|
||||
#legend div {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
#wikiFiltersContainer {
|
||||
width: fit-content;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#wikiFiltersContainer>div {
|
||||
display: grid;
|
||||
gap: 0.5em;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin: 1em auto;
|
||||
max-width: 30em;
|
||||
}
|
||||
|
||||
#wikiFiltersContainer>div>div {
|
||||
text-align: right;
|
||||
align-self: end;
|
||||
}
|
||||
|
||||
@media (max-width: 35em) {
|
||||
#wikiFiltersContainer>div {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
#wikiFiltersContainer>div>div {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.toggles {
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toggles img {
|
||||
line-height: 1.2rem;
|
||||
}
|
||||
|
||||
.toggles a img {
|
||||
padding-right: .5rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.toggles label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.toggles input {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.toggles>div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 .5rem;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.toggles .inputsContainer {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.togglesHeader {
|
||||
border-bottom: 1px solid #ccc;
|
||||
background-color: #f5fbff;
|
||||
}
|
||||
|
||||
.togglesHeader span {
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
font-style: italic;
|
||||
margin-right: 1em;
|
||||
padding: .75em 0;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.toggles:not(.togglesHeader) span {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: .5em 0;
|
||||
}
|
||||
|
||||
#toggles>div:hover {
|
||||
background-color: #e8f0fe;
|
||||
}
|
||||
|
||||
#togglesKeys button {
|
||||
all: unset;
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button#setAllDisabled {
|
||||
background-image: url('../../images/toggle-disabled.png');
|
||||
}
|
||||
|
||||
button#setAllAlert {
|
||||
background-image: url('../../images/toggle-alert.png');
|
||||
}
|
||||
|
||||
button#setAllRedirect {
|
||||
background-image: url('../../images/toggle-redirect.png');
|
||||
}
|
||||
|
||||
button#setAllSearchEngineDisabled {
|
||||
background-image: url('../../images/toggle-disabled.png');
|
||||
}
|
||||
|
||||
button#setAllSearchEngineReplace {
|
||||
background-image: url('../../images/toggle-replace.png');
|
||||
}
|
||||
|
||||
button#setAllSearchEngineHide {
|
||||
background-image: url('../../images/toggle-hide.png');
|
||||
}
|
||||
|
||||
#togglesKeys button:focus {
|
||||
outline: revert;
|
||||
}
|
||||
|
||||
#togglesDefaults input[type=radio] {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
#togglesDefaults input+label {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('../../images/star-off.png');
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 18px;
|
||||
}
|
||||
|
||||
#togglesDefaults input:checked+label {
|
||||
background-image: url('../../images/star-on.png');
|
||||
}
|
||||
|
||||
#togglesDefaults label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#togglesKeys .inputsContainer button:hover::after,
|
||||
#togglesDefaults .inputsContainer label:hover::after {
|
||||
content: attr(data-title);
|
||||
padding: 5px;
|
||||
width: fit-content;
|
||||
border: 1px solid #000;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
background: #000;
|
||||
z-index: 999999;
|
||||
transform: translateX(calc(-100% - 5px));
|
||||
top: 30px;
|
||||
}
|
||||
|
||||
#togglesColumnLabels {
|
||||
background-color: white;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
#togglesColumnLabels>div>div {
|
||||
display: flex;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#togglesColumnLabels>div>div>div {
|
||||
flex: 1 1 0;
|
||||
font-weight: 600;
|
||||
font-size: .9em;
|
||||
white-space: break-spaces;
|
||||
line-height: initial;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.inputsContainer>label,
|
||||
.inputsContainer>div {
|
||||
width: 20px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.togglesHeader .inputsContainer>div:nth-child(4),
|
||||
.toggles>div>div>label:nth-child(4) {
|
||||
padding-left: 5px;
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.inputsContainer label:nth-child(1) input,
|
||||
.inputsContainer label:nth-child(4) input {
|
||||
accent-color: #3f3f3f;
|
||||
}
|
||||
|
||||
/* CONTROL CLASSES */
|
||||
.visuallyHidden {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: .85em;
|
||||
}
|
||||
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="../../css/common.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../css/settings.css" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -889,4 +353,4 @@
|
|||
<script type="text/javascript" src="../common-page-functions.js"></script>
|
||||
<script type="text/javascript" src="settings.js"></script>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -295,6 +295,7 @@ async function loadOptions(lang, textFilter = '') {
|
|||
wikiInfo.appendChild(wikiLink);
|
||||
wikiInfo.appendChild(document.createTextNode(' (from ' + sites[i].origins_label + ')'));
|
||||
let siteContainer = document.createElement("div");
|
||||
siteContainer.classList.add('site-container')
|
||||
|
||||
// Output inputs container:
|
||||
let inputsContainer = document.createElement('div');
|
||||
|
|
|
|||
Loading…
Reference in New Issue