Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean all superposed white backgrounds #1657

Closed
wants to merge 7 commits into from
Closed
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 2 additions & 7 deletions apps/files/css/files.css
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@
}

#filestable tbody tr {
background-color: #fff;
height: 51px;
}

Expand Down Expand Up @@ -131,7 +130,6 @@

#filestable tbody tr {
transition: background-color 0.3s ease;
background-color: #fff;
height: 40px;
}
#filestable tbody tr:hover,
Expand All @@ -144,7 +142,7 @@
#filestable tbody tr.searchresult,
table tr.mouseOver td {
transition: background-color 0.3s ease;
background-color: #f8f8f8;
background-color: rgba(0, 0, 0, .027);
}
tbody a { color:#000; }

Expand Down Expand Up @@ -215,7 +213,7 @@ table th:focus .sort-indicator.hidden {

table th,
table td {
border-bottom: 1px solid #eee;
border-bottom: 1px solid rgba(0, 0, 0, .066);
text-align: left;
font-weight: normal;
}
Expand Down Expand Up @@ -265,9 +263,6 @@ table.multiselect thead {
left: 250px; /* sidebar */
}

table thead th {
background-color: #fff;
}
table.multiselect thead th {
background-color: rgba(255, 255, 255, 0.95); /* like controls bar */
color: #000;
Expand Down
2 changes: 0 additions & 2 deletions apps/files_trashbin/css/trash.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,6 @@
position: fixed !important;
bottom: 44px;
width: inherit !important;
background-color: #fff;
border-right: 1px solid #eee;
}
/* double padding to account for Deleted files entry, issue with Firefox */
.app-files #app-navigation > ul li:nth-last-child(2) {
Expand Down
20 changes: 5 additions & 15 deletions core/css/apps.css
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,12 @@
height: 100%;
float: left;
box-sizing: border-box;
background-color: #fff;
padding-bottom: 44px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-right: 1px solid #eee;
border-right: 1px solid rgba(0, 0, 0, .066);
}
#app-navigation > ul {
position: relative;
Expand Down Expand Up @@ -439,8 +438,7 @@
width: 27%;
min-width: 300px;
display: block;
background: #fff;
border-left: 1px solid #eee;
border-left: 1px solid rgba(0, 0, 0, .066);
-webkit-transition: margin-right 300ms;
transition: margin-right 300ms;
overflow-x: hidden;
Expand All @@ -461,6 +459,7 @@

/* settings area */
#app-settings {
background-color: #fff; /* required */
position: fixed;
width: 250px; /* change to 100% when layout positions are absolute */
bottom: 0;
Expand All @@ -472,18 +471,13 @@
#app-settings-content {
display: none;
padding: 10px;
background-color: #fff;
}
#app-settings.open #app-settings-content {
display: block;
/* restrict height of settings and make scrollable */
max-height: 300px;
overflow-y: auto;
}
#app-settings-content,
#app-settings-header {
border-right: 1px solid #eee;
}

/* display input fields at full width */
#app-settings-content input[type='text'] {
Expand All @@ -496,7 +490,7 @@
width: 100%;
padding: 0;
margin: 0;
background-color: #fff;
background-color: transparent; /* override inputs.css button */
background-image: url('../img/actions/settings.svg?v=1');
background-position: 14px center;
background-repeat: no-repeat;
Expand All @@ -509,11 +503,7 @@
}
.settings-button:hover,
.settings-button:focus {
background-color: #fff;
}
.settings-button.opened:hover,
.settings-button.opened:focus {
background-color: #fff;
background-color: inherit;
}

/* buttons */
Expand Down
36 changes: 18 additions & 18 deletions core/css/inputs.css
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ input[type="button"],
margin: 3px 3px 3px 0;
padding: 7px 6px 5px;
font-size: 13px;
background-color: #fff;
color: #333;
border: 1px solid #ddd;
background: transparent;
color: rgba(0, 0, 0, .8);
border: 1px solid rgba(0, 0, 0, .133);
outline: none;
border-radius: 3px;
}
Expand All @@ -48,8 +48,8 @@ input[type="tel"],
input[type="url"],
input[type="time"],
textarea {
background: #fff;
color: #555;
background: transparent;
color: rgba(0, 0, 0, .666);
cursor: text;
font-family: inherit; /* use default ownCloud font instead of default textarea monospace */
}
Expand All @@ -74,7 +74,7 @@ input[type="tel"]:hover, input[type="tel"]:focus, input[type="tel"]:active,
input[type="url"]:hover, input[type="url"]:focus, input[type="url"]:active,
input[type="time"]:hover, input[type="time"]:focus, input[type="time"]:active,
textarea:hover, textarea:focus, textarea:active {
color: #333;
color: rgba(0, 0, 0, .8);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
}
Expand Down Expand Up @@ -149,7 +149,7 @@ input[type="checkbox"].checkbox--white:indeterminate:disabled + label:before {
}

input[type="checkbox"].checkbox:hover+label:before, input[type="checkbox"]:focus+label:before {
color:#111 !important;
color:rgba(0, 0, 0, .933) !important;
}

input[type="radio"].radio {
Expand Down Expand Up @@ -210,19 +210,19 @@ select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url('../../core/img/actions/triangle-s.svg') no-repeat right 8px center rgba(240, 240, 240, 0.90);
background: url('../../core/img/actions/triangle-s.svg') no-repeat right 8px center rgba(0, 0, 0, .054);
outline: 0;
padding-right: 24px !important;
}

select:hover {
background-color: #fefefe;
background-color: rgba(0, 0, 0, .003);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jancborchardt I'm not really sure this is humanly visible 😆

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably not really. Do you want to adjust this to the equivalent of #fff instead? Or rather it really needs to be solid #fff because by default the select is grey and it could be on top of dark background.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't think of dark backgrounds superposition. Because the rgba I'm changing are planned on a #fff bg. If we want a dark background with the same contrast, we should reverse the values. :)

For this line, I think we could just remove it. Or choose a completely different value to set for all inputs:hover.

}

.select2-choices {
border: 1px solid #ddd;
border-radius: 3px;
color: #333;
color: rgba(0, 0, 0, .8);
background-image: none;
}
.select2-dropdown-open .select2-choices {
Expand All @@ -237,7 +237,7 @@ input img, button img, .button img {
}

input[type="submit"].enabled {
background-color: #66f866;
background-color: rgba(0,243,0,0.6);
border: 1px solid #5e5;
}

Expand All @@ -257,10 +257,10 @@ button, .button,
width: auto;
min-width: 25px;
padding: 5px;
background-color: rgba(240,240,240,.9);
background-color: rgba(0, 0, 0, .054);
font-weight: 600;
color: #555;
border: 1px solid rgba(240,240,240,.9);
color: rgba(0, 0, 0, .666);
border: 1px solid rgba(0, 0, 0, .054);
cursor: pointer;
}
select, .button.multiselect {
Expand All @@ -272,8 +272,8 @@ button:hover, button:focus,
.button:hover, .button:focus,
.button a:focus,
select:hover, select:focus, select:active {
background-color: rgba(255, 255, 255, .95);
color: #111;
background-color: rgba(0, 0, 0, .1);
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jancborchardt same here. This is not visible to the eye. I changed to something more visible. What do you think?

Copy link
Member

@jancborchardt jancborchardt Oct 8, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The point about this was that the background color shines a bit through. For example when we have it in the header of the link share page there are buttons on the top right.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, makes sense! :)

color: rgba(0, 0, 0, .933);
}
input[type="submit"] img, input[type="button"] img, button img, .button img { cursor:pointer; }
#header .button {
Expand All @@ -288,11 +288,11 @@ button:disabled, button:disabled:hover, button:disabled:focus,
a.disabled, a.disabled:hover, a.disabled:focus,
textarea:disabled {
background-color: rgba(230,230,230,.9);
color: #999;
color: rgba(0, 0, 0, .4);
cursor: default;
}
input:disabled+label, input:disabled:hover+label, input:disabled:focus+label {
color: #999 !important;
color: rgba(0, 0, 0, .4) !important;
cursor: default;
}

Expand Down
5 changes: 2 additions & 3 deletions core/css/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ body {
width: 100%;
z-index: 9000;
text-align: center;
background-color: rgba(0,0,0,0.5);
background-color: rgba(0, 0, 0, .5);
color: #fff;
line-height: 125%;
font-size: 24px;
Expand Down Expand Up @@ -142,7 +142,6 @@ body {
width: 100%;
padding: 0;
margin: 0;
background-color: rgba(255, 255, 255, .95);
z-index: 50;
-webkit-user-select: none;
-moz-user-select: none;
Expand Down Expand Up @@ -743,7 +742,7 @@ code { font-family:"Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono
}
#quota div {
padding: 0;
background-color: rgb(220,220,220);
background-color: rgba(0, 0, 0, .137);
font-weight: normal;
white-space: nowrap;
border-bottom-left-radius: 3px;
Expand Down